refactor: Generalize yMin value computations

bprusinowski · bprusinowski · commit cb94af6e1c1c · 2024-06-06T10:08:02.000+02:00
diff --git a/app/charts/area/areas-state-props.ts b/app/charts/area/areas-state-props.ts
@@ -35,7 +35,7 @@ export const useAreasStateVariables = (
   const temporalXVariables = useTemporalXVariables(x, {
     dimensionsByIri,
   });
-  const numericalYVariables = useNumericalYVariables(y, {
+  const numericalYVariables = useNumericalYVariables("area", y, {
     measuresByIri,
   });
   const segmentVariables = useSegmentVariables(segment, {
diff --git a/app/charts/column/columns-grouped-state-props.ts b/app/charts/column/columns-grouped-state-props.ts
@@ -53,7 +53,7 @@ export const useColumnsGroupedStateVariables = (
     dimensionsByIri,
     observations,
   });
-  const numericalYVariables = useNumericalYVariables(y, {
+  const numericalYVariables = useNumericalYVariables("column", y, {
     measuresByIri,
   });
   const numericalYErrorVariables = useNumericalYErrorVariables(y, {
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
@@ -1,4 +1,4 @@
-import { extent, group, max, min, rollup, sum } from "d3-array";
+import { extent, group, max, rollup, sum } from "d3-array";
 import {
   ScaleBand,
   ScaleLinear,
@@ -78,6 +78,7 @@ const useColumnsGroupedState = (
     getXLabel,
     yMeasure,
     getY,
+    getMinY,
     showYStandardError,
     yErrorMeasure,
     getYError,
@@ -238,11 +239,8 @@ const useColumnsGroupedState = (
     const xScaleTimeRange = scaleTime().domain(xScaleTimeRangeDomain);
 
     // y
-    const minValue = Math.min(
-      min(scalesData, (d) =>
-        getYErrorRange ? getYErrorRange(d)[0] : getY(d)
-      ) ?? 0,
-      0
+    const minValue = getMinY(scalesData, (d) =>
+      getYErrorRange ? getYErrorRange(d)[0] : getY(d)
     );
     const maxValue = Math.max(
       max(scalesData, (d) =>
@@ -252,11 +250,8 @@ const useColumnsGroupedState = (
     );
     const yScale = scaleLinear().domain([minValue, maxValue]).nice();
 
-    const minPaddingValue = Math.min(
-      min(paddingData, (d) =>
-        getYErrorRange ? getYErrorRange(d)[0] : getY(d)
-      ) ?? 0,
-      0
+    const minPaddingValue = getMinY(paddingData, (d) =>
+      getYErrorRange ? getYErrorRange(d)[0] : getY(d)
     );
     const maxPaddingValue = Math.max(
       max(paddingData, (d) =>
@@ -298,6 +293,7 @@ const useColumnsGroupedState = (
     getXAsDate,
     getYErrorRange,
     getY,
+    getMinY,
   ]);
 
   // Group
diff --git a/app/charts/column/columns-stacked-state-props.ts b/app/charts/column/columns-stacked-state-props.ts
@@ -49,7 +49,7 @@ export const useColumnsStackedStateVariables = (
     dimensionsByIri,
     observations,
   });
-  const numericalYVariables = useNumericalYVariables(y, {
+  const numericalYVariables = useNumericalYVariables("column", y, {
     measuresByIri,
   });
   const segmentVariables = useSegmentVariables(segment, {
diff --git a/app/charts/column/columns-state-props.ts b/app/charts/column/columns-state-props.ts
@@ -48,7 +48,7 @@ export const useColumnsStateVariables = (
     dimensionsByIri,
     observations,
   });
-  const numericalYVariables = useNumericalYVariables(y, {
+  const numericalYVariables = useNumericalYVariables("column", y, {
     measuresByIri,
   });
   const numericalYErrorVariables = useNumericalYErrorVariables(y, {
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
@@ -1,4 +1,4 @@
-import { extent, max, min, rollup, sum } from "d3-array";
+import { extent, max, rollup, sum } from "d3-array";
 import {
   ScaleBand,
   ScaleLinear,
@@ -69,6 +69,7 @@ const useColumnsState = (
     xTimeUnit,
     yMeasure,
     getY,
+    getMinY,
     showYStandardError,
     yErrorMeasure,
     getYError,
@@ -133,11 +134,8 @@ const useColumnsState = (
 
     const xScaleTimeRange = scaleTime().domain(xScaleTimeRangeDomain);
 
-    const minValue = Math.min(
-      min(scalesData, (d) =>
-        getYErrorRange ? getYErrorRange(d)[0] : getY(d)
-      ) ?? 0,
-      0
+    const minValue = getMinY(scalesData, (d) =>
+      getYErrorRange ? getYErrorRange(d)[0] : getY(d)
     );
     const maxValue = Math.max(
       max(scalesData, (d) =>
@@ -147,11 +145,8 @@ const useColumnsState = (
     );
     const yScale = scaleLinear().domain([minValue, maxValue]).nice();
 
-    const paddingMinValue = Math.min(
-      min(paddingData, (d) =>
-        getYErrorRange ? getYErrorRange(d)[0] : getY(d)
-      ) ?? 0,
-      0
+    const paddingMinValue = getMinY(paddingData, (d) =>
+      getYErrorRange ? getYErrorRange(d)[0] : getY(d)
     );
     const paddingMaxValue = Math.max(
       max(paddingData, (d) =>
@@ -185,6 +180,7 @@ const useColumnsState = (
     xDimension,
     chartConfig.cubes,
     sumsByX,
+    getMinY,
   ]);
 
   const { left, bottom } = useChartPadding({
diff --git a/app/charts/combo/combo-line-column-state-props.ts b/app/charts/combo/combo-line-column-state-props.ts
@@ -1,3 +1,4 @@
+import { min } from "d3-array";
 import { useCallback, useMemo } from "react";
 
 import { BaseYGetter, sortComboData } from "@/charts/combo/combo-state-props";
@@ -11,6 +12,7 @@ import {
   ChartStateData,
   RenderingVariables,
   SortingVariables,
+  shouldUseDynamicMinScaleValue,
   useBandXVariables,
   useBaseVariables,
   useChartData,
@@ -69,8 +71,14 @@ export const useComboLineColumnStateVariables = (
     iri: lineIri,
     label: getLabelWithUnit(measuresByIri[lineIri]),
     color: fields.y.colorMapping[lineIri],
-    getY: (d) => {
-      return d[lineIri] !== null ? Number(d[lineIri]) : null;
+    getY: (d) => (d[lineIri] !== null ? Number(d[lineIri]) : null),
+    getMinY: (data) => {
+      const minY =
+        min(data, (d) => (d[lineIri] !== null ? Number(d[lineIri]) : null)) ??
+        0;
+      return shouldUseDynamicMinScaleValue(measuresByIri[lineIri].scaleType)
+        ? minY
+        : Math.min(0, minY);
     },
   };
   const columnYGetter: YGetter = {
@@ -80,8 +88,13 @@ export const useComboLineColumnStateVariables = (
     iri: columnIri,
     label: getLabelWithUnit(measuresByIri[columnIri]),
     color: fields.y.colorMapping[columnIri],
-    getY: (d) => {
-      return d[columnIri] !== null ? Number(d[columnIri]) : null;
+    getY: (d) => (d[columnIri] !== null ? Number(d[columnIri]) : null),
+    getMinY: (data) => {
+      const minY =
+        min(data, (d) =>
+          d[columnIri] !== null ? Number(d[columnIri]) : null
+        ) ?? 0;
+      return Math.min(0, minY);
     },
   };
 
diff --git a/app/charts/combo/combo-line-column-state.tsx b/app/charts/combo/combo-line-column-state.tsx
@@ -28,7 +28,6 @@ import {
 } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
-import { shouldStartAtZero } from "@/charts/shared/scales";
 import { getTickNumber } from "@/charts/shared/ticks";
 import { TICK_FONT_SIZE } from "@/charts/shared/use-chart-theme";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
@@ -107,18 +106,14 @@ const useComboLineColumnState = (
     scalesData,
     paddingData,
     getY: variables.y.left.getY,
-    startAtZero:
-      variables.y.left.chartType === "column" ||
-      shouldStartAtZero(variables.y.left.dimension.scaleType),
+    getMinY: variables.y.left.getMinY,
   });
   const { yScale: yScaleRight, paddingYScale: paddingRightYScale } = useYScales(
     {
       scalesData,
       paddingData,
       getY: variables.y.right.getY,
-      startAtZero:
-        variables.y.right.chartType === "column" ||
-        shouldStartAtZero(variables.y.right.dimension.scaleType),
+      getMinY: variables.y.right.getMinY,
     }
   );
   const [minLeftValue, maxLeftValue] = yScaleLeft.domain();
diff --git a/app/charts/combo/combo-line-dual-state-props.ts b/app/charts/combo/combo-line-dual-state-props.ts
@@ -1,3 +1,4 @@
+import { min } from "d3-array";
 import { useCallback, useMemo } from "react";
 
 import { BaseYGetter, sortComboData } from "@/charts/combo/combo-state-props";
@@ -10,6 +11,7 @@ import {
   ChartStateData,
   SortingVariables,
   TemporalXVariables,
+  shouldUseDynamicMinScaleValue,
   useBaseVariables,
   useChartData,
   useTemporalXVariables,
@@ -52,8 +54,15 @@ export const useComboLineDualStateVariables = (
         iri: leftIri,
         label: getLabelWithUnit(measuresByIri[leftIri]),
         color: fields.y.colorMapping[leftIri],
-        getY: (d) => {
-          return d[leftIri] !== null ? Number(d[leftIri]) : null;
+        getY: (d) => (d[leftIri] !== null ? Number(d[leftIri]) : null),
+        getMinY: (data) => {
+          const minY =
+            min(data, (d) =>
+              d[leftIri] !== null ? Number(d[leftIri]) : null
+            ) ?? 0;
+          return shouldUseDynamicMinScaleValue(measuresByIri[leftIri].scaleType)
+            ? minY
+            : Math.min(0, minY);
         },
       },
       right: {
@@ -62,8 +71,17 @@ export const useComboLineDualStateVariables = (
         iri: rightIri,
         label: getLabelWithUnit(measuresByIri[rightIri]),
         color: fields.y.colorMapping[rightIri],
-        getY: (d) => {
-          return d[rightIri] !== null ? Number(d[rightIri]) : null;
+        getY: (d) => (d[rightIri] !== null ? Number(d[rightIri]) : null),
+        getMinY: (data) => {
+          const minY =
+            min(data, (d) =>
+              d[rightIri] !== null ? Number(d[rightIri]) : null
+            ) ?? 0;
+          return shouldUseDynamicMinScaleValue(
+            measuresByIri[rightIri].scaleType
+          )
+            ? minY
+            : Math.min(0, minY);
         },
       },
     },
diff --git a/app/charts/combo/combo-line-dual-state.tsx b/app/charts/combo/combo-line-dual-state.tsx
@@ -27,7 +27,6 @@ import {
 } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
-import { shouldStartAtZero } from "@/charts/shared/scales";
 import { getTickNumber } from "@/charts/shared/ticks";
 import { TICK_FONT_SIZE } from "@/charts/shared/use-chart-theme";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
@@ -62,7 +61,7 @@ const useComboLineDualState = (
   data: ChartStateData
 ): ComboLineDualState => {
   const { chartConfig } = chartProps;
-  const { xDimension, getX, getXAsString, y } = variables;
+  const { xDimension, getX, getXAsString } = variables;
   const { chartData, scalesData, timeRangeData, paddingData, allData } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
   const xKey = fields.x.componentIri;
@@ -90,14 +89,14 @@ const useComboLineDualState = (
     scalesData,
     paddingData,
     getY: variables.y.left.getY,
-    startAtZero: shouldStartAtZero(y.left.dimension.scaleType),
+    getMinY: variables.y.left.getMinY,
   });
   const { yScale: yScaleRight, paddingYScale: paddingRightYScale } = useYScales(
     {
       scalesData,
       paddingData,
       getY: variables.y.right.getY,
-      startAtZero: shouldStartAtZero(y.right.dimension.scaleType),
+      getMinY: variables.y.right.getMinY,
     }
   );
 
diff --git a/app/charts/combo/combo-line-single-state-props.ts b/app/charts/combo/combo-line-single-state-props.ts
@@ -1,3 +1,4 @@
+import { min } from "d3-array";
 import { useCallback, useMemo } from "react";
 
 import { BaseYGetter, sortComboData } from "@/charts/combo/combo-state-props";
@@ -6,6 +7,7 @@ import {
   ChartStateData,
   SortingVariables,
   TemporalXVariables,
+  shouldUseDynamicMinScaleValue,
   useBaseVariables,
   useChartData,
   useTemporalXVariables,
@@ -45,8 +47,13 @@ export const useComboLineSingleStateVariables = (
         iri,
         label: measuresByIri[iri].label,
         color: fields.y.colorMapping[iri],
-        getY: (d) => {
-          return d[iri] !== null ? Number(d[iri]) : null;
+        getY: (d) => (d[iri] !== null ? Number(d[iri]) : null),
+        getMinY: (data) => {
+          const minY =
+            min(data, (d) => (d[iri] !== null ? Number(d[iri]) : null)) ?? 0;
+          return shouldUseDynamicMinScaleValue(measuresByIri[iri].scaleType)
+            ? minY
+            : Math.min(0, minY);
         },
       })),
     },
diff --git a/app/charts/combo/combo-line-single-state.tsx b/app/charts/combo/combo-line-single-state.tsx
@@ -25,7 +25,6 @@ import {
 } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
-import { shouldStartAtZero } from "@/charts/shared/scales";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
 import { ComboLineSingleConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
@@ -98,9 +97,7 @@ const useComboLineSingleState = (
     scalesData,
     paddingData,
     getY: variables.y.lines.map((d) => d.getY),
-    startAtZero: variables.y.lines.some((d) =>
-      shouldStartAtZero(d.dimension.scaleType)
-    ),
+    getMinY: variables.y.lines.map((d) => d.getMinY),
   });
 
   // Dimensions
diff --git a/app/charts/combo/combo-state-props.ts b/app/charts/combo/combo-state-props.ts
@@ -9,6 +9,7 @@ export type BaseYGetter = {
   label: string;
   color: string;
   getY: (d: Observation) => number | null;
+  getMinY: (data: Observation[]) => number;
 };
 
 export const sortComboData = (
diff --git a/app/charts/combo/combo-state.ts b/app/charts/combo/combo-state.ts
@@ -98,23 +98,27 @@ type UseLeftRightYScalesOptions = {
   getY:
     | ((d: Observation) => number | null)
     | ((d: Observation) => number | null)[];
-  startAtZero?: boolean;
+  getMinY:
+    | ((data: Observation[]) => number)
+    | ((data: Observation[]) => number)[];
 };
 
 export const useYScales = (options: UseLeftRightYScalesOptions) => {
-  const { scalesData, paddingData, getY, startAtZero } = options;
-  const getMinY = (o: Observation) => {
-    return Array.isArray(getY) ? min(getY, (d) => d(o)) : getY(o);
+  const { scalesData, paddingData, getY, getMinY: _getMinY } = options;
+  const getMinY = (data: Observation[]) => {
+    return Array.isArray(_getMinY)
+      ? min(_getMinY.map((gmy) => gmy(data))) ?? 0
+      : _getMinY(data);
   };
   const getMaxY = (o: Observation) => {
     return Array.isArray(getY) ? max(getY, (d) => d(o)) : getY(o);
   };
 
-  const minValue = startAtZero ? 0 : min(scalesData, getMinY) ?? 0;
+  const minValue = getMinY(scalesData);
   const maxValue = max(scalesData, getMaxY) ?? 0;
   const yScale = scaleLinear().domain([minValue, maxValue]).nice();
 
-  const paddingMinValue = startAtZero ? 0 : min(paddingData, getMinY) ?? 0;
+  const paddingMinValue = getMinY(paddingData);
   const paddingMaxValue = max(paddingData, getMaxY) ?? 0;
   const paddingYScale = scaleLinear()
     .domain([paddingMinValue, paddingMaxValue])
diff --git a/app/charts/line/lines-state-props.ts b/app/charts/line/lines-state-props.ts
@@ -36,7 +36,7 @@ export const useLinesStateVariables = (
   const temporalXVariables = useTemporalXVariables(x, {
     dimensionsByIri,
   });
-  const numericalYVariables = useNumericalYVariables(y, {
+  const numericalYVariables = useNumericalYVariables("line", y, {
     measuresByIri,
   });
   const segmentVariables = useSegmentVariables(segment, {
diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
diff --git a/app/charts/pie/pie-state-props.ts b/app/charts/pie/pie-state-props.ts
diff --git a/app/charts/scatterplot/scatterplot-state-props.ts b/app/charts/scatterplot/scatterplot-state-props.ts
diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx
diff --git a/app/charts/shared/chart-state.ts b/app/charts/shared/chart-state.ts
diff --git a/app/charts/shared/scales.ts b/app/charts/shared/scales.ts
