feat: add pitch-deck service to core infrastructure
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>
This commit is contained in:
Benjamin Boenisch
200
pitch-deck/components/ui/FinancialChart.tsx
Normal file
200
pitch-deck/components/ui/FinancialChart.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client'
|
||||
|
||||
import { FMResult, FMComputeResponse } from '@/lib/types'
|
||||
import {
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Line,
|
||||
ComposedChart,
|
||||
Area,
|
||||
ReferenceLine,
|
||||
Brush,
|
||||
} from 'recharts'
|
||||
|
||||
interface FinancialChartProps {
|
||||
activeResults: FMComputeResponse | null
|
||||
compareResults?: Map<string, FMComputeResponse>
|
||||
compareMode?: boolean
|
||||
scenarioColors?: Record<string, string>
|
||||
lang: 'de' | 'en'
|
||||
}
|
||||
|
||||
export default function FinancialChart({
|
||||
activeResults,
|
||||
compareResults,
|
||||
compareMode = false,
|
||||
scenarioColors = {},
|
||||
lang,
|
||||
}: FinancialChartProps) {
|
||||
if (!activeResults) {
|
||||
return (
|
||||
<div className="w-full h-[300px] flex items-center justify-center text-white/30 text-sm">
|
||||
{lang === 'de' ? 'Lade Daten...' : 'Loading data...'}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const results = activeResults.results
|
||||
const breakEvenMonth = activeResults.summary.break_even_month
|
||||
|
||||
// Build chart data — monthly
|
||||
const data = results.map((r) => {
|
||||
const entry: Record<string, number | string> = {
|
||||
label: `${r.year.toString().slice(2)}/${String(r.month_in_year).padStart(2, '0')}`,
|
||||
month: r.month,
|
||||
revenue: Math.round(r.revenue_eur),
|
||||
costs: Math.round(r.total_costs_eur),
|
||||
customers: r.total_customers,
|
||||
cashBalance: Math.round(r.cash_balance_eur),
|
||||
}
|
||||
|
||||
// Add compare scenario data
|
||||
if (compareMode && compareResults) {
|
||||
compareResults.forEach((cr, scenarioId) => {
|
||||
const crMonth = cr.results.find(m => m.month === r.month)
|
||||
if (crMonth) {
|
||||
entry[`revenue_${scenarioId}`] = Math.round(crMonth.revenue_eur)
|
||||
entry[`customers_${scenarioId}`] = crMonth.total_customers
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return entry
|
||||
})
|
||||
|
||||
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-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<ComposedChart data={data} margin={{ top: 10, right: 50, left: 0, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="fmRevenueGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#6366f1" stopOpacity={0.6} />
|
||||
<stop offset="100%" stopColor="#6366f1" stopOpacity={0.05} />
|
||||
</linearGradient>
|
||||
<linearGradient id="fmCostGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#f43f5e" stopOpacity={0.4} />
|
||||
<stop offset="100%" stopColor="#f43f5e" stopOpacity={0.05} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
stroke="rgba(255,255,255,0.2)"
|
||||
tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 9 }}
|
||||
interval={5}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
stroke="rgba(255,255,255,0.1)"
|
||||
tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
|
||||
tickFormatter={formatValue}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
stroke="rgba(255,255,255,0.1)"
|
||||
tick={{ fill: 'rgba(34,197,94,0.5)', fontSize: 10 }}
|
||||
/>
|
||||
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: 'rgba(10, 10, 26, 0.95)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
borderRadius: 12,
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
backdropFilter: 'blur(12px)',
|
||||
}}
|
||||
formatter={(value: number, name: string) => {
|
||||
const label = name === 'revenue' ? (lang === 'de' ? 'Umsatz' : 'Revenue')
|
||||
: name === 'costs' ? (lang === 'de' ? 'Kosten' : 'Costs')
|
||||
: name === 'customers' ? (lang === 'de' ? 'Kunden' : 'Customers')
|
||||
: name === 'cashBalance' ? 'Cash'
|
||||
: name
|
||||
return [name === 'customers' ? value : formatValue(value) + ' EUR', label]
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Break-even reference line */}
|
||||
{breakEvenMonth && (
|
||||
<ReferenceLine
|
||||
x={data[breakEvenMonth - 1]?.label}
|
||||
yAxisId="left"
|
||||
stroke="#22c55e"
|
||||
strokeDasharray="5 5"
|
||||
label={{
|
||||
value: 'Break-Even',
|
||||
fill: '#22c55e',
|
||||
fontSize: 10,
|
||||
position: 'insideTopRight',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Revenue area */}
|
||||
<Area
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="revenue"
|
||||
fill="url(#fmRevenueGradient)"
|
||||
stroke="#6366f1"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
|
||||
{/* Cost area */}
|
||||
<Area
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="costs"
|
||||
fill="url(#fmCostGradient)"
|
||||
stroke="#f43f5e"
|
||||
strokeWidth={1.5}
|
||||
strokeDasharray="4 4"
|
||||
/>
|
||||
|
||||
{/* Customers line */}
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="monotone"
|
||||
dataKey="customers"
|
||||
stroke="#22c55e"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
|
||||
{/* Compare mode: overlay other scenarios */}
|
||||
{compareMode && compareResults && Array.from(compareResults.entries()).map(([scenarioId]) => (
|
||||
<Line
|
||||
key={`rev_${scenarioId}`}
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey={`revenue_${scenarioId}`}
|
||||
stroke={scenarioColors[scenarioId] || '#888'}
|
||||
strokeWidth={1.5}
|
||||
strokeOpacity={0.5}
|
||||
dot={false}
|
||||
strokeDasharray="3 3"
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Brush for zooming */}
|
||||
<Brush
|
||||
dataKey="label"
|
||||
height={20}
|
||||
stroke="rgba(99,102,241,0.4)"
|
||||
fill="rgba(0,0,0,0.3)"
|
||||
travellerWidth={8}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user