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

Update chars

Browse source
This commit is contained in:
Andras Schmelczer 2026-02-07 10:00:13 +00:00
parent 609dd5278c
commit 46585a4b2b
8 changed files with 522 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/components/StackedBarChart.tsx
View file

@ -1,5 +1,5 @@
import { useMemo } from 'react';
import { CRIME_SEGMENT_COLORS } from '../lib/consts';
import { SEGMENT_COLORS } from '../lib/consts';
import { formatValue } from '../lib/format';
interface Segment {
@ -12,10 +12,11 @@ interface StackedBarChartProps {
total: number;
}
/** Shorten crime category names for the legend */
function shortenCrimeName(name: string): string {
/** Strip common suffixes/prefixes to produce short legend labels */
function shortenLabel(name: string): string {
return name
.replace(' (avg/yr)', '')
.replace(/^% /, '')
.replace('and sexual offences', '')
.replace('and arson', '')
.replace('from the person', '')
@ -43,33 +44,33 @@ export default function StackedBarChart({ segments, total }: StackedBarChartProp
<div className="flex h-4 rounded overflow-hidden bg-warm-200 dark:bg-warm-700">
{sortedSegments.map((segment, i) => {
const pct = (segment.value / total) * 100;
if (pct < 0.5) return null; // Skip tiny segments
if (pct < 0.5) return null;
return (
<div
key={segment.name}
className="h-full transition-all"
className="h-full"
style={{
width: `${pct}%`,
backgroundColor: CRIME_SEGMENT_COLORS[i % CRIME_SEGMENT_COLORS.length],
backgroundColor: SEGMENT_COLORS[i % SEGMENT_COLORS.length],
}}
title={`${shortenCrimeName(segment.name)}: ${formatValue(segment.value)} (${pct.toFixed(1)}%)`}
title={`${shortenLabel(segment.name)}: ${formatValue(segment.value)} (${pct.toFixed(1)}%)`}
/>
);
})}
</div>
{/* Legend - compact grid */}
{/* Legend */}
<div className="flex flex-wrap gap-x-3 gap-y-0.5">
{sortedSegments.map((segment, i) => (
<div key={segment.name} className="flex items-center gap-1">
<span
className="w-2 h-2 rounded-sm shrink-0"
style={{
backgroundColor: CRIME_SEGMENT_COLORS[i % CRIME_SEGMENT_COLORS.length],
backgroundColor: SEGMENT_COLORS[i % SEGMENT_COLORS.length],
}}
/>
<span className="text-[10px] text-warm-600 dark:text-warm-400">
{shortenCrimeName(segment.name)}
{shortenLabel(segment.name)}
</span>
<span className="text-[10px] text-warm-400 dark:text-warm-500">
{formatValue(segment.value)}