fix(specs): shows a chart message without series specified (#506)

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.

Author: markov00

.playground/index.html

@@ -25,7 +25,7 @@
         background: white;
         display: inline-block;
         position: relative;
-        width: 1000px;
+        width: 100%;
         height: 350px;
         margin: 0px;
       }

.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">

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');
+  });
+});

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 = {

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 (

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;
+};

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;