Add support chart-chart filtering in wizard (#170)

* Add support chart-chart filtering in wizard * fix point selection * prepare actionParams data for scatter and pie visualizations * add custom data for treemap visualization * fix mock for unit tests * fix treemap * code review fix(1) * move some parameters from a point to a series * remove unused flag * code review fix(2) * code review fix(3) * code review fix(3.1)
datalens-tech · Nov 13, 2023 · edef136 · edef136
1 parent 97c6d5d
commit edef136
Show file tree

Hide file tree

Showing 31 changed files with 739 additions and 301 deletions.
diff --git a/src/server/components/features/features-list/WizardChartChartFilteringAvailable.ts b/src/server/components/features/features-list/WizardChartChartFilteringAvailable.ts
@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.WizardChartChartFilteringAvailable,
+    state: {
+        development: false,
+        production: false,
+    },
+});
diff --git a/src/server/modes/charts/plugins/control/url/distincts/build-distincts-body.ts b/src/server/modes/charts/plugins/control/url/distincts/build-distincts-body.ts
@@ -152,15 +152,15 @@ export const getDistinctsRequestBody = ({
             );
             operation = valuesWithOperations.find((item) => item && item.operation)?.operation;
 
-            if (values.length === 1 && values[0].startsWith('__relative')) {
+            if (values.length === 1 && String(values[0]).startsWith('__relative')) {
                 const resolvedRelative = resolveRelativeDate(values[0]);
 
                 if (resolvedRelative) {
                     values[0] = resolvedRelative;
                 }
             }
 
-            if (values.length === 1 && values[0].startsWith('__interval')) {
+            if (values.length === 1 && String(values[0]).startsWith('__interval')) {
                 const resolvedInterval = ChartEditor.resolveInterval(values[0]);
 
                 if (resolvedInterval) {

diff --git a/src/server/modes/charts/plugins/datalens/config.ts b/src/server/modes/charts/plugins/datalens/config.ts
@@ -3,12 +3,15 @@ import type {HighchartsWidgetData} from '@gravity-ui/chartkit/highcharts';
 import {
     ChartkitHandlers,
     DEFAULT_CHART_LINES_LIMIT,
+    DashWidgetConfig,
     Feature,
     GraphTooltipLine,
+    GraphWidgetEventScope,
     PlaceholderId,
     ServerChartsConfig,
     ServerCommonSharedExtraSettings,
     StringParams,
+    WidgetEvent,
     WizardVisualizationId,
     getIsNavigatorEnabled,
     isEnabledServerFeature,
@@ -61,6 +64,9 @@ type GraphConfig = BaseConfig &
         navigatorSettings?: ServerCommonSharedExtraSettings['navigatorSettings'];
         calcClosestPointManually?: boolean;
         enableGPTInsights?: ServerCommonSharedExtraSettings['enableGPTInsights'];
+        events?: {
+            click?: WidgetEvent<GraphWidgetEventScope> | WidgetEvent<GraphWidgetEventScope>[];
+        };
     };
 
 type TableConfig = BaseConfig & {
@@ -83,16 +89,25 @@ export type Config = GraphConfig | TableConfig | MetricConfig;
 // eslint-disable-next-line complexity
 export default (
     ...options: [
-        {shared: ServerChartsConfig; params: StringParams} | ServerChartsConfig,
+        (
+            | {
+                  shared: ServerChartsConfig;
+                  params: StringParams;
+                  widgetConfig?: DashWidgetConfig['widgetConfig'];
+              }
+            | ServerChartsConfig
+        ),
         StringParams,
     ]
 ) => {
     let shared;
     let params: StringParams;
+    let widgetConfig: DashWidgetConfig['widgetConfig'];
 
     if ('shared' in options[0]) {
         shared = options[0].shared;
         params = options[0].params as StringParams;
+        widgetConfig = options[0].widgetConfig;
     } else {
         shared = options[0];
         params = options[1];
@@ -217,6 +232,12 @@ export default (
         config.calcClosestPointManually = true;
     }
 
+    if (widgetConfig?.actionParams?.enable) {
+        config.events = {
+            click: [{handler: {type: 'setActionParams'}, scope: 'point'}],
+        };
+    }
+
     log('CONFIG:');
     log(config);
 

diff --git a/src/server/modes/charts/plugins/datalens/preparers/bar-x/highcharts.ts b/src/server/modes/charts/plugins/datalens/preparers/bar-x/highcharts.ts
@@ -49,7 +49,6 @@ export function prepareHighchartsBarX(args: PrepareFunctionArgs) {
         segments,
     } = args;
     const {data, order} = resultData;
-
     const preparedData = prepareBarX(args);
     const {graphs} = preparedData;
 

diff --git a/src/server/modes/charts/plugins/datalens/preparers/bar-x/prepareBarX.ts b/src/server/modes/charts/plugins/datalens/preparers/bar-x/prepareBarX.ts
@@ -9,6 +9,7 @@ import {
     getAxisMode,
     getFakeTitleOrTitle,
     isDateField,
+    isDimensionField,
     isMeasureField,
     isMeasureValue,
     isPercentVisualization,
@@ -54,9 +55,11 @@ export function prepareBarX(args: PrepareFunctionArgs) {
         segments,
         layerChartMeta,
         usedColors,
+        ChartEditor,
     } = args;
     const {data, order} = resultData;
-
+    const widgetConfig = ChartEditor.getWidgetConfig();
+    const isActionParamsEnable = widgetConfig?.actionParams?.enable;
     const xPlaceholder = placeholders.find((p) => p.id === PlaceholderId.X);
     const xPlaceholderSettings = xPlaceholder?.settings;
     const x: ServerField | undefined = xPlaceholder?.items[0];
@@ -370,6 +373,19 @@ export function prepareBarX(args: PrepareFunctionArgs) {
                                 point.label = pointLabel;
                             }
 
+                            if (isActionParamsEnable) {
+                                const actionParams: Record<string, any> = {};
+
+                                if (x && isDimensionField(x)) {
+                                    actionParams[x.guid] = category;
+                                }
+
+                                point.custom = {
+                                    ...point.custom,
+                                    actionParams,
+                                };
+                            }
+
                             return point;
                         })
                         .filter((point) => point !== null),
@@ -409,6 +425,23 @@ export function prepareBarX(args: PrepareFunctionArgs) {
 
                 graph.custom = customSeriesData;
 
+                if (isActionParamsEnable) {
+                    const actionParams: Record<string, any> = {};
+
+                    if (x2) {
+                        actionParams[x2.guid] = line.stack;
+                    }
+
+                    if (isDimensionField(colorItem)) {
+                        actionParams[colorItem.guid] = line.colorValue;
+                    }
+
+                    graph.custom = {
+                        ...graph.custom,
+                        actionParams,
+                    };
+                }
+
                 graphs.push(graph);
             });
         });

diff --git a/src/server/modes/charts/plugins/datalens/preparers/line/__tests__/mocks/bar.mock.ts b/src/server/modes/charts/plugins/datalens/preparers/line/__tests__/mocks/bar.mock.ts
@@ -1,4 +1,14 @@
+const chartEditorMock = {
+    getLang: () => {
+        return 'en';
+    },
+    updateHighchartsConfig: () => {},
+    updateConfig: () => {},
+    getWidgetConfig: () => {},
+};
+
 export const calculatedTitle = {
+    ChartEditor: chartEditorMock,
     placeholders: [
         {
             items: [
@@ -51,10 +61,13 @@ export const calculatedTitle = {
     },
     visualizationId: 'column',
     datasets: [],
-    shared: {},
+    shared: {
+        visualization: {id: 'bar'},
+    },
 };
 
 export const regularTitle = {
+    ChartEditor: chartEditorMock,
     placeholders: [
         {
             items: [
@@ -98,17 +111,14 @@ export const regularTitle = {
     },
     visualizationId: 'column',
     datasets: [],
-    shared: {},
+    shared: {
+        visualization: {id: 'bar'},
+    },
 };
 
 // /wizard/foizv5h101la9-multidatasetnyy-chart-s-odinakovymi-pokazatelyami
 export const preparingDataForFieldsWithSameTitlesFromDifferentDatasets = {
-    ChartEditor: {
-        getLang: () => {
-            return 'en';
-        },
-        updateHighchartsConfig: () => {},
-    },
+    ChartEditor: chartEditorMock,
     placeholders: [
         {
             allowedTypes: {},

diff --git a/src/server/modes/charts/plugins/datalens/preparers/line/index.ts b/src/server/modes/charts/plugins/datalens/preparers/line/index.ts
@@ -74,7 +74,8 @@ function prepareLine({
     usedColors,
 }: PrepareFunctionArgs) {
     const {data, order} = resultData;
-
+    const widgetConfig = ChartEditor.getWidgetConfig();
+    const isActionParamsEnable = widgetConfig?.actionParams?.enable;
     const xPlaceholder = placeholders[0];
     const xPlaceholderSettings = xPlaceholder.settings;
     const x: ServerField | undefined = placeholders[0].items[0];
@@ -405,11 +406,24 @@ function prepareLine({
                             }
 
                             const pointLabel = innerLabels && innerLabels[category];
+                            point.label = pointLabel === undefined ? '' : pointLabel;
+
+                            if (isActionParamsEnable) {
+                                const actionParams: Record<string, any> = {};
+
+                                if (isDimensionField(x)) {
+                                    actionParams[x.guid] = point.x;
+                                }
+
+                                const [yField] = ySectionItems || [];
+                                if (isDimensionField(yField)) {
+                                    actionParams[yField.guid] = point.y;
+                                }
 
-                            if (pointLabel !== undefined) {
-                                point.label = pointLabel;
-                            } else {
-                                point.label = '';
+                                point.custom = {
+                                    ...point.custom,
+                                    actionParams,
+                                };
                             }
 
                             return point;
@@ -452,6 +466,34 @@ function prepareLine({
 
                 graph.custom = customSeriesData;
 
+                if (isActionParamsEnable) {
+                    const actionParams: Record<string, any> = {};
+
+                    // bar-x only
+                    if (x2 && isDimensionField(x2)) {
+                        actionParams[x2.guid] = line.stack;
+                    }
+
+                    // bar-y only
+                    const [, yField2] = ySectionItems || [];
+                    if (isDimensionField(yField2)) {
+                        actionParams[yField2.guid] = line.stack;
+                    }
+
+                    if (isDimensionField(colorItem)) {
+                        actionParams[colorItem.guid] = line.colorValue;
+                    }
+
+                    if (isDimensionField(shapeItem)) {
+                        actionParams[shapeItem.guid] = line.shapeValue;
+                    }
+
+                    graph.custom = {
+                        ...graph.custom,
+                        actionParams,
+                    };
+                }
+
                 graphs.push(graph);
             });
         });

diff --git a/src/server/modes/charts/plugins/datalens/preparers/pie/__tests__/mocks/pie.mock.ts b/src/server/modes/charts/plugins/datalens/preparers/pie/__tests__/mocks/pie.mock.ts
@@ -1,4 +1,4 @@
-import {DATASET_FIELD_TYPES} from '../../../../../../../../../shared';
+import {DATASET_FIELD_TYPES, IChartEditor} from '../../../../../../../../../shared';
 
 const DATASET_ID = 'j43msj9o23ge9';
 
@@ -183,7 +183,9 @@ export const SET_WITH_MEASURE_TEXT_AND_MEASURE = {
 };
 
 export const PREPARE_FUNCTION_ARGS = {
-    ChartEditor: undefined,
+    ChartEditor: {
+        getWidgetConfig: () => {},
+    } as IChartEditor,
     datasets: [],
     fields: [],
     shapes: [],

diff --git a/src/server/modes/charts/plugins/datalens/preparers/pie/preparePie.ts b/src/server/modes/charts/plugins/datalens/preparers/pie/preparePie.ts
@@ -4,6 +4,7 @@ import {
     ExtendedSeriesLineOptions,
     MINIMUM_FRACTION_DIGITS,
     isDateField,
+    isDimensionField,
     isNumberField,
 } from '../../../../../../../shared';
 import {ChartColorsConfig} from '../../js/helpers/colors';
@@ -105,8 +106,10 @@ export function preparePie({
     colorsConfig,
     idToTitle,
     idToDataType,
+    ChartEditor,
 }: PrepareFunctionArgs) {
     const {data, order, totals} = resultData;
+    const widgetConfig = ChartEditor.getWidgetConfig();
     const groupedData: Record<string, number> = {};
     const labelsData: Record<string, string | null> = {};
 
@@ -256,6 +259,18 @@ export function preparePie({
                 colorValue: colorKey || name || color.title,
             };
 
+            if (widgetConfig?.actionParams?.enable) {
+                const actionParams: Record<string, any> = {};
+
+                if (isDimensionField(color)) {
+                    actionParams[color.guid] = key;
+                }
+
+                point.custom = {
+                    actionParams,
+                };
+            }
+
             if (labelsLength) {
                 if (isNumericalDataType(lDataType!) || label.title === 'Measure Values') {
                     // CLOUDSUPPORT-52785 - the logic below is a bypass of the problem that once manifested itself

diff --git a/src/server/modes/charts/plugins/datalens/preparers/scatter/__tests__/mocks/scatter.mock.ts b/src/server/modes/charts/plugins/datalens/preparers/scatter/__tests__/mocks/scatter.mock.ts
@@ -1,4 +1,10 @@
-import {DATASET_FIELD_TYPES, ServerColor, ServerShape} from '../../../../../../../../../shared';
+import {
+    DATASET_FIELD_TYPES,
+    IChartEditor,
+    ServerColor,
+    ServerField,
+    ServerShape,
+} from '../../../../../../../../../shared';
 
 const DATASET_ID = 'j43msj9o23ge9';
 
@@ -7,14 +13,14 @@ const X_FIELD = {
     title: 'XField',
     guid: 'cddd9cad-52a2-4232-8898-ade9a972c864',
     data_type: DATASET_FIELD_TYPES.GENERICDATETIME,
-};
+} as ServerField;
 
 const Y_FIELD = {
     datasetId: DATASET_ID,
     title: 'YField',
     guid: 'a6b94410-e219-11e9-a279-0b30c0a74ab7',
     data_type: DATASET_FIELD_TYPES.FLOAT,
-};
+} as ServerField;
 
 export const COLOR_FIELD = {
     datasetId: DATASET_ID,
@@ -31,7 +37,9 @@ export const SHAPE_FIELD = {
 } as ServerShape;
 
 export const PREPARE_FUNCTION_ARGS = {
-    ChartEditor: undefined,
+    ChartEditor: {
+        getWidgetConfig: () => {},
+    } as IChartEditor,
     colors: [],
     colorsConfig: {loadedColorPalettes: {}, colors: ['blue', 'red', 'orange'], gradientColors: []},
     datasets: [],
@@ -43,7 +51,7 @@ export const PREPARE_FUNCTION_ARGS = {
         [Y_FIELD.guid]: Y_FIELD.data_type,
         [COLOR_FIELD.guid]: COLOR_FIELD.data_type,
         [SHAPE_FIELD.guid]: SHAPE_FIELD.data_type,
-    },
+    } as Record<string, DATASET_FIELD_TYPES>,
     idToTitle: {
         [X_FIELD.guid]: X_FIELD.title,
         [Y_FIELD.guid]: Y_FIELD.title,