feat(Line): passing the full Point info to the AccessorFunc for Label

packages/line/index.d.ts

@@ -96,7 +96,7 @@ export interface Point {
     }
 }
 
-export type AccessorFunc = (datum: Point['data']) => string
+export type AccessorFunc = (datum: Point) => string
 
 export type PointMouseHandler = (point: Point, event: React.MouseEvent) => void
 export type PointTouchHandler = (point: Point, event: React.TouchEvent) => void

packages/line/src/Line.js

@@ -82,7 +82,7 @@ const Line = props => {
         pointBorderWidth = 0,
         pointBorderColor = { theme: 'background' },
         enablePointLabel = false,
-        pointLabel = 'yFormatted',
+        pointLabel = 'data.yFormatted',
         pointLabelYOffset,
 
         defs = [],

packages/line/src/Points.js

@@ -29,7 +29,7 @@ const Points = ({ points, symbol, size, borderWidth, enableLabel, label, labelYO
                 datum: point.data,
                 fill: point.color,
                 stroke: point.borderColor,
-                label: enableLabel ? getLabel(point.data) : null,
+                label: enableLabel ? getLabel(point) : null,
             }
 
             return mappedPoint

packages/line/tests/Line.test.js

@@ -3,6 +3,7 @@ import { Axis } from '@nivo/axes'
 import Line from '../src/Line'
 import SlicesItem from '../src/SlicesItem'
 import renderer from 'react-test-renderer'
+import { DotsItem } from '@nivo/core'
 
 // Handle useId mocks
 let id = 0
@@ -111,6 +112,91 @@ it('should have left and bottom axis by default', () => {
     expect(axes.at(1).prop('axis')).toBe('y')
 })
 
+it('should display the label for each points', () => {
+    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 wrapper = mount(
+        <Line
+            width={500}
+            height={300}
+            data={data}
+            animate={false}
+            pointLabel={'data.yFormatted'}
+            enablePointLabel
+        />
+    )
+
+    const dotsItem = wrapper.find(DotsItem)
+    expect(dotsItem).toHaveLength(5)
+    expect(dotsItem.at(0).prop('label')).toBe('8')
+    expect(dotsItem.at(1).prop('label')).toBe('9')
+    expect(dotsItem.at(2).prop('label')).toBe('11')
+    expect(dotsItem.at(3).prop('label')).toBe('7')
+    expect(dotsItem.at(4).prop('label')).toBe('3')
+})
+
+it('should call the custom label callback for each point', () => {
+    const serieAData = [
+        { x: 0, y: 3 },
+        { x: 1, y: 7 },
+        { x: 2, y: 11 },
+        { x: 3, y: 9 },
+        { x: 4, y: 8 },
+    ]
+    const data = [
+        {
+            id: 'A',
+            data: serieAData,
+        },
+    ]
+
+    const pointLabelFn = jest.fn(point => point.data.yFormatted)
+
+    renderer.create(
+        <Line
+            width={500}
+            height={300}
+            data={data}
+            animate={false}
+            pointLabel={pointLabelFn}
+            enablePointLabel
+        />
+    )
+
+    expect(pointLabelFn).toHaveBeenCalledTimes(5)
+
+    for (let i = 0; i < serieAData.length; ++i) {
+        const currentData = serieAData[i]
+        expect(pointLabelFn).toHaveBeenCalledWith({
+            id: `A.${i}`,
+            index: i,
+            serieId: 'A',
+            serieColor: expect.any(String),
+            x: expect.any(Number),
+            y: expect.any(Number),
+            color: expect.any(String),
+            borderColor: expect.any(String),
+            data: {
+                x: currentData.x,
+                y: currentData.y,
+                yFormatted: String(currentData.y),
+                xFormatted: String(currentData.x),
+            },
+        })
+    }
+})
+
 describe('curve interpolation', () => {
     const curveInterpolations = [
         'basis',

website/src/data/components/line/mapper.ts

@@ -3,8 +3,8 @@ import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings'
 export default settingsMapper(
     {
         pointLabel: value => {
-            if (value === `d => \`\${d.x}: \${d.y}\``) return d => `${d.x}: ${d.y}`
-            return value
+            if (value === `d => \`\${d.x}: \${d.y}\``) return d => `${d.data.x}: ${d.data.y}`
+            return `data.${value}`
         },
         xFormat: mapFormat,
         yFormat: mapFormat,