Imprpove some of the examples (#956)

uber · Sep 15, 2018 · 41578ff · 41578ff
1 parent 81581de
commit 41578ff
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 31 deletions.
diff --git 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
@@ -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 {
           <YAxis />
           <BarSeries
             className="vertical-bar-series-example"
-            data={[
-              {x: 'A', y: 10},
-              {x: 'B', y: 5},
-              {x: 'C', y: 15}
-            ]}/>
-          <BarSeries
-            data={[
-              {x: 'A', y: 12},
-              {x: 'B', y: 2},
-              {x: 'C', y: 11}
-            ]}/>
+            data={greenData}/>
+          <BarSeries data={blueData}/>
+          <LabelSeries data={labelData} getLabel={d => d.x}/>
         </XYPlot>
       </div>
     );

diff --git a/showcase/plot/line-series-canvas.js → .../line-series-canvas-nearest-xy-example.js b/showcase/plot/line-series-canvas.js → .../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 (
       <XYPlot
         width={500}
         height={300}
-        domainX={[0, k]}
+        domainX={[0, 2 * k]}
         domainY={[-200, 200]}
       >
         {<LineSeriesCanvas
-          onNearestXY={(nearestXY, {event}) => this.setState({nearestXY})}
-          data={this.state.data}
+          onNearestXY={point => this.setState({nearestXY: point})}
+          data={data}
         />}
         {<MarkSeriesCanvas
           size={5}
           fill={'yellow'}
           stroke={'red'}
           style={{pointerEvents: 'none'}}
-          data={[this.state.nearestXY]}
+          data={[nearestXY]}
         />}
       </XYPlot>
     );

diff --git 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
@@ -16,7 +16,7 @@ testRenderWithProps(VerticalBarSeries, GENERIC_XYPLOT_SERIES_PROPS);
 
 test('BarSeries: Showcase Example - BarChart', t => {
   const $ = mount(<BarChart />);
-  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');