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 ? (

Errore "{err}"

) : ( - + <> + +

+ Spazio totale {byteSizeToString(total)} +

+ )} 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 {