From dcd70777c2b6b8530b4518ebbac066e9f097594e Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 29 Sep 2020 13:00:58 +0200 Subject: [PATCH] feat: expose datum as part of GeometryValue (#822) --- api/charts.api.md | 1 + .../rendering/rendering.areas.test.ts | 18 +++++++++++++++++ .../rendering/rendering.bands.test.ts | 14 +++++++++++++ .../xy_chart/rendering/rendering.bars.test.ts | 18 +++++++++++++++++ .../rendering/rendering.bubble.test.ts | 20 +++++++++++++++++++ .../rendering/rendering.lines.test.ts | 20 +++++++++++++++++++ .../xy_chart/rendering/rendering.test.ts | 2 ++ .../xy_chart/rendering/rendering.ts | 2 ++ .../state/chart_state.interactions.test.ts | 6 ++++++ .../xy_chart/state/chart_state.test.ts | 3 +++ .../xy_chart/state/utils/utils.test.ts | 4 ++-- .../xy_chart/tooltip/tooltip.test.ts | 3 +++ .../xy_chart/utils/interactions.test.ts | 6 ++++++ src/mocks/geometries.ts | 2 ++ src/utils/geometry.ts | 4 ++++ stories/interactions/1_bar_clicks.tsx | 14 +++++++------ 16 files changed, 129 insertions(+), 8 deletions(-) diff --git a/api/charts.api.md b/api/charts.api.md index 262ae2e9d7..7e5eb22536 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -645,6 +645,7 @@ export interface GeometryValue { // // (undocumented) accessor: BandedAccessorType; + datum: any; // (undocumented) mark: number | null; // (undocumented) diff --git a/src/chart_types/xy_chart/rendering/rendering.areas.test.ts b/src/chart_types/xy_chart/rendering/rendering.areas.test.ts index e423f86da5..d7e74ce6ec 100644 --- a/src/chart_types/xy_chart/rendering/rendering.areas.test.ts +++ b/src/chart_types/xy_chart/rendering/rendering.areas.test.ts @@ -175,6 +175,7 @@ describe('Rendering points - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 25, @@ -199,6 +200,7 @@ describe('Rendering points - areas', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 25, @@ -329,6 +331,7 @@ describe('Rendering points - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 25, @@ -353,6 +356,7 @@ describe('Rendering points - areas', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 25, @@ -385,6 +389,7 @@ describe('Rendering points - areas', () => { x: 0, y: 20, mark: null, + datum: [0, 20], }, transform: { x: 25, @@ -409,6 +414,7 @@ describe('Rendering points - areas', () => { x: 1, y: 10, mark: null, + datum: [1, 10], }, transform: { x: 25, @@ -495,6 +501,7 @@ describe('Rendering points - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 0, @@ -519,6 +526,7 @@ describe('Rendering points - areas', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 0, @@ -648,6 +656,7 @@ describe('Rendering points - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 0, @@ -672,6 +681,7 @@ describe('Rendering points - areas', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 0, @@ -704,6 +714,7 @@ describe('Rendering points - areas', () => { x: 0, y: 20, mark: null, + datum: [0, 20], }, transform: { x: 0, @@ -728,6 +739,7 @@ describe('Rendering points - areas', () => { x: 1, y: 10, mark: null, + datum: [1, 10], }, transform: { x: 0, @@ -814,6 +826,7 @@ describe('Rendering points - areas', () => { x: 1546300800000, y: 10, mark: null, + datum: [1546300800000, 10], }, transform: { x: 0, @@ -838,6 +851,7 @@ describe('Rendering points - areas', () => { x: 1546387200000, y: 5, mark: null, + datum: [1546387200000, 5], }, transform: { x: 0, @@ -952,6 +966,7 @@ describe('Rendering points - areas', () => { x: 1546300800000, y: 10, mark: null, + datum: [1546300800000, 10], }, transform: { x: 0, @@ -976,6 +991,7 @@ describe('Rendering points - areas', () => { x: 1546387200000, y: 5, mark: null, + datum: [1546387200000, 5], }, transform: { x: 0, @@ -1008,6 +1024,7 @@ describe('Rendering points - areas', () => { x: 1546300800000, y: 20, mark: null, + datum: [1546300800000, 20], }, transform: { x: 0, @@ -1032,6 +1049,7 @@ describe('Rendering points - areas', () => { x: 1546387200000, y: 10, mark: null, + datum: [1546387200000, 10], }, transform: { x: 0, diff --git a/src/chart_types/xy_chart/rendering/rendering.bands.test.ts b/src/chart_types/xy_chart/rendering/rendering.bands.test.ts index c3a04781e6..0134440e1a 100644 --- a/src/chart_types/xy_chart/rendering/rendering.bands.test.ts +++ b/src/chart_types/xy_chart/rendering/rendering.bands.test.ts @@ -175,6 +175,7 @@ describe('Rendering bands - areas', () => { x: 0, y: 2, mark: null, + datum: [0, 2, 10], }, transform: { x: 25, @@ -200,6 +201,7 @@ describe('Rendering bands - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 2, 10], }, transform: { x: 25, @@ -223,6 +225,7 @@ describe('Rendering bands - areas', () => { x: 1, y: 3, mark: null, + datum: [1, 3, 5], }, styleOverrides: undefined, transform: { @@ -248,6 +251,7 @@ describe('Rendering bands - areas', () => { x: 1, y: 5, mark: null, + datum: [1, 3, 5], }, transform: { x: 25, @@ -334,6 +338,7 @@ describe('Rendering bands - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 2, 10], }, transform: { x: 25, @@ -351,6 +356,7 @@ describe('Rendering bands - areas', () => { x: 0, y: 2, mark: null, + datum: [0, 2, 10], }, }), ); @@ -361,6 +367,7 @@ describe('Rendering bands - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 2, 10], }, }), ); @@ -373,6 +380,7 @@ describe('Rendering bands - areas', () => { x: 2, y: 3, mark: null, + datum: [2, 3, 5], }, }), ); @@ -385,6 +393,7 @@ describe('Rendering bands - areas', () => { x: 2, y: 5, mark: null, + datum: [2, 3, 5], }, }), ); @@ -397,6 +406,7 @@ describe('Rendering bands - areas', () => { x: 3, y: 3, mark: null, + datum: [3, 3, 5], }, }), ); @@ -409,6 +419,7 @@ describe('Rendering bands - areas', () => { x: 3, y: 5, mark: null, + datum: [3, 3, 5], }, }), ); @@ -463,6 +474,7 @@ describe('Rendering bands - areas', () => { x: 0, y: 10, mark: null, + datum: [0, 2, 10], }, seriesIdentifier: { specId: SPEC_ID, @@ -502,6 +514,7 @@ describe('Rendering bands - areas', () => { x: 2, y: 5, mark: null, + datum: [2, 3, 5], }, seriesIdentifier: { specId: SPEC_ID, @@ -541,6 +554,7 @@ describe('Rendering bands - areas', () => { x: 3, y: 8, mark: null, + datum: [3, 4, 8], }, seriesIdentifier: { specId: SPEC_ID, diff --git a/src/chart_types/xy_chart/rendering/rendering.bars.test.ts b/src/chart_types/xy_chart/rendering/rendering.bars.test.ts index 553b4e1f78..1d479f1a96 100644 --- a/src/chart_types/xy_chart/rendering/rendering.bars.test.ts +++ b/src/chart_types/xy_chart/rendering/rendering.bars.test.ts @@ -82,6 +82,7 @@ describe('Rendering bars', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, seriesIdentifier: { specId: SPEC_ID, @@ -103,6 +104,7 @@ describe('Rendering bars', () => { value: { x: 1, y: 5, + datum: [1, 5], }, }), ); @@ -217,6 +219,7 @@ describe('Rendering bars', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, seriesIdentifier: { specId: spec1Id, @@ -248,6 +251,7 @@ describe('Rendering bars', () => { value: { x: 0, y: 10, + datum: [0, 10], }, }), ); @@ -260,6 +264,7 @@ describe('Rendering bars', () => { value: { x: 1, y: 5, + datum: [1, 5], }, }), ); @@ -284,6 +289,7 @@ describe('Rendering bars', () => { accessor: 'y1', x: 0, y: 10, + datum: [0, 10], }, seriesIdentifier: { specId: spec2Id, @@ -305,6 +311,7 @@ describe('Rendering bars', () => { value: { x: 0, y: 20, + datum: [0, 20], }, }), ); @@ -317,6 +324,7 @@ describe('Rendering bars', () => { value: { x: 1, y: 10, + datum: [1, 10], }, }), ); @@ -368,6 +376,7 @@ describe('Rendering bars', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, seriesIdentifier: { specId: SPEC_ID, @@ -389,6 +398,7 @@ describe('Rendering bars', () => { value: { x: 1, y: 5, + datum: [1, 5], }, }), ); @@ -500,6 +510,7 @@ describe('Rendering bars', () => { accessor: 'y1', x: 0, y: 10, + datum: [0, 10], }, seriesIdentifier: { specId: spec1Id, @@ -522,6 +533,7 @@ describe('Rendering bars', () => { value: { x: 1, y: 5, + datum: [1, 5], }, }), ); @@ -546,6 +558,7 @@ describe('Rendering bars', () => { accessor: 'y1', x: 0, y: 20, + datum: [0, 20], }, seriesIdentifier: { specId: spec2Id, @@ -569,6 +582,7 @@ describe('Rendering bars', () => { value: { x: 1, y: 10, + datum: [1, 10], }, }), ); @@ -636,6 +650,7 @@ describe('Rendering bars', () => { accessor: 'y1', x: 1546300800000, y: 10, + datum: [1546300800000, 10], }, seriesIdentifier: { specId: spec1Id, @@ -660,6 +675,7 @@ describe('Rendering bars', () => { x: 1546387200000, y: 5, mark: null, + datum: [1546387200000, 5], }, }), ); @@ -685,6 +701,7 @@ describe('Rendering bars', () => { x: 1546300800000, y: 20, mark: null, + datum: [1546300800000, 20], }, seriesIdentifier: { specId: spec2Id, @@ -710,6 +727,7 @@ describe('Rendering bars', () => { x: 1546387200000, y: 10, mark: null, + datum: [1546387200000, 10], }, }), ); diff --git a/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts b/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts index 28d97cd828..57727865c9 100644 --- a/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts +++ b/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts @@ -160,6 +160,7 @@ describe('Rendering points - bubble', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 25, @@ -183,6 +184,7 @@ describe('Rendering points - bubble', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 25, @@ -306,6 +308,7 @@ describe('Rendering points - bubble', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 25, @@ -329,6 +332,7 @@ describe('Rendering points - bubble', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 25, @@ -360,6 +364,7 @@ describe('Rendering points - bubble', () => { x: 0, y: 20, mark: null, + datum: [0, 20], }, transform: { x: 25, @@ -383,6 +388,7 @@ describe('Rendering points - bubble', () => { x: 1, y: 10, mark: null, + datum: [1, 10], }, transform: { x: 25, @@ -465,6 +471,7 @@ describe('Rendering points - bubble', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 0, @@ -488,6 +495,7 @@ describe('Rendering points - bubble', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 0, @@ -610,6 +618,7 @@ describe('Rendering points - bubble', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 0, @@ -633,6 +642,7 @@ describe('Rendering points - bubble', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 0, @@ -664,6 +674,7 @@ describe('Rendering points - bubble', () => { x: 0, y: 20, mark: null, + datum: [0, 20], }, transform: { x: 0, @@ -687,6 +698,7 @@ describe('Rendering points - bubble', () => { x: 1, y: 10, mark: null, + datum: [1, 10], }, transform: { x: 0, @@ -769,6 +781,7 @@ describe('Rendering points - bubble', () => { x: 1546300800000, y: 10, mark: null, + datum: [1546300800000, 10], }, transform: { x: 0, @@ -792,6 +805,7 @@ describe('Rendering points - bubble', () => { x: 1546387200000, y: 5, mark: null, + datum: [1546387200000, 5], }, transform: { x: 0, @@ -903,6 +917,7 @@ describe('Rendering points - bubble', () => { x: 1546300800000, y: 10, mark: null, + datum: [1546300800000, 10], }, transform: { x: 0, @@ -926,6 +941,7 @@ describe('Rendering points - bubble', () => { x: 1546387200000, y: 5, mark: null, + datum: [1546387200000, 5], }, transform: { x: 0, @@ -957,6 +973,7 @@ describe('Rendering points - bubble', () => { x: 1546300800000, y: 20, mark: null, + datum: [1546300800000, 20], }, transform: { x: 0, @@ -980,6 +997,7 @@ describe('Rendering points - bubble', () => { x: 1546387200000, y: 10, mark: null, + datum: [1546387200000, 10], }, transform: { x: 0, @@ -1147,6 +1165,7 @@ describe('Rendering points - bubble', () => { x: 0, y: 0, mark: null, + datum: [0, 0], }, transform: { x: 25, @@ -1170,6 +1189,7 @@ describe('Rendering points - bubble', () => { x: 1, y: 1, mark: null, + datum: [1, 1], }, transform: { x: 25, diff --git a/src/chart_types/xy_chart/rendering/rendering.lines.test.ts b/src/chart_types/xy_chart/rendering/rendering.lines.test.ts index 16d3df1544..1fd525240f 100644 --- a/src/chart_types/xy_chart/rendering/rendering.lines.test.ts +++ b/src/chart_types/xy_chart/rendering/rendering.lines.test.ts @@ -165,6 +165,7 @@ describe('Rendering points - line', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 25, @@ -188,6 +189,7 @@ describe('Rendering points - line', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 25, @@ -315,6 +317,7 @@ describe('Rendering points - line', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 25, @@ -338,6 +341,7 @@ describe('Rendering points - line', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 25, @@ -369,6 +373,7 @@ describe('Rendering points - line', () => { x: 0, y: 20, mark: null, + datum: [0, 20], }, transform: { x: 25, @@ -392,6 +397,7 @@ describe('Rendering points - line', () => { x: 1, y: 10, mark: null, + datum: [1, 10], }, transform: { x: 25, @@ -476,6 +482,7 @@ describe('Rendering points - line', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 0, @@ -499,6 +506,7 @@ describe('Rendering points - line', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 0, @@ -625,6 +633,7 @@ describe('Rendering points - line', () => { x: 0, y: 10, mark: null, + datum: [0, 10], }, transform: { x: 0, @@ -648,6 +657,7 @@ describe('Rendering points - line', () => { x: 1, y: 5, mark: null, + datum: [1, 5], }, transform: { x: 0, @@ -679,6 +689,7 @@ describe('Rendering points - line', () => { x: 0, y: 20, mark: null, + datum: [0, 20], }, transform: { x: 0, @@ -702,6 +713,7 @@ describe('Rendering points - line', () => { x: 1, y: 10, mark: null, + datum: [1, 10], }, transform: { x: 0, @@ -786,6 +798,7 @@ describe('Rendering points - line', () => { x: 1546300800000, y: 10, mark: null, + datum: [1546300800000, 10], }, transform: { x: 0, @@ -809,6 +822,7 @@ describe('Rendering points - line', () => { x: 1546387200000, y: 5, mark: null, + datum: [1546387200000, 5], }, transform: { x: 0, @@ -922,6 +936,7 @@ describe('Rendering points - line', () => { x: 1546300800000, y: 10, mark: null, + datum: [1546300800000, 10], }, transform: { x: 0, @@ -945,6 +960,7 @@ describe('Rendering points - line', () => { x: 1546387200000, y: 5, mark: null, + datum: [1546387200000, 5], }, transform: { x: 0, @@ -976,6 +992,7 @@ describe('Rendering points - line', () => { x: 1546300800000, y: 20, mark: null, + datum: [1546300800000, 20], }, transform: { x: 0, @@ -999,6 +1016,7 @@ describe('Rendering points - line', () => { x: 1546387200000, y: 10, mark: null, + datum: [1546387200000, 10], }, transform: { x: 0, @@ -1168,6 +1186,7 @@ describe('Rendering points - line', () => { x: 0, y: 0, mark: null, + datum: [0, 0], }, transform: { x: 25, @@ -1191,6 +1210,7 @@ describe('Rendering points - line', () => { x: 1, y: 1, mark: null, + datum: [1, 1], }, transform: { x: 25, diff --git a/src/chart_types/xy_chart/rendering/rendering.test.ts b/src/chart_types/xy_chart/rendering/rendering.test.ts index 9fa6efbc14..a36b0746b3 100644 --- a/src/chart_types/xy_chart/rendering/rendering.test.ts +++ b/src/chart_types/xy_chart/rendering/rendering.test.ts @@ -67,6 +67,7 @@ describe('Rendering utils', () => { x: 0, y: 0, mark: null, + datum: { x: 0, y: 0 }, }, x: 0, y: 0, @@ -97,6 +98,7 @@ describe('Rendering utils', () => { x: 0, y: 0, mark: null, + datum: { x: 0, y: 0 }, }, transform: { x: 0, diff --git a/src/chart_types/xy_chart/rendering/rendering.ts b/src/chart_types/xy_chart/rendering/rendering.ts index 2033de1ccd..cc9ffb8509 100644 --- a/src/chart_types/xy_chart/rendering/rendering.ts +++ b/src/chart_types/xy_chart/rendering/rendering.ts @@ -239,6 +239,7 @@ function renderPoints( y: originalY, mark, accessor: hasY0Accessors && index === 0 ? BandedAccessorType.Y0 : BandedAccessorType.Y1, + datum: datum.datum, }, transform: { x: shift, @@ -430,6 +431,7 @@ export function renderBars( y: originalY1Value, mark: null, accessor: BandedAccessorType.Y1, + datum: datum.datum, }, seriesIdentifier, seriesStyle, diff --git a/src/chart_types/xy_chart/state/chart_state.interactions.test.ts b/src/chart_types/xy_chart/state/chart_state.interactions.test.ts index e7c736c479..2740274a81 100644 --- a/src/chart_types/xy_chart/state/chart_state.interactions.test.ts +++ b/src/chart_types/xy_chart/state/chart_state.interactions.test.ts @@ -417,6 +417,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { y: 10, accessor: 'y1', mark: null, + datum: [0, 10], }, { key: 'spec{spec_1}yAccessor{1}splitAccessors{}', @@ -462,6 +463,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { y: 10, accessor: 'y1', mark: null, + datum: [0, 10], }, { key: 'spec{spec_1}yAccessor{1}splitAccessors{}', @@ -510,6 +512,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { y: 10, accessor: 'y1', mark: null, + datum: [0, 10], }, { key: 'spec{spec_1}yAccessor{1}splitAccessors{}', @@ -563,6 +566,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { y: (spec.data[0] as Array)[1], accessor: 'y1', mark: null, + datum: [(spec.data[0] as Array)[0], (spec.data[0] as Array)[1]], }, { key: 'spec{spec_1}yAccessor{1}splitAccessors{}', @@ -595,6 +599,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { y: (spec.data[1] as Array)[1], accessor: 'y1', mark: null, + datum: [(spec.data[1] as Array)[0], (spec.data[1] as Array)[1]], }, { key: 'spec{spec_1}yAccessor{1}splitAccessors{}', @@ -691,6 +696,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { y: 5, accessor: 'y1', mark: null, + datum: [1, 5], }, { key: 'spec{spec_1}yAccessor{1}splitAccessors{}', diff --git a/src/chart_types/xy_chart/state/chart_state.test.ts b/src/chart_types/xy_chart/state/chart_state.test.ts index 7c978b7f25..07c920c10f 100644 --- a/src/chart_types/xy_chart/state/chart_state.test.ts +++ b/src/chart_types/xy_chart/state/chart_state.test.ts @@ -933,6 +933,7 @@ describe.skip('Chart Store', () => { y: 1, accessor: 'y1', mark: null, + datum: { x: 0, y: 1 }, }, x: 0, y: 0, @@ -954,6 +955,7 @@ describe.skip('Chart Store', () => { y: 3, accessor: 'y1', mark: null, + datum: { x: 0, y: 3 }, }, x: 50, y: 0, @@ -1149,6 +1151,7 @@ describe.skip('Chart Store', () => { y: 1, accessor: 'y1', mark: null, + datum: { x: 0, y: 1 }, }, x: 0, y: 0, diff --git a/src/chart_types/xy_chart/state/utils/utils.test.ts b/src/chart_types/xy_chart/state/utils/utils.test.ts index bf6d91cd21..3002ea1421 100644 --- a/src/chart_types/xy_chart/state/utils/utils.test.ts +++ b/src/chart_types/xy_chart/state/utils/utils.test.ts @@ -1113,7 +1113,7 @@ describe('Chart State utils', () => { x: 0, y: 0, color: '#1EA593', - value: { x: 0, y: 5, accessor: BandedAccessorType.Y1, mark: null }, + value: { x: 0, y: 5, accessor: BandedAccessorType.Y1, mark: null, datum: { x: 0, y: 5 } }, transform: { x: 0, y: 0 }, seriesIdentifier: { specId: 'line1', @@ -1131,7 +1131,7 @@ describe('Chart State utils', () => { x: 0, y: 175.8, color: '#2B70F7', - value: { x: 0, y: 2, accessor: BandedAccessorType.Y1, mark: null }, + value: { x: 0, y: 2, accessor: BandedAccessorType.Y1, mark: null, datum: { x: 0, y: 5 } }, transform: { x: 0, y: 0 }, seriesIdentifier: { specId: 'line2', diff --git a/src/chart_types/xy_chart/tooltip/tooltip.test.ts b/src/chart_types/xy_chart/tooltip/tooltip.test.ts index bb17bb66ac..a743e062c2 100644 --- a/src/chart_types/xy_chart/tooltip/tooltip.test.ts +++ b/src/chart_types/xy_chart/tooltip/tooltip.test.ts @@ -99,6 +99,7 @@ describe('Tooltip formatting', () => { y: 10, accessor: 'y1', mark: null, + datum: { x: 1, y: 10 }, }, seriesStyle, }; @@ -120,6 +121,7 @@ describe('Tooltip formatting', () => { y: 10, accessor: 'y1', mark: null, + datum: { x: 1, y: 10 }, }, seriesStyle, }; @@ -349,6 +351,7 @@ describe('Tooltip formatting', () => { y: 10, accessor: 'y1', mark: 10, + datum: { x: 1, y: 10 }, }, }; diff --git a/src/chart_types/xy_chart/utils/interactions.test.ts b/src/chart_types/xy_chart/utils/interactions.test.ts index 2c4d0e72fa..e7753a476f 100644 --- a/src/chart_types/xy_chart/utils/interactions.test.ts +++ b/src/chart_types/xy_chart/utils/interactions.test.ts @@ -60,6 +60,7 @@ const ig1: IndexedGeometry = { x: 0, y: 1, mark: null, + datum: { x: 0, y: 1 }, }, x: 0, y: 0, @@ -80,6 +81,7 @@ const ig2: IndexedGeometry = { x: 0, y: 1, mark: null, + datum: { x: 0, y: 1 }, }, color: 'red', x: 0, @@ -101,6 +103,7 @@ const ig3: IndexedGeometry = { x: 123, y: 123, mark: null, + datum: { x: 123, y: 123 }, }, color: 'red', @@ -123,6 +126,7 @@ const ig4: IndexedGeometry = { x: 123, y: 123, mark: null, + datum: { x: 123, y: 123 }, }, color: 'blue', x: 0, @@ -144,6 +148,7 @@ const ig5: IndexedGeometry = { x: 123, y: 123, mark: null, + datum: { x: 123, y: 123 }, }, color: 'red', x: 0, @@ -165,6 +170,7 @@ const ig6: PointGeometry = { x: 123, y: 123, mark: null, + datum: { x: 123, y: 123 }, }, color: 'red', x: 0, diff --git a/src/mocks/geometries.ts b/src/mocks/geometries.ts index 93d6723739..27393e87a4 100644 --- a/src/mocks/geometries.ts +++ b/src/mocks/geometries.ts @@ -40,6 +40,7 @@ export class MockPointGeometry { x: 0, y: 0, mark: null, + datum: { x: 0, y: 0 }, }, transform: { x: 25, @@ -81,6 +82,7 @@ export class MockBarGeometry { x: 0, y: 0, mark: null, + datum: { x: 0, y: 0 }, }, seriesStyle: barSeriesStyle, }; diff --git a/src/utils/geometry.ts b/src/utils/geometry.ts index 5a53d51e59..5e6ad42c3e 100644 --- a/src/utils/geometry.ts +++ b/src/utils/geometry.ts @@ -38,6 +38,10 @@ export interface GeometryValue { x: any; mark: number | null; accessor: BandedAccessorType; + /** + * The original datum used for this geometry + */ + datum: any; } export type IndexedGeometry = PointGeometry | BarGeometry; diff --git a/stories/interactions/1_bar_clicks.tsx b/stories/interactions/1_bar_clicks.tsx index cb7e16d541..ca808f4a98 100644 --- a/stories/interactions/1_bar_clicks.tsx +++ b/stories/interactions/1_bar_clicks.tsx @@ -18,6 +18,7 @@ */ import { action } from '@storybook/addon-actions'; +import { boolean } from '@storybook/addon-knobs'; import React from 'react'; import { Axis, BarSeries, Chart, Position, ScaleType, Settings, TooltipValue, TooltipValueFormatter } from '../../src'; @@ -29,6 +30,7 @@ const onElementListeners = { }; export const Example = () => { + const useObjectAsX = boolean('use object on x', false); const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => { if (tooltip.value % 2 === 0) { return ( @@ -60,15 +62,15 @@ export const Example = () => {