From d7a75454ff7efc512ef97137edc3fb82922badea Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Wed, 22 May 2024 15:22:16 +0200
Subject: [PATCH 1/3] [docs] Document how to customize a subsection of a line
 chart

---
 .../charts/line-demo/LineWithPrediction.js    | 70 +++++++++++++++++
 .../charts/line-demo/LineWithPrediction.tsx   | 77 +++++++++++++++++++
 .../line-demo/LineWithPrediction.tsx.preview  | 14 ++++
 docs/data/charts/line-demo/line-demo.md       | 12 +++
 4 files changed, 173 insertions(+)
 create mode 100644 docs/data/charts/line-demo/LineWithPrediction.js
 create mode 100644 docs/data/charts/line-demo/LineWithPrediction.tsx
 create mode 100644 docs/data/charts/line-demo/LineWithPrediction.tsx.preview

diff --git a/docs/data/charts/line-demo/LineWithPrediction.js b/docs/data/charts/line-demo/LineWithPrediction.js
new file mode 100644
index 000000000000..277ce031aeb0
--- /dev/null
+++ b/docs/data/charts/line-demo/LineWithPrediction.js
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { LineChart, AnimatedLine } from '@mui/x-charts/LineChart';
+import { useChartId, useDrawingArea, useXScale } from '@mui/x-charts/hooks';
+
+function CustomAnimatedLine(props) {
+  const { limit, sxBefore, sxAfter, ...other } = props;
+  const { top, bottom, height, left, width } = useDrawingArea();
+  const scale = useXScale();
+  const chartId = useChartId();
+
+  if (limit === undefined) {
+    return <AnimatedLine {...other} />;
+  }
+
+  const limitPosition = scale(limit); // Convert value to x coordinate.
+
+  if (limitPosition === undefined) {
+    return <AnimatedLine {...other} />;
+  }
+
+  const clipIdleft = `${chartId}-${props.ownerState.id}-line-limit-${limit}-1`;
+  const clipIdRight = `${chartId}-${props.ownerState.id}-line-limit-${limit}-2`;
+  return (
+    <React.Fragment>
+      {/* Clip to show the line before the limit */}
+      <clipPath id={clipIdleft}>
+        <rect
+          x={left}
+          y={0}
+          width={limitPosition - left}
+          height={top + height + bottom}
+        />
+      </clipPath>
+      {/* Clip to show the line after the limit */}
+      <clipPath id={clipIdRight}>
+        <rect
+          x={limitPosition}
+          y={0}
+          width={left + width - limitPosition}
+          height={top + height + bottom}
+        />
+      </clipPath>
+      <g clipPath={`url(#${clipIdleft})`}>
+        <AnimatedLine {...other} sx={sxBefore} />
+      </g>
+      <g clipPath={`url(#${clipIdRight})`}>
+        <AnimatedLine {...other} sx={sxAfter} />
+      </g>
+    </React.Fragment>
+  );
+}
+
+export default function LineWithPrediction() {
+  return (
+    <LineChart
+      series={[
+        {
+          type: 'line',
+          data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
+          valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
+        },
+      ]}
+      xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
+      height={200}
+      width={400}
+      slots={{ line: CustomAnimatedLine }}
+      slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } }}
+    />
+  );
+}
diff --git a/docs/data/charts/line-demo/LineWithPrediction.tsx b/docs/data/charts/line-demo/LineWithPrediction.tsx
new file mode 100644
index 000000000000..55fd42deb244
--- /dev/null
+++ b/docs/data/charts/line-demo/LineWithPrediction.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { LineChart, AnimatedLine, AnimatedLineProps } from '@mui/x-charts/LineChart';
+import { useChartId, useDrawingArea, useXScale } from '@mui/x-charts/hooks';
+import { SxProps, Theme } from '@mui/system';
+
+interface CustomAnimatedLineProps extends AnimatedLineProps {
+  limit?: number;
+  sxBefore?: SxProps<Theme>;
+  sxAfter?: SxProps<Theme>;
+}
+
+function CustomAnimatedLine(props: CustomAnimatedLineProps) {
+  const { limit, sxBefore, sxAfter, ...other } = props;
+  const { top, bottom, height, left, width } = useDrawingArea();
+  const scale = useXScale();
+  const chartId = useChartId();
+
+  if (limit === undefined) {
+    return <AnimatedLine {...other} />;
+  }
+
+  const limitPosition = scale(limit); // Convert value to x coordinate.
+
+  if (limitPosition === undefined) {
+    return <AnimatedLine {...other} />;
+  }
+
+  const clipIdleft = `${chartId}-${props.ownerState.id}-line-limit-${limit}-1`;
+  const clipIdRight = `${chartId}-${props.ownerState.id}-line-limit-${limit}-2`;
+  return (
+    <React.Fragment>
+      {/* Clip to show the line before the limit */}
+      <clipPath id={clipIdleft}>
+        <rect
+          x={left}
+          y={0}
+          width={limitPosition - left}
+          height={top + height + bottom}
+        />
+      </clipPath>
+      {/* Clip to show the line after the limit */}
+      <clipPath id={clipIdRight}>
+        <rect
+          x={limitPosition}
+          y={0}
+          width={left + width - limitPosition}
+          height={top + height + bottom}
+        />
+      </clipPath>
+      <g clipPath={`url(#${clipIdleft})`}>
+        <AnimatedLine {...other} sx={sxBefore} />
+      </g>
+      <g clipPath={`url(#${clipIdRight})`}>
+        <AnimatedLine {...other} sx={sxAfter} />
+      </g>
+    </React.Fragment>
+  );
+}
+
+export default function LineWithPrediction() {
+  return (
+    <LineChart
+      series={[
+        {
+          type: 'line',
+          data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
+          valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
+        },
+      ]}
+      xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
+      height={200}
+      width={400}
+      slots={{ line: CustomAnimatedLine }}
+      slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } as any }}
+    />
+  );
+}
diff --git a/docs/data/charts/line-demo/LineWithPrediction.tsx.preview b/docs/data/charts/line-demo/LineWithPrediction.tsx.preview
new file mode 100644
index 000000000000..1dc0a8f94a59
--- /dev/null
+++ b/docs/data/charts/line-demo/LineWithPrediction.tsx.preview
@@ -0,0 +1,14 @@
+<LineChart
+  series={[
+    {
+      type: 'line',
+      data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
+      valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
+    },
+  ]}
+  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
+  height={200}
+  width={400}
+  slots={{ line: CustomAnimatedLine }}
+  slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } as any }}
+/>
\ No newline at end of file
diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md
index d79eae58f84a..4675405f8c32 100644
--- a/docs/data/charts/line-demo/line-demo.md
+++ b/docs/data/charts/line-demo/line-demo.md
@@ -31,3 +31,15 @@ components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, Lin
 ## LineChartConnectNulls
 
 {{"demo": "LineChartConnectNulls.js"}}
+
+## Line with predicition
+
+To show that some part of the data have a different status, you can vary the rendering.
+
+In the following example, the chart shows some prediction.
+To do so, the `slots.line` is set with a custom components that render the default line twice.
+
+- The first one is clipped to show known values (from the left of the chart to the limit).
+- The second one is clipped to show predictions (from the limit to the right of the chart) with dash styling.
+
+{{"demo": "LineWithPrediction.js"}}

From f747b93e23605fe8418e3624a6081a5f492e9670 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Thu, 23 May 2024 13:20:13 +0200
Subject: [PATCH 2/3] Apply suggestions from code review

Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
---
 docs/data/charts/line-demo/line-demo.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md
index 4675405f8c32..e760019f9eb4 100644
--- a/docs/data/charts/line-demo/line-demo.md
+++ b/docs/data/charts/line-demo/line-demo.md
@@ -34,9 +34,9 @@ components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, Lin
 
 ## Line with predicition
 
-To show that some part of the data have a different status, you can vary the rendering.
+To show that parts of the data have different meanings, you can render stylised lines for each of them.
 
-In the following example, the chart shows some prediction.
+In the following example, the chart shows a dotted line to exemplify that the data is estimated.
 To do so, the `slots.line` is set with a custom components that render the default line twice.
 
 - The first one is clipped to show known values (from the left of the chart to the limit).

From ef781ccc74d6a9c195985c64061107538bf12653 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Thu, 23 May 2024 14:47:51 +0200
Subject: [PATCH 3/3] Update docs/data/charts/line-demo/line-demo.md

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
---
 docs/data/charts/line-demo/line-demo.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md
index e760019f9eb4..e74ae9c5cade 100644
--- a/docs/data/charts/line-demo/line-demo.md
+++ b/docs/data/charts/line-demo/line-demo.md
@@ -32,7 +32,7 @@ components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, Lin
 
 {{"demo": "LineChartConnectNulls.js"}}
 
-## Line with predicition
+## Line with forecast
 
 To show that parts of the data have different meanings, you can render stylised lines for each of them.