From a40a1f2f0fcb715d57262d95b75f64b8f586c2fa Mon Sep 17 00:00:00 2001
From: jihea-park <jihea.park@navercorp.com>
Date: Thu, 23 Jan 2025 18:12:54 +0900
Subject: [PATCH] [#11982] Math.round to long maxValue

---
 .../URL/summary/UrlSummaryColumns.tsx         |  2 +-
 .../ui/src/components/common/MiniChart.tsx    | 49 ++++++++++---------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryColumns.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryColumns.tsx
index b5b533298bad..095039b62d96 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryColumns.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryColumns.tsx
@@ -152,7 +152,7 @@ export const summaryColumns = ({
     accessorKey: 'chart',
     header: 'Volume',
     meta: {
-      headerClassName: 'w-40 text-sm font-medium text-center',
+      headerClassName: 'w-52 text-sm font-medium text-center',
       cellClassName: 'text-[-webkit-right]',
     },
     cell: (props) => {
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/common/MiniChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/common/MiniChart.tsx
index 2675a98c28de..59ae418dae06 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/common/MiniChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/common/MiniChart.tsx
@@ -1,37 +1,38 @@
 import { Chart } from '@pinpoint-fe/ui/constants';
 import { ComposedChart, ReferenceLine } from 'recharts';
 import { useRechart } from '../ReChart/useRechart';
+import { ChartContainer } from '../ui';
 
 export interface MiniChart {
   chart: Chart;
 }
 
 export const MiniChart = ({ chart }: MiniChart) => {
-  const { data, maxValue, renderChartChildComponents } = useRechart(chart);
+  const { data, chartConfig, maxValue, renderChartChildComponents } = useRechart(chart);
 
   return (
-    <ComposedChart
-      width={128}
-      height={40}
-      data={data}
-      margin={{
-        top: 6,
-        right: 30,
-        bottom: 6,
-        left: 2,
-      }}
-    >
-      {data?.length && maxValue > -1 && (
-        <ReferenceLine
-          y={maxValue}
-          stroke="black"
-          strokeDasharray="3 3"
-          position="middle"
-          label={{ position: 'right', value: maxValue }}
-          ifOverflow="extendDomain"
-        />
-      )}
-      {renderChartChildComponents()}
-    </ComposedChart>
+    <ChartContainer config={chartConfig} className="w-full h-[40px]">
+      <ComposedChart
+        data={data}
+        margin={{
+          top: 6,
+          right: 60,
+          bottom: 6,
+          left: 2,
+        }}
+      >
+        {data?.length && maxValue > -1 && (
+          <ReferenceLine
+            y={maxValue}
+            stroke="black"
+            strokeDasharray="3 3"
+            position="middle"
+            label={{ position: 'right', value: Math.round(maxValue * 100) / 100 }}
+            ifOverflow="extendDomain"
+          />
+        )}
+        {renderChartChildComponents()}
+      </ComposedChart>
+    </ChartContainer>
   );
 };