From 6c4f70570fdd027299bed5883b3996e07da49684 Mon Sep 17 00:00:00 2001
From: Emma Cunningham <the.cunning.ham@gmail.com>
Date: Tue, 16 Apr 2019 07:11:11 -0700
Subject: [PATCH] fix: remove old specs with changed ids (#167)

---
 src/specs/area_series.tsx |  5 ++++-
 src/specs/bar_series.tsx  |  5 ++++-
 src/specs/line_series.tsx |  5 ++++-
 stories/area_chart.tsx    | 10 ++++++++--
 stories/bar_chart.tsx     | 10 ++++++++--
 stories/line_chart.tsx    | 12 ++++++++++--
 6 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/specs/area_series.tsx b/src/specs/area_series.tsx
index 5ee5bb716d..5fd31bbf5e 100644
--- 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
index 71c4ade8db..be54884d38 100644
--- 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
index f345b06f69..0652f100f0 100644
--- 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
index f2c4533d0a..ff00409503 100644
--- 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
index f9d213e182..69bfe92bc8 100644
--- 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
index 921a6644ca..5cb25abcec 100644
--- 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>