Merge pull request #1344 from merico-dev/1339-enable-zooming-on-boxplot

1339 enable zooming on boxplot
merico-dev · Jan 17, 2024 · dd7ee52 · dd7ee52
2 parents f8196aa + d59fb9c
commit dd7ee52
Show file tree

Hide file tree

Showing 13 changed files with 57 additions and 12 deletions.
diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/index.tsx b/dashboard/src/components/plugins/viz-components/boxplot-chart/index.tsx
@@ -7,6 +7,7 @@ import { ClickBoxplotSeries } from './triggers';
 import { DEFAULT_CONFIG, IBoxplotChartConf } from './type';
 import { VizBoxplotChart } from './viz-boxplot-chart';
 import { VizBoxplotChartEditor } from './viz-boxplot-chart-editor';
+import { getDefaultDataZoomConfig } from '../cartesian/editors/echarts-zooming-field/types';
 
 function updateSchema2(legacyConf: IBoxplotChartConf & { variables: ITemplateVariable[] }): IBoxplotChartConf {
   return omit(legacyConf, 'variables');
@@ -133,6 +134,14 @@ function v9(legacyConf: any): IBoxplotChartConf {
   return _.defaultsDeep(patch, legacyConf);
 }
 
+function v10(legacyConf: any): IBoxplotChartConf {
+  const { dataZoom, ...rest } = legacyConf;
+  return {
+    ...rest,
+    dataZoom: dataZoom ?? getDefaultDataZoomConfig(),
+  };
+}
+
 export class VizBoxplotChartMigrator extends VersionBasedMigrator {
   readonly VERSION = 9;
 
@@ -181,6 +190,10 @@ export class VizBoxplotChartMigrator extends VersionBasedMigrator {
       const { config } = data;
       return { ...data, version: 9, config: v9(config) };
     });
+    this.version(10, (data) => {
+      const { config } = data;
+      return { ...data, version: 10, config: v10(config) };
+    });
   }
 }
 
@@ -193,7 +206,7 @@ export const BoxplotChartVizComponent: VizComponent = {
   configRender: VizBoxplotChartEditor,
   createConfig() {
     return {
-      version: 9,
+      version: 10,
       config: cloneDeep(DEFAULT_CONFIG) as IBoxplotChartConf,
     };
   },

diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/option/grid.ts b/dashboard/src/components/plugins/viz-components/boxplot-chart/option/grid.ts
@@ -2,7 +2,7 @@ import { IBoxplotChartConf } from '../type';
 
 export function getGrid(conf: IBoxplotChartConf) {
   const grid = {
-    top: 30,
+    top: 35,
     left: 20,
     right: 15,
     bottom: 25,
@@ -12,6 +12,9 @@ export function getGrid(conf: IBoxplotChartConf) {
   if (conf.legend.orient === 'vertical') {
     grid.right = 80;
   }
+  if (conf.dataZoom.x_axis_slider) {
+    grid.top = 50;
+  }
 
   return grid;
 }
diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/option/index.ts b/dashboard/src/components/plugins/viz-components/boxplot-chart/option/index.ts
@@ -9,6 +9,7 @@ import { getLegend } from './legend';
 import { getReferenceLines } from './reference-line';
 import { getSeries } from './series';
 import { getTooltip } from './tooltip';
+import { getEchartsDataZoomOption } from '../../cartesian/editors/echarts-zooming-field/get-echarts-data-zoom-option';
 
 interface IGetOption {
   config: IBoxplotChartConf;
@@ -22,6 +23,7 @@ export function getOption({ config, data, variables }: IGetOption) {
   const overflowOption = getLabelOverflowOptionOnAxis(x_axis.axisLabel.overflow.on_axis);
   const series = getSeries(config, dataset);
   return {
+    dataZoom: getEchartsDataZoomOption(config.dataZoom, 'filter'),
     grid: getGrid(config),
     dataset,
     legend: getLegend({ config }),

diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/option/legend.ts b/dashboard/src/components/plugins/viz-components/boxplot-chart/option/legend.ts
@@ -28,6 +28,9 @@ export function getLegend({ config }: { config: IBoxplotChartConf }) {
       },
     ],
   };
+  if (config.legend.orient === 'horizontal' && config.dataZoom.x_axis_slider) {
+    ret.top = 15;
+  }
 
   return ret;
 }
diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/type.ts b/dashboard/src/components/plugins/viz-components/boxplot-chart/type.ts
@@ -9,6 +9,11 @@ import {
   DEFAULT_X_AXIS_LABEL_FORMATTER,
   IXAxisLabelFormatter,
 } from '../cartesian/editors/x-axis/x-axis-label-formatter/types';
+import {
+  DEFAULT_DATA_ZOOM_CONFIG,
+  getDefaultDataZoomConfig,
+  TEchartsDataZoomConfig,
+} from '../cartesian/editors/echarts-zooming-field/types';
 
 export interface IBoxplotReferenceLine {
   name: string;
@@ -49,6 +54,7 @@ export interface IBoxplotChartConf {
   color: string;
   reference_lines: IBoxplotReferenceLine[];
   legend: TBoxplotLegend;
+  dataZoom: TEchartsDataZoomConfig;
 }
 
 export const DEFAULT_CONFIG: IBoxplotChartConf = {
@@ -80,6 +86,7 @@ export const DEFAULT_CONFIG: IBoxplotChartConf = {
     orient: 'vertical',
     type: 'scroll',
   },
+  dataZoom: getDefaultDataZoomConfig(),
 };
 
 export type TOutlierDataItem = [string, number, AnyObject];

diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart-editor.tsx b/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart-editor.tsx
@@ -13,6 +13,7 @@ import { YAxisField } from './editors/y-axis';
 import { DEFAULT_CONFIG, IBoxplotChartConf } from './type';
 import { TooltipField } from './editors/tooltip';
 import { LegendField } from './editors/legend';
+import { EchartsZoomingField } from '../cartesian/editors/echarts-zooming-field';
 
 export function VizBoxplotChartEditor({ context }: VizConfigProps) {
   const { value: conf, set: setConf } = useStorageData<IBoxplotChartConf>(context.instanceData, 'config');
@@ -24,7 +25,7 @@ export function VizBoxplotChartEditor({ context }: VizConfigProps) {
     reset(defaultValues);
   }, [defaultValues]);
 
-  watch(['x_axis', 'y_axis', 'reference_lines', 'color']);
+  watch(['x_axis', 'y_axis', 'reference_lines', 'color', 'dataZoom']);
   const values = getValues();
   const changed = useMemo(() => {
     return !isEqual(values, conf);
@@ -60,6 +61,7 @@ export function VizBoxplotChartEditor({ context }: VizConfigProps) {
             <Tabs.Tab value="Tooltip">Tooltip</Tabs.Tab>
             <Tabs.Tab value="Style">Style</Tabs.Tab>
             <Tabs.Tab value="Reference Lines">Reference Lines</Tabs.Tab>
+            <Tabs.Tab value="Zooming">Zooming</Tabs.Tab>
           </Tabs.List>
           <Tabs.Panel value="X Axis">
             <XAxisField control={control} watch={watch} />
@@ -82,6 +84,9 @@ export function VizBoxplotChartEditor({ context }: VizConfigProps) {
           <Tabs.Panel value="Reference Lines">
             <ReferenceLinesField variables={variables} control={control} watch={watch} />
           </Tabs.Panel>
+          <Tabs.Panel value="Zooming">
+            <Controller name="dataZoom" control={control} render={({ field }) => <EchartsZoomingField {...field} />} />
+          </Tabs.Panel>
         </Tabs>
       </form>
     </Stack>

diff --git a/...ns/viz-components/cartesian/editors/echarts-zooming-field/get-echarts-data-zoom-option.ts b/...ns/viz-components/cartesian/editors/echarts-zooming-field/get-echarts-data-zoom-option.ts
@@ -1,28 +1,34 @@
 import { TEchartsDataZoomConfig } from './types';
 
-export function getEchartsDataZoomOption(conf: TEchartsDataZoomConfig) {
+type FilterMode = 'none' | 'filter';
+
+export function getEchartsDataZoomOption(conf: TEchartsDataZoomConfig, filterMode?: FilterMode) {
+  if (!filterMode) {
+    filterMode = 'none';
+  }
+
   const ret = [];
   if (conf.x_axis_scroll) {
     ret.push({
       type: 'inside',
       xAxisIndex: [0],
-      filterMode: 'none',
+      filterMode,
       minSpan: 1,
     });
   }
   if (conf.y_axis_scroll) {
     ret.push({
       type: 'inside',
       yAxisIndex: [0],
-      filterMode: 'none',
+      filterMode,
       minSpan: 1,
     });
   }
   if (conf.x_axis_slider) {
     ret.push({
       type: 'slider',
       xAxisIndex: [0],
-      filterMode: 'none',
+      filterMode,
       bottom: 'auto',
       top: 0,
       height: 15,

diff --git a/...rd/src/components/plugins/viz-components/cartesian/editors/echarts-zooming-field/types.ts b/...rd/src/components/plugins/viz-components/cartesian/editors/echarts-zooming-field/types.ts
@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 export type TEchartsDataZoomConfig = {
   x_axis_scroll: boolean;
   y_axis_scroll: boolean;
@@ -11,3 +13,7 @@ export const DEFAULT_DATA_ZOOM_CONFIG = {
   x_axis_slider: false,
   y_axis_slider: false,
 };
+
+export function getDefaultDataZoomConfig() {
+  return _.cloneDeep(DEFAULT_DATA_ZOOM_CONFIG);
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "private": true,
   "workspaces": [
     "api",

diff --git a/settings-form/package.json b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

diff --git a/website/package.json b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"