fix: external tooltip legend extra value sync (opensearch-project#993)

AMoo-Miki · Jan 27, 2021 · 7e1096e · 7e1096e
1 parent c68df5d
commit 7e1096e
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 12 deletions.
diff --git a/...all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png b/...all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png
diff --git a/...nteractions-test-ts-interactions-tooltip-sync-show-synced-crosshairs-1-snap.png b/...nteractions-test-ts-interactions-tooltip-sync-show-synced-crosshairs-1-snap.png
diff --git a/...test-ts-interactions-tooltip-sync-show-synced-extra-values-in-legend-1-snap.png b/...test-ts-interactions-tooltip-sync-show-synced-extra-values-in-legend-1-snap.png
diff --git a/.../interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png b/.../interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png
diff --git a/packages/osd-charts/integration/tests/interactions.test.ts b/packages/osd-charts/integration/tests/interactions.test.ts
@@ -221,16 +221,27 @@ describe('Interactions', () => {
     it('show synced tooltips', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=true&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left',
-        { right: 120, top: 80 },
+        { right: 200, top: 80 },
         {
           screenshotSelector: '#story-root',
         },
       );
     });
+
     it('show synced crosshairs', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=false&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left',
-        { right: 120, top: 80 },
+        { right: 200, top: 80 },
+        {
+          screenshotSelector: '#story-root',
+        },
+      );
+    });
+
+    it('show synced extra values in legend', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-Series type_Top Chart=line&knob-enable external tooltip_Top Chart=true&knob-Series type_Bottom Chart=line&knob-enable external tooltip_Bottom Chart=false',
+        { right: 200, top: 80 },
         {
           screenshotSelector: '#story-root',
         },

diff --git a/...d-charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts b/...d-charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts
@@ -124,7 +124,7 @@ function getTooltipAndHighlightFromValue(
     return EMPTY_VALUES;
   }
 
-  if (tooltipType === TooltipType.None) {
+  if (tooltipType === TooltipType.None && !externalPointerEvent) {
     return EMPTY_VALUES;
   }
 

diff --git a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"background\\"></div><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><svg class=\\"echCrosshair__cursor\\" width=\\"100%\\" height=\\"100%\\"></svg><svg class=\\"echCrosshair__crossLine\\" width=\\"100%\\" height=\\"100%\\" style=\\"z-index: 0;\\"></svg><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;
+exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"background\\"></div><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><svg class=\\"echCrosshair__cursor\\" width=\\"100%\\" height=\\"100%\\"></svg><svg class=\\"echCrosshair__crossLine\\" width=\\"100%\\" height=\\"100%\\" style=\\"z-index: 0;\\"></svg><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div><div id=\\"echAnchorMainTooltip__chart1\\" style=\\"z-index: 0;\\"></div></div>"`;
diff --git a/packages/osd-charts/src/components/tooltip/tooltip.tsx b/packages/osd-charts/src/components/tooltip/tooltip.tsx
@@ -203,9 +203,7 @@ const TooltipComponent = ({
       boundary: boundary === 'chart' && chartRef.current ? chartRef.current : undefined,
     };
   }, [settings, chartRef, rotation]);
-  if (!visible) {
-    return null;
-  }
+
   return (
     <TooltipPortal
       scope="MainTooltip"

diff --git a/packages/osd-charts/stories/interactions/16_cursor_update_action.tsx b/packages/osd-charts/stories/interactions/16_cursor_update_action.tsx
@@ -18,7 +18,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 import React from 'react';
 
 import {
@@ -32,12 +32,35 @@ import {
   Placement,
   niceTimeFormatter,
   TooltipType,
+  LineSeries,
+  AreaSeries,
 } from '../../src';
 import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
 import { palettes } from '../../src/utils/themes/colors';
 import { getTooltipTypeKnob, getPlacementKnob } from '../utils/knobs';
 import { SB_SOURCE_PANEL } from '../utils/storybook';
 
+const chartTypes: Record<string, any> = {
+  bar: BarSeries,
+  line: LineSeries,
+  area: AreaSeries,
+};
+
+const getSeriesKnob = (group?: string) => {
+  const type =
+    select<string>(
+      'Series type',
+      {
+        Bar: 'bar',
+        Line: 'line',
+        Area: 'area',
+      },
+      'bar',
+      group,
+    ) ?? 'bar';
+  return chartTypes[type] ?? BarSeries;
+};
+
 export const Example = () => {
   const ref1 = React.createRef<Chart>();
   const ref2 = React.createRef<Chart>();
@@ -57,6 +80,8 @@ export const Example = () => {
   const group1 = 'Top Chart';
   const group2 = 'Bottom Chart';
 
+  const TopSeries = getSeriesKnob(group1);
+  const BottomSeries = getSeriesKnob(group2);
   const topType = getTooltipTypeKnob('local tooltip type', TooltipType.VerticalCursor, group1);
   const bottomType = getTooltipTypeKnob('local tooltip type', TooltipType.VerticalCursor, group2);
   const topVisible = boolean('enable external tooltip', true, group1);
@@ -68,6 +93,8 @@ export const Example = () => {
     <>
       <Chart className="story-chart" ref={ref1} size={{ height: '50%' }} id="chart1">
         <Settings
+          showLegend
+          showLegendExtra
           onPointerUpdate={pointerUpdate}
           externalPointerEvents={{
             tooltip: { visible: topVisible, placement: topPlacement },
@@ -82,8 +109,8 @@ export const Example = () => {
         />
         <Axis id="left2" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
-        <BarSeries
-          id="bars"
+        <TopSeries
+          id="Top"
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
           xAccessor={0}
@@ -93,6 +120,8 @@ export const Example = () => {
       </Chart>
       <Chart className="story-chart" ref={ref2} size={{ height: '50%' }} id="chart2">
         <Settings
+          showLegend
+          showLegendExtra
           onPointerUpdate={pointerUpdate}
           tooltip={{
             type: bottomType,
@@ -114,8 +143,8 @@ export const Example = () => {
           domain={{ min: 5, max: 20 }}
         />
 
-        <BarSeries
-          id="bars"
+        <BottomSeries
+          id="Bottom"
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Sqrt}
           xAccessor={0}
@@ -127,6 +156,7 @@ export const Example = () => {
     </>
   );
 };
+
 Example.story = {
   parameters: {
     info: {