fix: remove old specs with changed ids (#167)

elastic · Apr 16, 2019 · 6c4f705 · 6c4f705
1 parent c780d98
commit 6c4f705
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 9 deletions.
diff --git a/src/specs/area_series.tsx b/src/specs/area_series.tsx
@@ -22,9 +22,12 @@ export class AreaSeriesSpecComponent extends PureComponent<AreaSpecProps> {
     const { chartStore, children, ...config } = this.props;
     chartStore!.addSeriesSpec({ ...config });
   }
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: AreaSpecProps) {
     const { chartStore, children, ...config } = this.props;
     chartStore!.addSeriesSpec({ ...config });
+    if (prevProps.id !== this.props.id) {
+      chartStore!.removeSeriesSpec(prevProps.id);
+    }
   }
   componentWillUnmount() {
     const { chartStore, id } = this.props;

diff --git a/src/specs/bar_series.tsx b/src/specs/bar_series.tsx
@@ -22,9 +22,12 @@ export class BarSeriesSpecComponent extends PureComponent<BarSpecProps> {
     const { chartStore, children, ...config } = this.props;
     chartStore!.addSeriesSpec({ ...config });
   }
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: BarSpecProps) {
     const { chartStore, children, ...config } = this.props;
     chartStore!.addSeriesSpec({ ...config });
+    if (prevProps.id !== this.props.id) {
+      chartStore!.removeSeriesSpec(prevProps.id);
+    }
   }
   componentWillUnmount() {
     const { chartStore, id } = this.props;

diff --git a/src/specs/line_series.tsx b/src/specs/line_series.tsx
@@ -22,9 +22,12 @@ export class LineSeriesSpecComponent extends PureComponent<LineSpecProps> {
     const { chartStore, children, ...config } = this.props;
     chartStore!.addSeriesSpec({ ...config });
   }
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: LineSpecProps) {
     const { chartStore, children, ...config } = this.props;
     chartStore!.addSeriesSpec({ ...config });
+    if (prevProps.id !== this.props.id) {
+      chartStore!.removeSeriesSpec(prevProps.id);
+    }
   }
   componentWillUnmount() {
     const { chartStore, id } = this.props;

diff --git a/stories/area_chart.tsx b/stories/area_chart.tsx
@@ -20,15 +20,21 @@ const dateFormatter = timeFormatter('HH:mm');
 
 storiesOf('Area Chart', module)
   .add('basic', () => {
+    const toggleSpec = boolean('toggle area spec', true);
+    const data1 = KIBANA_METRICS.metrics.kibana_os_load[0].data;
+    const data2 = data1.map((datum) => [datum[0], datum[1] - 1]);
+    const data = toggleSpec ? data1 : data2;
+    const specId = toggleSpec ? 'areas1' : 'areas2';
+
     return (
       <Chart renderer="canvas" className={'story-chart'}>
         <AreaSeries
-          id={getSpecId('areas')}
+          id={getSpecId(specId)}
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
           xAccessor={0}
           yAccessors={[1]}
-          data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
+          data={data}
           yScaleToDataExtent={false}
         />
       </Chart>

diff --git a/stories/bar_chart.tsx b/stories/bar_chart.tsx
@@ -26,16 +26,22 @@ storiesOf('Bar Chart', module)
   .add('basic', () => {
     const darkmode = boolean('darkmode', false);
     const className = darkmode ? 'story-chart-dark' : 'story-chart';
+    const toggleSpec = boolean('toggle bar spec', true);
+    const data1 = [{ x: 0, y: 2 }, { x: 1, y: 7 }, { x: 2, y: 3 }, { x: 3, y: 6 }];
+    const data2 = data1.map((datum) => ({ ...datum, y: datum.y - 1 }));
+    const data = toggleSpec ? data1 : data2;
+    const specId = toggleSpec ? 'bars1' : 'bars2';
+
     return (
       <Chart renderer="canvas" className={className}>
         <BarSeries
-          id={getSpecId('bars')}
+          id={getSpecId(specId)}
           name={'Simple bar series'}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           xAccessor="x"
           yAccessors={['y']}
-          data={[{ x: 0, y: 2 }, { x: 1, y: 7 }, { x: 2, y: 3 }, { x: 3, y: 6 }]}
+          data={data}
           yScaleToDataExtent={false}
         />
       </Chart>

diff --git a/stories/line_chart.tsx b/stories/line_chart.tsx
@@ -1,3 +1,4 @@
+import { boolean } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import {
@@ -15,19 +16,26 @@ import {
 } from '../src/';
 import { KIBANA_METRICS } from '../src/lib/series/utils/test_dataset_kibana';
 import { TSVB_DATASET } from '../src/lib/series/utils/test_dataset_tsvb';
+
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 storiesOf('Line Chart', module)
   .add('basic', () => {
+    const toggleSpec = boolean('toggle line spec', true);
+    const data1 = KIBANA_METRICS.metrics.kibana_os_load[0].data;
+    const data2 = data1.map((datum) => [datum[0], datum[1] - 1]);
+    const data = toggleSpec ? data1 : data2;
+    const specId = toggleSpec ? 'lines1' : 'lines2';
+
     return (
       <Chart renderer="canvas" className={'story-chart'}>
         <LineSeries
-          id={getSpecId('lines')}
+          id={getSpecId(specId)}
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
           xAccessor={0}
           yAccessors={[1]}
-          data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
+          data={data}
           yScaleToDataExtent={false}
         />
       </Chart>