f2a24d7341
Migrated pitch-deck from breakpilot-pwa to breakpilot-core. Container: bp-core-pitch-deck on port 3012. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { FMResult } from '@/lib/types'
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
ReferenceLine,
|
|
Cell,
|
|
} from 'recharts'
|
|
|
|
interface WaterfallChartProps {
|
|
results: FMResult[]
|
|
lang: 'de' | 'en'
|
|
}
|
|
|
|
export default function WaterfallChart({ results, lang }: WaterfallChartProps) {
|
|
// Sample quarterly data for cleaner display
|
|
const quarterlyData = results.filter((_, i) => i % 3 === 0).map((r) => {
|
|
const netCash = r.revenue_eur - r.total_costs_eur
|
|
return {
|
|
label: `${r.year.toString().slice(2)}/Q${Math.ceil(r.month_in_year / 3)}`,
|
|
month: r.month,
|
|
revenue: Math.round(r.revenue_eur),
|
|
costs: Math.round(-r.total_costs_eur),
|
|
net: Math.round(netCash),
|
|
cashBalance: Math.round(r.cash_balance_eur),
|
|
}
|
|
})
|
|
|
|
const formatValue = (value: number) => {
|
|
if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
|
|
if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(0)}k`
|
|
return value.toString()
|
|
}
|
|
|
|
return (
|
|
<div className="w-full h-[220px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={quarterlyData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
|
<XAxis
|
|
dataKey="label"
|
|
stroke="rgba(255,255,255,0.3)"
|
|
tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 9 }}
|
|
interval={1}
|
|
/>
|
|
<YAxis
|
|
stroke="rgba(255,255,255,0.1)"
|
|
tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
|
|
tickFormatter={formatValue}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
background: 'rgba(10, 10, 26, 0.95)',
|
|
border: '1px solid rgba(255,255,255,0.1)',
|
|
borderRadius: 12,
|
|
color: '#fff',
|
|
fontSize: 11,
|
|
}}
|
|
formatter={(value: number, name: string) => [
|
|
formatValue(value) + ' EUR',
|
|
name === 'revenue' ? (lang === 'de' ? 'Umsatz' : 'Revenue')
|
|
: name === 'costs' ? (lang === 'de' ? 'Kosten' : 'Costs')
|
|
: 'Net',
|
|
]}
|
|
/>
|
|
<ReferenceLine y={0} stroke="rgba(255,255,255,0.2)" />
|
|
<Bar dataKey="revenue" radius={[3, 3, 0, 0]} barSize={14}>
|
|
{quarterlyData.map((entry, i) => (
|
|
<Cell key={i} fill="rgba(34, 197, 94, 0.7)" />
|
|
))}
|
|
</Bar>
|
|
<Bar dataKey="costs" radius={[0, 0, 3, 3]} barSize={14}>
|
|
{quarterlyData.map((entry, i) => (
|
|
<Cell key={i} fill="rgba(239, 68, 68, 0.5)" />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
}
|