fix(app): resize chart label font sizes

trashtrackteam · Mar 2, 2024 · 2c78280 · 2c78280
1 parent de08011
commit 2c78280
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git 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,25 +135,17 @@ 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}
                     onMouseEnter={onPieEnter}
                     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
@@ -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
@@ -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" />