gatsby website

visgl · Jun 21, 2020 · 0ea444a · 0ea444a
1 parent 7e7b4bf
commit 0ea444a
Show file tree

Hide file tree

Showing 91 changed files with 2,267 additions and 2,232 deletions.
diff --git a/examples/website/arc/app.js b/examples/website/arc/app.js
@@ -5,6 +5,7 @@ import {StaticMap} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 import {scaleQuantile} from 'd3-scale';
+import memoizeOne from 'memoize-one';
 
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
@@ -42,6 +43,36 @@ const INITIAL_VIEW_STATE = {
   bearing: 30
 };
 
+const calculateArcs = memoizeOne((data, selectedCounty) => {
+  if (!data || !data.length) {
+    return null;
+  }
+  if (!selectedCounty) {
+    selectedCounty = data.find(f => f.properties.name === 'Los Angeles, CA');
+  }
+  const {flows, centroid} = selectedCounty.properties;
+
+  const arcs = Object.keys(flows).map(toId => {
+    const f = data[toId];
+    return {
+      source: centroid,
+      target: f.properties.centroid,
+      value: flows[toId]
+    };
+  });
+
+  const scale = scaleQuantile()
+    .domain(arcs.map(a => Math.abs(a.value)))
+    .range(inFlowColors.map((c, i) => i));
+
+  arcs.forEach(a => {
+    a.gain = Math.sign(a.value);
+    a.quantile = scale(Math.abs(a.value));
+  });
+
+  return arcs;
+});
+
 /* eslint-disable react/no-deprecated */
 export default class App extends Component {
   constructor(props) {
@@ -54,22 +85,18 @@ export default class App extends Component {
     this._onHoverCounty = this._onHoverCounty.bind(this);
     this._onSelectCounty = this._onSelectCounty.bind(this);
     this._renderTooltip = this._renderTooltip.bind(this);
-
-    this._recalculateArcs(this.props.data);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
-      this._recalculateArcs(nextProps.data);
-    }
   }
 
   _onHoverCounty({x, y, object}) {
     this.setState({x, y, hoveredCounty: object});
   }
 
   _onSelectCounty({object}) {
-    this._recalculateArcs(this.props.data, object);
+    this.setState({selectedCounty: object});
+
+    if (this.props.onSelectCounty) {
+      this.props.onSelectCounty(object);
+    }
   }
 
   _renderTooltip() {
@@ -83,42 +110,9 @@ export default class App extends Component {
     );
   }
 
-  _recalculateArcs(data, selectedCounty = this.state.selectedCounty) {
-    if (!data || !data.length) {
-      return;
-    }
-    if (!selectedCounty) {
-      selectedCounty = data.find(f => f.properties.name === 'Los Angeles, CA');
-    }
-    const {flows, centroid} = selectedCounty.properties;
-
-    const arcs = Object.keys(flows).map(toId => {
-      const f = data[toId];
-      return {
-        source: centroid,
-        target: f.properties.centroid,
-        value: flows[toId]
-      };
-    });
-
-    const scale = scaleQuantile()
-      .domain(arcs.map(a => Math.abs(a.value)))
-      .range(inFlowColors.map((c, i) => i));
-
-    arcs.forEach(a => {
-      a.gain = Math.sign(a.value);
-      a.quantile = scale(Math.abs(a.value));
-    });
-
-    if (this.props.onSelectCounty) {
-      this.props.onSelectCounty(selectedCounty);
-    }
-
-    this.setState({arcs, selectedCounty});
-  }
-
   _renderLayers() {
     const {data, strokeWidth = 2} = this.props;
+    const arcs = calculateArcs(data, this.state.selectedCounty);
 
     return [
       new GeoJsonLayer({
@@ -133,7 +127,7 @@ export default class App extends Component {
       }),
       new ArcLayer({
         id: 'arc',
-        data: this.state.arcs,
+        data: arcs,
         getSourcePosition: d => d.source,
         getTargetPosition: d => d.target,
         getSourceColor: d => (d.gain > 0 ? inFlowColors : outFlowColors)[d.quantile],

diff --git a/examples/website/arc/package.json b/examples/website/arc/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "d3-scale": "^2.0.0",
     "deck.gl": "^8.1.0",
+    "memoize-one": "^5.1.1",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
     "react-map-gl": "^5.0.0"

diff --git a/examples/website/brushing/app.js b/examples/website/brushing/app.js
@@ -6,6 +6,7 @@ import DeckGL from '@deck.gl/react';
 import {ScatterplotLayer, ArcLayer} from '@deck.gl/layers';
 import {BrushingExtension} from '@deck.gl/extensions';
 import {scaleLinear} from 'd3-scale';
+import memoizeOne from 'memoize-one';
 
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
@@ -44,98 +45,86 @@ const INITIAL_VIEW_STATE = {
 
 const brushingExtension = new BrushingExtension();
 
-/* eslint-disable react/no-deprecated */
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      arcs: [],
-      targets: [],
-      sources: [],
-      ...this._getLayerData(props)
-    };
-    this._onHover = this._onHover.bind(this);
+/* eslint-disable  max-nested-callbacks */
+const getLayerData = memoizeOne(data => {
+  if (!data || !data.length) {
+    return {};
   }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
-      this.setState({
-        ...this._getLayerData(nextProps)
+  const arcs = [];
+  const targets = [];
+  const sources = [];
+  const pairs = {};
+
+  data.forEach((county, i) => {
+    const {flows, centroid: targetCentroid} = county.properties;
+    const value = {gain: 0, loss: 0};
+
+    Object.keys(flows).forEach(toId => {
+      value[flows[toId] > 0 ? 'gain' : 'loss'] += flows[toId];
+
+      // if number too small, ignore it
+      if (Math.abs(flows[toId]) < 50) {
+        return;
+      }
+      const pairKey = [i, Number(toId)].sort((a, b) => a - b).join('-');
+      const sourceCentroid = data[toId].properties.centroid;
+      const gain = Math.sign(flows[toId]);
+
+      // add point at arc source
+      sources.push({
+        position: sourceCentroid,
+        target: targetCentroid,
+        name: data[toId].properties.name,
+        radius: 3,
+        gain: -gain
       });
-    }
-  }
 
-  _onHover({x, y, object}) {
-    this.setState({x, y, hoveredObject: object});
-  }
+      // eliminate duplicates arcs
+      if (pairs[pairKey]) {
+        return;
+      }
 
-  _getLayerData({data}) {
-    if (!data || !data.length) {
-      return null;
-    }
-    const arcs = [];
-    const targets = [];
-    const sources = [];
-    const pairs = {};
-
-    data.forEach((county, i) => {
-      const {flows, centroid: targetCentroid} = county.properties;
-      const value = {gain: 0, loss: 0};
-
-      Object.keys(flows).forEach(toId => {
-        value[flows[toId] > 0 ? 'gain' : 'loss'] += flows[toId];
-
-        // if number too small, ignore it
-        if (Math.abs(flows[toId]) < 50) {
-          return;
-        }
-        const pairKey = [i, Number(toId)].sort((a, b) => a - b).join('-');
-        const sourceCentroid = data[toId].properties.centroid;
-        const gain = Math.sign(flows[toId]);
-
-        // add point at arc source
-        sources.push({
-          position: sourceCentroid,
-          target: targetCentroid,
-          name: data[toId].properties.name,
-          radius: 3,
-          gain: -gain
-        });
-
-        // eliminate duplicates arcs
-        if (pairs[pairKey]) {
-          return;
-        }
-
-        pairs[pairKey] = true;
-
-        arcs.push({
-          target: gain > 0 ? targetCentroid : sourceCentroid,
-          source: gain > 0 ? sourceCentroid : targetCentroid,
-          value: flows[toId]
-        });
-      });
+      pairs[pairKey] = true;
 
-      // add point at arc target
-      targets.push({
-        ...value,
-        position: [targetCentroid[0], targetCentroid[1], 10],
-        net: value.gain + value.loss,
-        name: county.properties.name
+      arcs.push({
+        target: gain > 0 ? targetCentroid : sourceCentroid,
+        source: gain > 0 ? sourceCentroid : targetCentroid,
+        value: flows[toId]
       });
     });
 
-    // sort targets by radius large -> small
-    targets.sort((a, b) => Math.abs(b.net) - Math.abs(a.net));
-    const sizeScale = scaleLinear()
-      .domain([0, Math.abs(targets[0].net)])
-      .range([36, 400]);
-
-    targets.forEach(pt => {
-      pt.radius = Math.sqrt(sizeScale(Math.abs(pt.net)));
+    // add point at arc target
+    targets.push({
+      ...value,
+      position: [targetCentroid[0], targetCentroid[1], 10],
+      net: value.gain + value.loss,
+      name: county.properties.name
     });
+  });
+
+  // sort targets by radius large -> small
+  targets.sort((a, b) => Math.abs(b.net) - Math.abs(a.net));
+  const sizeScale = scaleLinear()
+    .domain([0, Math.abs(targets[0].net)])
+    .range([36, 400]);
+
+  targets.forEach(pt => {
+    pt.radius = Math.sqrt(sizeScale(Math.abs(pt.net)));
+  });
+
+  return {arcs, targets, sources};
+});
 
-    return {arcs, targets, sources};
+/* eslint-disable react/no-deprecated */
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this._onHover = this._onHover.bind(this);
+  }
+
+  _onHover({x, y, object}) {
+    this.setState({x, y, hoveredObject: object});
   }
 
   _renderTooltip() {
@@ -161,7 +150,7 @@ export default class App extends Component {
       opacity = 0.7
     } = this.props;
 
-    const {arcs, targets, sources} = this.state;
+    const {arcs, targets, sources} = getLayerData(this.props.data);
 
     if (!arcs || !targets) {
       return null;

diff --git a/examples/website/brushing/package.json b/examples/website/brushing/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "d3-scale": "^2.0.0",
     "deck.gl": "^8.1.0",
+    "memoize-one": "^5.1.1",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
     "react-map-gl": "^5.0.0"