54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
|
|
export interface Serie {
|
|
schluessel: string;
|
|
name: string;
|
|
farbe: string;
|
|
gestrichelt?: boolean;
|
|
}
|
|
|
|
export type Datenpunkt = { t: number } & Record<string, number>;
|
|
|
|
interface Props {
|
|
daten: Datenpunkt[];
|
|
serien: Serie[];
|
|
}
|
|
|
|
/** Prozent der Waldfläche über die Zeitschritte */
|
|
export default function Verlaufsdiagramm({ daten, serien }: Props) {
|
|
return (
|
|
<div className="diagramm">
|
|
<ResponsiveContainer width="100%" height={260}>
|
|
<LineChart data={daten} margin={{ top: 8, right: 16, bottom: 4, left: 0 }}>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis dataKey="t" type="number" domain={[0, "dataMax"]} allowDecimals={false} tickLine={false} />
|
|
<YAxis domain={[0, 100]} unit=" %" width={52} tickLine={false} axisLine={false} />
|
|
<Tooltip
|
|
formatter={(wert) => `${Number(wert).toFixed(1)} %`}
|
|
labelFormatter={(t) => `Zeitschritt ${t}`}
|
|
contentStyle={{
|
|
background: "var(--flaeche)",
|
|
border: "1px solid var(--rand)",
|
|
borderRadius: 6,
|
|
color: "var(--text)",
|
|
}}
|
|
/>
|
|
<Legend iconType="plainline" />
|
|
{serien.map((s) => (
|
|
<Line
|
|
key={s.schluessel}
|
|
dataKey={s.schluessel}
|
|
name={s.name}
|
|
stroke={s.farbe}
|
|
strokeWidth={2}
|
|
strokeDasharray={s.gestrichelt ? "6 4" : undefined}
|
|
dot={false}
|
|
isAnimationActive={false}
|
|
/>
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|