Canvas Mode (uber#389)

LoicUV · Apr 14, 2017 · 82f9b94 · 82f9b94
1 parent c434a58
commit 82f9b94
Show file tree

Hide file tree

Showing 29 changed files with 1,095 additions and 177 deletions.
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "babel-register": "^6.18.0",
+    "canvas-prebuilt": "^1.6.0",
     "enzyme": "^2.7.0",
     "eslint": "^3.13.1",
     "eslint-config-uber-es2015": "^3.0.1",

diff --git a/showcase/plot/bar-chart.js b/showcase/plot/bar-chart.js
@@ -19,41 +19,54 @@
 // THE SOFTWARE.
 
 import React from 'react';
-
+import ShowcaseButton from '../showcase-components/showcase-button';
 import {
   XYPlot,
   XAxis,
   YAxis,
   VerticalGridLines,
   HorizontalGridLines,
-  VerticalBarSeries
+  VerticalBarSeries,
+  VerticalBarSeriesCanvas
 } from 'index';
 
 export default class Example 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 (
-      <XYPlot
-        xType="ordinal"
-        width={300}
-        height={300}>
-        <VerticalGridLines />
-        <HorizontalGridLines />
-        <XAxis />
-        <YAxis />
-        <VerticalBarSeries
-          className="vertical-bar-series-example"
-          data={[
-            {x: 'A', y: 10},
-            {x: 'B', y: 5},
-            {x: 'C', y: 15}
-          ]}/>
-        <VerticalBarSeries
-          data={[
-            {x: 'A', y: 12},
-            {x: 'B', y: 2},
-            {x: 'C', y: 11}
-          ]}/>
-      </XYPlot>
+      <div>
+        <ShowcaseButton
+          onClick={() => this.setState({useCanvas: !useCanvas})}
+          buttonContent={content}/>
+        <XYPlot
+          xType="ordinal"
+          width={300}
+          height={300}>
+          <VerticalGridLines />
+          <HorizontalGridLines />
+          <XAxis />
+          <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}
+            ]}/>
+        </XYPlot>
+      </div>
     );
   }
 }
diff --git a/showcase/plot/clustered-stacked-bar-chart.js b/showcase/plot/clustered-stacked-bar-chart.js
@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import ShowcaseButton from '../showcase-components/showcase-button';
 
 import {
   XYPlot,
@@ -27,72 +28,85 @@ import {
   VerticalGridLines,
   HorizontalGridLines,
   VerticalBarSeries,
+  VerticalBarSeriesCanvas,
   DiscreteColorLegend
 } from 'index';
 
 export default class Example extends React.Component {
+  state = {
+    useCanvas: false
+  }
   render() {
+    const {useCanvas} = this.state;
+    const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;
+    const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';
+
     return (
-      <XYPlot
-        className="clustered-stacked-bar-chart-example"
-        xType="ordinal"
-        stackBy="y"
-        width={300}
-        height={300}>
-        <DiscreteColorLegend
-          style={{position: 'absolute', left: '40px', top: '0px'}}
-          orientation="horizontal" items={[
-            {
-              title: 'Apples',
-              color: '#12939A'
-            },
-            {
-              title: 'Oranges',
-              color: '#79C7E3'
-            }
-          ]}
-        />
-        <VerticalGridLines />
-        <HorizontalGridLines />
-        <XAxis />
-        <YAxis />
-        <VerticalBarSeries
-          cluster="2015"
-          color="#12939A"
-          data={[
-            {x: 'Q1', y: 10},
-            {x: 'Q2', y: 5},
-            {x: 'Q3', y: 15},
-            {x: 'Q4', y: 20}
-          ]}/>
-        <VerticalBarSeries
-          cluster="2015"
-          color="#79C7E3"
-          data={[
-            {x: 'Q1', y: 3},
-            {x: 'Q2', y: 7},
-            {x: 'Q3', y: 2},
-            {x: 'Q4', y: 1}
-          ]}/>
-        <VerticalBarSeries
-          cluster="2016"
-          color="#12939A"
-          data={[
-            {x: 'Q1', y: 3},
-            {x: 'Q2', y: 8},
-            {x: 'Q3', y: 11},
-            {x: 'Q4', y: 19}
-          ]}/>
-        <VerticalBarSeries
-          cluster="2016"
-          color="#79C7E3"
-          data={[
-            {x: 'Q1', y: 22},
-            {x: 'Q2', y: 2},
-            {x: 'Q3', y: 22},
-            {x: 'Q4', y: 18}
-          ]}/>
-      </XYPlot>
+      <div>
+        <ShowcaseButton
+          onClick={() => this.setState({useCanvas: !useCanvas})}
+          buttonContent={content}/>
+        <XYPlot
+          className="clustered-stacked-bar-chart-example"
+          xType="ordinal"
+          stackBy="y"
+          width={300}
+          height={300}>
+          <DiscreteColorLegend
+            style={{position: 'absolute', left: '40px', top: '0px'}}
+            orientation="horizontal" items={[
+              {
+                title: 'Apples',
+                color: '#12939A'
+              },
+              {
+                title: 'Oranges',
+                color: '#79C7E3'
+              }
+            ]}
+          />
+          <VerticalGridLines />
+          <HorizontalGridLines />
+          <XAxis />
+          <YAxis />
+          <BarSeries
+            cluster="2015"
+            color="#12939A"
+            data={[
+              {x: 'Q1', y: 10},
+              {x: 'Q2', y: 5},
+              {x: 'Q3', y: 15},
+              {x: 'Q4', y: 20}
+            ]}/>
+          <BarSeries
+            cluster="2015"
+            color="#79C7E3"
+            data={[
+              {x: 'Q1', y: 3},
+              {x: 'Q2', y: 7},
+              {x: 'Q3', y: 2},
+              {x: 'Q4', y: 1}
+            ]}/>
+          <BarSeries
+            cluster="2016"
+            color="#12939A"
+            data={[
+              {x: 'Q1', y: 3},
+              {x: 'Q2', y: 8},
+              {x: 'Q3', y: 11},
+              {x: 'Q4', y: 19}
+            ]}/>
+          <BarSeries
+            cluster="2016"
+            color="#79C7E3"
+            data={[
+              {x: 'Q1', y: 22},
+              {x: 'Q2', y: 2},
+              {x: 'Q3', y: 22},
+              {x: 'Q4', y: 18}
+            ]}/>
+        </XYPlot>
+      </div>
     );
   }
 }
diff --git a/showcase/plot/line-chart-gl.js b/showcase/plot/line-chart-gl.js
@@ -27,8 +27,10 @@ import {
   YAxis,
   VerticalGridLines,
   HorizontalGridLines,
+  LineMarkSeriesCanvas,
   LineMarkSeriesGL,
   LineMarkSeries,
+  LineSeriesCanvas,
   LineSeriesGL,
   LineSeries,
   Crosshair
@@ -48,14 +50,23 @@ const colorRanges = {
   typeA: ['#59E4EC', '#0D676C'],
   typeB: ['#EFC1E3', '#B52F93']
 };
+
 const nextType = {
   typeA: 'typeB',
   typeB: 'typeA'
 };
 
+const nextModeContent = {
+  canvas: 'SWITCH TO GL',
+  gl: 'SWITCH TO SVG',
+  svg: 'SWITCH TO CANVAS'
+};
+
+const drawModes = ['canvas', 'gl', 'svg'];
+
 export default class Example extends React.Component {
   state = {
-    glMode: true,
+    drawMode: 0,
     data: randomData,
     colorType: 'typeA',
     strokeWidth: 1,
@@ -64,7 +75,7 @@ export default class Example extends React.Component {
   }
 
   render() {
-    const {glMode, data, colorType, strokeWidth, value, showMarks} = this.state;
+    const {drawMode, data, colorType, strokeWidth, value, showMarks} = this.state;
     const lineSeriesProps = {
       animation: true,
       className: 'mark-series-example',
@@ -78,12 +89,16 @@ export default class Example extends React.Component {
     };
     const GLComponent = showMarks ? LineMarkSeriesGL : LineSeriesGL;
     const SVGComponent = showMarks ? LineMarkSeries : LineSeries;
+    const CanvasComponent = showMarks ? LineMarkSeriesCanvas : LineSeriesCanvas;
+
+    const mode = drawModes[drawMode];
     return (
       <div className="scatterplot-gl-wrapper">
         <div className="scatterplot-gl-example-controls">
+          <div> {`Mode: ${mode}`} </div>
           <ShowcaseButton
-            onClick={() => this.setState({glMode: !glMode})}
-            buttonContent={glMode ? 'SWITCH TO SVG' : 'SWITCH TO GL'} />
+            onClick={() => this.setState({drawMode: (drawMode + 1) % 3})}
+            buttonContent={nextModeContent[mode]} />
           <ShowcaseButton
             onClick={() => this.setState({showMarks: !showMarks})}
             buttonContent={showMarks ? 'HIDE MARKS' : 'SHOW MARKS'} />
@@ -92,10 +107,10 @@ export default class Example extends React.Component {
             buttonContent={'UPDATE DATA'} />
           <ShowcaseButton
             onClick={() => this.setState({colorType: nextType[colorType]})}
-            buttonContent={'UPDATE COLOR'} />
+            buttonContent={'TOGGLE COLOR'} />
           <ShowcaseButton
             onClick={() => this.setState({strokeWidth: strokeWidth === 1 ? 2 : 1})}
-            buttonContent={'UPDATE STROKEWIDTH'} />
+            buttonContent={'TOGGLE STROKEWIDTH'} />
         </div>
         <XYPlot
           width={600}
@@ -104,9 +119,11 @@ export default class Example extends React.Component {
           <HorizontalGridLines />
           <XAxis />
           <YAxis />
-          {glMode &&
+          {mode === 'canvas' &&
+            <CanvasComponent {...lineSeriesProps}/>}
+          {mode === 'gl' &&
             <GLComponent {...lineSeriesProps} seriesId="my-example-line-chart"/>}
-          {!glMode &&
+          {mode === 'svg' &&
             <SVGComponent {...lineSeriesProps}/>}
           {value && <Crosshair values={[value]} />}
         </XYPlot>