feat(AreaChart): add area chart

apps/docs/src/content/03-components/content/legend/develop.mdx

@@ -0,0 +1,3 @@
+# Properties
+
+<PropertiesTables />

apps/docs/src/content/03-components/content/legend/examples/default.tsx

@@ -0,0 +1,13 @@
+import {
+  Legend,
+  LegendItem,
+} from "@mittwald/flow-react-components";
+
+<Legend>
+  <LegendItem color="sea-green" title="Item 1" />
+  <LegendItem color="palatinate-blue" title="Item 2" />
+  <LegendItem color="tangerine" title="Item 3" />
+  <LegendItem color="magenta" title="Item 4" />
+  <LegendItem color="tropical-indigo" title="Item 5" />
+  <LegendItem color="malachite" title="Item 6" />
+</Legend>;

apps/docs/src/content/03-components/content/legend/index.mdx

@@ -0,0 +1,9 @@
+---
+component: Legend
+description:
+  Die Legend kann verwendet werden um Elemente mit einer Farblegende zu
+  versehen. Für die Nutzung einer Legende im direkten Kontext unserer Charts
+  nutze die ChartLegend.
+---
+
+<LiveCodeEditor editorDisabled />

apps/docs/src/content/03-components/content/legend/overview.mdx

@@ -0,0 +1,3 @@
+# Playground
+
+<LiveCodeEditor />

apps/docs/src/content/03-components/data-visualisation/area-chart/develop.mdx

@@ -0,0 +1,3 @@
+# Properties
+
+<PropertiesTables />

apps/docs/src/content/03-components/data-visualisation/area-chart/examples/default.tsx

@@ -0,0 +1,66 @@
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ChartTooltip,
+  Legend,
+  XAxis,
+  YAxis,
+} from "@mittwald/flow-react-components";
+
+<AreaChart
+  data={[
+    {
+      name: "Stat 1",
+      firstKey: 4000,
+      secondKey: 2400,
+      thirdKey: 2400,
+    },
+    {
+      name: "Stat 2",
+      firstKey: 3000,
+      secondKey: 1398,
+      thirdKey: 2210,
+    },
+    {
+      name: "Stat 3",
+      firstKey: 2000,
+      secondKey: 9800,
+      thirdKey: 2290,
+    },
+    {
+      name: "Stat 4",
+      firstKey: 2780,
+      secondKey: 3908,
+      thirdKey: 2000,
+    },
+    {
+      name: "Stat 5",
+      firstKey: 1890,
+      secondKey: 4800,
+      thirdKey: 2181,
+    },
+    {
+      name: "Stat 6",
+      firstKey: 2390,
+      secondKey: 3800,
+      thirdKey: 2500,
+    },
+    {
+      name: "Stat 7",
+      firstKey: 3490,
+      secondKey: 4300,
+      thirdKey: 2100,
+    },
+  ]}
+  height="300px"
+>
+  <CartesianGrid />
+  <Area dataKey="firstKey" />
+  <Area dataKey="secondKey" color="palatinate-blue" />
+  <Area dataKey="thirdKey" color="tangerine" />
+  <XAxis dataKey="name" />
+  <YAxis />
+  <ChartTooltip />
+  <Legend />
+</AreaChart>;

apps/docs/src/content/03-components/data-visualisation/area-chart/examples/intro.tsx

@@ -0,0 +1,38 @@
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+} from "@mittwald/flow-react-components";
+
+<AreaChart
+  data={[
+    {
+      name: "Stat 1",
+      firstKey: 3000,
+      secondKey: 1398,
+      thirdKey: 2210,
+    },
+    {
+      name: "Stat 2",
+      firstKey: 2000,
+      secondKey: 9800,
+      thirdKey: 2290,
+    },
+    {
+      name: "Stat 3",
+      firstKey: 2780,
+      secondKey: 3908,
+      thirdKey: 2000,
+    },
+  ]}
+  height="150px"
+>
+  <CartesianGrid />
+  <Area dataKey="firstKey" />
+  <Area dataKey="secondKey" color="palatinate-blue" />
+  <Area dataKey="thirdKey" color="tangerine" />
+  <XAxis dataKey="name" />
+  <YAxis />
+</AreaChart>;

apps/docs/src/content/03-components/data-visualisation/area-chart/examples/synced.tsx

@@ -0,0 +1,84 @@
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ChartTooltip,
+  Legend,
+  XAxis,
+  YAxis,
+} from "@mittwald/flow-react-components";
+
+<div
+  style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+  }}
+>
+  <AreaChart
+    data={[
+      {
+        name: "Stat 1",
+        firstKey: 4000,
+        secondKey: 2400,
+        thirdKey: 2400,
+      },
+      {
+        name: "Stat 2",
+        firstKey: 3000,
+        secondKey: 1398,
+        thirdKey: 2210,
+      },
+      {
+        name: "Stat 3",
+        firstKey: 2000,
+        secondKey: 9800,
+        thirdKey: 2290,
+      },
+    ]}
+    height="250px"
+    syncId="syncedAreaCharts"
+  >
+    <CartesianGrid />
+    <Area dataKey="firstKey" />
+    <Area dataKey="secondKey" color="palatinate-blue" />
+    <Area dataKey="thirdKey" color="tangerine" />
+    <XAxis dataKey="name" />
+    <YAxis interval="preserveStartEnd" />
+    <ChartTooltip />
+    <Legend />
+  </AreaChart>
+  <AreaChart
+    data={[
+      {
+        name: "Stat 4",
+        firstKey: 1790,
+        secondKey: 1780,
+        thirdKey: 1500,
+      },
+      {
+        name: "Stat 5",
+        firstKey: 1890,
+        secondKey: 4800,
+        thirdKey: 2181,
+      },
+      {
+        name: "Stat 6",
+        firstKey: 2100,
+        secondKey: 3200,
+        thirdKey: 1900,
+      },
+    ]}
+    height="250px"
+    syncId="syncedAreaCharts"
+  >
+    <CartesianGrid />
+    <Area dataKey="firstKey" color="magenta" />
+    <Area dataKey="secondKey" color="tropical-indigo" />
+    <Area dataKey="thirdKey" color="malachite" />
+    <XAxis dataKey="name" />
+    <YAxis interval="preserveStartEnd" />
+    <ChartTooltip />
+    <Legend />
+  </AreaChart>
+</div>;

apps/docs/src/content/03-components/data-visualisation/area-chart/index.mdx

@@ -0,0 +1,6 @@
+---
+component: AreaChart
+description: Das AreaChart dient dazu Daten zu visualisieren
+---
+
+<LiveCodeEditor editorDisabled example="intro" />

apps/docs/src/content/03-components/data-visualisation/area-chart/overview.mdx

@@ -0,0 +1,12 @@
+# Playground
+
+Um das AreaChart zu rendern, benötigt es entweder einen Parent mit einer festen
+Höhe, oder das Chart selbst mit fester Höhe.
+
+<LiveCodeEditor editorCollapsed />
+
+---
+
+# Synchronisierte Charts
+
+<LiveCodeEditor example="synced" editorCollapsed />

apps/docs/src/content/03-components/data-visualisation/area/develop.mdx

@@ -0,0 +1,3 @@
+# Properties
+
+<PropertiesTables />

apps/docs/src/content/03-components/data-visualisation/area/examples/default.tsx

@@ -0,0 +1,41 @@
+import {
+  Area,
+  AreaChart,
+} from "@mittwald/flow-react-components";
+
+<div style={{ height: "300px" }}>
+  <AreaChart
+    data={[
+      {
+        name: "Stat 1",
+        firstKey: 4000,
+      },
+      {
+        name: "Stat 2",
+        firstKey: 3000,
+      },
+      {
+        name: "Stat 3",
+        firstKey: 2000,
+      },
+      {
+        name: "Stat 4",
+        firstKey: 2780,
+      },
+      {
+        name: "Stat 5",
+        firstKey: 1890,
+      },
+      {
+        name: "Stat 6",
+        firstKey: 2390,
+      },
+      {
+        name: "Stat 7",
+        firstKey: 3490,
+      },
+    ]}
+  >
+    <Area dataKey="firstKey" />
+  </AreaChart>
+</div>;

apps/docs/src/content/03-components/data-visualisation/area/examples/intro.tsx

@@ -0,0 +1,41 @@
+import {
+  Area,
+  AreaChart,
+} from "@mittwald/flow-react-components";
+
+<div style={{ height: "150px" }}>
+  <AreaChart
+    data={[
+      {
+        name: "Stat 1",
+        firstKey: 4000,
+      },
+      {
+        name: "Stat 2",
+        firstKey: 3000,
+      },
+      {
+        name: "Stat 3",
+        firstKey: 2000,
+      },
+      {
+        name: "Stat 4",
+        firstKey: 2780,
+      },
+      {
+        name: "Stat 5",
+        firstKey: 1890,
+      },
+      {
+        name: "Stat 6",
+        firstKey: 2390,
+      },
+      {
+        name: "Stat 7",
+        firstKey: 3490,
+      },
+    ]}
+  >
+    <Area dataKey="firstKey" />
+  </AreaChart>
+</div>;

apps/docs/src/content/03-components/data-visualisation/area/index.mdx

@@ -0,0 +1,9 @@
+---
+component: Area
+gitHubComponentPath: components/AreaChart/components/Area/Area.tsx
+description:
+  Verwende die Area in Kombination mit dem AreaChart zur Visualisierung von
+  Daten
+---
+
+<LiveCodeEditor editorDisabled example="intro" />

apps/docs/src/content/03-components/data-visualisation/area/overview.mdx

@@ -0,0 +1,3 @@
+# Playground
+
+<LiveCodeEditor />

apps/docs/src/content/03-components/data-visualisation/cartesian-grid/develop.mdx

@@ -0,0 +1,3 @@
+# Properties
+
+<PropertiesTables />