fix: chart y axis width

rare-magma · Jun 25, 2023 · e7463cb · e7463cb
1 parent cf2e6dc
commit e7463cb
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
@@ -12,6 +12,7 @@ import { intlFormat, median } from "../../utils";
 import { Budget } from "../Budget/Budget";
 import ChartTooltip from "./ChartTooltip";
 import { BsPercent } from "react-icons/bs";
+import useDynamicYAxisWidth from "./DynamicYAxis";
 
 interface ChartProps {
   header: string;
@@ -50,6 +51,9 @@ function Chart({
   legendValues2,
   unit,
 }: ChartProps) {
+  const { yAxisWidth, setChartRef } = useDynamicYAxisWidth({
+    yAxisWidthModifier: (x) => x + 10,
+  });
   const tickFormatter = (value: number, index: number) => {
     return intlFormat(value, intlConfig?.currency as string);
   };
@@ -64,6 +68,7 @@ function Chart({
         >
           <AreaChart
             data={budgetList}
+            ref={setChartRef}
             margin={{
               top: 10,
               right: 0,
@@ -75,12 +80,14 @@ function Chart({
               <YAxis
                 stroke="var(--textcolor)"
                 style={{ fontFamily: "ui-monospace, monospace" }}
+                width={yAxisWidth}
                 unit={unit}
               />
             ) : (
               <YAxis
                 stroke="var(--textcolor)"
                 style={{ fontFamily: "ui-monospace, monospace" }}
+                width={yAxisWidth}
                 tickFormatter={tickFormatter}
               />
             )}

diff --git a/src/components/Chart/DynamicYAxis.ts b/src/components/Chart/DynamicYAxis.ts
@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { useState, useCallback, useMemo } from "react";
+
+const RECHART_CERTESIAN_AXIS_TICK_VALUE_SELECTOR = `.recharts-cartesian-axis-tick-value[orientation="left"],
+.recharts-cartesian-axis-tick-value[orientation="right"]`;
+
+type Props = {
+  yAxisWidthModifier?: (width: number) => number;
+};
+
+type ReturnValues = {
+  yAxisWidth: undefined | number;
+  setChartRef: (chartRef: any) => void;
+};
+
+const useDynamicYAxisWidth = (props: void | Props): ReturnValues => {
+  const { yAxisWidthModifier } = props || {};
+  const [yAxisWidthState, setYAxisWidthState] = useState(undefined);
+
+  const setChartRef = useCallback(
+    (chartRef: any) => {
+      if (chartRef != null && chartRef.container != null) {
+        const tickValueElements = chartRef.container.querySelectorAll(
+          RECHART_CERTESIAN_AXIS_TICK_VALUE_SELECTOR
+        );
+        const highestWidth = [...tickValueElements]
+          .map((el) => {
+            const boundingRect = el.getBoundingClientRect();
+            if (boundingRect != null && boundingRect.width != null) {
+              return boundingRect.width;
+            }
+            return 0;
+          })
+          .reduce((accumulator, value) => {
+            if (accumulator < value) {
+              return value;
+            }
+            return accumulator;
+          }, 0);
+        setYAxisWidthState(highestWidth);
+      }
+    },
+    [setYAxisWidthState]
+  );
+
+  const yAxisWidth = useMemo(() => {
+    if (yAxisWidthModifier != null && yAxisWidthState != null) {
+      return yAxisWidthModifier(yAxisWidthState);
+    }
+    return yAxisWidthState;
+  }, [yAxisWidthModifier, yAxisWidthState]);
+
+  return {
+    yAxisWidth,
+    setChartRef,
+  };
+};
+
+export default useDynamicYAxisWidth;