fix(highlighter): identify the clipPath using the chartId

To uniquely identify the clipPath for the highlighter in a multi-chart page, this commit add the chartId to the clipPath id fix elastic#489
markov00 · Dec 9, 2019 · 755a346 · 755a346
1 parent 26c8d8b
commit 755a346
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chart, Settings, TooltipType, LineSeries } from '../src';
+import { Chart, Settings, TooltipType, BarSeries } from '../src';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
 export class Playground extends React.Component {
   chartRef: React.RefObject<Chart> = React.createRef();
@@ -34,11 +34,35 @@ export class Playground extends React.Component {
         <div className="chart">
           <Chart>
             <Settings tooltip={{ type: TooltipType.Crosshairs }} showLegend />
-            <LineSeries
+            <BarSeries
               id="lines"
               xAccessor={0}
               yAccessors={[1]}
-              data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
+              stackAccessors={[0]}
+              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 5)}
+            />
+            <BarSeries
+              id="lines2"
+              xAccessor={0}
+              yAccessors={[1]}
+              stackAccessors={[0]}
+              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 5)}
+            />
+          </Chart>
+
+          <Chart size={[200, 200]}>
+            <Settings tooltip={{ type: TooltipType.Crosshairs }} showLegend />
+            <BarSeries
+              id="lines"
+              xAccessor={0}
+              yAccessors={[1]}
+              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 5)}
+            />
+            <BarSeries
+              id="lines2"
+              xAccessor={0}
+              yAccessors={[1]}
+              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 5)}
             />
           </Chart>
         </div>

diff --git a/src/chart_types/xy_chart/renderer/dom/highlighter.tsx b/src/chart_types/xy_chart/renderer/dom/highlighter.tsx
@@ -12,8 +12,9 @@ import { getChartRotationSelector } from '../../../../state/selectors/get_chart_
 import { computeChartDimensionsSelector } from '../../state/selectors/compute_chart_dimensions';
 
 interface HighlighterProps {
-  highlightedGeometries: IndexedGeometry[];
   initialized: boolean;
+  chartId: string;
+  highlightedGeometries: IndexedGeometry[];
   chartTransform: Transform;
   chartDimensions: Dimensions;
   chartRotation: Rotation;
@@ -23,15 +24,16 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
   static displayName = 'Highlighter';
 
   render() {
-    const { highlightedGeometries, chartTransform, chartDimensions, chartRotation } = this.props;
+    const { highlightedGeometries, chartTransform, chartDimensions, chartRotation, chartId } = this.props;
     const left = chartDimensions.left + chartTransform.x;
     const top = chartDimensions.top + chartTransform.y;
     const clipWidth = [90, -90].includes(chartRotation) ? chartDimensions.height : chartDimensions.width;
     const clipHeight = [90, -90].includes(chartRotation) ? chartDimensions.width : chartDimensions.height;
+    const clipPathId = `echHighlighterClipPath__${chartId}`;
     return (
       <svg className="echHighlighter">
         <defs>
-          <clipPath id="echHighlighterClipPath">
+          <clipPath id={clipPathId}>
             <rect x="0" y="0" width={clipWidth} height={clipHeight} />
           </clipPath>
         </defs>
@@ -59,7 +61,7 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
                 width={geom.width}
                 height={geom.height}
                 className="echHighlighter__rect"
-                clipPath="url(#echHighlighterClipPath)"
+                clipPath={`url(${clipPathId})`}
               />
             );
           })}
@@ -73,6 +75,7 @@ const mapStateToProps = (state: GlobalChartState): HighlighterProps => {
   if (!isInitialized(state)) {
     return {
       initialized: false,
+      chartId: state.chartId,
       highlightedGeometries: [],
       chartTransform: {
         x: 0,
@@ -85,6 +88,7 @@ const mapStateToProps = (state: GlobalChartState): HighlighterProps => {
   }
   return {
     initialized: true,
+    chartId: state.chartId,
     highlightedGeometries: getHighlightedGeomsSelector(state),
     chartTransform: computeChartTransformSelector(state),
     chartDimensions: computeChartDimensionsSelector(state).chartDimensions,