Some stylistic changes to pie charts and to the disk space widget

_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])
 

_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>
         </>

_frontend/styles/main.scss

@@ -526,6 +526,10 @@ p {
     & + p {
         margin-top: 0.5rem;
     }
+
+    &.center {
+        text-align: center;
+    }
 }
 
 pre {