[#12105] Apply resize to billboard.js chart

pinpoint-apm · Feb 27, 2025 · ef6098d · ef6098d
1 parent e50be0f
commit ef6098d
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 13 deletions.
diff --git a/web-frontend/src/main/v3/packages/ui/src/atoms/layoutWithContentSidebar.ts b/web-frontend/src/main/v3/packages/ui/src/atoms/layoutWithContentSidebar.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const layoutWithContentSidebarAtom = atom<number[]>();
diff --git a/...src/main/v3/packages/ui/src/components/ErrorAnalysis/charts/ErrorAnalysisChartFetcher.tsx b/...src/main/v3/packages/ui/src/components/ErrorAnalysis/charts/ErrorAnalysisChartFetcher.tsx
@@ -7,6 +7,8 @@ import BillboardJS, { IChart } from '@billboard.js/react';
 import { abbreviateNumber, formatNewLinedDateString } from '@pinpoint-fe/ui/src/utils';
 import { isValid } from 'date-fns';
 import { cn } from '../../../lib';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface ErrorAnalysisChartFetcherProps {
   className?: string;
@@ -17,6 +19,7 @@ export const ErrorAnalysisChartFetcher = ({
   className,
   emptyMessage = 'No Data',
 }: ErrorAnalysisChartFetcherProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const { data } = useGetErrorAnalysisChartData();
   const chartComponent = React.useRef<IChart>(null);
   const options: ChartOptions = {
@@ -83,8 +86,15 @@ export const ErrorAnalysisChartFetcher = ({
         value: (v: number) => abbreviateNumber(v, ['', 'K', 'M', 'G']),
       },
     },
+    resize: {
+      timer: false,
+    },
   };
 
+  React.useEffect(() => {
+    chartComponent.current?.instance?.resize();
+  }, [sizes]);
+
   React.useEffect(() => {
     const chart = chartComponent.current?.instance;
 

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/ChartCore.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/ChartCore.tsx
@@ -8,6 +8,8 @@ import BillboardJS, { IChart } from '@billboard.js/react';
 import { cn, DEFAULT_CHART_CONFIG } from '../../../lib';
 import { InspectorAgentChart, InspectorApplicationChart } from '@pinpoint-fe/ui/src/constants';
 import { formatNewLinedDateString } from '@pinpoint-fe/ui/src/utils';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface ChartCoreProps {
   data: InspectorAgentChart.Response | InspectorApplicationChart.Response;
@@ -24,6 +26,7 @@ export const ChartCore = ({
   emptyMessage = 'No Data',
   style,
 }: ChartCoreProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const prevData = React.useRef([] as (string | number | null)[][]);
   const chartComponent = React.useRef<IChart>(null);
   const defaultOptions = {
@@ -78,17 +81,15 @@ export const ChartCore = ({
       order: '',
     },
     resize: {
-      auto: false,
+      timer: false,
     },
   };
   const options = deepmerge(defaultOptions, chartOptions);
 
   React.useEffect(() => {
-    window.addEventListener('resize', () => {
-      const chart = chartComponent.current?.instance;
-      chart?.resize();
-    });
-  }, []);
+    const chart = chartComponent.current?.instance;
+    chart?.resize();
+  }, [sizes]);
 
   React.useEffect(() => {
     const chart = chartComponent.current?.instance;

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Layout/LayoutWithContentSidebar.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Layout/LayoutWithContentSidebar.tsx
@@ -4,6 +4,8 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '@pinpoint-fe/ui/src/components/ui/resizable';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
+import { useAtom } from 'jotai';
 
 export interface LayoutWithContentSidebarProps {
   children: React.ReactNode[];
@@ -15,11 +17,20 @@ export const LayoutWithContentSidebar = ({
   contentWrapperClassName,
 }: LayoutWithContentSidebarProps) => {
   const [sidebar, content, ...rest] = children;
+  const [sizes, setSizes] = useAtom(layoutWithContentSidebarAtom);
+
+  function handleLayout(sizes: number[]) {
+    setSizes(sizes);
+  }
 
   return (
     <>
-      <ResizablePanelGroup direction="horizontal" className="h-[calc(100%-4rem)]">
-        <ResizablePanel defaultSize={15} minSize={10} maxSize={30}>
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="h-[calc(100%-4rem)]"
+        onLayout={handleLayout}
+      >
+        <ResizablePanel defaultSize={sizes?.[0] || 15} minSize={10} maxSize={30}>
           {sidebar}
         </ResizablePanel>
         <ResizableHandle withHandle />

diff --git a/...d/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx b/...d/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx
@@ -23,6 +23,8 @@ import {
   Separator,
 } from '../../ui';
 import { formatNewLinedDateString, getFormat } from '@pinpoint-fe/ui/src/utils';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface SystemMetricChartFetcherProps {
   chartInfo: SystemMetricMetricInfo.MetricInfoData;
@@ -35,6 +37,7 @@ export const SystemMetricChartFetcher = ({
   className,
   emptyMessage = 'No Data',
 }: SystemMetricChartFetcherProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const { metricDefinitionId, tagGroup } = chartInfo;
   const { data: tagData } = useGetSystemMetricTagsData({
     metricDefinitionId: tagGroup ? metricDefinitionId : '',
@@ -102,6 +105,7 @@ export const SystemMetricChartFetcher = ({
     },
     resize: {
       auto: false,
+      timer: false,
     },
     transition: {
       duration: 0,
@@ -120,11 +124,9 @@ export const SystemMetricChartFetcher = ({
   }, [tagData]);
 
   React.useEffect(() => {
-    window.addEventListener('resize', () => {
-      const chart = chartComponent.current?.instance;
-      chart?.resize();
-    });
-  }, []);
+    const chart = chartComponent.current?.instance;
+    chart?.resize();
+  }, [sizes]);
 
   React.useEffect(() => {
     const chart = chartComponent.current?.instance;

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatApdexChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatApdexChart.tsx
@@ -8,6 +8,8 @@ import { isValid } from 'date-fns';
 import { UrlStatChartType as UrlStatChartApi, colors } from '@pinpoint-fe/ui/src/constants';
 import { cn } from '../../../lib';
 import { formatNewLinedDateString, numberInDecimal } from '@pinpoint-fe/ui/src/utils';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface UrlStatApdexChartProps {
   data: UrlStatChartApi.Response | undefined;
@@ -22,6 +24,7 @@ export const UrlStatApdexChart = ({
   className,
   emptyMessage = 'No Data',
 }: UrlStatApdexChartProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const chartComponent = React.useRef<IChart>(null);
   const yData = data
     ? data.metricValueGroups[0].metricValues.map(({ fieldName, values }) => {
@@ -95,6 +98,9 @@ export const UrlStatApdexChart = ({
         value: (v: number) => `${numberInDecimal(v, 2)}`,
       },
     },
+    resize: {
+      timer: false,
+    },
   };
 
   React.useEffect(() => {
@@ -113,6 +119,10 @@ export const UrlStatApdexChart = ({
     });
   }, [data]);
 
+  React.useEffect(() => {
+    chartComponent?.current?.instance?.resize();
+  }, [sizes]);
+
   return (
     <BillboardJS
       bb={bb}

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatDefaultChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatDefaultChart.tsx
@@ -5,6 +5,8 @@ import bb, { ChartOptions, line } from 'billboard.js';
 // @ts-ignore
 import BillboardJS, { IChart } from '@billboard.js/react';
 import { cn } from '../../../lib';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface UrlStatDefaultChartProps {
   className?: string;
@@ -15,6 +17,7 @@ export const UrlStatDefaultChart = ({
   className,
   emptyMessage = 'No Data',
 }: UrlStatDefaultChartProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const chartComponent = React.useRef<IChart>(null);
   const options: ChartOptions = {
     data: {
@@ -49,8 +52,15 @@ export const UrlStatDefaultChart = ({
     transition: {
       duration: 0,
     },
+    resize: {
+      timer: false,
+    },
   };
 
+  React.useEffect(() => {
+    chartComponent?.current?.instance?.resize();
+  }, [sizes]);
+
   return (
     <BillboardJS
       bb={bb}

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatFailureCountChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatFailureCountChart.tsx
@@ -8,6 +8,8 @@ import { abbreviateNumber, formatNewLinedDateString } from '@pinpoint-fe/ui/src/
 import { isValid } from 'date-fns';
 import { UrlStatChartType as UrlStatChartApi, colors } from '@pinpoint-fe/ui/src/constants';
 import { cn } from '../../../lib';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface UrlStatFailureCountChartProps {
   data: UrlStatChartApi.Response | undefined;
@@ -31,6 +33,7 @@ export const UrlStatFailureCountChart = ({
   className,
   emptyMessage = 'No Data',
 }: UrlStatFailureCountChartProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const chartComponent = React.useRef<IChart>(null);
   const yData = data
     ? data.metricValueGroups[0].metricValues.map(({ fieldName, values }) => {
@@ -106,6 +109,9 @@ export const UrlStatFailureCountChart = ({
         value: (v: number) => abbreviateNumber(v, ['', 'K', 'M', 'G']),
       },
     },
+    resize: {
+      timer: false,
+    },
   };
 
   React.useEffect(() => {
@@ -124,6 +130,10 @@ export const UrlStatFailureCountChart = ({
     });
   }, [data]);
 
+  React.useEffect(() => {
+    chartComponent?.current?.instance?.resize();
+  }, [sizes]);
+
   return (
     <BillboardJS
       bb={bb}

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatLatencyChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatLatencyChart.tsx
@@ -8,6 +8,8 @@ import { addCommas, formatNewLinedDateString, numberInInteger } from '@pinpoint-
 import { isValid } from 'date-fns';
 import { UrlStatChartType as UrlStatChartApi, colors } from '@pinpoint-fe/ui/src/constants';
 import { cn } from '../../../lib';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface UrlStatLatencyChartProps {
   data: UrlStatChartApi.Response | undefined;
@@ -22,6 +24,7 @@ export const UrlStatLatencyChart = ({
   className,
   emptyMessage = 'No Data',
 }: UrlStatLatencyChartProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const chartComponent = React.useRef<IChart>(null);
   const yData = data
     ? data.metricValueGroups[0].metricValues.map(({ fieldName, values }) => {
@@ -95,6 +98,9 @@ export const UrlStatLatencyChart = ({
         value: (v: number) => `${addCommas(numberInInteger(v))}ms`,
       },
     },
+    resize: {
+      timer: false,
+    },
   };
 
   React.useEffect(() => {
@@ -113,6 +119,10 @@ export const UrlStatLatencyChart = ({
     });
   }, [data]);
 
+  React.useEffect(() => {
+    chartComponent?.current?.instance?.resize();
+  }, [sizes]);
+
   return (
     <BillboardJS
       bb={bb}

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatTotalCountChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatTotalCountChart.tsx
@@ -8,6 +8,8 @@ import { abbreviateNumber, formatNewLinedDateString } from '@pinpoint-fe/ui/src/
 import { isValid } from 'date-fns';
 import { UrlStatChartType as UrlStatChartApi, colors } from '@pinpoint-fe/ui/src/constants';
 import { cn } from '../../../lib';
+import { useAtomValue } from 'jotai';
+import { layoutWithContentSidebarAtom } from '@pinpoint-fe/ui/src/atoms/layoutWithContentSidebar';
 
 export interface UrlStatTotalCountChartProps {
   data: UrlStatChartApi.Response | undefined;
@@ -31,6 +33,7 @@ export const UrlStatTotalCountChart = ({
   className,
   emptyMessage = 'No Data',
 }: UrlStatTotalCountChartProps) => {
+  const sizes = useAtomValue(layoutWithContentSidebarAtom);
   const chartComponent = React.useRef<IChart>(null);
   const yData = data
     ? data.metricValueGroups[0].metricValues.map(({ fieldName, values }) => {
@@ -106,6 +109,9 @@ export const UrlStatTotalCountChart = ({
         value: (v: number) => abbreviateNumber(v, ['', 'K', 'M', 'G']),
       },
     },
+    resize: {
+      timer: false,
+    },
   };
 
   React.useEffect(() => {
@@ -124,6 +130,10 @@ export const UrlStatTotalCountChart = ({
     });
   }, [data]);
 
+  React.useEffect(() => {
+    chartComponent?.current?.instance?.resize();
+  }, [sizes]);
+
   return (
     <BillboardJS
       bb={bb}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { atom } from 'jotai';

		export const layoutWithContentSidebarAtom = atom<number[]>();