From 2c78280c6be4f51712619e0f64fefe26130b215c Mon Sep 17 00:00:00 2001
From: elizielx <yehezkieldio35@gmail.com>
Date: Sat, 2 Mar 2024 22:18:15 +0800
Subject: [PATCH] fix(app): resize chart label font sizes

---
 libs/components/src/charts/report-status.tsx | 24 +++++++++-----------
 libs/components/src/charts/total-report.tsx  |  2 +-
 libs/components/src/charts/total-trash.tsx   |  2 +-
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/libs/components/src/charts/report-status.tsx b/libs/components/src/charts/report-status.tsx
index 3d90a03..cd503f0 100644
--- a/libs/components/src/charts/report-status.tsx
+++ b/libs/components/src/charts/report-status.tsx
@@ -84,7 +84,13 @@ const renderActiveShape = (props) => {
             />
             <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
             <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-            <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${name}`}</text>
+            <text
+                x={ex + (cos >= 0 ? 1 : -1) * 12}
+                y={ey}
+                fontSize={10}
+                textAnchor={textAnchor}
+                fill="#333"
+            >{`${name}`}</text>
         </g>
     );
 };
@@ -129,18 +135,9 @@ export function PieChartReportStatus() {
     console.log("chartData", chartData.data);
 
     return (
-        <ResponsiveContainer width="100%" height={600}>
-            <PieChart
-                width={500}
-                height={400}
-                margin={{
-                    top: 10,
-                    right: 30,
-                    left: 0,
-                    bottom: 0,
-                }}
-            >
-                <Legend layout="horizontal" verticalAlign="top" align="center" />
+        <ResponsiveContainer className="p-2 m-0" width="100%" height={400}>
+            <PieChart>
+                <Legend layout="horizontal" fontSize={12} verticalAlign="top" align="center" />
                 <Pie
                     activeIndex={activeIndex}
                     activeShape={renderActiveShape}
@@ -148,6 +145,7 @@ export function PieChartReportStatus() {
                     label
                     data={chartData.data}
                     dataKey="value"
+                    fontSize={10}
                     cx="50%"
                     cy="50%"
                     outerRadius={60}
diff --git a/libs/components/src/charts/total-report.tsx b/libs/components/src/charts/total-report.tsx
index bc228e2..f480cfb 100644
--- a/libs/components/src/charts/total-report.tsx
+++ b/libs/components/src/charts/total-report.tsx
@@ -32,7 +32,7 @@ export function AreaChartTotalReport() {
         <ResponsiveContainer className="p-2 m-0" width="100%" height={200}>
             <AreaChart data={chartData.data}>
                 <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="name" />
+                <XAxis fontSize={10} dataKey="name" />
                 <YAxis />
                 <Tooltip />
                 <Area type="monotone" dataKey="total" stroke="#8884d8" fill="#8884d8" />
diff --git a/libs/components/src/charts/total-trash.tsx b/libs/components/src/charts/total-trash.tsx
index 8060b8d..45d9007 100644
--- a/libs/components/src/charts/total-trash.tsx
+++ b/libs/components/src/charts/total-trash.tsx
@@ -32,7 +32,7 @@ export function AreaChartTotalTrash() {
         <ResponsiveContainer className="p-2 m-0" width="100%" height={200}>
             <AreaChart data={chartData.data}>
                 <CartesianGrid strokeDasharray="3 3" />
-                <XAxis fontSize={12} dataKey="name" />
+                <XAxis fontSize={10} dataKey="name" />
                 <YAxis />
                 <Tooltip />
                 <Area type="monotone" dataKey="total" stroke="#8884d8" fill="#8884d8" />