diff --git a/packages/line/index.d.ts b/packages/line/index.d.ts
index c1d0f89a9..fd9b157d5 100644
--- a/packages/line/index.d.ts
+++ b/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
diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js
index 6b31cf71e..934e9d246 100644
--- a/packages/line/src/Line.js
+++ b/packages/line/src/Line.js
@@ -73,7 +73,7 @@ const Line = props => {
pointBorderWidth = 0,
pointBorderColor = { theme: 'background' },
enablePointLabel = false,
- pointLabel = 'yFormatted',
+ pointLabel = 'data.yFormatted',
pointLabelYOffset,
defs = [],
diff --git a/packages/line/src/Points.js b/packages/line/src/Points.js
index 492beb243..8cf28c3dd 100644
--- a/packages/line/src/Points.js
+++ b/packages/line/src/Points.js
@@ -20,7 +20,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
diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js
index 434d5e289..5794d868b 100644
--- a/packages/line/tests/Line.test.js
+++ b/packages/line/tests/Line.test.js
@@ -4,6 +4,7 @@ import Line from '../src/Line'
import { LINE_UNIQUE_ID_PREFIX } from '../src/hooks'
import SlicesItem from '../src/SlicesItem'
import renderer from 'react-test-renderer'
+import { DotsItem } from '@nivo/core'
// Handle useId mocks
let id = 0
@@ -109,6 +110,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(
+
+ )
+
+ 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(
+
+ )
+
+ 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',
diff --git a/website/src/data/components/line/mapper.ts b/website/src/data/components/line/mapper.ts
index 22c9613ed..245218408 100644
--- a/website/src/data/components/line/mapper.ts
+++ b/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,