@hackoregon/component-library/es/ScatterPlotMap/ScatterPlotMap.js

Official repo for Hack Oregon React component library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from "react";
import PropTypes from "prop-types";
import DeckGL, { ScatterplotLayer } from "deck.gl";

var ScatterPlotMap = function ScatterPlotMap(props) {
  var stroked = props.stroked,
      getLineWidth = props.getLineWidth,
      getFillColor = props.getFillColor,
      getLineColor = props.getLineColor,
      viewport = props.viewport,
      data = props.data,
      getPosition = props.getPosition,
      opacity = props.opacity,
      getRadius = props.getRadius,
      radiusScale = props.radiusScale,
      autoHighlight = props.autoHighlight,
      highlightColor = props.highlightColor,
      onLayerClick = props.onLayerClick,
      visible = props.visible,
      tooltipInfo = props.tooltipInfo,
      x = props.x,
      y = props.y,
      onHover = props.onHover,
      children = props.children;
  var tooltip = React.Children.map(children, function (child) {
    return React.cloneElement(child, {
      tooltipInfo: tooltipInfo,
      x: x,
      y: y
    });
  });
  var tooltipRender = tooltipInfo && x && y ? tooltip : null;
  return React.createElement("div", null, React.createElement(DeckGL, _extends({
    className: "DeckGL"
  }, viewport, {
    getCursor: function getCursor() {
      return "crosshair";
    }
  }), React.createElement(ScatterplotLayer, {
    className: "ScatterPlotMap",
    id: "scatterplot-layer",
    pickable: true,
    data: data,
    getPosition: getPosition,
    opacity: opacity,
    getRadius: getRadius,
    radiusScale: radiusScale,
    radiusMinPixels: 1,
    autoHighlight: autoHighlight,
    highlightColor: highlightColor,
    onClick: onLayerClick,
    parameters: {
      depthTest: false
    },
    visible: visible,
    onHover: onHover,
    stroked: stroked,
    getLineColor: getLineColor,
    getLineWidth: getLineWidth,
    getFillColor: getFillColor,
    updateTriggers: {
      getRadius: getRadius
    }
  })), tooltipRender);
};

ScatterPlotMap.propTypes = {
  viewport: PropTypes.shape({}),
  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  getPosition: PropTypes.func,
  opacity: PropTypes.number,
  getRadius: PropTypes.func,
  radiusScale: PropTypes.number,
  autoHighlight: PropTypes.bool,
  highlightColor: PropTypes.arrayOf(PropTypes.number),
  onLayerClick: PropTypes.func,
  visible: PropTypes.bool,
  tooltipInfo: PropTypes.shape({}),
  x: PropTypes.number,
  y: PropTypes.number,
  onHover: PropTypes.func,
  children: PropTypes.node,
  stroked: PropTypes.bool,
  getLineColor: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
  getLineWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  getFillColor: PropTypes.oneOfType([PropTypes.func, PropTypes.array])
};
ScatterPlotMap.defaultProps = {
  getPosition: function getPosition(d) {
    return d.geometry.coordinates;
  },
  opacity: 0.8,
  getRadius: function getRadius() {
    return 50;
  },
  radiusScale: 1,
  visible: true,
  highlightColor: [0, 255, 0, 255],
  stroked: false,
  getLineColor: function getLineColor() {
    return [0, 0, 0];
  },
  getLineWidth: function getLineWidth() {
    return 1;
  },
  getFillColor: function getFillColor() {
    return [0, 0, 0];
  }
};
export default ScatterPlotMap;