feat: Make the y scale's min value dynamic in some cases

Author: bprusinowski

app/charts/combo/combo-line-column-state.tsx

@@ -28,6 +28,7 @@ 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";
@@ -106,14 +107,18 @@ const useComboLineColumnState = (
     scalesData,
     paddingData,
     getY: variables.y.left.getY,
-    startAtZero: variables.y.left.chartType === "column",
+    startAtZero:
+      variables.y.left.chartType === "column" ||
+      shouldStartAtZero(variables.y.left.dimension.scaleType),
   });
   const { yScale: yScaleRight, paddingYScale: paddingRightYScale } = useYScales(
     {
       scalesData,
       paddingData,
       getY: variables.y.right.getY,
-      startAtZero: variables.y.right.chartType === "column",
+      startAtZero:
+        variables.y.right.chartType === "column" ||
+        shouldStartAtZero(variables.y.right.dimension.scaleType),
     }
   );
   const [minLeftValue, maxLeftValue] = yScaleLeft.domain();

app/charts/combo/combo-line-dual-state.tsx

@@ -27,6 +27,7 @@ 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";
@@ -61,7 +62,7 @@ const useComboLineDualState = (
   data: ChartStateData
 ): ComboLineDualState => {
   const { chartConfig } = chartProps;
-  const { xDimension, getX, getXAsString } = variables;
+  const { xDimension, getX, getXAsString, y } = variables;
   const { chartData, scalesData, timeRangeData, paddingData, allData } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
   const xKey = fields.x.componentIri;
@@ -89,12 +90,14 @@ const useComboLineDualState = (
     scalesData,
     paddingData,
     getY: variables.y.left.getY,
+    startAtZero: shouldStartAtZero(y.left.dimension.scaleType),
   });
   const { yScale: yScaleRight, paddingYScale: paddingRightYScale } = useYScales(
     {
       scalesData,
       paddingData,
       getY: variables.y.right.getY,
+      startAtZero: shouldStartAtZero(y.right.dimension.scaleType),
     }
   );
 

app/charts/combo/combo-line-single-state.tsx

@@ -25,6 +25,7 @@ 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";
@@ -97,6 +98,9 @@ const useComboLineSingleState = (
     scalesData,
     paddingData,
     getY: variables.y.lines.map((d) => d.getY),
+    startAtZero: variables.y.lines.some((d) =>
+      shouldStartAtZero(d.dimension.scaleType)
+    ),
   });
 
   // Dimensions

app/charts/line/lines-state.tsx

@@ -29,6 +29,7 @@ import {
 } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
+import { getMaybeDynamicMinYScaleValue } from "@/charts/shared/scales";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
 import { useSize } from "@/charts/shared/use-width";
@@ -132,12 +133,18 @@ const useLinesState = (
   const xScaleTimeRange = scaleTime().domain(xScaleTimeRangeDomain);
 
   // y
-  const minValue = Math.min(min(scalesData, getY) ?? 0, 0);
+  const minValue = getMaybeDynamicMinYScaleValue(
+    yMeasure.scaleType,
+    min(scalesData, getY)
+  );
   const maxValue = max(scalesData, getY) ?? 0;
   const yDomain = [minValue, maxValue];
   const yScale = scaleLinear().domain(yDomain).nice();
 
-  const paddingMinValue = Math.min(min(paddingData, getY) ?? 0, 0);
+  const paddingMinValue = getMaybeDynamicMinYScaleValue(
+    yMeasure.scaleType,
+    min(paddingData, getY)
+  );
   const paddingMaxValue = max(paddingData, getY) ?? 0;
   const paddingYScale = scaleLinear()
     .domain([paddingMinValue, paddingMaxValue])

app/charts/scatterplot/scatterplot-state.tsx

@@ -20,6 +20,7 @@ import {
 } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { TooltipScatterplot } from "@/charts/shared/interaction/tooltip-content";
+import { getMaybeDynamicMinYScaleValue } from "@/charts/shared/scales";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
 import { useSize } from "@/charts/shared/use-width";
 import { ScatterPlotConfig, SortingField } from "@/configurator";
@@ -53,6 +54,7 @@ const useScatterplotState = (
   const {
     getX,
     xAxisLabel,
+    yMeasure,
     getY,
     yAxisLabel,
     segmentDimension,
@@ -78,12 +80,18 @@ const useScatterplotState = (
   const xDomain = [xMinValue, xMaxValue];
   const xScale = scaleLinear().domain(xDomain).nice();
 
-  const yMinValue = Math.min(min(scalesData, (d) => getY(d)) ?? 0, 0);
+  const yMinValue = getMaybeDynamicMinYScaleValue(
+    yMeasure.scaleType,
+    min(scalesData, getY)
+  );
   const yMaxValue = max(scalesData, getY) ?? 0;
   const yDomain = [yMinValue, yMaxValue];
   const yScale = scaleLinear().domain(yDomain).nice();
 
-  const paddingYMinValue = Math.min(min(paddingData, (d) => getY(d)) ?? 0, 0);
+  const paddingYMinValue = getMaybeDynamicMinYScaleValue(
+    yMeasure.scaleType,
+    min(paddingData, getY)
+  );
   const paddingYMaxValue = max(paddingData, getY) ?? 0;
   const paddingYScale = scaleLinear()
     .domain([paddingYMinValue, paddingYMaxValue])

app/charts/shared/scales.ts

@@ -0,0 +1,12 @@
+import { ScaleType } from "@/graphql/query-hooks";
+
+export const shouldStartAtZero = (scaleType: ScaleType | undefined) => {
+  return scaleType === ScaleType.Ratio;
+};
+
+export const getMaybeDynamicMinYScaleValue = (
+  scaleType: ScaleType | undefined,
+  minValue: number = 0
+) => {
+  return shouldStartAtZero(scaleType) ? Math.min(0, minValue) : minValue;
+};