Fix data labels too dense with large single series

frontend/src/metabase/visualizations/echarts/cartesian/chart-measurements/index.ts

@@ -3,7 +3,7 @@ import { X_AXIS_DATA_KEY } from "metabase/visualizations/echarts/cartesian/const
 import { CHART_STYLE } from "metabase/visualizations/echarts/cartesian/constants/style";
 import type {
   AxisFormatter,
-  CartesianChartModel,
+  BaseCartesianChartModel,
   ChartDataset,
   NumericAxisScaleTransforms,
   XAxisModel,
@@ -200,7 +200,7 @@ const X_LABEL_ROTATE_45_THRESHOLD_FACTOR = 2.1;
 const X_LABEL_ROTATE_90_THRESHOLD_FACTOR = 1.2;
 
 const getAutoAxisEnabledSetting = (
-  chartModel: CartesianChartModel,
+  chartModel: BaseCartesianChartModel,
   settings: ComputedVisualizationSettings,
   boundaryWidth: number,
   maxXTickWidth: number,
@@ -250,7 +250,7 @@ const getAutoAxisEnabledSetting = (
 };
 
 const getTicksDimensions = (
-  chartModel: CartesianChartModel,
+  chartModel: BaseCartesianChartModel,
   chartWidth: number,
   outerHeight: number,
   settings: ComputedVisualizationSettings,
@@ -348,7 +348,7 @@ const getTicksDimensions = (
 const TICK_OVERFLOW_BUFFER = 4;
 
 export const getChartPadding = (
-  chartModel: CartesianChartModel,
+  chartModel: BaseCartesianChartModel,
   settings: ComputedVisualizationSettings,
   ticksDimensions: TicksDimensions,
   axisEnabledSetting: ComputedVisualizationSettings["graph.x_axis.axis_enabled"],
@@ -478,7 +478,7 @@ export const getChartBounds = (
 };
 
 const getDimensionWidth = (
-  chartModel: CartesianChartModel,
+  chartModel: BaseCartesianChartModel,
   boundaryWidth: number,
 ) => {
   const { xAxisModel } = chartModel;
@@ -525,7 +525,7 @@ const areHorizontalXAxisTicksOverlapping = (
 };
 
 export const getChartMeasurements = (
-  chartModel: CartesianChartModel,
+  chartModel: BaseCartesianChartModel,
   settings: ComputedVisualizationSettings,
   hasTimelineEvents: boolean,
   width: number,

frontend/src/metabase/visualizations/echarts/cartesian/model/index.ts

@@ -11,6 +11,7 @@ import {
 } from "metabase/visualizations/echarts/cartesian/model/dataset";
 import {
   getCardsSeriesModels,
+  getCartesianChartDataDensity,
   getDimensionModel,
   getSeriesLabelsFormatters,
   getStackedLabelsFormatters,
@@ -151,6 +152,16 @@ export const getCartesianChartModel = (
       renderingContext,
     );
 
+  const dataDensity = getCartesianChartDataDensity(
+    seriesModels,
+    stackModels,
+    transformedDataset,
+    seriesLabelsFormatters,
+    stackedLabelsFormatters,
+    settings,
+    renderingContext,
+  );
+
   const { leftAxisModel, rightAxisModel } = getYAxesModels(
     seriesModels,
     transformedDataset,
@@ -187,5 +198,6 @@ export const getCartesianChartModel = (
     trendLinesModel,
     seriesLabelsFormatters,
     stackedLabelsFormatters,
+    dataDensity,
   };
 };

frontend/src/metabase/visualizations/echarts/cartesian/model/series.ts

@@ -3,18 +3,22 @@ import _ from "underscore";
 import { NULL_DISPLAY_VALUE } from "metabase/lib/constants";
 import { getDatasetKey } from "metabase/visualizations/echarts/cartesian/model/dataset";
 import type {
+  CartesianChartDataDensity,
   ChartDataset,
   DataKey,
   Datum,
   DimensionModel,
   LabelFormatter,
   LegacySeriesSettingsObjectKey,
+  RawValueFormatter,
   SeriesFormatters,
   SeriesModel,
+  StackDisplay,
   StackModel,
   StackTotalDataKey,
   StackedSeriesFormatters,
   VizSettingsKey,
+  WaterFallChartDataDensity,
 } from "metabase/visualizations/echarts/cartesian/model/types";
 import type { CartesianChartColumns } from "metabase/visualizations/lib/graph/columns";
 import { getFriendlyName } from "metabase/visualizations/lib/utils";
@@ -33,12 +37,14 @@ import type {
   DatasetColumn,
   RawSeries,
   CardId,
+  SeriesSettings,
 } from "metabase-types/api";
 
 import {
   NEGATIVE_STACK_TOTAL_DATA_KEY,
   POSITIVE_STACK_TOTAL_DATA_KEY,
 } from "../constants/dataset";
+import { CHART_STYLE } from "../constants/style";
 import { cachedFormatter } from "../utils/formatter";
 import { WATERFALL_VALUE_KEY } from "../waterfall/constants";
 
@@ -327,6 +333,257 @@ function shouldRenderCompact(
   return getAvgLength(true) + 3 < getAvgLength(false);
 }
 
+export function getWaterfallChartDataDensity(
+  dataset: ChartDataset,
+  waterfallLabelFormatter: RawValueFormatter | undefined,
+  settings: ComputedVisualizationSettings,
+  renderingContext: RenderingContext,
+): WaterFallChartDataDensity {
+  const type = "waterfall";
+  if (
+    !settings["graph.show_values"] ||
+    settings["graph.label_value_frequency"] === "all"
+  ) {
+    return {
+      type,
+      averageLabelWidth: 0,
+      totalNumberOfLabels: 0,
+    };
+  }
+
+  const totalNumberOfLabels = dataset.reduce((sum, datum) => {
+    const labelCount = datum[WATERFALL_VALUE_KEY] != null ? 1 : 0;
+
+    return sum + labelCount;
+  }, 0);
+
+  const fontStyle = {
+    family: renderingContext.fontFamily,
+    weight: CHART_STYLE.seriesLabels.weight,
+    size: CHART_STYLE.seriesLabels.size,
+  };
+  const sumOfLabelWidths = dataset.reduce((sum, datum) => {
+    const value = datum[WATERFALL_VALUE_KEY];
+
+    if (!waterfallLabelFormatter) {
+      return sum;
+    }
+
+    const labelWidth = renderingContext.measureText(
+      waterfallLabelFormatter(value),
+      fontStyle,
+    );
+
+    return sum + labelWidth;
+  }, 0);
+  const averageLabelWidth =
+    totalNumberOfLabels > 0 ? sumOfLabelWidths / totalNumberOfLabels : 0;
+
+  return {
+    type,
+    averageLabelWidth,
+    totalNumberOfLabels,
+  };
+}
+
+export function getCartesianChartDataDensity(
+  seriesModels: SeriesModel[],
+  stackModels: StackModel[],
+  dataset: ChartDataset,
+  seriesLabelsFormatters: SeriesFormatters,
+  stackedLabelsFormatters: StackedSeriesFormatters,
+  settings: ComputedVisualizationSettings,
+  renderingContext: RenderingContext,
+): CartesianChartDataDensity {
+  const type = "cartesian";
+  const seriesSettingsByDataKey = getDisplaySeriesSettingsByDataKey(
+    seriesModels,
+    stackModels,
+    settings,
+  );
+  const seriesWithSymbols = seriesModels.filter(seriesModel => {
+    const seriesSettings = seriesSettingsByDataKey[seriesModel.dataKey];
+    return ["area", "line"].includes(seriesSettings.display ?? "");
+  });
+  const totalNumberOfDots = dataset.reduce((sum, datum) => {
+    const numOfDotsPerDatum = seriesWithSymbols.filter(
+      seriesModel => datum[seriesModel.dataKey] != null,
+    ).length;
+
+    return sum + numOfDotsPerDatum;
+  }, 0);
+
+  const seriesDataKeysWithLabels: DataKey[] = [];
+  const stackedDisplayWithLabels: StackDisplay[] = [];
+  if (
+    !settings["graph.show_values"] ||
+    settings["graph.label_value_frequency"] === "all"
+  ) {
+    return {
+      type,
+      seriesDataKeysWithLabels,
+      stackedDisplayWithLabels,
+      totalNumberOfDots,
+      averageLabelWidth: 0,
+      totalNumberOfLabels: 0,
+    };
+  }
+
+  const seriesWithLabels = seriesModels.filter(seriesModel => {
+    const seriesSettings = seriesSettingsByDataKey[seriesModel.dataKey];
+    if (
+      ["area", "bar"].includes(seriesSettings.display ?? "") &&
+      settings["stackable.stack_type"] != null
+    ) {
+      return false;
+    }
+
+    return seriesSettings["show_series_values"];
+  });
+  const totalNumberOfSeriesLabels =
+    seriesWithLabels.length > 0
+      ? dataset.reduce((sum, datum) => {
+          const numOfLabelsPerDatum = seriesWithLabels.filter(
+            seriesModel => datum[seriesModel.dataKey] != null,
+          ).length;
+
+          return sum + numOfLabelsPerDatum;
+        }, 0)
+      : 0;
+
+  const totalNumberOfStackedLabels =
+    settings["stackable.stack_type"] !== "normalized"
+      ? dataset.reduce((sum, datum) => {
+          const numOfStackedLabelsPerDatum = stackModels.reduce(
+            (sum, stackModel) => {
+              const positiveStackCount =
+                getStackTotalValue(
+                  datum,
+                  stackModel.seriesKeys,
+                  POSITIVE_STACK_TOTAL_DATA_KEY,
+                ) !== null
+                  ? 1
+                  : 0;
+              const negativeStackCount =
+                getStackTotalValue(
+                  datum,
+                  stackModel.seriesKeys,
+                  NEGATIVE_STACK_TOTAL_DATA_KEY,
+                ) !== null
+                  ? 1
+                  : 0;
+
+              return sum + positiveStackCount + negativeStackCount;
+            },
+            0,
+          );
+
+          return sum + numOfStackedLabelsPerDatum;
+        }, 0)
+      : 0;
+  const totalNumberOfLabels =
+    totalNumberOfSeriesLabels + totalNumberOfStackedLabels;
+
+  seriesDataKeysWithLabels.push(
+    ...seriesWithLabels.map(series => series.dataKey),
+  );
+
+  if (settings["stackable.stack_type"] !== "normalized") {
+    stackedDisplayWithLabels.push(
+      ...stackModels.map(stackModel => stackModel.display),
+    );
+  }
+
+  const fontStyle = {
+    family: renderingContext.fontFamily,
+    weight: CHART_STYLE.seriesLabels.weight,
+    size: CHART_STYLE.seriesLabels.size,
+  };
+  const sumOfLabelWidths = dataset.reduce((sum, datum) => {
+    const sumOfSeriesLabelsWidths = seriesWithLabels.reduce(
+      (seriesSum, seriesModel) => {
+        const value = datum[seriesModel.dataKey];
+        const formatter = seriesLabelsFormatters[seriesModel.dataKey];
+
+        if (!formatter) {
+          return sum;
+        }
+
+        const labelWidth = renderingContext.measureText(
+          formatter(value),
+          fontStyle,
+        );
+
+        return seriesSum + labelWidth;
+      },
+      0,
+    );
+
+    const sumOfStackedSeriesLabelsWidths = stackModels.reduce(
+      (stackSum, stackModel) => {
+        const formatter = stackedLabelsFormatters[stackModel.display];
+        if (!formatter) {
+          return 0;
+        }
+
+        const stackValues = [
+          POSITIVE_STACK_TOTAL_DATA_KEY,
+          NEGATIVE_STACK_TOTAL_DATA_KEY,
+        ].map(signKey => {
+          return getStackTotalValue(datum, stackModel.seriesKeys, signKey) ?? 0;
+        });
+        const sumOfLabelWidths = stackValues.reduce((sum, value) => {
+          const labelWidth = renderingContext.measureText(
+            formatter(value),
+            fontStyle,
+          );
+
+          return sum + labelWidth;
+        }, 0);
+
+        return stackSum + sumOfLabelWidths;
+      },
+      0,
+    );
+
+    return sum + sumOfSeriesLabelsWidths + sumOfStackedSeriesLabelsWidths;
+  }, 0);
+
+  const averageLabelWidth =
+    totalNumberOfLabels > 0 ? sumOfLabelWidths / totalNumberOfLabels : 0;
+
+  return {
+    type,
+    seriesDataKeysWithLabels,
+    stackedDisplayWithLabels,
+    totalNumberOfDots,
+    averageLabelWidth,
+    totalNumberOfLabels,
+  };
+}
+
+export function getDisplaySeriesSettingsByDataKey(
+  seriesModels: SeriesModel[],
+  stackModels: StackModel[] | null,
+  settings: ComputedVisualizationSettings,
+) {
+  const seriesSettingsByKey = seriesModels.reduce((acc, seriesModel) => {
+    acc[seriesModel.dataKey] = settings.series(
+      seriesModel.legacySeriesSettingsObjectKey,
+    );
+    return acc;
+  }, {} as Record<DataKey, SeriesSettings>);
+
+  if (stackModels != null) {
+    stackModels.forEach(({ display, seriesKeys }) => {
+      seriesKeys.forEach(seriesKey => {
+        seriesSettingsByKey[seriesKey].display = display;
+      });
+    });
+  }
+
+  return seriesSettingsByKey;
+}
 export const getStackedLabelsFormatters = (
   seriesModels: SeriesModel[],
   stackModels: StackModel[],