feat(core): Allow custom legendNode for markers (#2432)

* Update CartesianMarkersItem.js Allow `legendNode` props for finer control over legend customization for markers * feat(test): added test for marker legend node * chore(Line): run prettier on new legend node feature --------- Co-authored-by: Maen Juganaikloo <[email protected]>
plouc · Oct 23, 2024 · 1ce58a5 · 1ce58a5
1 parent 0f5ac2f
commit 1ce58a5
Show file tree

Hide file tree

Showing 3 changed files with 986 additions and 2 deletions.
diff --git 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 = 'top-right',
     legendOffsetX = 14,
     legendOffsetY = 14,
@@ -191,8 +192,7 @@ const CartesianMarkersItem = ({
         y2 = height
     }
 
-    let legendNode = null
-    if (legend) {
+    if (legend && !legendNode) {
         const legendProps = computeLabel({
             axis,
             width,

diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js
@@ -292,6 +292,43 @@ 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',