From 23585612e633284bed4bbea22c2be1948877dbb6 Mon Sep 17 00:00:00 2001 From: Irina Kuzmina Date: Thu, 27 Nov 2025 14:00:04 +0300 Subject: [PATCH 1/3] Fix split config in bar-x and area series --- .../datalens/gravity-charts/utils/index.ts | 66 +++++++++++-------- .../plugins/datalens/preparers/area/index.ts | 37 ++++++++++- .../preparers/bar-x/gravity-charts.ts | 12 ++-- .../datalens/preparers/line/gravity-charts.ts | 22 +++++-- 4 files changed, 98 insertions(+), 39 deletions(-) diff --git a/src/server/modes/charts/plugins/datalens/gravity-charts/utils/index.ts b/src/server/modes/charts/plugins/datalens/gravity-charts/utils/index.ts index 4c4bcee12a..6ecac98dc2 100644 --- a/src/server/modes/charts/plugins/datalens/gravity-charts/utils/index.ts +++ b/src/server/modes/charts/plugins/datalens/gravity-charts/utils/index.ts @@ -1,4 +1,4 @@ -import type {ChartData, ChartTitle} from '@gravity-ui/chartkit/gravity-charts'; +import type {ChartData, ChartTitle, ChartYAxis} from '@gravity-ui/chartkit/gravity-charts'; import {PlaceholderId, WizardVisualizationId, isDateField} from '../../../../../../../shared'; import type { @@ -50,6 +50,41 @@ function getAxisMinMax( return [Number.isNaN(min) ? undefined : min, Number.isNaN(max) ? undefined : max]; } +export function getYAxisBaseConfig({ + visualization, +}: { + visualization: {id: string; placeholders: ServerPlaceholder[]}; +}) { + const yPlaceholder = visualization.placeholders.find((p) => p.id === PlaceholderId.Y); + const yPlaceholderSettings = yPlaceholder?.settings || {}; + const yItem = yPlaceholder?.items[0]; + const [yMin, yMax] = getAxisMinMax(yPlaceholderSettings); + + const yAxisConfig: ChartYAxis = { + // todo: the axis type should depend on the type of field + type: isDateField(yItem) ? 'datetime' : 'linear', + visible: yPlaceholderSettings?.axisVisibility !== 'hide', + labels: { + enabled: Boolean(yItem) && yPlaceholder?.settings?.hideLabels !== 'yes', + rotation: getAxisLabelsRotationAngle(yPlaceholder?.settings), + }, + title: { + text: getAxisTitle(yPlaceholderSettings, yItem) || undefined, + }, + grid: { + enabled: Boolean(yItem) && isGridEnabled(yPlaceholderSettings), + }, + ticks: { + pixelInterval: getTickPixelInterval(yPlaceholderSettings) || 72, + }, + lineColor: 'var(--g-color-line-generic)', + min: yMin, + max: yMax, + }; + + return yAxisConfig; +} + export function getBaseChartConfig(args: { extraSettings?: ServerCommonSharedExtraSettings; visualization: {id: string; placeholders: ServerPlaceholder[]}; @@ -61,10 +96,6 @@ export function getBaseChartConfig(args: { const xItem = xPlaceholder?.items[0]; const xPlaceholderSettings = xPlaceholder?.settings || {}; - const yPlaceholder = visualization.placeholders.find((p) => p.id === PlaceholderId.Y); - const yPlaceholderSettings = yPlaceholder?.settings || {}; - const yItem = yPlaceholder?.items[0]; - let chartWidgetData: Partial = { title: getChartTitle(extraSettings), tooltip: { @@ -128,7 +159,6 @@ export function getBaseChartConfig(args: { if (!visualizationWithoutAxis.includes(visualizationId)) { const [xMin, xMax] = getAxisMinMax(xPlaceholderSettings); - const [yMin, yMax] = getAxisMinMax(yPlaceholderSettings); chartWidgetData = { ...chartWidgetData, xAxis: { @@ -150,29 +180,7 @@ export function getBaseChartConfig(args: { min: xMin, max: xMax, }, - yAxis: [ - { - // todo: the axis type should depend on the type of field - type: isDateField(yItem) ? 'datetime' : 'linear', - visible: yPlaceholderSettings?.axisVisibility !== 'hide', - labels: { - enabled: Boolean(yItem) && yPlaceholder?.settings?.hideLabels !== 'yes', - rotation: getAxisLabelsRotationAngle(yPlaceholder?.settings), - }, - title: { - text: getAxisTitle(yPlaceholderSettings, yItem) || undefined, - }, - grid: { - enabled: Boolean(yItem) && isGridEnabled(yPlaceholderSettings), - }, - ticks: { - pixelInterval: getTickPixelInterval(yPlaceholderSettings) || 72, - }, - lineColor: 'var(--g-color-line-generic)', - min: yMin, - max: yMax, - }, - ], + yAxis: [getYAxisBaseConfig({visualization})], }; if (visualizationWithYMainAxis.includes(visualizationId)) { diff --git a/src/server/modes/charts/plugins/datalens/preparers/area/index.ts b/src/server/modes/charts/plugins/datalens/preparers/area/index.ts index c1e5146785..ba1526ae35 100644 --- a/src/server/modes/charts/plugins/datalens/preparers/area/index.ts +++ b/src/server/modes/charts/plugins/datalens/preparers/area/index.ts @@ -5,6 +5,7 @@ import type { ChartSeries, } from '@gravity-ui/chartkit/gravity-charts'; import merge from 'lodash/merge'; +import sortBy from 'lodash/sortBy'; import type { SeriesExportSettings, @@ -23,12 +24,13 @@ import { isMarkupField, isNumberField, } from '../../../../../../../shared'; -import {getBaseChartConfig} from '../../gravity-charts/utils'; +import {getBaseChartConfig, getYAxisBaseConfig} from '../../gravity-charts/utils'; import {getFormattedLabel} from '../../gravity-charts/utils/dataLabels'; import {getFieldFormatOptions} from '../../gravity-charts/utils/format'; import {getConfigWithActualFieldTypes} from '../../utils/config-helpers'; import {getExportColumnSettings} from '../../utils/export-helpers'; -import {getAxisType} from '../helpers/axis'; +import {getAxisFormatting, getAxisType} from '../helpers/axis'; +import {getSegmentMap} from '../helpers/segments'; import {prepareLineData} from '../line/prepare-line-data'; import type {PrepareFunctionArgs} from '../types'; @@ -78,6 +80,10 @@ export function prepareGravityChartArea(args: PrepareFunctionArgs) { }; } + const segmentsMap = getSegmentMap(args); + const segments = sortBy(Object.values(segmentsMap), (s) => s.index); + const isSplitEnabled = new Set(segments.map((d) => d.index)).size > 1; + const preparedData = prepareLineData(args); const xCategories = preparedData.categories; @@ -168,12 +174,39 @@ export function prepareGravityChartArea(args: PrepareFunctionArgs) { } } + const axisLabelNumberFormat = yPlaceholder + ? getAxisFormatting({ + placeholder: yPlaceholder, + visualizationId, + }) + : undefined; + const config: ChartData = { series: { data: seriesData as ChartSeries[], }, xAxis, + yAxis: segments.map((d) => { + const baseConfig = getYAxisBaseConfig({ + visualization: {placeholders, id: visualizationId}, + }); + return merge(baseConfig, { + lineColor: 'transparent', + labels: { + numberFormat: axisLabelNumberFormat ?? undefined, + }, + plotIndex: d.index, + title: isSplitEnabled ? {text: d.title} : undefined, + }); + }), legend, + split: { + enable: isSplitEnabled, + gap: '40px', + plots: segments.map(() => { + return {}; + }), + }, }; if (yFields[0]) { diff --git a/src/server/modes/charts/plugins/datalens/preparers/bar-x/gravity-charts.ts b/src/server/modes/charts/plugins/datalens/preparers/bar-x/gravity-charts.ts index bcad9de357..107434a423 100644 --- a/src/server/modes/charts/plugins/datalens/preparers/bar-x/gravity-charts.ts +++ b/src/server/modes/charts/plugins/datalens/preparers/bar-x/gravity-charts.ts @@ -22,7 +22,7 @@ import { isNumberField, } from '../../../../../../../shared'; import type {WrappedHTML} from '../../../../../../../shared/types/charts'; -import {getBaseChartConfig} from '../../gravity-charts/utils'; +import {getBaseChartConfig, getYAxisBaseConfig} from '../../gravity-charts/utils'; import {getFormattedLabel} from '../../gravity-charts/utils/dataLabels'; import {getFieldFormatOptions} from '../../gravity-charts/utils/format'; import {getConfigWithActualFieldTypes} from '../../utils/config-helpers'; @@ -232,14 +232,18 @@ export function prepareGravityChartBarX(args: PrepareFunctionArgs) { legend, xAxis, yAxis: segments.map((d) => { - return { + const baseConfig = getYAxisBaseConfig({ + visualization: {placeholders, id: visualizationId}, + }); + + return merge(baseConfig, { + lineColor: 'transparent', labels: { numberFormat: axisLabelNumberFormat ?? undefined, }, plotIndex: d.index, - position: d.isOpposite ? 'right' : 'left', title: isSplitEnabled ? {text: d.title} : undefined, - }; + }); }), split: { enable: isSplitEnabled, diff --git a/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts b/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts index 2ec717e93f..0abc486a07 100644 --- a/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts +++ b/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts @@ -23,12 +23,12 @@ import { isMarkupField, isNumberField, } from '../../../../../../../shared'; -import {getBaseChartConfig} from '../../gravity-charts/utils'; +import {getBaseChartConfig, getYAxisBaseConfig} from '../../gravity-charts/utils'; import {getFormattedLabel} from '../../gravity-charts/utils/dataLabels'; import {getFieldFormatOptions} from '../../gravity-charts/utils/format'; import {getConfigWithActualFieldTypes} from '../../utils/config-helpers'; import {getExportColumnSettings} from '../../utils/export-helpers'; -import {getAxisType} from '../helpers/axis'; +import {getAxisFormatting, getAxisType} from '../helpers/axis'; import {getSegmentMap} from '../helpers/segments'; import type {PrepareFunctionArgs} from '../types'; @@ -186,17 +186,31 @@ export function prepareGravityChartLine(args: PrepareFunctionArgs) { const segments = sortBy(Object.values(segmentsMap), (s) => s.index); const isSplitEnabled = new Set(segments.map((d) => d.index)).size > 1; + const axisLabelNumberFormat = yPlaceholder + ? getAxisFormatting({ + placeholder: yPlaceholder, + visualizationId, + }) + : undefined; + const config: ChartData = { series: { data: seriesData as ChartSeries[], }, xAxis, yAxis: segments.map((d) => { - return { + const baseConfig = getYAxisBaseConfig({ + visualization: {placeholders, id: visualizationId}, + }); + return merge(baseConfig, { + lineColor: 'transparent', + labels: { + numberFormat: axisLabelNumberFormat ?? undefined, + }, title: isSplitEnabled ? {text: d.title} : undefined, plotIndex: d.index, position: d.isOpposite ? 'right' : 'left', - }; + }); }), split: { enable: isSplitEnabled, From 7439d15068e30973b54e2452fa2ab0036d4d262b Mon Sep 17 00:00:00 2001 From: "Irina V. Kuzmina" Date: Thu, 27 Nov 2025 22:43:25 +0300 Subject: [PATCH 2/3] Up chartkit 7.24.0 > 7.24.2 --- package-lock.json | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 35c10643a3..ebfba264f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@diplodoc/transform": "^4.60.2", "@gravity-ui/app-layout": "^2.1.0", "@gravity-ui/browserslist-config": "^4.3.0", - "@gravity-ui/chartkit": "^7.24.0", + "@gravity-ui/chartkit": "^7.24.2", "@gravity-ui/dashkit": "^9.2.0", "@gravity-ui/date-utils": "^2.5.6", "@gravity-ui/expresskit": "^2.4.0", @@ -5117,13 +5117,13 @@ "integrity": "sha512-GhZemc/gPq/Kf4OYyXZpeZLgL69pI8oidWhdOKUHOWSYQyKviDDZDxrMzjZzvCWOxrpQVFtmqiCBMW8nqJivEQ==" }, "node_modules/@gravity-ui/chartkit": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-7.24.0.tgz", - "integrity": "sha512-ZvxM5XXI77n415y8GHCzwVM96mUMlgslv/zHcaOYqFjyftwAcaGNFmzzJD6Q/8J/DhAxSD20GApJJCMbPgwKkw==", + "version": "7.24.2", + "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-7.24.2.tgz", + "integrity": "sha512-P65fjNqbxPjAWcoOVDvk2FBldQMJx9jxO1289Y+rjaWmKkfHf3zKRAqoSBEl8SNDJeVMzVGWM/KLwvXVktY6NQ==", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", - "@gravity-ui/charts": "^1.24.0", + "@gravity-ui/charts": "^1.24.2", "@gravity-ui/date-utils": "^2.1.0", "@gravity-ui/i18n": "^1.0.0", "@gravity-ui/yagr": "^4.8.5", @@ -5137,9 +5137,9 @@ } }, "node_modules/@gravity-ui/charts": { - "version": "1.24.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/charts/-/charts-1.24.0.tgz", - "integrity": "sha512-vHvfDqkbbkWDUIe88KsMPI1W4SoE4DRLvG01HyiVDj84Fbd8J0pW6dFgGkdXdG2OhpnkEYUijCRlToLic9P5Mg==", + "version": "1.24.2", + "resolved": "https://registry.npmjs.org/@gravity-ui/charts/-/charts-1.24.2.tgz", + "integrity": "sha512-U6tGNoSeRi0IaboxVgt13GgEuY1Jp4hL3SYejcJyoEUXv5V/eUzO7n+J6r4JRmfSCovs2BV8UpCSZDdqyZ3IxA==", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index 0ab4ee47e9..144ad4c2cd 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "@diplodoc/transform": "^4.60.2", "@gravity-ui/app-layout": "^2.1.0", "@gravity-ui/browserslist-config": "^4.3.0", - "@gravity-ui/chartkit": "^7.24.0", + "@gravity-ui/chartkit": "^7.24.2", "@gravity-ui/dashkit": "^9.2.0", "@gravity-ui/date-utils": "^2.5.6", "@gravity-ui/expresskit": "^2.4.0", From f66e2add86fd97a544f3c68406778905e44a2689 Mon Sep 17 00:00:00 2001 From: "Irina V. Kuzmina" Date: Mon, 8 Dec 2025 15:48:03 +0300 Subject: [PATCH 3/3] fix lint --- .../charts/plugins/datalens/preparers/line/gravity-charts.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts b/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts index 3e8542c6b4..c5a8daf765 100644 --- a/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts +++ b/src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts @@ -206,8 +206,8 @@ export function prepareGravityChartLine(args: PrepareFunctionArgs) { return merge(axisBaseConfig, { labels: { numberFormat: axisLabelNumberFormat ?? undefined, - }, - lineColor: 'transparent', + }, + lineColor: 'transparent', title: isSplitEnabled ? {text: d.title} : undefined, plotIndex: d.index, position: d.isOpposite ? 'right' : 'left',