Merge pull request #1213 from qxqzx13/dev

scottsut · web-flow · commit 0f8768cbf2de · 2022-04-19T17:21:50.000+08:00
chart add drillbale
diff --git a/frontend/src/app/components/ChartGraph/BasicFunnelChart/BasicFunnelChart.tsx b/frontend/src/app/components/ChartGraph/BasicFunnelChart/BasicFunnelChart.tsx
@@ -31,6 +31,7 @@ import ChartDataSetDTO, {
 import {
   getAutoFunnelTopPosition,
   getColumnRenderName,
+  getDrillableRows,
   getExtraSeriesDataFormat,
   getExtraSeriesRowData,
   getGridStyle,
@@ -42,6 +43,7 @@ import {
 import { init } from 'echarts';
 import isEmpty from 'lodash/isEmpty';
 import Chart from '../../../models/Chart';
+import { ChartDrillOption } from '../../../models/ChartDrillOption';
 import Config from './config';
 import { Series, SeriesData } from './types';
 
@@ -86,7 +88,11 @@ class BasicFunnelChart extends Chart {
     if (!this.isMatchRequirement(props.config)) {
       return;
     }
-    const newOptions = this.getOptions(props.dataset, props.config);
+    const newOptions = this.getOptions(
+      props.dataset,
+      props.config,
+      props.drillOption,
+    );
     this.chart?.setOption(Object.assign({}, newOptions), true);
   }
 
@@ -98,12 +104,17 @@ class BasicFunnelChart extends Chart {
     this.chart?.resize({ width: context?.width, height: context?.height });
   }
 
-  private getOptions(dataset: ChartDataSetDTO, config: ChartConfig) {
+  private getOptions(
+    dataset: ChartDataSetDTO,
+    config: ChartConfig,
+    drillOption: ChartDrillOption,
+  ) {
     const styleConfigs = config.styles || [];
     const dataConfigs = config.datas || [];
-    const groupConfigs = dataConfigs
-      .filter(c => c.type === ChartDataSectionType.GROUP)
-      .flatMap(config => config.rows || []);
+    const groupConfigs: ChartDataSectionField[] = getDrillableRows(
+      dataConfigs,
+      drillOption,
+    );
     const aggregateConfigs = dataConfigs
       .filter(c => c.type === ChartDataSectionType.AGGREGATE)
       .flatMap(config => config.rows || []);
diff --git a/frontend/src/app/components/ChartGraph/BasicFunnelChart/config.ts b/frontend/src/app/components/ChartGraph/BasicFunnelChart/config.ts
@@ -31,6 +31,7 @@ const config: ChartConfig = {
         STRING: ['alias', 'colorize', 'sortable'],
         DATE: ['alias', 'colorize', 'sortable'],
       },
+      drillable: true,
     },
     {
       label: 'metrics',
diff --git a/frontend/src/app/components/ChartGraph/BasicLineChart/BasicLineChart.tsx b/frontend/src/app/components/ChartGraph/BasicLineChart/BasicLineChart.tsx
@@ -35,6 +35,7 @@ import {
   getAxisTick,
   getColorizeGroupSeriesColumns,
   getColumnRenderName,
+  getDrillableRows,
   getExtraSeriesDataFormat,
   getExtraSeriesRowData,
   getGridStyle,
@@ -51,6 +52,7 @@ import {
 import { init } from 'echarts';
 import { UniqArray } from 'utils/object';
 import Chart from '../../../models/Chart';
+import { ChartDrillOption } from '../../../models/ChartDrillOption';
 import Config from './config';
 import { Series } from './types';
 
@@ -97,7 +99,11 @@ class BasicLineChart extends Chart {
       this.chart?.clear();
       return;
     }
-    const newOptions = this.getOptions(props.dataset, props.config);
+    const newOptions = this.getOptions(
+      props.dataset,
+      props.config,
+      props.drillOption,
+    );
     this.chart?.setOption(Object.assign({}, newOptions), true);
   }
 
@@ -110,13 +116,18 @@ class BasicLineChart extends Chart {
     this.chart?.dispose();
   }
 
-  private getOptions(dataset: ChartDataSetDTO, config: ChartConfig) {
+  private getOptions(
+    dataset: ChartDataSetDTO,
+    config: ChartConfig,
+    drillOption: ChartDrillOption,
+  ) {
     const styleConfigs = config.styles || [];
     const dataConfigs = config.datas || [];
     const settingConfigs = config.settings || [];
-    const groupConfigs = dataConfigs
-      .filter(c => c.type === ChartDataSectionType.GROUP)
-      .flatMap(config => config.rows || []);
+    const groupConfigs: ChartDataSectionField[] = getDrillableRows(
+      dataConfigs,
+      drillOption,
+    );
     const aggregateConfigs = dataConfigs
       .filter(c => c.type === ChartDataSectionType.AGGREGATE)
       .flatMap(config => config.rows || []);
@@ -133,13 +144,17 @@ class BasicLineChart extends Chart {
       dataConfigs,
     );
 
-    const xAxisColumns: XAxisColumns[] = (groupConfigs || []).map(config => {
-      return {
+    const xAxisColumns: XAxisColumns[] = [
+      {
         type: 'category',
         tooltip: { show: true },
-        data: UniqArray(chartDataSet.map(dc => dc.getCell(config))),
-      };
-    });
+        data: UniqArray(
+          chartDataSet?.map(row => {
+            return groupConfigs.map(g => row.getCell(g)).join('-');
+          }),
+        ),
+      },
+    ];
     const series = this.getSeries(
       settingConfigs,
       styleConfigs,
@@ -215,7 +230,6 @@ class BasicLineChart extends Chart {
       });
     }
 
-    const xAxisConfig = groupConfigs?.[0];
     const secondGroupInfos = getColorizeGroupSeriesColumns(
       chartDataSet,
       colorConfigs[0],
@@ -239,7 +253,9 @@ class BasicLineChart extends Chart {
             normal: { color: itemStyleColor?.value },
           },
           data: xAxisColumns[0].data.map(d => {
-            const row = dataSet.find(r => r.getCell(xAxisConfig) === d)!;
+            const row = dataSet.find(
+              r => r.getMultiCell(...groupConfigs) === d,
+            )!;
             return {
               ...getExtraSeriesRowData(row),
               ...getExtraSeriesDataFormat(aggConfig?.format),
diff --git a/frontend/src/app/components/ChartGraph/BasicLineChart/config.ts b/frontend/src/app/components/ChartGraph/BasicLineChart/config.ts
@@ -25,7 +25,8 @@ const config: ChartConfig = {
       key: 'dimension',
       required: true,
       type: 'group',
-      limit: 1,
+      limit: [1, 999],
+      drillable: true,
     },
     {
       label: 'metrics',
diff --git a/frontend/src/app/components/ChartGraph/BasicPieChart/BasicPieChart.tsx b/frontend/src/app/components/ChartGraph/BasicPieChart/BasicPieChart.tsx
@@ -30,6 +30,7 @@ import ChartDataSetDTO, {
 } from 'app/types/ChartDataSet';
 import {
   getColumnRenderName,
+  getDrillableRows,
   getExtraSeriesDataFormat,
   getExtraSeriesRowData,
   getGridStyle,
@@ -40,6 +41,7 @@ import {
 } from 'app/utils/chartHelper';
 import { init } from 'echarts';
 import Chart from '../../../models/Chart';
+import { ChartDrillOption } from '../../../models/ChartDrillOption';
 import Config from './config';
 import { PieSeries, PieSeriesImpl, PieSeriesStyle } from './types';
 
@@ -83,7 +85,11 @@ class BasicPieChart extends Chart {
       this.chart?.clear();
       return;
     }
-    const newOptions = this.getOptions(props.dataset, props.config);
+    const newOptions = this.getOptions(
+      props.dataset,
+      props.config,
+      props.drillOption,
+    );
     this.chart?.setOption(Object.assign({}, newOptions), true);
   }
 
@@ -95,12 +101,17 @@ class BasicPieChart extends Chart {
     this.chart?.resize(context);
   }
 
-  private getOptions(dataset: ChartDataSetDTO, config: ChartConfig) {
+  private getOptions(
+    dataset: ChartDataSetDTO,
+    config: ChartConfig,
+    drillOption: ChartDrillOption,
+  ) {
     const styleConfigs = config.styles || [];
     const dataConfigs = config.datas || [];
-    const groupConfigs = dataConfigs
-      .filter(c => c.type === ChartDataSectionType.GROUP)
-      .flatMap(config => config.rows || []);
+    const groupConfigs: ChartDataSectionField[] = getDrillableRows(
+      dataConfigs,
+      drillOption,
+    );
     const aggregateConfigs = dataConfigs
       .filter(c => c.type === ChartDataSectionType.AGGREGATE)
       .flatMap(config => config.rows || []);
diff --git a/frontend/src/app/components/ChartGraph/BasicPieChart/config.ts b/frontend/src/app/components/ChartGraph/BasicPieChart/config.ts
@@ -25,12 +25,13 @@ const config: ChartConfig = {
       key: 'dimension',
       required: true,
       type: 'group',
-      limit: [0, 1],
+      limit: [0, 999],
       actions: {
         NUMERIC: ['alias', 'colorize', 'sortable'],
         STRING: ['alias', 'colorize', 'sortable'],
         DATE: ['alias', 'colorize', 'sortable'],
       },
+      drillable: true,
     },
     {
       label: 'metrics',
diff --git a/frontend/src/app/components/ChartGraph/BasicScatterChart/BasicScatterChart.tsx b/frontend/src/app/components/ChartGraph/BasicScatterChart/BasicScatterChart.tsx
@@ -29,6 +29,7 @@ import ChartDataSetDTO, { IChartDataSet } from 'app/types/ChartDataSet';
 import {
   getColumnRenderName,
   getDataColumnMaxAndMin2,
+  getDrillableRows,
   getExtraSeriesRowData,
   getGridStyle,
   getReference2,
@@ -39,6 +40,7 @@ import {
 } from 'app/utils/chartHelper';
 import { init } from 'echarts';
 import Chart from '../../../models/Chart';
+import { ChartDrillOption } from '../../../models/ChartDrillOption';
 import Config from './config';
 import { ScatterMetricAndSizeSerie } from './types';
 
@@ -80,7 +82,11 @@ class BasicScatterChart extends Chart {
       this.chart?.clear();
       return;
     }
-    const newOptions = this.getOptions(props.dataset, props.config);
+    const newOptions = this.getOptions(
+      props.dataset,
+      props.config,
+      props.drillOption,
+    );
     this.chart?.setOption(Object.assign({}, newOptions), true);
   }
 
@@ -92,13 +98,18 @@ class BasicScatterChart extends Chart {
     this.chart?.resize(opt, context);
   }
 
-  private getOptions(dataset: ChartDataSetDTO, config: ChartConfig) {
+  private getOptions(
+    dataset: ChartDataSetDTO,
+    config: ChartConfig,
+    drillOption: ChartDrillOption,
+  ) {
     const styleConfigs = config.styles || [];
     const dataConfigs = config.datas || [];
     const settingConfigs = config.settings || [];
-    const groupConfigs = dataConfigs
-      .filter(c => c.type === ChartDataSectionType.GROUP)
-      .flatMap(config => config.rows || []);
+    const groupConfigs: ChartDataSectionField[] = getDrillableRows(
+      dataConfigs,
+      drillOption,
+    );
     const aggregateConfigs = dataConfigs
       .filter(c => c.type === ChartDataSectionType.AGGREGATE)
       .flatMap(config => config.rows || []);
diff --git a/frontend/src/app/components/ChartGraph/BasicScatterChart/config.ts b/frontend/src/app/components/ChartGraph/BasicScatterChart/config.ts
@@ -25,6 +25,7 @@ const config: ChartConfig = {
       key: 'dimension',
       type: 'group',
       required: true,
+      drillable: true,
     },
     {
       label: 'metrics',

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ const config: ChartConfig = {`
`31`	`31`	`STRING: ['alias', 'colorize', 'sortable'],`
`32`	`32`	`DATE: ['alias', 'colorize', 'sortable'],`
`33`	`33`	`},`
	`34`	`+ drillable: true,`
`34`	`35`	`},`
`35`	`36`	`{`
`36`	`37`	`label: 'metrics',`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ const config: ChartConfig = {`
`25`	`25`	`key: 'dimension',`
`26`	`26`	`type: 'group',`
`27`	`27`	`required: true,`
	`28`	`+ drillable: true,`
`28`	`29`	`},`
`29`	`30`	`{`
`30`	`31`	`label: 'metrics',`