From 16ecb26baaf8dfbce301ae43e7ff4b4beb79c413 Mon Sep 17 00:00:00 2001
From: Bigood <mjuganaikloo+github@gmail.com>
Date: Wed, 20 Sep 2023 16:52:55 +0200
Subject: [PATCH 1/3] Update CartesianMarkersItem.js

Allow `legendNode` props for finer control over legend customization for markers
---
 .../src/components/cartesian/markers/CartesianMarkersItem.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js b/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
index ce9cc7d61..fb9ac1514 100644
--- a/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
+++ b/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
@@ -171,6 +171,7 @@ const CartesianMarkersItem = ({
     lineStyle,
     textStyle,
     legend,
+    legendNode,
     legendPosition,
     legendOffsetX,
     legendOffsetY,
@@ -191,8 +192,7 @@ const CartesianMarkersItem = ({
         y2 = height
     }
 
-    let legendNode = null
-    if (legend) {
+    if (legend && !legendNode) {
         const legendProps = computeLabel({
             axis,
             width,

From c5b78c0f1bf611841a396e9d8579e79837db78dd Mon Sep 17 00:00:00 2001
From: Maen Juganaikloo <mjuganaikloo@gmail.com>
Date: Wed, 9 Oct 2024 15:56:39 +0200
Subject: [PATCH 2/3] feat(test): added test for marker legend node

---
 packages/line/tests/Line.test.js              |  30 +
 .../tests/__snapshots__/Line.test.js.snap     | 947 ++++++++++++++++++
 2 files changed, 977 insertions(+)

diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js
index b6c133d7a..f855708e1 100644
--- a/packages/line/tests/Line.test.js
+++ b/packages/line/tests/Line.test.js
@@ -292,6 +292,36 @@ it('should call the custom label callback for each point', () => {
     }
 })
 
+it('should display a custom legendNode for marker', () => {
+    const data = [
+        {
+            id: 'A',
+            data: [
+                { x: 0, y: 3 },
+                { x: 1, y: 7 },
+                { x: 2, y: 11 },
+                { x: 3, y: 9 },
+                { x: 4, y: 8 },
+            ],
+        },
+    ]
+    const markers = [{
+        axis: "x",
+        lineStyle: {
+            stroke: "lightblue",
+            strokeWidth: 5
+        },
+        legendPosition: "top",
+        legendNode: <foreignObject x={0} y={0} width={32} height={32}><div>😎</div></foreignObject>,
+    }]
+
+    const component = renderer.create(<Line width={500} height={300} data={data} animate={false} markers={markers} />)
+
+    let tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+
+})
+
 describe('curve interpolation', () => {
     const curveInterpolations = [
         'basis',
diff --git a/packages/line/tests/__snapshots__/Line.test.js.snap b/packages/line/tests/__snapshots__/Line.test.js.snap
index 0ee2a68da..d97ab407a 100644
--- a/packages/line/tests/__snapshots__/Line.test.js.snap
+++ b/packages/line/tests/__snapshots__/Line.test.js.snap
@@ -7620,6 +7620,953 @@ exports[`curve interpolation should support stepBefore curve interpolation 1`] =
 </div>
 `;
 
+exports[`should display a custom legendNode for marker 1`] = `
+<div
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <svg
+    height={300}
+    role="img"
+    width={500}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      fill="transparent"
+      height={300}
+      width={500}
+    />
+    <g
+      transform="translate(0,0)"
+    >
+      <g>
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={125}
+          x2={125}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={250}
+          x2={250}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={375}
+          x2={375}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={500}
+          x2={500}
+          y1={0}
+          y2={300}
+        />
+      </g>
+      <g>
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={300}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={273}
+          y2={273}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={245}
+          y2={245}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={218}
+          y2={218}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={191}
+          y2={191}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={164}
+          y2={164}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={136}
+          y2={136}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={109}
+          y2={109}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={82}
+          y2={82}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={55}
+          y2={55}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={27}
+          y2={27}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={0}
+          y2={0}
+        />
+      </g>
+      <g
+        transform="translate(undefined, 0)"
+      >
+        <line
+          stroke="#000000"
+          strokeWidth={1}
+          style={
+            {
+              "stroke": "lightblue",
+              "strokeWidth": 5,
+            }
+          }
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={300}
+        />
+        <foreignObject
+          height={32}
+          width={32}
+          x={0}
+          y={0}
+        >
+          <div>
+            😎
+          </div>
+        </foreignObject>
+      </g>
+      <g
+        transform="translate(0,300)"
+      >
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            0
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(125,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            1
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(250,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            2
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(375,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            3
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(500,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            4
+          </text>
+        </g>
+        <line
+          style={
+            {
+              "stroke": "transparent",
+              "strokeWidth": 1,
+            }
+          }
+          x1={0}
+          x2={500}
+          y1={0}
+          y2={0}
+        />
+      </g>
+      <g
+        transform="translate(0,0)"
+      >
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,300)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            0
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,273)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            1
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,245)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            2
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,218)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            3
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,191)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            4
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,164)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            5
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,136)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            6
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,109)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            7
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,82)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            8
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,55)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            9
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,27)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            10
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            11
+          </text>
+        </g>
+        <line
+          style={
+            {
+              "stroke": "transparent",
+              "strokeWidth": 1,
+            }
+          }
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={300}
+        />
+      </g>
+      <path
+        d="M0,218L125,109L250,0L375,55L500,82"
+        fill="none"
+        stroke="#e8c1a0"
+        strokeWidth={2}
+      />
+      <g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(500, 82)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(375, 55)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(250, 0)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(125, 109)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(0, 218)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
+
 exports[`should render a basic line chart 1`] = `
 <div
   style={

From 9b5422b374ec6c84139b08624d14275d0c5acecf Mon Sep 17 00:00:00 2001
From: Maen Juganaikloo <mjuganaikloo@gmail.com>
Date: Tue, 22 Oct 2024 13:27:00 +0200
Subject: [PATCH 3/3] chore(Line): run prettier on new legend node feature

---
 packages/line/tests/Line.test.js | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js
index f855708e1..49af2d27b 100644
--- a/packages/line/tests/Line.test.js
+++ b/packages/line/tests/Line.test.js
@@ -305,21 +305,28 @@ it('should display a custom legendNode for marker', () => {
             ],
         },
     ]
-    const markers = [{
-        axis: "x",
-        lineStyle: {
-            stroke: "lightblue",
-            strokeWidth: 5
+    const markers = [
+        {
+            axis: 'x',
+            lineStyle: {
+                stroke: 'lightblue',
+                strokeWidth: 5,
+            },
+            legendPosition: 'top',
+            legendNode: (
+                <foreignObject x={0} y={0} width={32} height={32}>
+                    <div>😎</div>
+                </foreignObject>
+            ),
         },
-        legendPosition: "top",
-        legendNode: <foreignObject x={0} y={0} width={32} height={32}><div>😎</div></foreignObject>,
-    }]
+    ]
 
-    const component = renderer.create(<Line width={500} height={300} data={data} animate={false} markers={markers} />)
+    const component = renderer.create(
+        <Line width={500} height={300} data={data} animate={false} markers={markers} />
+    )
 
     let tree = component.toJSON()
     expect(tree).toMatchSnapshot()
-
 })
 
 describe('curve interpolation', () => {