andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Rerun prepare script

Browse source
This commit is contained in:
Andras Schmelczer 2026-04-06 11:13:52 +01:00
parent 349a6c1d53
commit 8614acdfae
24 changed files with 1132 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/map/StackedBarChart.tsx
View file

@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { SEGMENT_COLORS } from '../../lib/consts';
import { formatValue } from '../../lib/format';
import { formatValue, roundedPercentages } from '../../lib/format';
interface Segment {
name: string;
@ -30,6 +30,10 @@ function shortenLabel(name: string): string {
export default function StackedBarChart({ segments, total, colorMap }: StackedBarChartProps) {
const sortedSegments = useMemo(() => [...segments].sort((a, b) => b.value - a.value), [segments]);
const roundedPcts = useMemo(
() => roundedPercentages(sortedSegments.map((s) => s.value), total, 1),
[sortedSegments, total]
);
if (total === 0) {
return <div className="text-xs text-warm-400 dark:text-warm-500 italic">No data</div>;
@ -51,7 +55,7 @@ export default function StackedBarChart({ segments, total, colorMap }: StackedBa
backgroundColor:
colorMap?.[segment.name] ?? SEGMENT_COLORS[i % SEGMENT_COLORS.length],
}}
title={`${shortenLabel(segment.name)}: ${formatValue(segment.value)} (${pct.toFixed(1)}%)`}
title={`${shortenLabel(segment.name)}: ${formatValue(segment.value)} (${roundedPcts[i].toFixed(1)}%)`}
/>
);
})}

9
frontend/src/components/map/StackedEnumChart.tsx
View file

@ -1,4 +1,5 @@
import type { EnumFeatureStats } from '../../types';
import { roundedPercentages } from '../../lib/format';
interface StackedEnumChartProps {
components: { label: string; stats: EnumFeatureStats }[];
@ -30,7 +31,9 @@ export default function StackedEnumChart({
return (
<div className="space-y-1.5">
{visibleRows.map(({ label, stats }) => {
const total = Object.values(stats.counts).reduce((a, b) => a + b, 0);
const counts = valueOrder.map((value) => stats.counts[value] ?? 0);
const total = counts.reduce((a, b) => a + b, 0);
const roundedPcts = roundedPercentages(counts, total, 0);
return (
<div key={label} className="flex items-center gap-2 text-xs">
@ -39,7 +42,7 @@ export default function StackedEnumChart({
</span>
<div className="flex-1 flex h-3.5 rounded overflow-hidden bg-warm-200 dark:bg-warm-700">
{valueOrder.map((value, i) => {
const count = stats.counts[value] ?? 0;
const count = counts[i];
const pct = (count / total) * 100;
if (pct < 0.5) return null;
return (
@ -50,7 +53,7 @@ export default function StackedEnumChart({
width: `${pct}%`,
backgroundColor: valueColors[i],
}}
title={`${value}: ${count} (${pct.toFixed(0)}%)`}
title={`${value}: ${count} (${roundedPcts[i]}%)`}
/>
);
})}