fix(dashboard): disable animation for charts with many elements

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.60.7",
+  "version": "14.60.8",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.60.7",
+  "version": "14.60.8",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"

dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx

@@ -9,6 +9,7 @@ import { useStorageData } from '~/components/plugins/hooks';
 import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
 import { VizViewProps } from '~/types/plugin';
 import { extractFullQueryData, parseDataKey } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
 import { DEFAULT_CONFIG, IBar3dChartConf } from './type';
 import { notifyVizRendered } from '~/components/plugins/viz-components/viz-instance-api';
 
@@ -49,7 +50,11 @@ export function VizBar3dChart({ context, instance }: VizViewProps) {
   );
   const onRenderFinishedRef = useLatest(handleChartRenderFinished);
 
+  // Calculate animation config based on rendered element count
+  const animationConfig = getAnimationConfig(queryData.length);
+
   const option = {
+    ...animationConfig,
     tooltip: {},
     backgroundColor: '#fff',
     visualMap: {

dashboard/src/components/plugins/viz-components/boxplot-chart/option/index.ts

@@ -1,6 +1,7 @@
 import { getLabelOverflowOptionOnAxis } from '~/components/plugins/common-echarts-fields/axis-label-overflow';
 import { defaultEchartsOptions } from '~/styles/default-echarts-options';
 import { ITemplateVariable, formatNumber } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
 import { IBoxplotChartConf } from '../type';
 import { getDataset } from './dataset';
 import { getGrid } from './grid';
@@ -49,13 +50,19 @@ interface IGetOption {
 }
 export function getOption({ config, data, variables, t }: IGetOption) {
   const { x_axis, y_axis, reference_lines } = config;
+
   const dataset = getDataset(config, data);
 
+  // Calculate element count from dataset (number of boxes)
+  const elementCount = dataset[0]?.source?.length ?? 0;
+  const animationConfig = getAnimationConfig(elementCount);
+
   const overflowOption = getLabelOverflowOptionOnAxis(x_axis.axisLabel.overflow.on_axis);
   const seriesNames = getSeriesNames(t);
   const series = getSeries(config, dataset).map((s) => ({ ...s, name: _.get(seriesNames, s.name, s.name) }));
 
   return {
+    ...animationConfig,
     dataZoom: getEchartsDataZoomOption(config.dataZoom, 'filter'),
     grid: getGrid(config),
     dataset,

dashboard/src/components/plugins/viz-components/calendar-heatmap/option/index.ts

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 import _ from 'lodash';
 import { getSkipRangeColor, getVisualMap } from '~/components/plugins/common-echarts-fields/visual-map';
 import { ITemplateVariable, formatAggregatedValue, getAggregatedValue, parseDataKey } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
 import { ICalendarHeatmapConf } from '../type';
 import { getCalendar } from './calendar';
 import { getValueFormatters } from './formatters';
@@ -56,10 +57,14 @@ export function getOption(conf: ICalendarHeatmapConf, data: TPanelData, variable
     return ret;
   });
 
+  // Calculate element count from plotData
+  const animationConfig = getAnimationConfig(plotData.length);
+
   const { dateSpan, minDate, dataByYear, years } = getDateStuff(plotData);
   const oneYearMode = dateSpan <= 366;
 
   const options = {
+    ...animationConfig,
     calendar: getCalendar(oneYearMode, minDate, years),
     series: getSeries(oneYearMode, dataByYear, plotData),
     tooltip: getTooltip(conf, data, valueFormatters),

dashboard/src/components/plugins/viz-components/cartesian/option/index.ts

@@ -1,5 +1,6 @@
 import { defaultsDeep } from 'lodash';
 import { ITemplateVariable } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
 import { getEchartsDataZoomOption } from '../editors/echarts-zooming-field/get-echarts-data-zoom-option';
 import { ICartesianChartConf } from '../type';
 import { IAxisLabels } from './get-axis-labels';
@@ -47,7 +48,12 @@ export function getOption(
   const series = getSeries(conf, xAxisLabels, data, labelFormatters, variables, variableValueMap);
   const regressionSeries = getRegressionConfs(conf, data, xAxisLabels);
 
+  // Calculate element count from rendered series data
+  const elementCount = series.reduce((sum, s) => sum + (s.data?.length ?? 0), 0);
+  const animationConfig = getAnimationConfig(elementCount);
+
   const customOptions = {
+    ...animationConfig,
     xAxis: getXAxes(conf, xAxisLabels),
     yAxis: getYAxes(conf, labelFormatters, series),
     series: [...series, ...regressionSeries],

dashboard/src/components/plugins/viz-components/funnel/option/index.ts

@@ -1,17 +1,25 @@
-import { AnyObject } from '~/types';
+import { get } from 'lodash';
+import { getAnimationConfig } from '~/utils/animation';
 import { IFunnelConf } from '../type';
 import { getSeries } from './series';
 import { getTooltip } from './tooltip';
 
 export function getOption(conf: IFunnelConf, data: TPanelData) {
+  const series = getSeries(conf, data);
+
+  // Calculate element count from series data
+  const elementCount = series.reduce((sum, s) => sum + get(s, 'data.length', 0), 0);
+  const animationConfig = getAnimationConfig(elementCount);
+
   return {
+    ...animationConfig,
     grid: {
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
     },
     tooltip: getTooltip(conf, data),
-    series: getSeries(conf, data),
+    series,
   };
 }

dashboard/src/components/plugins/viz-components/funnel/option/series.ts

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import { getLabelOverflowOptionOnAxis } from '~/components/plugins/common-echarts-fields/axis-label-overflow';
-import { AnyObject } from '~/types';
 import { IFunnelConf, IFunnelSeriesItem } from '../type';
 import { parseDataKey } from '~/utils';
 
@@ -41,7 +40,12 @@ function getFunnelMargin(s: IFunnelSeriesItem) {
   return ret;
 }
 
-export function getSeries(conf: IFunnelConf, data: TPanelData) {
+export function getSeries(
+  conf: IFunnelConf,
+  data: TPanelData,
+): {
+  data?: SeriesDataType[];
+}[] {
   return conf.series.map((s) => {
     const { level_name_data_key, level_value_data_key, axisLabel, min, max, funnelAlign, orient, ...echartsProps } = s;
     if (!level_name_data_key || !level_value_data_key) {

dashboard/src/components/plugins/viz-components/heatmap/option/index.ts

@@ -1,16 +1,15 @@
-import { defaultsDeep } from 'lodash';
-import { ITemplateVariable, formatAggregatedValue, getAggregatedValue } from '~/utils';
+import _ from 'lodash';
+import { getSkipRangeColor, getVisualMap } from '~/components/plugins/common-echarts-fields/visual-map';
+import { formatAggregatedValue, getAggregatedValue, ITemplateVariable, parseDataKey } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
+import { SeriesDataItem } from '../render/use-heatmap-series-data';
 import { IHeatmapConf } from '../type';
 import { getLabelFormatters, getValueFormatters } from './formatters';
 import { getGrid } from './grid';
 import { getSeries } from './series';
 import { getTooltip } from './tooltip';
 import { getXAxis } from './x-axis';
 import { getYAxis } from './y-axis';
-import _ from 'lodash';
-import { parseDataKey } from '~/utils';
-import { getSkipRangeColor, getVisualMap } from '~/components/plugins/common-echarts-fields/visual-map';
-import { SeriesDataItem } from '../render/use-heatmap-series-data';
 
 function calcBorderWidth(xlen: number, ylen: number, width: number, height: number) {
   if (width < xlen * 10 || height < ylen * 10) {
@@ -33,6 +32,7 @@ export function getOption(
   if (!conf.x_axis.data_key || !conf.y_axis.data_key || !conf.heat_block.data_key) {
     return {};
   }
+
   const variableValueMap = variables.reduce((prev, variable) => {
     const value = getAggregatedValue(variable, data);
     prev[variable.name] = formatAggregatedValue(variable, value);
@@ -61,7 +61,9 @@ export function getOption(
   });
   const borderWidth = calcBorderWidth(xData.length, yData.length, width, height);
 
+  const animationConfig = getAnimationConfig(_seriesData.length);
   const options = {
+    ...animationConfig,
     xAxis: getXAxis(conf, xData, labelFormatters.x_axis, borderWidth),
     yAxis: getYAxis(conf, labelFormatters.y_axis, borderWidth),
     series: getSeries(conf, _seriesData, borderWidth),

dashboard/src/components/plugins/viz-components/horizontal-bar-chart/option/index.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { ITemplateVariable } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
 import { IHorizontalBarChartConf } from '../type';
 import { getGrid } from './grid';
 import { getLegend } from './legend';
@@ -26,7 +27,12 @@ export function getOption(conf: IHorizontalBarChartConf, data: TPanelData, varia
   // options
   const series = getSeries(conf, yAxisData, valueTypedXAxis, data, labelFormatters, variables, variableValueMap);
 
+  // Calculate element count from series data
+  const elementCount = series.reduce((sum, s) => sum + (s.data?.length ?? 0), 0);
+  const animationConfig = getAnimationConfig(elementCount);
+
   const customOptions = {
+    ...animationConfig,
     xAxis: getXAxes(conf, labelFormatters),
     yAxis: getYAxes(conf, yAxisData),
     series,

dashboard/src/components/plugins/viz-components/merico-estimation-chart/option/index.ts

@@ -1,4 +1,5 @@
 import { defaultsDeep } from 'lodash';
+import { getAnimationConfig } from '~/utils/animation';
 import { IMericoEstimationChartConf } from '../type';
 import { getGrids } from './grid';
 import { getSeries } from './series';
@@ -38,7 +39,13 @@ export function getOption(conf: IMericoEstimationChartConf, metricKey: TDataKey,
   const dataGroupedByX = _.groupBy(data, x.columnKey);
   const metric = getMetric(conf, metricKey);
   const series = getSeries(conf, metric, xAxisData, dataGroupedByX);
+
+  // Calculate element count from series data
+  const elementCount = series.reduce((sum, s) => sum + (s.data?.length ?? 0), 0);
+  const animationConfig = getAnimationConfig(elementCount);
+
   const customOptions = {
+    ...animationConfig,
     xAxis: getXAxes(conf, xAxisData),
     yAxis: getYAxes(metric),
     series,

dashboard/src/components/plugins/viz-components/pareto-chart/option/index.ts

@@ -1,5 +1,6 @@
 import { get, isEmpty } from 'lodash';
 import { ITemplateVariable, parseDataKey } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
 import { getEchartsDataZoomOption } from '../../cartesian/editors/echarts-zooming-field/get-echarts-data-zoom-option';
 import { getVariableValueMap } from '../../cartesian/option/utils/variables';
 import { IParetoChartConf } from '../type';
@@ -43,8 +44,12 @@ export function getOption(conf: IParetoChartConf, data: TPanelData, variables: I
     (a, b) => b[1] - a[1],
   ) as BarData;
 
+  // Calculate element count: barData.length * 2 (bar series + line series)
+  const animationConfig = getAnimationConfig(barData.length * 2);
+
   const xAxisData = barData.map((d) => d[0]);
   const option = {
+    ...animationConfig,
     dataZoom: getEchartsDataZoomOption(conf.dataZoom),
     tooltip: getTooltip(conf, formatters),
     xAxis: getXAxis(conf, xAxisData),

dashboard/src/components/plugins/viz-components/pie-chart/option/index.ts

@@ -1,11 +1,18 @@
+import { getAnimationConfig } from '~/utils/animation';
 import { IPieChartConf } from '../type';
 import { getDataset } from './dataset';
 import { getSeries } from './series';
 import { getTooltip } from './tooltip';
 
 export function getOption(conf: IPieChartConf, data: TPanelData, width: number) {
+  const dataset = getDataset(conf, data);
+
+  // Calculate element count from dataset source (accounts for Others aggregation)
+  const animationConfig = getAnimationConfig(dataset.source.length);
+
   return {
-    dataset: getDataset(conf, data),
+    ...animationConfig,
+    dataset,
     tooltip: getTooltip(conf),
     series: getSeries(conf, data, width),
   };

dashboard/src/components/plugins/viz-components/radar-chart/option/index.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { defaultEchartsOptions } from '~/styles/default-echarts-options';
+import { getAnimationConfig } from '~/utils/animation';
 import { IRadarChartConf } from '../type';
 import { getSeries } from './series';
 import { getTooltipFormatter } from './tooltip';
@@ -49,7 +50,14 @@ export function getOption(conf: IRadarChartConf, data: TPanelData) {
     max,
   }));
 
+  const series = getSeries(data, conf);
+
+  // Calculate element count from series data
+  const elementCount = series.reduce((sum, s) => sum + (s.data?.length ?? 0), 0);
+  const animationConfig = getAnimationConfig(elementCount);
+
   const customOptions = {
+    ...animationConfig,
     radar: {
       indicator,
       splitArea: {
@@ -66,7 +74,7 @@ export function getOption(conf: IRadarChartConf, data: TPanelData) {
       left: 'center',
       type: 'scroll',
     },
-    series: getSeries(data, conf),
+    series,
     color: palette,
   };
 

dashboard/src/components/plugins/viz-components/scatter-chart/option/index.ts

@@ -1,5 +1,6 @@
 import _, { defaultsDeep } from 'lodash';
 import { ITemplateVariable, extractData, formatAggregatedValue, formatNumber, getAggregatedValue } from '~/utils';
+import { getAnimationConfig } from '~/utils/animation';
 import { getEchartsDataZoomOption } from '../../cartesian/editors/echarts-zooming-field/get-echarts-data-zoom-option';
 import { IYAxisConf } from '../../cartesian/type';
 import { IScatterChartConf } from '../type';
@@ -77,12 +78,18 @@ export function getOption(conf: IScatterChartConf, data: TPanelData, variables:
   const xAxisData = _.uniq(extractData(data, conf.x_axis.data_key));
 
   const series = getSeries(conf, data, variables, variableValueMap);
+  const dataset = getDataset(conf, data);
+
+  // Calculate element count from dataset source
+  const elementCount = dataset[0]?.source?.length ?? 0;
+  const animationConfig = getAnimationConfig(elementCount);
 
   const customOptions = {
+    ...animationConfig,
     xAxis: getXAxes(conf, xAxisData),
     yAxis: getYAxes(conf, labelFormatters),
     series,
-    dataset: getDataset(conf, data),
+    dataset,
     tooltip: getTooltip(conf, labelFormatters),
     grid: getGrid(conf),
     legend: getLegend(),

dashboard/src/utils/animation.ts

@@ -0,0 +1,8 @@
+const ANIMATION_THRESHOLD = 100;
+
+export function getAnimationConfig(recordCount: number) {
+  const shouldDisableAnimation = recordCount > ANIMATION_THRESHOLD;
+  return {
+    animation: !shouldDisableAnimation,
+  };
+}

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.60.7",
+  "version": "14.60.8",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"