refactor(MiniCharts): Simplify data handling in MiniAreaChart and MiniLineChart components

js/packages/react-ui/src/components/Charts/MiniAreaChart/MiniAreaChart.tsx

@@ -1,13 +1,9 @@
 import clsx from "clsx";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo } from "react";
 import { Area, AreaChart as RechartsAreaChart, XAxis } from "recharts";
 import { useId } from "../../../polyfills";
 import { ChartConfig, ChartContainer } from "../Charts";
-import {
-  DATA_KEY,
-  getRecentDataThatFits,
-  transformDataForChart,
-} from "../utils/AreaAndLine/MiniAreaAndLineUtils";
+import { DATA_KEY, transformDataForChart } from "../utils/AreaAndLine/MiniAreaAndLineUtils";
 import { useChartPalette, type PaletteName } from "../utils/PalletUtils";
 import { get2dChartConfig } from "../utils/dataUtils";
 import { MiniAreaChartData } from "./types";
@@ -39,37 +35,10 @@ export const MiniAreaChart = ({
   areaColor,
   useGradient = true,
 }: MiniAreaChartProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState<number>(0);
-
-  useEffect(() => {
-    if (!containerRef.current) {
-      return () => {};
-    }
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      // there is only one entry in the entries array because we are only observing the chart container
-      for (const entry of entries) {
-        setContainerWidth(entry.contentRect.width);
-      }
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  // Get the most recent data that fits in the container
-  const filteredData = useMemo(() => {
-    return getRecentDataThatFits(data, containerWidth);
-  }, [data, containerWidth]);
-
-  // Transform the filtered data to a consistent format for recharts
+  // Transform the data to a consistent format for recharts
   const chartData = useMemo(() => {
-    return transformDataForChart(filteredData);
-  }, [filteredData]);
+    return transformDataForChart(data);
+  }, [data]);
 
   const colors = useChartPalette({
     chartThemeName: theme,
@@ -104,7 +73,6 @@ export const MiniAreaChart = ({
         aspect: 1 / 1,
       }}
       onClick={onAreaClick}
-      ref={containerRef}
       className={clsx("crayon-charts-mini-area-chart-container", className)}
     >
       <RechartsAreaChart

js/packages/react-ui/src/components/Charts/MiniLineChart/MiniLineChart.tsx

@@ -1,12 +1,8 @@
 import clsx from "clsx";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo } from "react";
 import { Line, LineChart as RechartsLineChart, XAxis } from "recharts";
 import { ChartConfig, ChartContainer } from "../Charts";
-import {
-  DATA_KEY,
-  getRecentDataThatFits,
-  transformDataForChart,
-} from "../utils/AreaAndLine/MiniAreaAndLineUtils";
+import { DATA_KEY, transformDataForChart } from "../utils/AreaAndLine/MiniAreaAndLineUtils";
 import { useChartPalette, type PaletteName } from "../utils/PalletUtils";
 import { get2dChartConfig } from "../utils/dataUtils";
 import { MiniLineChartData } from "./types";
@@ -36,36 +32,10 @@ export const MiniLineChart = ({
   className,
   lineColor,
 }: MiniLineChartProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState<number>(0);
-
-  useEffect(() => {
-    if (!containerRef.current) {
-      return () => {};
-    }
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setContainerWidth(entry.contentRect.width);
-      }
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  // Get the most recent data that fits in the container
-  const filteredData = useMemo(() => {
-    return getRecentDataThatFits(data, containerWidth);
-  }, [data, containerWidth]);
-
-  // Transform the filtered data to a consistent format for recharts
+  // Transform the data to a consistent format for recharts
   const chartData = useMemo(() => {
-    return transformDataForChart(filteredData);
-  }, [filteredData]);
+    return transformDataForChart(data);
+  }, [data]);
 
   const colors = useChartPalette({
     chartThemeName: theme,
@@ -94,7 +64,6 @@ export const MiniLineChart = ({
         aspect: 1 / 1,
       }}
       onClick={onLineClick}
-      ref={containerRef}
       className={clsx("crayon-charts-mini-line-chart-container", className)}
     >
       <RechartsLineChart

js/packages/react-ui/src/components/Charts/utils/AreaAndLine/MiniAreaAndLineUtils.ts

@@ -33,35 +33,4 @@ export const transformDataForChart = (data: MiniChartData): ChartData => {
   });
 };
 
-/**
- * Filters data to include only the most recent items that can fit within the container width.
- * This function ensures the chart displays the latest data when space is limited.
- * Works for both MiniAreaChart and MiniLineChart components.
- *
- * @param data - The complete mini chart data array
- * @param containerWidth - The total width of the container in pixels
- * @returns A filtered array containing only the most recent data items that fit in the container
- */
-export const getRecentDataThatFits = (
-  data: MiniChartData,
-  containerWidth: number,
-): MiniChartData => {
-  if (containerWidth <= 0 || data.length === 0) {
-    return data;
-  }
-
-  // Calculate how many items can fit in the available space
-  const maxItems = Math.floor((containerWidth + 20) / MINI_ELEMENT_SPACING);
-  // +20 because the element spacing is between so if we have 2 element then its data 20px data
-  // so we need to add 20px to the container width to get the actual width of the data
-
-  // If all items fit, return all data
-  if (maxItems >= data.length) {
-    return data;
-  }
-
-  // Return the most recent items that fit
-  return data.slice(-maxItems);
-};
-
 export const DATA_KEY = "value";