No documentation on how to make empty charts (uber#882)

* document the use of empty charts through example and tests

* include example in docs

* use states component

* fix lint

docs/xy-plot.md

@@ -273,3 +273,10 @@ Animation config, which is automatically passed to all children, but can be over
 If `false` is passed, then the child components *will not be* animated.
 If `true` is passed then the child components *will be* animated with the default settings.
 If an object is passed, then the child components *will be* animated with the given settings.
+
+#### dontCheckIfEmpty (optional)
+Type: `Boolean`
+Default: `false`
+If this prop is provided then the XYPlot with not check if the plot is empty before rendering. This can be useful if you have a variable amount of data, especially when that variable can be zero.
+
+<!-- INJECT:"EmptyChartWithLink" -->

showcase/axes/empty-chart.js

@@ -0,0 +1,49 @@
+// Copyright (c) 2016 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+
+import {
+  XYPlot,
+  XAxis,
+  YAxis,
+  VerticalGridLines,
+  HorizontalGridLines
+} from 'index';
+
+export default function EmptyChart() {
+  return (
+    <XYPlot
+      dontCheckIfEmpty
+      xDomain={[0, 3]}
+      yDomain={[10, 3]}
+      width={300}
+      height={300}>
+      <VerticalGridLines />
+      <HorizontalGridLines />
+      <XAxis
+        hideLine
+        title="Empty Chart Right Here"
+        tickFormat={v => `${v}!`}
+        tickValues={[1, 1.5, 2, 3]} />
+      <YAxis hideTicks/>
+    </XYPlot>
+  );
+}

showcase/index.js

@@ -94,6 +94,7 @@ import CustomAxisChart from './axes/custom-axis';
 import CustomAxisTickFormat from './axes/custom-axis-tick-format';
 import CustomAxes from './axes/custom-axes';
 import DecorativeAxisCrissCross from './axes/decorative-axes-criss-cross';
+import EmptyChart from './axes/empty-chart';
 import StaticHints from './axes/static-hints';
 import DynamicHints from './axes/dynamic-hints';
 import DynamicComplexEdgeHints from './axes/dynamic-complex-edge-hints';
@@ -191,6 +192,7 @@ const mainShowCase = {
   DynamicSimpleEdgeHints,
   DynamicSimpleTopEdgeHints,
   DynamicProgrammaticRightEdgeHints,
+  EmptyChart,
   StaticCrosshair,
   DynamicCrosshair,
   DynamicCrosshairScatterplot,

showcase/showcase-links.js

@@ -60,6 +60,7 @@ export const SHOWCASE_LINKS = {
   CustomScales: 'https://github.com/uber/react-vis/blob/master/showcase/plot/custom-scales.js',
   GridLinesChart: 'https://github.com/uber/react-vis/blob/master/showcase/plot/grid.js',
   FauxScatterplotChart: 'https://github.com/uber/react-vis/blob/master/showcase/plot/faux-radial-scatterplot.js',
+  EmptyChart: 'https://github.com/uber/react-vis/blob/master/showcase/plot/empty-chart.js',
   // RADAR CHART SHOWCASE LINKS
   AnimatedRadarChart: 'https://github.com/uber/react-vis/blob/master/showcase/radar-chart/animated-radar-chart.js',
   BasicRadarChart: 'https://github.com/uber/react-vis/blob/master/showcase/radar-chart/basic-radar-chart.js',

showcase/showcase-sections/plots-showcase.js

@@ -14,6 +14,7 @@ const {
   CustomSVGExample,
   CustomSVGAllTheMarks,
   CustomSVGRootLevel,
+  EmptyChart,
   FauxScatterplotChart,
   GridLinesChart,
   HeatmapChart,
@@ -151,6 +152,10 @@ const BASIC_COMPONENTS = [{
   name: 'Custom scales',
   component: CustomScales,
   componentName: 'CustomScales'
+}, {
+  name: 'Empty Chart',
+  component: EmptyChart,
+  componentName: 'EmptyChart'
 }, {
   name: 'Custom GridLines',
   component: GridLinesChart,

tests/components/xy-plot-tests.js

@@ -32,6 +32,7 @@ import HorizontalGridLines from 'plot/horizontal-grid-lines';
 
 import MixedStackedChart from '../../showcase/plot/mixed-stacked-chart';
 import {FlexibleCharts} from '../../showcase/flexible/flexible-examples';
+import EmptyChart from '../../showcase/axes/empty-chart';
 import {testRenderWithProps} from '../test-utils';
 
 const XYPLOT_PROPS = {width: 10, height: 10};
@@ -303,6 +304,15 @@ test('Trigger all onParentMouse handlers on Series components', t => {
   $.find('svg').at(0).simulate('mouseleave');
   $.find('svg').at(0).simulate('touchstart');
   $.find('svg').at(0).simulate('touchmove');
+
+  t.end();
+});
+
+test('XYPlot dontCheckIfEmpty - Showcase example EmptyChart', t => {
+  const $ = mount(<EmptyChart />);
+  t.equal($.find('.rv-xy-plot__series').length, 0, 'should find no series');
+  t.equal($.text(), '1!1.5!2!3!Empty Chart Right Here', 'should find the correct text');
+  t.end();
 });
 
 test('XYPlot attach ref only to series components', t => {