Improve Y axis computation

Author: JBWatenbergScality

package-lock.json

@@ -297,7 +297,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     {} as Record<string, ChartColors | string>,
   );
 
-  const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } =
+  const { rechartsBars, unitLabel, roundReferenceValue, rechartsData, topDomain } =
     useChartData(
       bars || [],
       type,
@@ -363,7 +363,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
 
             <YAxis
               interval={0}
-              domain={[0, roundReferenceValue]}
+              domain={[0, topDomain]}
               ticks={getTicks(roundReferenceValue, false)}
               tickFormatter={
                 (value) => new Intl.NumberFormat('fr-FR').format(value) // Add a space as thousand separator

src/lib/components/barchartv2/Barchart.component.tsx

@@ -5,47 +5,39 @@ import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 export const getRoundReferenceValue = (value: number): number => {
   if (value <= 0) return 1; // Default for zero or negative values
+  
+  // Buffer the value by 10% to avoid being too close to the edge of the chart
+  const bufferedValue = value * 1.1;
+
+  if (value >= 10) {
+    const remainder = value % 10;
+    const incremented = value + (10 - remainder);
+
+    // If the remainder is less than 5, round down to the nearest 10
+    if (remainder < 5) {
+      return value - remainder;
+    }
+
+    // If incrementing would exceed the buffered max, also round down
+    if (incremented > bufferedValue) {
+      return value - remainder;
+    }
+
+    // Otherwise, round up to the next 10
+    return incremented;
+  }
 
-  // Get the magnitude (10^n where n is the number of digits - 1)
   const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
 
-  // Buffer the value by 10% to avoid being too close to the edge of the chart
-  const bufferedValue = value * 1.1;
+  const remainder = bufferedValue % magnitude;
 
-  // Normalized value between 1 and 10
-  const normalized = bufferedValue / magnitude;
-
-  // Round to nice numbers based on normalized value
-  // skip 1.5, 3, 4, 7.5 as top value for better chart
-  // appearance for small values
-  let result: number;
-
-  if (normalized <= 1) result = magnitude;
-  else if (value > 10 && normalized <= 1.5) result = 1.5 * magnitude;
-  else if (normalized <= 2) result = 2 * magnitude;
-  else if (value > 10 && normalized <= 2.5) result = 2.5 * magnitude;
-  else if (value > 10 && normalized <= 3) result = 3 * magnitude;
-  else if (value > 10 && normalized <= 4) result = 4 * magnitude;
-  else if (normalized <= 5) result = 5 * magnitude;
-  else if (value > 10 && normalized <= 6) result = 6 * magnitude;
-  else if (value > 10 && normalized <= 8) result = 8 * magnitude;
-  else if (normalized <= 10) result = 10 * magnitude;
-  else result = 10 * magnitude;
-
-  return result;
+  return remainder === 0 ? bufferedValue : bufferedValue - remainder;
 };
 
 export const getTicks = (topValue: number, isSymmetrical: boolean) => {
-  if (topValue < 10) {
-    if (isSymmetrical) {
-      return [-topValue, 0, topValue];
-    } else {
-      return [0, topValue];
-    }
-  }
   const possibleTickNumbers = [4, 3];
   const numberOfTicks =
-    possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 2; // Default to 2 ticks if no match
+    possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 3; // Default to 2 ticks if no match
   const tickInterval = topValue / (numberOfTicks - 1);
   const ticks = Array.from(
     { length: numberOfTicks },
@@ -339,7 +331,7 @@ export const computeUnitLabelAndRoundReferenceValue = (
 ) => {
   if (!unitRange) {
     const roundReferenceValue = getRoundReferenceValue(maxValue);
-    return { unitLabel: undefined, roundReferenceValue, rechartsData: data };
+    return { unitLabel: undefined, roundReferenceValue, rechartsData: data, topDomain: maxValue * 1.1 };
   }
 
   const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
@@ -354,7 +346,7 @@ export const computeUnitLabelAndRoundReferenceValue = (
     });
     return normalizedDataPoint;
   });
-  return { unitLabel, roundReferenceValue, rechartsData };
+  return { unitLabel, roundReferenceValue, rechartsData, topDomain: topValue * 1.1 };
 };
 
 /**
@@ -534,12 +526,13 @@ export const useChartData = <T extends BarchartBars>(
 
   const maxValue = getMaxBarValue(filteredData, stacked);
 
-  const { unitLabel, roundReferenceValue, rechartsData } =
+  const { unitLabel, roundReferenceValue, rechartsData, topDomain } =
     computeUnitLabelAndRoundReferenceValue(filteredData, maxValue, unitRange);
 
   return {
     rechartsBars: filteredRechartsBars,
     unitLabel,
+    topDomain,
     roundReferenceValue,
     rechartsData,
   };

src/lib/components/barchartv2/utils.ts

@@ -360,13 +360,7 @@ export function LineTimeSerieChart({
   }, [chartData]);
 
   // 3. Transform the data base on the valuebase
-  const { topValue, unitLabel, rechartsData } = useMemo(() => {
-    if (yAxisType === 'percentage')
-      return {
-        topValue: 100,
-        unitLabel: '%',
-        rechartsData: chartData,
-      };
+  const { topValue, unitLabel, rechartsData, topDomain } = useMemo(() => {
 
     const values = chartData.flatMap((dataPoint) =>
       Object.entries(dataPoint)
@@ -383,19 +377,20 @@ export function LineTimeSerieChart({
     if (values.length === 0) {
       return {
         topValue: 100, // Default value for empty charts
-        unitLabel: '',
+        unitLabel: yAxisType === 'percentage' ? '%' : '',
         rechartsData: [],
+        topDomain: 100,
       };
     }
 
     const top = Math.abs(Math.max(...values));
     const bottom = Math.abs(Math.min(...values));
     const maxValue = Math.max(top, bottom);
-
-    const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
+    const { valueBase, unitLabel } = yAxisType === 'percentage' ? { valueBase: 1, unitLabel: '%' } : getUnitLabel(unitRange ?? [], maxValue);
     // Use round reference value to add extra padding to the top value
-    const topValue = getRoundReferenceValue(maxValue / valueBase);
-
+    const basedValue = maxValue / valueBase
+    const topDomain = basedValue * 1.1;
+    const topValue = getRoundReferenceValue(basedValue);
     const rechartsData = chartData.map((dataPoint) => {
       const normalizedDataPoint = { ...dataPoint };
       Object.entries(dataPoint).forEach(([key, value]) => {
@@ -406,7 +401,7 @@ export function LineTimeSerieChart({
       return normalizedDataPoint;
     });
 
-    return { topValue, unitLabel, rechartsData };
+    return { topValue, unitLabel, rechartsData, topDomain };
   }, [chartData, yAxisType, unitRange]);
 
   // Group series by resource and create color mapping
@@ -522,10 +517,10 @@ export function LineTimeSerieChart({
               }}
               domain={
                 yAxisType === 'percentage'
-                  ? [0, 100]
+                  ? [0, topDomain]
                   : yAxisType === 'symmetrical'
-                    ? [-topValue, topValue]
-                    : [0, topValue]
+                    ? [-topDomain, topDomain]
+                    : [0, topDomain]
               }
               axisLine={{ stroke: theme.border }}
               tick={{