refactor(core): remove deck.gl

docs/markdown/line-series.md

@@ -2,14 +2,11 @@
 
 <!-- INJECT:"LineChart" -->
 
-react-vis offers two different types of LineSeries, one that renders SVG and one that renders WebGL.
-The SVG mode is accessed by using the normal `LineSeries`, just as above, while the WebGL mode is used by simply calling
-`LineSeriesGL` instead of `LineSeries`. It is most effective to hover over your points using onNearestX rather
-than onValueMouseOver.
+react-vis offers two different types of LineSeries, one that renders SVG and one that renders Canvas.
+The SVG mode is accessed by using the normal `LineSeries`, just as above, while the Canvas mode is used by simply calling `LineSeriesCanvas` instead of `LineSeries`.
 
-<!-- INJECT:"LineChartGL" -->
-
-**NOTE**: using the GL version of this layer disables animation
+<!-- INJECT:"LineChartCanvas" -->
+-**NOTE**: using the Canvas version of this layer disables animation
 
 ## API Reference
 
@@ -63,11 +60,3 @@ An object which holds CSS properties that will be applied to the SVG element(s)
   style={{strokeLinejoin: "round"}}
 />
 ```
-
-## LineSeriesGL API Additions
-
-In addition to the above api the GL version of markSeries exposes several additional props.
-
-#### seriesId (REQUIRED)
-Type: `string`
-This string is used by deck.gl to identify which layer is being requested to render.

docs/markdown/markseries.md

@@ -1,4 +1,4 @@
-## MarkSeries & MarkSeriesGL
+## MarkSeries & MarkSeriesCanvas
 
 <!-- INJECT:"ScatterplotChart" -->
 
@@ -31,14 +31,11 @@ const myData = [
 ]
 ```
 
-react-vis offers two different types of MarkSeries, one that renders SVG and one that renders WebGL.
-The SVG mode is accessed by using the normal `MarkSeries`, just as above, while the WebGL mode is used by simply calling
-`MarkSeriesGL` instead of `MarkSeries`. Important tip! It is most effective to hover over your points using onNearestXY rather
-than onValueMouseOver.
+react-vis offers two different types of MarkSeries, one that renders SVG and one that renders Canvas.
+The SVG mode is accessed by using the normal `MarkSeries`, just as above, while the Canvas mode is used by simply calling `MarkSeriesCanvas` instead of `MarkSeries`.
 
-<!-- INJECT:"ScatterplotGLChart" -->
-
-**NOTE**: using the GL version of this layer disables animation
+<!-- INJECT:"ScatterplotCanvas" -->
+-**NOTE**: using the Canvas version of this layer disables animation
 
 ## API
 
@@ -112,15 +109,3 @@ Type: `function(info)`
 
 #### animation (optional)  
 See the [XYPlot](xy-plot.md)'s `animation` section for more information.
-
-## MarkSeriesGL API Additions
-
-In addition to the above api the GL version of markSeries exposes several additional props.
-
-#### seriesId (REQUIRED)
-Type: `string`
-This string is used by deck.gl to identify which layer is being requested to render.
-
-#### outline (optional)
-Type: `Boolean`
-This boolean determines whether or not to switch to the outline mode for the markes

package.json

@@ -41,10 +41,8 @@
     "d3-scale": "^1.0.4",
     "d3-shape": "^1.0.4",
     "d3-voronoi": "^1.1.1",
-    "deck.gl": "^4.0.0",
     "deep-equal": "^1.0.1",
     "global": "^4.3.1",
-    "luma.gl": "^3.0.0-beta.11",
     "prop-types": "^15.5.8",
     "react-motion": "^0.4.8",
     "react-test-renderer": "^15.5.4"

showcase/index.js

@@ -20,7 +20,7 @@
 
 import ComplexChart from './plot/complex-chart';
 import LineChart from './plot/line-chart';
-import LineChartGL from './plot/line-chart-gl';
+import LineChartCanvas from './plot/line-chart-canvas';
 import LineChartWithStyle from './plot/line-chart-with-style';
 import LineMarkChart from './plot/linemark-chart';
 import BarChart from './plot/bar-chart';
@@ -32,7 +32,7 @@ import AreaChart from './plot/area-chart';
 import AreaChartElevated from './plot/area-chart-elevated';
 import ScatterplotChart from './plot/scatterplot';
 import FauxScatterplotChart from './plot/faux-radial-scatterplot';
-import ScatterplotGLChart from './plot/scatterplot-gl';
+import ScatterplotCanvas from './plot/scatterplot-canvas';
 import HeatmapChart from './plot/heatmap-chart';
 import WidthHeightMarginChart from './plot/width-height-margin';
 import CustomScales from './plot/custom-scales';
@@ -84,7 +84,7 @@ import TreemapExample from './treemap/dynamic-treemap';
 export const showCase = {
   ComplexChart,
   LineChart,
-  LineChartGL,
+  LineChartCanvas,
   LineChartWithStyle,
   LineMarkChart,
   BarChart,
@@ -97,7 +97,7 @@ export const showCase = {
   AreaChartElevated,
   FauxScatterplotChart,
   ScatterplotChart,
-  ScatterplotGLChart,
+  ScatterplotCanvas,
   HeatmapChart,
   WidthHeightMarginChart,
   CustomScales,

showcase/plot/line-chart-gl.js → showcase/plot/line-chart-canvas.js

@@ -28,10 +28,8 @@ import {
   VerticalGridLines,
   HorizontalGridLines,
   LineMarkSeriesCanvas,
-  LineMarkSeriesGL,
   LineMarkSeries,
   LineSeriesCanvas,
-  LineSeriesGL,
   LineSeries,
   Crosshair
 } from 'index';
@@ -57,12 +55,11 @@ const nextType = {
 };
 
 const nextModeContent = {
-  canvas: 'SWITCH TO GL',
-  gl: 'SWITCH TO SVG',
+  canvas: 'SWITCH TO SVG',
   svg: 'SWITCH TO CANVAS'
 };
 
-const drawModes = ['canvas', 'gl', 'svg'];
+const drawModes = ['canvas', 'svg'];
 
 export default class Example extends React.Component {
   state = {
@@ -87,17 +84,16 @@ export default class Example extends React.Component {
       data,
       onNearestX: d => this.setState({value: d})
     };
-    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 className="canvas-wrapper">
+        <div className="canvas-example-controls">
           <div> {`Mode: ${mode}`} </div>
           <ShowcaseButton
-            onClick={() => this.setState({drawMode: (drawMode + 1) % 3})}
+            onClick={() => this.setState({drawMode: (drawMode + 1) % 2})}
             buttonContent={nextModeContent[mode]} />
           <ShowcaseButton
             onClick={() => this.setState({showMarks: !showMarks})}
@@ -121,8 +117,6 @@ export default class Example extends React.Component {
           <YAxis />
           {mode === 'canvas' &&
             <CanvasComponent {...lineSeriesProps}/>}
-          {mode === 'gl' &&
-            <GLComponent {...lineSeriesProps} seriesId="my-example-line-chart"/>}
           {mode === 'svg' &&
             <SVGComponent {...lineSeriesProps}/>}
           {value && <Crosshair values={[value]} />}

showcase/plot/scatterplot-gl.js → showcase/plot/scatterplot-canvas.js

@@ -28,7 +28,6 @@ import {
   VerticalGridLines,
   HorizontalGridLines,
   MarkSeries,
-  MarkSeriesGL,
   MarkSeriesCanvas,
   Hint
 } from 'index';
@@ -54,12 +53,11 @@ const nextType = {
 };
 
 const nextModeContent = {
-  canvas: 'SWITCH TO GL',
-  gl: 'SWITCH TO SVG',
+  canvas: 'SWITCH TO SVG',
   svg: 'SWITCH TO CANVAS'
 };
 
-const drawModes = ['canvas', 'gl', 'svg'];
+const drawModes = ['canvas', 'svg'];
 
 export default class Example extends React.Component {
   state = {
@@ -84,11 +82,11 @@ export default class Example extends React.Component {
 
     const mode = drawModes[drawMode];
     return (
-      <div className="scatterplot-gl-wrapper">
-        <div className="scatterplot-gl-example-controls">
+      <div className="canvas-wrapper">
+        <div className="canvas-example-controls">
           <div>{`MODE: ${mode}`}</div>
           <ShowcaseButton
-            onClick={() => this.setState({drawMode: (drawMode + 1) % 3})}
+            onClick={() => this.setState({drawMode: (drawMode + 1) % 2})}
             buttonContent={nextModeContent[mode]} />
           <ShowcaseButton
             onClick={() => this.setState({data: getRandomData()})}
@@ -104,8 +102,6 @@ export default class Example extends React.Component {
           <HorizontalGridLines />
           <XAxis />
           <YAxis />
-          {mode === 'gl' &&
-            <MarkSeriesGL {...markSeriesProps} seriesId="my-example-scatterplot"/>}
           {mode === 'canvas' &&
             <MarkSeriesCanvas {...markSeriesProps}/>}
           {mode === 'svg' &&

showcase/showcase-sections/plots-showcase.js

@@ -14,13 +14,13 @@ const {
   HeatmapChart,
   LineChart,
   LineChartWithStyle,
-  LineChartGL,
+  LineChartCanvas,
   LineMarkChart,
   StackedVerticalBarChart,
   StackedHorizontalBarChart,
   StackedHistogram,
   ScatterplotChart,
-  ScatterplotGLChart,
+  ScatterplotCanvas,
   WidthHeightMarginChart
 } = showCase;
 
@@ -41,16 +41,16 @@ const PLOTS = [{
   sourceLink: 'https://github.com/uber/react-vis/blob/master/src/plot/series/line-mark-series.js',
   docsLink: 'http://uber.github.io/react-vis/#/documentation/xy-plot-series/line-series'
 }, {
-  component: LineChartGL,
-  name: 'Line Series GL'
+  component: LineChartCanvas,
+  name: 'Line Series Canvas'
 }, {
   component: ScatterplotChart,
   name: 'Mark Series',
   sourceLink: 'https://github.com/uber/react-vis/blob/master/src/plot/series/mark-series.js',
   docsLink: 'http://uber.github.io/react-vis/#/documentation/xy-plot-series/mark-series'
 }, {
-  component: ScatterplotGLChart,
-  name: 'Mark Series GL'
+  component: ScatterplotCanvas,
+  name: 'Mark Series Canvas'
 }, {
   component: AreaChart,
   name: 'Area Series',

src/index.js

@@ -21,7 +21,6 @@
 export AbstractSeries from 'plot/series/abstract-series';
 export LineSeries from 'plot/series/line-series';
 export LineSeriesCanvas from 'plot/series/line-series-canvas';
-export LineSeriesGL from 'plot/series/line-series-gl';
 export HorizontalBarSeries from 'plot/series/horizontal-bar-series';
 export HorizontalBarSeriesCanvas from 'plot/series/horizontal-bar-series-canvas';
 export VerticalBarSeries from 'plot/series/vertical-bar-series';
@@ -35,14 +34,12 @@ export PolygonSeries from 'plot/series/polygon-series';
 export RectSeries from 'plot/series/rect-series';
 export RectSeriesCanvas from 'plot/series/rect-series-canvas';
 export MarkSeries from 'plot/series/mark-series';
-export MarkSeriesGL from 'plot/series/mark-series-gl';
 export MarkSeriesCanvas from 'plot/series/mark-series-canvas';
 export HeatmapSeries from 'plot/series/heatmap-series';
 export AreaSeries from 'plot/series/area-series';
 export ArcSeries from 'plot/series/arc-series';
 export LineMarkSeries from 'plot/series/line-mark-series';
 export LineMarkSeriesCanvas from 'plot/series/line-mark-series-canvas';
-export LineMarkSeriesGL from 'plot/series/line-mark-series-gl';
 export Hint from 'plot/hint';
 export Crosshair from 'plot/crosshair';
 export XYPlot from 'plot/xy-plot';