Refactor unit base and label calculation in NonSymmetricalQuantileChart and SymmetricalQuantileChart to remove duplicate calculation

Author: JeanMarcMilletScality

ui/src/components/NonSymmetricalQuantileChart.tsx

@@ -89,32 +89,14 @@ const NonSymmetricalQuantileChart = ({
     ),
   });
 
-  // Calculate unit base and label
-  const valueBase = useMemo(() => {
-    if (!unitRange || !seriesQuantile.length) return 1;
-
-    const allValues = seriesQuantile.flatMap((serie: any) =>
-      serie.data
-        .map(([_, value]: [number, any]) =>
-          typeof value === 'string' ? parseFloat(value) : value,
-        )
-        .filter((v: any) => v !== null && !isNaN(v)),
-    );
-
-    const maxValue = Math.max(...allValues);
-    const unit = unitRange
-      .slice()
-      .reverse()
-      .find((range) => maxValue >= range.threshold);
-
-    return unit ? unit.threshold || 1 : 1;
-  }, [unitRange, seriesQuantile]);
-
-  const unitLabel = useMemo(() => {
+  const { valueBase, unitLabel } = useMemo(() => {
     if (yAxisType === 'percentage') {
-      return '%';
+      return { valueBase: 1, unitLabel: '%' };
+    }
+
+    if (!unitRange || !seriesQuantile.length) {
+      return { valueBase: 1, unitLabel: '' };
     }
-    if (!unitRange || !seriesQuantile.length) return '';
 
     const allValues = seriesQuantile.flatMap((serie: any) =>
       serie.data
@@ -130,7 +112,10 @@ const NonSymmetricalQuantileChart = ({
       .reverse()
       .find((range) => maxValue >= range.threshold);
 
-    return unit ? unit.label : '';
+    return {
+      valueBase: unit ? unit.threshold || 1 : 1,
+      unitLabel: unit ? unit.label : '',
+    };
   }, [unitRange, seriesQuantile, yAxisType]);
 
   const timeFormat = useMemo(() => {

ui/src/components/SymmetricalQuantileChart.tsx

@@ -100,34 +100,10 @@ const SymmetricalQuantileChart = ({
     ),
   });
 
-  // Calculate unit base (using first series data)
-  const valueBase = useMemo(() => {
-    if (!seriesQuantile.above?.length && !seriesQuantile.below?.length)
-      return 1;
-
-    const allSeries = [
-      ...(seriesQuantile.above || []),
-      ...(seriesQuantile.below || []),
-    ];
-    const allValues = allSeries.flatMap((serie: any) =>
-      serie.data
-        .map(([_, value]: [number, any]) =>
-          typeof value === 'string' ? parseFloat(value) : Math.abs(value),
-        )
-        .filter((v: any) => v !== null && !isNaN(v)),
-    );
-
-    const maxValue = Math.max(...allValues);
-    const unit = UNIT_RANGE_BS.slice()
-      .reverse()
-      .find((range: any) => maxValue >= range.threshold);
-
-    return unit ? unit.threshold || 1 : 1;
-  }, [seriesQuantile]);
-
-  const unitLabel = useMemo(() => {
-    if (!seriesQuantile.above?.length && !seriesQuantile.below?.length)
-      return '';
+  const { valueBase, unitLabel } = useMemo(() => {
+    if (!seriesQuantile.above?.length && !seriesQuantile.below?.length) {
+      return { valueBase: 1, unitLabel: '' };
+    }
 
     const allSeries = [
       ...(seriesQuantile.above || []),
@@ -146,7 +122,10 @@ const SymmetricalQuantileChart = ({
       .reverse()
       .find((range: any) => maxValue >= range.threshold);
 
-    return unit ? unit.label : '';
+    return {
+      valueBase: unit ? unit.threshold || 1 : 1,
+      unitLabel: unit ? unit.label : '',
+    };
   }, [seriesQuantile]);
 
   const colorSet = useMemo(() => {