Refine y-axis tick formatting

Author: JavaZeroo

src/components/ChartContainer.jsx

@@ -447,6 +447,8 @@ export default function ChartContainer({
     return maxDecimals;
   }, [parsedData]);
 
+  const tickStep = useMemo(() => Math.pow(10, -yDecimalPlaces), [yDecimalPlaces]);
+
   const chartOptions = useMemo(() => ({
     responsive: true,
     maintainAspectRatio: false,
@@ -562,14 +564,15 @@ export default function ChartContainer({
         title: { display: true, text: 'Value' },
         bounds: 'data',
         ticks: {
+          stepSize: tickStep,
           callback: function (value) {
             return Number(value.toFixed(yDecimalPlaces));
           }
         }
       }
     },
     elements: { point: { radius: 0 } }
-  }), [xRange, onXRangeChange, yDecimalPlaces]);
+  }), [xRange, onXRangeChange, yDecimalPlaces, tickStep]);
 
   const buildComparisonChartData = (dataArray) => {
     const baselineVal =
@@ -704,11 +707,13 @@ export default function ChartContainer({
     const showComparison = dataArray.length >= 2;
 
     const yRange = calculateYRange(dataArray);
+    const yMin = Math.floor(yRange.min / tickStep) * tickStep;
+    const yMax = Math.ceil(yRange.max / tickStep) * tickStep;
     const options = {
       ...chartOptions,
       scales: {
         ...chartOptions.scales,
-        y: { ...chartOptions.scales.y, min: yRange.min, max: yRange.max }
+        y: { ...chartOptions.scales.y, min: yMin, max: yMax }
       }
     };
 
@@ -717,12 +722,14 @@ export default function ChartContainer({
     if (showComparison) {
       const compResult = buildComparisonChartData(dataArray);
       stats = compResult.stats.length > 0 ? compResult.stats : null;
-     const compRange = calculateYRange(compResult.datasets);
+      const compRange = calculateYRange(compResult.datasets);
+      const compMin = Math.floor(compRange.min / tickStep) * tickStep;
+      const compMax = Math.ceil(compRange.max / tickStep) * tickStep;
       const compOptions = {
         ...chartOptions,
         scales: {
           ...chartOptions.scales,
-          y: { ...chartOptions.scales.y, min: compRange.min, max: compRange.max }
+          y: { ...chartOptions.scales.y, min: compMin, max: compMax }
         }
       };
       const compActions = (

src/components/__tests__/ChartContainer.test.jsx

@@ -109,6 +109,7 @@ describe('ChartContainer', () => {
     expect(opts.interaction.axis).toBe('x');
     expect(opts.plugins.tooltip.mode).toBe('nearest');
     expect(opts.plugins.tooltip.axis).toBe('x');
+    expect(opts.scales.y.ticks.stepSize).toBe(0.1);
 
     // simulate hover to trigger sync
     const hover = __lineProps[0].options.onHover;
@@ -140,6 +141,7 @@ describe('ChartContainer', () => {
       {}
     ];
 
+    const startIndex = __lineProps.length;
     render(
       <ChartContainer
         files={files}
@@ -156,8 +158,9 @@ describe('ChartContainer', () => {
     screen.getByText(/metric3/);
 
     // data range applied (start 1 end 3 => 2 points for loss)
-    const currentProps = __lineProps.slice(-5);
+    const currentProps = __lineProps.slice(startIndex);
     expect(currentProps[0].data.datasets[0].data).toHaveLength(2);
+    expect(currentProps[0].options.scales.y.ticks.stepSize).toBe(1);
 
     // trigger container mouse leave
     const container = screen.getAllByTestId('line-chart')[0].parentElement;