jonas/fast-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed dark light colors for charts

Browse Source
This commit is contained in:
jonas
2026-03-10 23:22:38 +01:00
parent 22cde819ec
commit 1e1a9fe4a0
2 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.tsx
View File

@@ -56,7 +56,7 @@ export default function App() {
<main className="max-w-[1600px] mx-auto px-4 py-4"> <main className="max-w-[1600px] mx-auto px-4 py-4">
<Routes> <Routes>
<Route path="/" element={<ItemsPage />} /> <Route path="/" element={<ItemsPage />} />
<Route path="/stats" element={<StatsPage />} /> <Route path="/stats" element={<StatsPage dark={dark} />} />
<Route path="/deleted" element={<DeletedItemsPage />} /> <Route path="/deleted" element={<DeletedItemsPage />} />
</Routes> </Routes>
</main> </main>

57
client/src/pages/StatsPage.tsx
View File

@@ -7,11 +7,21 @@ import { api } from '../api';
import type { StatsResponse } from '../types'; import type { StatsResponse } from '../types';
import { STATUS_LABELS, type ItemStatus } from '../types'; import { STATUS_LABELS, type ItemStatus } from '../types';
const COLORS = ['#111827', '#6b7280', '#3b82f6', '#ef4444', '#f59e0b', '#10b981', '#8b5cf6', '#ec4899']; const COLORS_LIGHT = ['#111827', '#6b7280', '#3b82f6', '#ef4444', '#f59e0b', '#10b981', '#8b5cf6', '#ec4899'];
const COLORS_DARK = ['#e5e7eb', '#9ca3af', '#60a5fa', '#f87171', '#fbbf24', '#34d399', '#a78bfa', '#f472b6'];
export default function StatsPage() { export default function StatsPage({ dark }: { dark: boolean }) {
const [stats, setStats] = useState<StatsResponse | null>(null); const [stats, setStats] = useState<StatsResponse | null>(null);
const colors = dark ? COLORS_DARK : COLORS_LIGHT;
const gridColor = dark ? '#374151' : '#f3f4f6';
const tickColor = dark ? '#9ca3af' : '#6b7280';
const tooltipBg = dark ? '#1f2937' : '#ffffff';
const tooltipBorder = dark ? '#374151' : '#e5e7eb';
const barFill = dark ? '#e5e7eb' : '#111827';
const barFillAlt = dark ? '#9ca3af' : '#6b7280';
const areaStroke = dark ? '#e5e7eb' : '#111827';
useEffect(() => { useEffect(() => {
api.getStats().then(setStats); api.getStats().then(setStats);
}, []); }, []);
@@ -48,13 +58,13 @@ export default function StatsPage() {
<ChartCard title="Inflow / Outflow"> <ChartCard title="Inflow / Outflow">
<ResponsiveContainer width="100%" height={220}> <ResponsiveContainer width="100%" height={220}>
<AreaChart data={stats.inflowOutflow}> <AreaChart data={stats.inflowOutflow}>
<CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" /> <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
<XAxis dataKey="month" tick={{ fontSize: 11 }} /> <XAxis dataKey="month" tick={{ fontSize: 11, fill: tickColor }} />
<YAxis tick={{ fontSize: 11 }} allowDecimals={false} /> <YAxis tick={{ fontSize: 11, fill: tickColor }} allowDecimals={false} />
<Tooltip contentStyle={{ fontSize: 12 }} /> <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} />
<Area type="monotone" dataKey="added" name="Added" stroke="#111827" fill="#111827" fillOpacity={0.1} /> <Area type="monotone" dataKey="added" name="Added" stroke={areaStroke} fill={areaStroke} fillOpacity={0.15} />
<Area type="monotone" dataKey="removed" name="Removed" stroke="#ef4444" fill="#ef4444" fillOpacity={0.1} /> <Area type="monotone" dataKey="removed" name="Removed" stroke="#ef4444" fill="#ef4444" fillOpacity={0.15} />
<Legend wrapperStyle={{ fontSize: 12 }} /> <Legend wrapperStyle={{ fontSize: 12, color: tickColor }} />
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
</ChartCard> </ChartCard>
@@ -72,15 +82,16 @@ export default function StatsPage() {
innerRadius={50} innerRadius={50}
outerRadius={80} outerRadius={80}
dataKey="value" dataKey="value"
label={({ name, value }) => `${name}: ${value}`} label={({ x, y, name, value }: { x: number; y: number; name: string; value: number }) => (
<text x={x} y={y} fill={tickColor} fontSize={11} textAnchor="middle" dominantBaseline="central">{name}: {value}</text>
)}
labelLine={false} labelLine={false}
style={{ fontSize: 11 }}
> >
{statusData.map((_, i) => ( {statusData.map((_, i) => (
<Cell key={i} fill={COLORS[i % COLORS.length]} /> <Cell key={i} fill={colors[i % colors.length]} />
))} ))}
</Pie> </Pie>
<Tooltip contentStyle={{ fontSize: 12 }} /> <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</ChartCard> </ChartCard>
@@ -91,11 +102,11 @@ export default function StatsPage() {
<ChartCard title="Value by Category"> <ChartCard title="Value by Category">
<ResponsiveContainer width="100%" height={220}> <ResponsiveContainer width="100%" height={220}>
<BarChart data={stats.valueByCategory} layout="vertical"> <BarChart data={stats.valueByCategory} layout="vertical">
<CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" /> <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
<XAxis type="number" tick={{ fontSize: 11 }} tickFormatter={v => `${v} kr`} /> <XAxis type="number" tick={{ fontSize: 11, fill: tickColor }} tickFormatter={v => `${v} kr`} />
<YAxis type="category" dataKey="category" tick={{ fontSize: 11 }} width={100} /> <YAxis type="category" dataKey="category" tick={{ fontSize: 11, fill: tickColor }} width={100} />
<Tooltip contentStyle={{ fontSize: 12 }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} /> <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} />
<Bar dataKey="value" fill="#111827" radius={[0, 4, 4, 0]} /> <Bar dataKey="value" fill={barFill} radius={[0, 4, 4, 0]} />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</ChartCard> </ChartCard>
@@ -106,11 +117,11 @@ export default function StatsPage() {
<ChartCard title="Value by Location"> <ChartCard title="Value by Location">
<ResponsiveContainer width="100%" height={220}> <ResponsiveContainer width="100%" height={220}>
<BarChart data={stats.valueByLocation} layout="vertical"> <BarChart data={stats.valueByLocation} layout="vertical">
<CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" /> <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
<XAxis type="number" tick={{ fontSize: 11 }} tickFormatter={v => `${v} kr`} /> <XAxis type="number" tick={{ fontSize: 11, fill: tickColor }} tickFormatter={v => `${v} kr`} />
<YAxis type="category" dataKey="location" tick={{ fontSize: 11 }} width={100} /> <YAxis type="category" dataKey="location" tick={{ fontSize: 11, fill: tickColor }} width={100} />
<Tooltip contentStyle={{ fontSize: 12 }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} /> <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} />
<Bar dataKey="value" fill="#6b7280" radius={[0, 4, 4, 0]} /> <Bar dataKey="value" fill={barFillAlt} radius={[0, 4, 4, 0]} />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</ChartCard> </ChartCard>