From 41578ff1990a33f39f16a366af99548e1098c06e Mon Sep 17 00:00:00 2001 From: Andrew McNutt Date: Fri, 14 Sep 2018 20:51:56 -0400 Subject: [PATCH] Imprpove some of the examples (#956) --- showcase/index.js | 4 +-- showcase/plot/bar-chart.js | 34 ++++++++++++------- ... line-series-canvas-nearest-xy-example.js} | 22 ++++++------ showcase/showcase-sections/plots-showcase.js | 8 ++--- tests/components/bar-series-tests.js | 2 +- 5 files changed, 39 insertions(+), 31 deletions(-) rename showcase/plot/{line-series-canvas.js => line-series-canvas-nearest-xy-example.js} (79%) diff --git a/showcase/index.js b/showcase/index.js index fb9cd70b7..982195611 100644 --- a/showcase/index.js +++ b/showcase/index.js @@ -27,7 +27,7 @@ import LineChartManyColors from './color/line-chart-many-colors'; import LineChartCanvas from './plot/line-chart-canvas'; import LineChartWithStyle from './plot/line-chart-with-style'; import LineMarkChart from './plot/linemark-chart'; -import LineSeriesCanvas from './plot/line-series-canvas'; +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 StackedVerticalBarChart from './plot/stacked-vertical-bar-chart'; @@ -168,7 +168,7 @@ const mainShowCase = { LineChartCanvas, LineChartWithStyle, LineMarkChart, - LineSeriesCanvas, + LineSeriesCanvasNearestXYExample, BarChart, BigBaseBarChart, StackedVerticalBarChart, diff --git a/showcase/plot/bar-chart.js b/showcase/plot/bar-chart.js index 365b67e28..8af32ca84 100644 --- a/showcase/plot/bar-chart.js +++ b/showcase/plot/bar-chart.js @@ -27,9 +27,27 @@ import { VerticalGridLines, HorizontalGridLines, VerticalBarSeries, - VerticalBarSeriesCanvas + VerticalBarSeriesCanvas, + LabelSeries } from 'index'; +const greenData = [ + {x: 'A', y: 10}, + {x: 'B', y: 5}, + {x: 'C', y: 15} +]; + +const blueData = [ + {x: 'A', y: 12}, + {x: 'B', y: 2}, + {x: 'C', y: 11} +]; + +const labelData = greenData.map((d, idx) => ({ + x: d.x, + y: Math.max(greenData[idx].y, blueData[idx].y) +})); + export default class Example extends React.Component { state = { useCanvas: false @@ -56,17 +74,9 @@ export default class Example extends React.Component { - + data={greenData}/> + + d.x}/> ); diff --git a/showcase/plot/line-series-canvas.js b/showcase/plot/line-series-canvas-nearest-xy-example.js similarity index 79% rename from showcase/plot/line-series-canvas.js rename to showcase/plot/line-series-canvas-nearest-xy-example.js index 6a7279a0e..6382e3207 100644 --- a/showcase/plot/line-series-canvas.js +++ b/showcase/plot/line-series-canvas-nearest-xy-example.js @@ -19,35 +19,33 @@ // THE SOFTWARE. import React from 'react'; import {XYPlot, LineSeriesCanvas, MarkSeriesCanvas} from 'index'; -const k = 20000; -export default class Example extends React.Component { +const k = 100; +const data = Array(k).fill(0).map((n, x) => ({x, y: x % 2 ? 180 : -180})); - constructor() { - super(); - this.state = { - nearestXY: {x: 0, y: 0}, - data: Array(k).fill(0).map((n, idx) => ({x: idx, y: idx % 2 ? 180 : -180})) - }; +export default class LineSeriesCanvasNearestXYExample extends React.Component { + state = { + nearestXY: data[0] } render() { + const {nearestXY} = this.state; return ( { this.setState({nearestXY})} - data={this.state.data} + onNearestXY={point => this.setState({nearestXY: point})} + data={data} />} {} ); diff --git a/showcase/showcase-sections/plots-showcase.js b/showcase/showcase-sections/plots-showcase.js index 52f92f09e..62c2e98e6 100644 --- a/showcase/showcase-sections/plots-showcase.js +++ b/showcase/showcase-sections/plots-showcase.js @@ -26,7 +26,7 @@ const { LineChartManyColors, LineChartWithStyle, LineChartCanvas, - LineSeriesCanvas, + LineSeriesCanvasNearestXYExample, LineMarkChart, MixedStackedChart, StackedVerticalBarChart, @@ -60,10 +60,10 @@ const PLOTS = [{ }, { component: LineChartCanvas, componentName: 'LineChartCanvas', - name: 'Line Series Canvas' + name: 'Line Chart Canvas' }, { - component: LineSeriesCanvas, - componentName: 'LineSeriesCanvas', + component: LineSeriesCanvasNearestXYExample, + componentName: 'LineSeriesCanvasNearestXYExample', name: 'Line Series Canvas' }, { component: LineChartManyColors, diff --git a/tests/components/bar-series-tests.js b/tests/components/bar-series-tests.js index 066b3452a..263cd8531 100644 --- a/tests/components/bar-series-tests.js +++ b/tests/components/bar-series-tests.js @@ -16,7 +16,7 @@ testRenderWithProps(VerticalBarSeries, GENERIC_XYPLOT_SERIES_PROPS); test('BarSeries: Showcase Example - BarChart', t => { const $ = mount(); - t.equal($.text(), 'TOGGLE TO CANVASABC02468101214', 'should fine the right text content'); + t.equal($.text(), 'TOGGLE TO CANVASABC02468101214ABC', 'should fine the right text content'); t.equal($.find('.rv-xy-plot__series--bar rect').length, 6, 'should find the right number of bars'); t.equal($.find('.vertical-bar-series-example').length, 1, 'should find the right number of custom named series');