feat: add python and web implementation

web/src/komponenten/Verlaufsdiagramm.tsx

@@ -0,0 +1,53 @@
+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>
+  );
+}