From 421760be495a88b30f0a9e198832ec06bab8d065 Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Thu, 2 Jan 2020 16:34:53 +0100
Subject: [PATCH 1/2] fix(specs): handle chart state with no series

This commit fix the use case when no series spec is configured. Instead of throwing an error, it
will just display the "No data to display" message.
---
 .playground/index.html                | 2 +-
 .playground/playgroud.tsx             | 7 -------
 src/components/chart_container.tsx    | 6 +++++-
 src/state/selectors/is_initialized.ts | 5 ++++-
 src/state/utils.ts                    | 8 +++-----
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/.playground/index.html b/.playground/index.html
index d28529866b0..76be64d55c5 100644
--- a/.playground/index.html
+++ b/.playground/index.html
@@ -25,7 +25,7 @@
         background: white;
         display: inline-block;
         position: relative;
-        width: 1000px;
+        width: 100%;
         height: 350px;
         margin: 0px;
       }
diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx
index 6f6df888c83..994a3ac92ab 100644
--- a/.playground/playgroud.tsx
+++ b/.playground/playgroud.tsx
@@ -47,13 +47,6 @@ export class Playground extends React.Component {
               showLegend
               onPointerUpdate={this.onPointerUpdate}
             />
-            <AreaSeries
-              id="lines"
-              xAccessor={0}
-              yAccessors={[1]}
-              stackAccessors={[0]}
-              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 5)}
-            />
           </Chart>
         </div>
         <div className="chart">
diff --git a/src/components/chart_container.tsx b/src/components/chart_container.tsx
index a477a32521c..5405c5ce29a 100644
--- a/src/components/chart_container.tsx
+++ b/src/components/chart_container.tsx
@@ -115,7 +115,11 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
   render() {
     const { initialized } = this.props;
     if (!initialized) {
-      return null;
+      return (
+        <div className="echReactiveChart_unavailable">
+          <p>No data to display</p>
+        </div>
+      );
     }
     const { pointerCursor, internalChartRenderer, getChartContainerRef, forwardStageRef } = this.props;
     return (
diff --git a/src/state/selectors/is_initialized.ts b/src/state/selectors/is_initialized.ts
index 97f943ad2fe..64c34e321e8 100644
--- a/src/state/selectors/is_initialized.ts
+++ b/src/state/selectors/is_initialized.ts
@@ -1,3 +1,6 @@
 import { GlobalChartState } from '../chart_state';
+import { getSeriesSpecsSelector } from '../../chart_types/xy_chart/state/selectors/get_specs';
 
-export const isInitialized = (state: GlobalChartState) => state.specsInitialized;
+export const isInitialized = (state: GlobalChartState) => {
+  return state.specsInitialized && getSeriesSpecsSelector(state).length > 0;
+};
diff --git a/src/state/utils.ts b/src/state/utils.ts
index ee20f9bb10e..b31f6122013 100644
--- a/src/state/utils.ts
+++ b/src/state/utils.ts
@@ -6,11 +6,9 @@ export function getSpecsFromStore<U extends Spec>(specs: SpecList, chartType: Ch
   return Object.keys(specs)
     .filter((specId) => {
       const currentSpec = specs[specId];
-      if (specType) {
-        return currentSpec.specType === specType && currentSpec.chartType === chartType;
-      } else {
-        return currentSpec.chartType === chartType;
-      }
+      const sameChartType = currentSpec.chartType === chartType;
+      const sameSpecType = specType ? currentSpec.specType === specType : true;
+      return sameChartType && sameSpecType;
     })
     .map((specId) => {
       return specs[specId] as U;

From a5f8357e20bd5df17605c916c45181f097cb0ffc Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Thu, 2 Jan 2020 17:00:14 +0100
Subject: [PATCH 2/2] test: add test on empty chart

---
 src/components/chart.test.tsx | 27 +++++++++++++++++++++++++++
 src/components/chart.tsx      |  7 ++++---
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/components/chart.test.tsx

diff --git a/src/components/chart.test.tsx b/src/components/chart.test.tsx
new file mode 100644
index 00000000000..8ef0f9ab2ec
--- /dev/null
+++ b/src/components/chart.test.tsx
@@ -0,0 +1,27 @@
+/**
+ * @jest-environment node
+ */
+// Using node env because JSDOM environment throws warnings:
+// Jest doesn't work well with the environment detection hack that react-redux uses internally.
+// https://github.com/reduxjs/react-redux/issues/1373
+
+import React from 'react';
+import { Chart } from './chart';
+import { render } from 'enzyme';
+import { Settings } from '../specs';
+
+describe('Chart', () => {
+  it("should render 'No data to display' without series", () => {
+    const wrapper = render(<Chart />);
+    expect(wrapper.text()).toContain('No data to display');
+  });
+
+  it("should render 'No data to display' with settings but without series", () => {
+    const wrapper = render(
+      <Chart>
+        <Settings debug={true} rendering={'svg'} />
+      </Chart>,
+    );
+    expect(wrapper.text()).toContain('No data to display');
+  });
+});
diff --git a/src/components/chart.tsx b/src/components/chart.tsx
index 89fb145fd2a..139268012a3 100644
--- a/src/components/chart.tsx
+++ b/src/components/chart.tsx
@@ -65,9 +65,10 @@ export class Chart extends React.Component<ChartProps, ChartState> {
 
     const id = uuid.v4();
     const storeReducer = chartStoreReducer(id);
-    const enhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-      ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, name: `@elastic/charts (id: ${id})` })()
-      : undefined;
+    const enhancers =
+      typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+        ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, name: `@elastic/charts (id: ${id})` })()
+        : undefined;
 
     this.chartStore = createStore(storeReducer, enhancers);
     this.state = {