From cbcfe3b8218226403a45e4f5fbd82d26c27a7414 Mon Sep 17 00:00:00 2001 From: Andrew McNutt Date: Thu, 4 Oct 2018 09:59:37 -0500 Subject: [PATCH 1/2] Add example of difference bar chart --- docs/bar-series.md | 8 ++ showcase/index.js | 2 + showcase/plot/big-base-bar-chart.js | 1 + showcase/plot/difference-chart.js | 81 ++++++++++++++++++++ showcase/showcase-sections/plots-showcase.js | 6 ++ tests/components/bar-series-tests.js | 33 ++++++++ 6 files changed, 131 insertions(+) create mode 100644 showcase/plot/difference-chart.js diff --git a/docs/bar-series.md b/docs/bar-series.md index b2a05d3e0..a3b808a09 100644 --- a/docs/bar-series.md +++ b/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. + + +#### 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. diff --git a/showcase/index.js b/showcase/index.js index fccb85c98..4df0d4d5a 100644 --- a/showcase/index.js +++ b/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, diff --git a/showcase/plot/big-base-bar-chart.js b/showcase/plot/big-base-bar-chart.js index d109edd3b..e31a8ef45 100644 --- a/showcase/plot/big-base-bar-chart.js +++ b/showcase/plot/big-base-bar-chart.js @@ -72,6 +72,7 @@ export default class Example extends React.Component { buttonContent={content} /> ({ + x: 1538664270008 - (15 - idx) * 100000, + // 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 ( +
+ this.setState({useCanvas: !useCanvas})} + buttonContent={content} + /> + + { + return d.y0 < 0 ? '#EF5D28' : '#1A3177'; + }}/> + + + +
+ ); + } +} diff --git a/showcase/showcase-sections/plots-showcase.js b/showcase/showcase-sections/plots-showcase.js index 29c492d14..4283d9670 100644 --- a/showcase/showcase-sections/plots-showcase.js +++ b/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, diff --git a/tests/components/bar-series-tests.js b/tests/components/bar-series-tests.js index b088e929d..5439a6205 100644 --- a/tests/components/bar-series-tests.js +++ b/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(); + t.equal( + $.text(), + 'TOGGLE TO CANVAS09:2009:2509:3009:3509:40-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(); +}); From c800b1ef0b2d37ccc36e2609f2a5145f6f7e55b0 Mon Sep 17 00:00:00 2001 From: Andrew McNutt Date: Thu, 4 Oct 2018 10:24:09 -0500 Subject: [PATCH 2/2] use non temporal data to fix test --- showcase/plot/difference-chart.js | 3 +-- tests/components/bar-series-tests.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/showcase/plot/difference-chart.js b/showcase/plot/difference-chart.js index e97af7733..c4e788383 100644 --- a/showcase/plot/difference-chart.js +++ b/showcase/plot/difference-chart.js @@ -32,7 +32,7 @@ import { // where you want your bars to start and stop const myDATA = [...new Array(15)] .map((x, idx) => ({ - x: 1538664270008 - (15 - idx) * 100000, + 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 @@ -60,7 +60,6 @@ export default class DifferenceChart extends React.Component { buttonContent={content} /> { const $ = mount(); t.equal( $.text(), - 'TOGGLE TO CANVAS09:2009:2509:3009:3509:40-4-20246810', + 'TOGGLE TO CANVAS02468101214-4-20246810', 'should fine the right text content' ); t.equal(