yAxis fix

apps/dashboard/src/components/charts/area-chart.tsx

@@ -13,7 +13,7 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { findLargestValue, getYAxisWidth } from "./utils";
+import { getYAxisWidth, roundToNearestFactor } from "./utils";
 
 const ToolTipContent = ({ payload, currency }) => {
   const { value = 0, date } = payload.at(0)?.payload ?? {};
@@ -44,7 +44,6 @@ const ToolTipContent = ({ payload, currency }) => {
 
 export function AreaChart({ currency, data }) {
   const locale = useCurrentLocale();
-  const maxValue = findLargestValue(data);
 
   const getLabel = (value: number) => {
     return formatAmount({
@@ -56,6 +55,11 @@ export function AreaChart({ currency, data }) {
     });
   };
 
+  // TODO: Get highest value used in yAxis
+  const getLabelMaxValue = getLabel(
+    roundToNearestFactor(data.map(({ value }) => value))
+  );
+
   return (
     <ResponsiveContainer width="100%" height={290}>
       <BaseAreaChart data={data}>
@@ -105,7 +109,7 @@ export function AreaChart({ currency, data }) {
           axisLine={false}
           tickMargin={10}
           tickFormatter={getLabel}
-          width={getYAxisWidth(getLabel(maxValue))}
+          width={getYAxisWidth(getLabelMaxValue)}
           tick={{
             fill: "#606060",
             fontSize: 12,

apps/dashboard/src/components/charts/bar-chart.tsx

@@ -15,7 +15,7 @@ import {
   YAxis,
 } from "recharts";
 import { Status } from "./status";
-import { getYAxisWidth } from "./utils";
+import { getYAxisWidth, roundToNearestFactor } from "./utils";
 
 // Override console.error
 // This is a hack to suppress the warning about missing defaultProps in recharts library as of version 2.12
@@ -116,12 +116,6 @@ export function BarChart({ data, disabled, currency }) {
     ),
   }));
 
-  const maxValue = Math.max(
-    ...data.result.map((item) =>
-      Math.max(item.current.value, item.previous.value)
-    )
-  );
-
   const getLabel = (value: number) => {
     return formatAmount({
       maximumFractionDigits: 0,
@@ -132,6 +126,14 @@ export function BarChart({ data, disabled, currency }) {
     });
   };
 
+  const getLabelMaxValue = getLabel(
+    roundToNearestFactor(
+      data.result.map((item) =>
+        Math.max(item.current.value, item.previous.value)
+      )
+    )
+  );
+
   return (
     <div className="relative">
       <div className="space-x-4 absolute right-0 -top-10 hidden md:flex">
@@ -167,7 +169,7 @@ export function BarChart({ data, disabled, currency }) {
             tickLine={false}
             axisLine={false}
             tickFormatter={(value) => getLabel(disabled ? 0 : value)}
-            width={getYAxisWidth(maxValue)}
+            width={getYAxisWidth(getLabelMaxValue)}
             tick={{
               fill: "#606060",
               fontSize: 12,

apps/dashboard/src/components/charts/utils.ts

@@ -1,9 +1,42 @@
 export function getYAxisWidth(value: string) {
-  return value.toString().length * 8.5 + 8.5;
+  return value.toString().length * 7 + 2;
 }
 
-export function findLargestValue(data) {
-  return data?.reduce((max, obj) => {
-    return obj.value > max ? obj.value : max;
-  }, data[0].value);
+export function roundToNearestFactor(numbers: number[]) {
+  if (numbers.length < 2) return numbers;
+
+  // Sort the array
+  numbers.sort((a, b) => a - b);
+
+  // Calculate gaps
+  const gaps = [];
+  for (let i = 1; i < numbers.length; i++) {
+    gaps.push(numbers[i] - numbers[i - 1]);
+  }
+
+  // Determine the rounding factor: using the maximum gap
+  const maxGap = Math.max(...gaps);
+
+  // Alternatively, you can define a fixed interval, e.g., 250000
+  // let roundingFactor = 250000;
+
+  // Rounding factor based on maxGap, rounded to the nearest significant figure
+  let roundingFactor = Math.pow(10, Math.floor(Math.log10(maxGap)));
+
+  // Adjust rounding factor to align with 250000, 500000, 750000, etc.
+  if (roundingFactor < maxGap) {
+    roundingFactor = Math.ceil(maxGap / 250000) * 250000;
+  }
+
+  // Helper function to round to nearest multiple of factor
+  function roundToFactor(number, factor) {
+    return Math.round(number / factor) * factor;
+  }
+
+  // Round each number to the nearest rounding factor
+  const roundedNumbers = numbers.map((num) =>
+    roundToFactor(num, roundingFactor)
+  );
+
+  return Math.max(...roundedNumbers);
 }