From 22ebd7d9a54256dd10ed167137cc43832f0915e6 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 23 Oct 2024 11:48:25 +0200
Subject: [PATCH] Adjust error occurrence chart Y Axis width

---
 .../NewErrorCard/OccurrenceChart/index.tsx    | 26 +++++++++++++++++++
 src/utils/measureTextWidth.ts                 | 18 +++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/utils/measureTextWidth.ts

diff --git a/src/components/Errors/NewErrorCard/OccurrenceChart/index.tsx b/src/components/Errors/NewErrorCard/OccurrenceChart/index.tsx
index fef83c012..fea7db066 100644
--- a/src/components/Errors/NewErrorCard/OccurrenceChart/index.tsx
+++ b/src/components/Errors/NewErrorCard/OccurrenceChart/index.tsx
@@ -16,6 +16,7 @@ import {
 } from "../../../../hooks/useFetchData";
 import { useConfigSelector } from "../../../../store/config/useConfigSelector";
 import { isNumber } from "../../../../typeGuards/isNumber";
+import { measureTextWidth } from "../../../../utils/measureTextWidth";
 import { HistogramIcon } from "../../../common/icons/30px/HistogramIcon";
 import { PetalsIcon } from "../../../common/icons/32px/PetalsIcon";
 import { actions } from "../../actions";
@@ -29,6 +30,7 @@ import {
 } from "./types";
 
 const MAX_BAR_WIDTH = 32;
+const Y_AXIS_PADDING = 4;
 
 export const OccurrenceChart = ({
   errorId,
@@ -92,6 +94,29 @@ export const OccurrenceChart = ({
     }
   }, [data, errorId]);
 
+  const maxOccurrence = useMemo(
+    () =>
+      chartData?.dailyOccurrence.reduce((acc, cur) => {
+        return acc >= cur.value ? acc : cur.value;
+      }, 0) ?? 0,
+    [chartData]
+  );
+
+  const maxYAxisTickDigitsNumber = useMemo(
+    () => maxOccurrence.toString().length + 1,
+    [maxOccurrence]
+  );
+
+  const YAxisWidth = useMemo(
+    () =>
+      measureTextWidth("0".repeat(maxYAxisTickDigitsNumber), {
+        fontSize: theme.typographies.footNote.fontSize,
+        fontWeight: theme.typographies.footNote.fontWeight.regular,
+        fontFamily: theme.mainFont
+      }),
+    [maxYAxisTickDigitsNumber, theme]
+  );
+
   return (
     <s.HistogramContainer>
       <s.HistogramHeader>
@@ -140,6 +165,7 @@ export const OccurrenceChart = ({
                 tickLine={false}
                 tick={YAxisTickLabelStyles}
                 allowDecimals={false}
+                width={YAxisWidth + Y_AXIS_PADDING}
               />
               <Bar
                 isAnimationActive={false}
diff --git a/src/utils/measureTextWidth.ts b/src/utils/measureTextWidth.ts
new file mode 100644
index 000000000..4d38f9348
--- /dev/null
+++ b/src/utils/measureTextWidth.ts
@@ -0,0 +1,18 @@
+export interface FontOptions {
+  fontSize: number;
+  fontWeight: string | number;
+  fontFamily: string;
+}
+export const measureTextWidth = (text: string, font: FontOptions) => {
+  const { fontSize, fontWeight, fontFamily } = font;
+
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return 0;
+  }
+
+  context.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+
+  return context.measureText(text).width;
+};