Chart: Improve yAxis label formatting for small & large numbers (#2206)

GladysAssistant · Jan 24, 2025 · 4df3ab3 · 4df3ab3
1 parent 17e8c7b
commit 4df3ab3
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 28 deletions.
diff --git a/front/src/components/boxs/chart/ApexChartAreaOptions.js b/front/src/components/boxs/chart/ApexChartAreaOptions.js
@@ -1,3 +1,5 @@
+import { yAxisFormatter } from './yAxisFormatter';
+
 const getApexChartAreaOptions = ({ displayAxes, height, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
@@ -52,13 +54,7 @@ const getApexChartAreaOptions = ({ displayAxes, height, series, colors, locales,
     yaxis: {
       labels: {
         padding: 4,
-        formatter: function(value) {
-          if (Math.abs(value) < 1) {
-            return value; // For very low values, like crypto prices, use the normal value
-          } else {
-            return value.toFixed(2); // 2 decimal places for other values
-          }
-        }
+        formatter: yAxisFormatter
       }
     },
     colors,

diff --git a/front/src/components/boxs/chart/ApexChartBarOptions.js b/front/src/components/boxs/chart/ApexChartBarOptions.js
@@ -1,3 +1,5 @@
+import { yAxisFormatter } from './yAxisFormatter';
+
 const getApexChartBarOptions = ({ displayAxes, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
@@ -60,13 +62,7 @@ const getApexChartBarOptions = ({ displayAxes, series, colors, locales, defaultL
     yaxis: {
       labels: {
         padding: 4,
-        formatter: function(value) {
-          if (Math.abs(value) < 1) {
-            return value; // For very low values, like crypto prices, use the normal value
-          } else {
-            return value.toFixed(2); // 2 decimal places for other values
-          }
-        }
+        formatter: yAxisFormatter
       }
     },
     colors,

diff --git a/front/src/components/boxs/chart/ApexChartLineOptions.js b/front/src/components/boxs/chart/ApexChartLineOptions.js
@@ -1,3 +1,5 @@
+import { yAxisFormatter } from './yAxisFormatter';
+
 const getApexChartLineOptions = ({ height, displayAxes, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
@@ -51,13 +53,7 @@ const getApexChartLineOptions = ({ height, displayAxes, series, colors, locales,
     yaxis: {
       labels: {
         padding: 4,
-        formatter: function(value) {
-          if (Math.abs(value) < 1) {
-            return value; // For very low values, like crypto prices, use the normal value
-          } else {
-            return value.toFixed(2); // 2 decimal places for other values
-          }
-        }
+        formatter: yAxisFormatter
       }
     },
     colors,

diff --git a/front/src/components/boxs/chart/ApexChartStepLineOptions.js b/front/src/components/boxs/chart/ApexChartStepLineOptions.js
@@ -1,3 +1,5 @@
+import { yAxisFormatter } from './yAxisFormatter';
+
 const getApexChartStepLineOptions = ({ height, displayAxes, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
@@ -50,13 +52,7 @@ const getApexChartStepLineOptions = ({ height, displayAxes, series, colors, loca
     yaxis: {
       labels: {
         padding: 4,
-        formatter: function(value) {
-          if (Math.abs(value) < 1) {
-            return value; // For very low values, like crypto prices, use the normal value
-          } else {
-            return value.toFixed(2); // 2 decimal places for other values
-          }
-        }
+        formatter: yAxisFormatter
       }
     },
     colors,

diff --git a/front/src/components/boxs/chart/yAxisFormatter.js b/front/src/components/boxs/chart/yAxisFormatter.js
@@ -0,0 +1,26 @@
+const yAxisFormatter = value => {
+  if (Number.isNaN(value)) {
+    return value;
+  }
+  // Handle zero as a special case
+  if (value === 0) {
+    return '0';
+  }
+
+  // Round to 4 significant digits
+  const significantDigits = 4;
+  const roundedValue = parseFloat(value.toPrecision(significantDigits));
+
+  // For very small or very large numbers, use scientific notation
+  if (Math.abs(roundedValue) < 0.001 || Math.abs(roundedValue) >= 1e6) {
+    return roundedValue.toExponential(2); // Scientific notation with 2 decimals
+  }
+
+  // For normal values, format with up to 2 decimal places
+  return roundedValue.toLocaleString(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+};
+
+export { yAxisFormatter };