Add example of difference bar chart

docs/bar-series.md

@@ -35,6 +35,14 @@ Type (VerticalBarSeries): `number`
 Type (HorizontalBarSeries): `string|number`
 The y position in coordinates of the box to be used. For VerticalBarSeries this value is considered a number, and is scaled against it's domain into pixels.
 
+<!-- INJECT:"DifferenceChartWithLink" -->
+
+#### y0
+(Optional)
+Type (VerticalBarSeries): `number`  
+Type (HorizontalBarSeries): `string|number`
+The y0 position in coordinates of the box to be used, this is where the bottom of the bar is placed, defaults to zero. Use is not recommended with stacked bars. For VerticalBarSeries this value is considered a number, and is scaled against it's domain into pixels.
+
 #### color (optional)
 Type: `string|number`
 The color of a bar in the series. By default the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop colorType="literal" to the series itself. This property can also be defined on the series level.

showcase/index.js

@@ -30,6 +30,7 @@ import LineMarkChart from './plot/linemark-chart';
 import LineSeriesCanvasNearestXYExample from './plot/line-series-canvas-nearest-xy-example';
 import BarChart from './plot/bar-chart';
 import BigBaseBarChart from './plot/big-base-bar-chart';
+import DifferenceChart from './plot/difference-chart';
 import StackedVerticalBarChart from './plot/stacked-vertical-bar-chart';
 import StackedHorizontalBarChart from './plot/stacked-horizontal-bar-chart';
 import ClusteredStackedVerticalBarChart from './plot/clustered-stacked-bar-chart';
@@ -169,6 +170,7 @@ const mainShowCase = {
   LineSeriesCanvasNearestXYExample,
   BarChart,
   BigBaseBarChart,
+  DifferenceChart,
   StackedVerticalBarChart,
   MixedStackedChart,
   StackedHorizontalBarChart,

showcase/plot/big-base-bar-chart.js

@@ -72,6 +72,7 @@ export default class Example extends React.Component {
           buttonContent={content}
         />
         <XYPlot
+          margin={{left: 75}}
           xType="time"
           width={300}
           height={300}

showcase/plot/difference-chart.js

@@ -0,0 +1,80 @@
+// 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 ShowcaseButton from '../showcase-components/showcase-button';
+import {
+  XYPlot,
+  XAxis,
+  YAxis,
+  VerticalBarSeries,
+  VerticalBarSeriesCanvas
+} from 'index';
+
+// When making a difference chart you are specifying in coordinates
+// where you want your bars to start and stop
+const myDATA = [...new Array(15)]
+  .map((x, idx) => ({
+    x: idx,
+    // if the bars are above zero then we start them at zero
+    y0: (idx - 4 < 0) ? idx - 4 : 0,
+    // if the bars are below zero then we stop them at zero
+    y: (idx < 5) ? 0 : Math.abs((idx - 4))
+  }));
+
+const yDomain = myDATA.reduce((res, row) => ({
+  max: Math.max(res.max, row.y, row.y0),
+  min: Math.min(res.min, row.y, row.y0)
+}), {max: -Infinity, min: Infinity});
+
+export default class DifferenceChart extends React.Component {
+  state = {
+    useCanvas: false
+  };
+
+  render() {
+    const {useCanvas} = this.state;
+    const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';
+    const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;
+    return (
+      <div>
+        <ShowcaseButton
+          onClick={() => this.setState({useCanvas: !useCanvas})}
+          buttonContent={content}
+        />
+        <XYPlot
+          width={300}
+          height={300}
+          yDomain={[yDomain.min, yDomain.max]}
+        >
+          <BarSeries
+            className="difference-example"
+            data={myDATA}
+            colorType="literal"
+            getColor={d => {
+              return d.y0 < 0 ? '#EF5D28' : '#1A3177';
+            }}/>
+          <XAxis />
+          <YAxis />
+        </XYPlot>
+      </div>
+    );
+  }
+}

showcase/showcase-sections/plots-showcase.js

@@ -14,6 +14,7 @@ const {
   CustomSVGExample,
   CustomSVGAllTheMarks,
   CustomSVGRootLevel,
+  DifferenceChart,
   EmptyChart,
   FauxScatterplotChart,
   GridLinesChart,
@@ -132,6 +133,11 @@ const PLOTS = [
     componentName: 'BigBaseBarChart',
     name: 'Big Base Bar Series'
   },
+  {
+    component: DifferenceChart,
+    componentName: 'DifferenceChart',
+    name: 'Difference Bar Series'
+  },
   {
     name: 'Stacked Horizontal Bar Series',
     component: StackedHorizontalBarChart,

tests/components/bar-series-tests.js

@@ -10,6 +10,7 @@ import StackedVerticalBarChart from '../../showcase/plot/stacked-vertical-bar-ch
 import BarChart from '../../showcase/plot/bar-chart';
 import BigBaseBarChart from '../../showcase/plot/big-base-bar-chart';
 import ClusteredStackedVerticalBarChart from '../../showcase/plot/clustered-stacked-bar-chart';
+import DifferenceChart from '../../showcase/plot/difference-chart';
 
 testRenderWithProps(HorizontalBarSeries, GENERIC_XYPLOT_SERIES_PROPS);
 testRenderWithProps(VerticalBarSeries, GENERIC_XYPLOT_SERIES_PROPS);
@@ -186,3 +187,35 @@ test('BarSeries: Showcase Example - BigBaseBarChart', t => {
   );
   t.end();
 });
+
+test('BarSeries: Showcase Example - DifferenceChart', t => {
+  const $ = mount(<DifferenceChart />);
+  t.equal(
+    $.text(),
+    'TOGGLE TO CANVAS02468101214-4-20246810',
+    'should fine the right text content'
+  );
+  t.equal(
+    $.find('.rv-xy-plot__series--bar rect').length,
+    15,
+    'should find the right number of bars'
+  );
+  t.equal(
+    $.find('.rv-xy-plot__series').length,
+    1,
+    'should find the right number of series'
+  );
+
+  $.find('.showcase-button').simulate('click');
+  t.equal(
+    $.find('.rv-xy-plot__series--bar rect').length,
+    0,
+    'should now find no rects'
+  );
+  t.equal(
+    $.find('.rv-xy-canvas canvas').length,
+    1,
+    'should now find one canvas'
+  );
+  t.end();
+});