From c54bf850fad0c04d6a5093b4775bff69b52acc59 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Thu, 7 Jul 2022 19:11:29 +0200
Subject: [PATCH] Some stylistic changes to pie charts and to the disk space
 widget

---
 _frontend/src/components/charts/PieChart.jsx  | 31 ++++++++++++++-----
 .../src/components/widgets/DiskUsage.jsx      | 12 ++++++-
 _frontend/styles/main.scss                    |  4 +++
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/_frontend/src/components/charts/PieChart.jsx b/_frontend/src/components/charts/PieChart.jsx
index c4f9073..42c6221 100644
--- a/_frontend/src/components/charts/PieChart.jsx
+++ b/_frontend/src/components/charts/PieChart.jsx
@@ -3,11 +3,12 @@ import { hashCode } from '../../util.jsx'
 
 let pieChartPiecesSeed = 934635493
 
-export const PieChart = ({ parts, labels, total }) => {
+export const PieChart = ({ parts, labels, total, totalLabel }) => {
     const [seed] = useState(() => pieChartPiecesSeed++)
 
-    parts = parts || [1]
-    labels = labels || parts
+    parts ??= [1]
+    labels ??= parts
+    totalLabel ??= ''
 
     const canvasRef = useRef()
 
@@ -33,7 +34,7 @@ export const PieChart = ({ parts, labels, total }) => {
             g.scale(2, 2)
             g.translate(width / 2, height / 2)
 
-            g.font = `16px 'Open Sans'`
+            g.font = `bold 16px 'Open Sans'`
             g.textAlign = 'center'
             g.textBaseline = 'middle'
 
@@ -65,15 +66,31 @@ export const PieChart = ({ parts, labels, total }) => {
                 g.lineTo(0, 0)
                 g.stroke()
 
-                g.fillStyle = '#333'
+                const { width: w } = g.measureText(label)
+                const textRadius = Math.sqrt(w ** 2 + 16 ** 2) / 2
+
+                g.fillStyle = `hsl(${((hashCode(`${i} ${seed}`) % 0xff) * 360) / 0xff}, 80%, 15%)`
                 g.fillText(
                     label,
-                    Math.cos(acc + angle / 2 - 0.5 * Math.PI) * width * 0.5 * 0.9125,
-                    Math.sin(acc + angle / 2 - 0.5 * Math.PI) * width * 0.5 * 0.9125
+                    Math.cos(acc + angle / 2 - 0.5 * Math.PI) *
+                        (width * 0.5 * 0.7 - textRadius * 0.8),
+                    Math.sin(acc + angle / 2 - 0.5 * Math.PI) *
+                        (width * 0.5 * 0.7 - textRadius * 0.8)
                 )
 
                 acc += angle
             })
+
+            if (totalLabel && Math.abs(2 * Math.PI - acc) > Math.PI / 32) {
+                const totalLabelAngle = acc + (2 * Math.PI - acc) / 2
+
+                g.fillStyle = '#333'
+                g.fillText(
+                    totalLabel,
+                    Math.cos(totalLabelAngle - 0.5 * Math.PI) * width * 0.5 * 0.5,
+                    Math.sin(totalLabelAngle - 0.5 * Math.PI) * width * 0.5 * 0.5
+                )
+            }
         }
     }, [canvasRef, parts, labels])
 
diff --git a/_frontend/src/components/widgets/DiskUsage.jsx b/_frontend/src/components/widgets/DiskUsage.jsx
index 6cc7426..8f56b44 100644
--- a/_frontend/src/components/widgets/DiskUsage.jsx
+++ b/_frontend/src/components/widgets/DiskUsage.jsx
@@ -44,7 +44,17 @@ export const DiskUsage = ({ disk, diskLabel }) => {
                 {err ? (
                     <p>Errore "{err}"</p>
                 ) : (
-                    <PieChart parts={[used]} labels={[byteSizeToString(used)]} total={total} />
+                    <>
+                        <PieChart
+                            parts={[used]}
+                            labels={[byteSizeToString(used)]}
+                            total={total}
+                            totalLabel={''}
+                        />
+                        <p class="center">
+                            Spazio totale <strong>{byteSizeToString(total)}</strong>
+                        </p>
+                    </>
                 )}
             </div>
         </>
diff --git a/_frontend/styles/main.scss b/_frontend/styles/main.scss
index 86748f7..1c36dfa 100644
--- a/_frontend/styles/main.scss
+++ b/_frontend/styles/main.scss
@@ -526,6 +526,10 @@ p {
     & + p {
         margin-top: 0.5rem;
     }
+
+    &.center {
+        text-align: center;
+    }
 }
 
 pre {