From b67bc66ffeb21937011181d7ffc98a474155ae9b Mon Sep 17 00:00:00 2001
From: Yevhen Kozlov <skyboyer@gmail.com>
Date: Thu, 27 Jun 2024 20:27:56 +0200
Subject: [PATCH] Banded Chart example (#296)

* Banded Chart example

* Banded Chart example: Legend to exclude entry for band data

* converted class to function component; added link to private codesandbox with the example

* fixed: export should be default not named
---
 .../ComposedChart/BandedChart.js              | 90 +++++++++++++++++++
 .../exampleComponents/ComposedChart/index.js  |  2 +
 2 files changed, 92 insertions(+)
 create mode 100644 src/docs/exampleComponents/ComposedChart/BandedChart.js

diff --git a/src/docs/exampleComponents/ComposedChart/BandedChart.js b/src/docs/exampleComponents/ComposedChart/BandedChart.js
new file mode 100644
index 00000000..d7e046e0
--- /dev/null
+++ b/src/docs/exampleComponents/ComposedChart/BandedChart.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  ComposedChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  DefaultLegendContent,
+  ResponsiveContainer,
+} from 'recharts';
+
+const data = [
+  {
+    name: "Page A",
+    a: [0, 0],
+    b: 0,
+  },
+  {
+    name: "Page B",
+    a: [50, 300],
+    b: 106,
+  },
+  {
+    name: "Page C",
+    a: [150, 423],
+  },
+  {
+    name: "Page D",
+    b: 312,
+  },
+  {
+    name: "Page E",
+    a: [367, 678],
+    b: 451,
+  },
+  {
+    name: "Page F",
+    a: [305, 821],
+    b: 623,
+  },
+];
+  
+export default function Example() {
+  const renderTooltipWithoutRange = ({ payload, content, ...rest }) => {
+      const newPayload = payload.filter((x) => x.dataKey !== "a");
+      return <Tooltip payload={newPayload} {...rest} />;
+  }
+
+  const renderLegendWithoutRange = ({ payload, content, ...rest }) => {
+    const newPayload = payload.filter((x) => x.dataKey !== "a");
+    return <DefaultLegendContent payload={newPayload} {...rest} />;
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <ComposedChart
+      width={500}
+      height={400}
+      data={data}
+      margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+      }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip content={renderTooltipWithoutRange} />
+        <Area
+            type="monotone"
+            dataKey="a"
+            stroke="none"
+            fill="#cccccc"
+            connectNulls
+            dot={false}
+            activeDot={false}
+        />
+        <Line type="natural" dataKey="b" stroke="#ff00ff" connectNulls />
+        <Legend content={renderLegendWithoutRange} />
+      </ComposedChart>
+    </ResponsiveContainer>
+  );
+}
+  
+Example.demoUrl = 'https://codesandbox.io/p/sandbox/simple-area-chart-forked-hncq3r';
\ No newline at end of file
diff --git a/src/docs/exampleComponents/ComposedChart/index.js b/src/docs/exampleComponents/ComposedChart/index.js
index 01c158cb..bd874eb0 100644
--- a/src/docs/exampleComponents/ComposedChart/index.js
+++ b/src/docs/exampleComponents/ComposedChart/index.js
@@ -3,6 +3,7 @@ import LineBarAreaComposedChart from './LineBarAreaComposedChart';
 import SameDataComposedChart from './SameDataComposedChart';
 import VerticalComposedChart from './VerticalComposedChart';
 import ScatterAndLineOfBestFit from './ScatterAndLineOfBestFit';
+import BandedChart from './BandedChart'
 
 export default {
   LineBarAreaComposedChart,
@@ -10,4 +11,5 @@ export default {
   VerticalComposedChart,
   ComposedChartWithAxisLabels,
   ScatterAndLineOfBestFit,
+  BandedChart,
 };