Add stacking switcher in area charts (#1818)

datalens-tech · Nov 20, 2024 · f905e4d · f905e4d
1 parent 8cb13ba
commit f905e4d
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 12 deletions.
diff --git a/src/i18n-keysets/sql/en.json b/src/i18n-keysets/sql/en.json
@@ -40,7 +40,7 @@
   "label_run": "Run",
   "label_select-connection": "Select",
   "label_select-visualization": "Select visualization",
-  "label_visualization-area": "Stacked area chart",
+  "label_visualization-area": "Area chart",
   "label_visualization-area-100p": "Normalized stacked area chart\n",
   "label_visualization-bar": "Bar chart",
   "label_visualization-bar-100p": "Normalized bar chart",

diff --git a/src/i18n-keysets/sql/ru.json b/src/i18n-keysets/sql/ru.json
@@ -40,7 +40,7 @@
   "label_run": "Запустить",
   "label_select-connection": "Выбрать",
   "label_select-visualization": "Выбрать визуализацию",
-  "label_visualization-area": "Накопительная диаграмма с областями",
+  "label_visualization-area": "Диаграмма с областями",
   "label_visualization-area-100p": "Нормированная диаграмма с областями",
   "label_visualization-bar": "Линейчатая диаграмма",
   "label_visualization-bar-100p": "Нормированная линейчатая диаграмма",

diff --git a/src/i18n-keysets/wizard/en.json b/src/i18n-keysets/wizard/en.json
@@ -260,6 +260,7 @@
   "label_should-be-less-than-right": "This value should be less than max",
   "label_show": "Show",
   "label_sort-overflow": "The maximum number of sorts is set",
+  "label_stacking": "Stacking",
   "label_string": "String",
   "label_sub-totals-switcher": "Sub-totals",
   "label_sum": "Sum",
@@ -285,7 +286,7 @@
   "label_violet": "Violet (shades)",
   "label_violet-blue-green": "Violet-Blue-Green",
   "label_violet-orange": "Lilac-Red",
-  "label_visualization-area": "Stacked area chart",
+  "label_visualization-area": "Area chart",
   "label_visualization-area-100p": "Normalized stacked area chart\n",
   "label_visualization-bar": "Bar chart",
   "label_visualization-bar-100p": "Normalized bar chart",

diff --git a/src/i18n-keysets/wizard/ru.json b/src/i18n-keysets/wizard/ru.json
@@ -260,6 +260,7 @@
   "label_should-be-less-than-right": "Значение должно быть меньше максимального",
   "label_show": "Показать",
   "label_sort-overflow": "Установлено максимально доступное количество сортировок",
+  "label_stacking": "Накопление",
   "label_string": "Строка",
   "label_sub-totals-switcher": "Подытоги",
   "label_sum": "Сумма",
@@ -285,7 +286,7 @@
   "label_violet": "Фиолетовый (оттенки)",
   "label_violet-blue-green": "Фиолетовый-Синий-Салатовый",
   "label_violet-orange": "Сиреневый-Красный",
-  "label_visualization-area": "Накопительная диаграмма с областями",
+  "label_visualization-area": "Диаграмма с областями",
   "label_visualization-area-100p": "Нормированная диаграмма с областями",
   "label_visualization-bar": "Линейчатая диаграмма",
   "label_visualization-bar-100p": "Нормированная линейчатая диаграмма",

diff --git a/src/server/modes/charts/plugins/datalens/highcharts/highcharts.ts b/src/server/modes/charts/plugins/datalens/highcharts/highcharts.ts
@@ -111,6 +111,12 @@ export const buildHighchartsConfigPrivate = (args: {
         });
     });
 
+    if (shared.visualization.id === 'area') {
+        plotOptions.area = {
+            stacking: shared.extraSettings?.stacking !== 'off' ? 'normal' : undefined,
+        };
+    }
+
     if (shared.visualization.id === 'scatter') {
         plotOptions.series = {turboThreshold: 100000};
         plotOptions.scatter = {
@@ -365,12 +371,6 @@ const extendPlotOptions = ({visualizationId, plotOptions}: ExtendPlotOptionsPayl
             plotOptions.bar.stacking = 'percent';
             break;
 
-        case 'area':
-            plotOptions.area = {
-                stacking: 'normal',
-            };
-            break;
-
         case 'area100p':
             plotOptions.area = {
                 stacking: 'percent',

diff --git a/src/server/modes/charts/plugins/ql/yagr.ts b/src/server/modes/charts/plugins/ql/yagr.ts
@@ -8,12 +8,14 @@ import {mapQlConfigToLatestVersion} from '../../../../../shared/modules/config/q
 const applyPlaceholderSettingsToYAxis = ({
     visualization,
     placeholderIndex,
+    shared,
 }: {
     visualization: ServerVisualization;
     placeholderIndex: number;
+    shared: QlConfig;
 }) => {
     const stacking =
-        visualization.id === 'area' ||
+        (visualization.id === 'area' && shared.extraSettings?.stacking !== 'off') ||
         visualization.id === 'area100p' ||
         visualization.id === 'column' ||
         visualization.id === 'column100p';
@@ -63,10 +65,15 @@ export default ({shared, ChartEditor}: {shared: QlConfig; ChartEditor: IChartEdi
 
     const visualization = config.visualization as ServerVisualization;
 
-    const {scale: yScale} = applyPlaceholderSettingsToYAxis({visualization, placeholderIndex: 1});
+    const {scale: yScale} = applyPlaceholderSettingsToYAxis({
+        visualization,
+        placeholderIndex: 1,
+        shared,
+    });
     const {scale: yRightScale} = applyPlaceholderSettingsToYAxis({
         visualization,
         placeholderIndex: 2,
+        shared,
     });
 
     const isLegendEnabled = Boolean(

diff --git a/src/shared/types/config/wizard/v11.ts b/src/shared/types/config/wizard/v11.ts
@@ -64,6 +64,7 @@ export interface V11CommonSharedExtraSettings {
     totals?: 'on' | 'off';
     pivotFallback?: 'on' | 'off';
     pivotInlineSort?: 'on' | 'off';
+    stacking?: 'on' | 'off';
     overlap?: 'on' | 'off';
     feed?: string;
     navigatorSettings?: V11NavigatorSettings;

diff --git a/src/shared/types/wizard/index.ts b/src/shared/types/wizard/index.ts
@@ -119,6 +119,7 @@ export interface CommonSharedExtraSettings {
     labelsPosition?: LabelsPositions;
     qlAutoExecuteChart?: 'on' | 'off';
     pinnedColumns?: number;
+    stacking?: 'on' | 'off';
     size?: WidgetSizeType;
 }
 

diff --git a/src/ui/constants/visualizations/index.ts b/src/ui/constants/visualizations/index.ts
@@ -170,6 +170,10 @@ export const CHART_SETTINGS = {
         ON: 'on',
         OFF: 'off',
     },
+    STACKING: {
+        ON: 'on',
+        OFF: 'off',
+    },
 };
 
 export const VISUALIZATION_IDS = {

diff --git a/src/ui/units/wizard/components/Dialogs/Settings/Settings.tsx b/src/ui/units/wizard/components/Dialogs/Settings/Settings.tsx
@@ -77,6 +77,7 @@ const BASE_SETTINGS_KEYS: SettingsKeys[] = [
     'navigatorSettings',
     'pivotInlineSort',
     'size',
+    'stacking',
 ];
 
 const QL_SETTINGS_KEYS: SettingsKeys[] = [...BASE_SETTINGS_KEYS, 'qlAutoExecuteChart'];
@@ -184,6 +185,7 @@ interface State {
     qlAutoExecuteChart?: string;
     isPivotTable: boolean;
     pivotInlineSort: string;
+    stacking: string;
     size?: WidgetSizeType;
 }
 
@@ -232,6 +234,7 @@ class DialogSettings extends React.PureComponent<InnerProps, State> {
             pivotFallback = 'off',
             qlAutoExecuteChart,
             pivotInlineSort = CHART_SETTINGS.PIVOT_INLINE_SORT.ON,
+            stacking = CHART_SETTINGS.STACKING.ON,
             tooltip,
             size,
         } = extraSettings;
@@ -292,6 +295,7 @@ class DialogSettings extends React.PureComponent<InnerProps, State> {
                 ? CHART_SETTINGS.D3_FALLBACK.OFF
                 : CHART_SETTINGS.D3_FALLBACK.ON,
             tooltip,
+            stacking,
             size,
         };
     }
@@ -516,6 +520,12 @@ class DialogSettings extends React.PureComponent<InnerProps, State> {
         });
     };
 
+    handleStackingUpdate = (value: string) => {
+        this.setState({
+            stacking: value,
+        });
+    };
+
     getXPlaceholderItemDataType() {
         const {visualization} = this.props;
         const placeholders = visualization.placeholders || [];
@@ -965,6 +975,26 @@ class DialogSettings extends React.PureComponent<InnerProps, State> {
         );
     }
 
+    renderStackingSwitch() {
+        const {visualization} = this.props;
+
+        if (visualization.id !== VISUALIZATION_IDS.AREA) {
+            return null;
+        }
+
+        const {stacking} = this.state;
+
+        return (
+            <SettingSwitcher
+                currentValue={stacking}
+                checkedValue={CHART_SETTINGS.STACKING.ON}
+                uncheckedValue={CHART_SETTINGS.STACKING.OFF}
+                onChange={this.handleStackingUpdate}
+                title={i18n('wizard', 'label_stacking')}
+            />
+        );
+    }
+
     renderModalBody() {
         const {navigatorSettings} = this.state;
         const {isPreviewLoading} = this.props;
@@ -992,6 +1022,7 @@ class DialogSettings extends React.PureComponent<InnerProps, State> {
                 {this.renderD3Switch()}
                 {this.renderQlAutoExecutionChart()}
                 {this.renderInlineSortSwitch()}
+                {this.renderStackingSwitch()}
             </div>
         );
     }