Support having no Series (#312)

Allow charts to exist which don't have any Series. This can happen if
Griff is used in an application where the user can dynamically build a
chart, for example.

src/components/ContextChart/index.js

@@ -89,6 +89,10 @@ const ContextChart = ({
   xAxisPlacement,
   zoomable,
 }) => {
+  if (series.length === 0) {
+    return null;
+  }
+
   const getYScale = (s, height) => {
     const domain =
       firstResolvedDomain(

src/components/InteractionLayer/index.js

@@ -499,6 +499,11 @@ class InteractionLayer extends React.Component {
       width,
       zoomAxes,
     } = this.props;
+
+    if (series.length === 0) {
+      return null;
+    }
+
     const {
       crosshair: { x, y },
       points,

src/components/Scaler/index.tsx

@@ -193,7 +193,7 @@ class Scaler extends React.Component<Props, State> {
 
         return updates;
       },
-      { domainsByItemId: {}, subDomainsByItemId: {} }
+      { domainsByItemId, subDomainsByItemId }
     );
     return updated ? stateUpdates : null;
   }

stories/LineChart.stories.js

@@ -31,6 +31,54 @@ storiesOf('LineChart', module)
       {story()}
     </div>
   ))
+  .add('Empty', () => (
+    <DataProvider defaultLoader={staticLoader} timeDomain={staticXDomain}>
+      <LineChart height={CHART_HEIGHT} />
+    </DataProvider>
+  ))
+  .add('Dynamic series', () => {
+    const randomColor = () =>
+      `rgb(${Math.round(Math.random() * 255)},${Math.round(
+        Math.random() * 255
+      )},${Math.round(Math.random() * 255)},1)`;
+
+    class DynamicSeries extends React.Component {
+      state = {
+        series: [],
+      };
+
+      addSeries = () =>
+        this.setState(({ series }) => ({
+          series: [...series, { id: series.length + 1, color: randomColor() }],
+        }));
+
+      clearSeries = () => this.setState({ series: [] });
+
+      render() {
+        const { series } = this.state;
+        return (
+          <div>
+            <button type="button" onClick={this.addSeries}>
+              Add series
+            </button>
+            <button type="button" onClick={this.clearSeries}>
+              Remove all series
+            </button>
+            <DataProvider
+              defaultLoader={staticLoader}
+              timeDomain={staticXDomain}
+            >
+              {series.map(s => (
+                <Series key={`series-${s.id}`} {...s} />
+              ))}
+              <LineChart height={CHART_HEIGHT} />
+            </DataProvider>
+          </div>
+        );
+      }
+    }
+    return <DynamicSeries />;
+  })
   .add('Basic', () => (
     <DataProvider defaultLoader={staticLoader} timeDomain={staticXDomain}>
       <Series id="1" color="steelblue" />