@hackoregon/component-library
Version:
Official repo for Hack Oregon React component library
271 lines (244 loc) • 10.5 kB
JavaScript
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); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React from "react";
import { arrayOf, shape, func, node, number } from "prop-types";
import shortid from "shortid";
import DeckGL, { IconLayer, PathLayer, PolygonLayer, ScatterplotLayer, ScreenGridLayer } from "deck.gl";
import { scaleQuantize, scaleOrdinal, scaleThreshold, extent } from "d3";
var CivicSandboxMap = function CivicSandboxMap(props) {
var viewport = props.viewport,
mapLayers = props.mapLayers,
children = props.children,
onClick = props.onClick,
onHoverSlide = props.onHoverSlide,
selectedFoundationDatum = props.selectedFoundationDatum;
var getDefaultPosition = function getDefaultPosition(f) {
return f.geometry.coordinates;
};
var getDefaultBoundaryPolygon = function getDefaultBoundaryPolygon(f) {
return f.coordinates;
};
var highlighterYellow = [255, 255, 0, 200];
var createPathMap = function createPathMap(slide) {
return React.createElement(PathLayer, {
key: shortid.generate(),
id: slide.data.id,
pickable: slide.data.pickable || true,
data: slide.data.data,
getColor: slide.data.getColor,
opacity: slide.data.opacity || 0.9,
getPath: slide.data.getPath || getDefaultPosition,
getWidth: slide.data.getWidth,
widthScale: slide.data.widthScale,
widthMinPixels: 1,
rounded: slide.data.rounded || false,
autoHighlight: slide.data.autoHighlight || true,
highlightColor: slide.data.highlightColor || highlighterYellow,
onHover: onHoverSlide,
parameters: {
depthTest: false
}
});
};
var createScatterPlotMap = function createScatterPlotMap(slide) {
return React.createElement(ScatterplotLayer, {
key: shortid.generate(),
id: slide.data.id,
pickable: slide.data.pickable || true,
data: slide.data.data,
getPosition: slide.data.getPosition || getDefaultPosition,
opacity: slide.data.opacity || 0.9,
getFillColor: slide.data.getFillColor,
getLineColor: slide.data.getLineColor,
stroked: slide.data.stroked || false,
getLineWidth: slide.data.getLineWidth || 5,
lineWidthMinPixels: 1,
getRadius: slide.data.getRadius,
radiusScale: slide.data.radiusScale || 1,
radiusMinPixels: 1,
autoHighlight: slide.data.autoHighlight || true,
highlightColor: slide.data.highlightColor || highlighterYellow,
onHover: onHoverSlide,
parameters: {
depthTest: false
}
});
};
var createIconMap = function createIconMap(slide) {
return React.createElement(IconLayer, {
key: shortid.generate(),
id: slide.data.id,
pickable: slide.data.pickable || true,
data: slide.data.data,
opacity: slide.data.opacity,
iconAtlas: slide.data.iconAtlas,
iconMapping: slide.data.iconMapping,
sizeScale: slide.data.sizeScale(viewport.zoom),
getPosition: slide.data.getPosition,
getIcon: slide.data.getIcon,
getSize: slide.data.getSize,
getColor: slide.data.getColor,
autoHighlight: slide.data.autoHighlight || false,
highlightColor: slide.data.highlightColor || [0, 0, 0, 0],
onHover: onHoverSlide,
parameters: {
depthTest: false
}
});
};
var createScreenGridMap = function createScreenGridMap(slide) {
return React.createElement(ScreenGridLayer, {
key: shortid.generate(),
id: slide.data.id,
pickable: slide.data.pickable || true,
data: slide.data.data,
getPosition: slide.data.getPosition || getDefaultPosition,
opacity: slide.data.opacity || 0.9,
colorRange: slide.data.colorRange,
cellSizePixels: slide.data.cellSizePixels,
autoHighlight: slide.data.autoHighlight || true,
highlightColor: slide.data.highlightColor || highlighterYellow,
updateTriggers: {
instanceColors: slide.data
},
gpuAggregation: false
});
};
var createBoundaryMap = function createBoundaryMap(slide) {
return React.createElement(PolygonLayer, {
key: shortid.generate(),
id: slide.data.id,
pickable: false,
data: slide.data.data,
opacity: slide.data.opacity,
getPolygon: slide.data.getPolygon || getDefaultBoundaryPolygon,
getLineColor: slide.data.getLineColor,
getLineWidth: slide.data.getLineWidth,
lineWidthMinPixels: 1,
lineWidthScale: 1,
lineJointRounded: slide.data.lineJointRounded || false,
stroked: true,
filled: false,
autoHighlight: false,
parameters: {
depthTest: false
}
});
};
var createPolygonMap = function createPolygonMap(slide) {
return React.createElement(PolygonLayer, {
key: shortid.generate(),
id: slide.data.id,
pickable: true,
data: slide.data.data,
opacity: slide.data.opacity || 0.9,
getPolygon: slide.data.getPolygon || getDefaultPosition,
getLineColor: slide.data.getLineColor,
getLineWidth: slide.data.getLineWidth,
lineWidthMinPixels: 1,
lineWidthScale: 1,
lineJointRounded: slide.data.lineJointRounded || false,
stroked: slide.data.stroked || true,
getFillColor: slide.data.getFillColor,
filled: slide.data.filled || true,
onHover: onHoverSlide,
autoHighlight: slide.data.autoHighlight || true,
highlightColor: slide.data.highlightColor || highlighterYellow,
parameters: {
depthTest: false
}
});
};
var createEqualBins = function createEqualBins(data, color, getPropValue) {
var quantizeScale = scaleQuantize().domain(extent(data, getPropValue)).range(color).nice();
return quantizeScale;
};
var createDiscreteBins = function createDiscreteBins(categories, color) {
var ordinalScale = scaleOrdinal().domain(categories).range(color).unknown([0, 0, 0, 0]);
return ordinalScale;
};
var createThresholdBins = function createThresholdBins(categories, color) {
var thresholdScale = scaleThreshold().domain(categories).range(color);
return thresholdScale;
};
var createChoroplethMap = function createChoroplethMap(slide) {
var scaleType = slide.data.scaleType;
var colorScale = scaleType === "ordinal" ? createDiscreteBins(slide.data.categories, slide.data.color) : scaleType === "threshold" ? createThresholdBins(slide.data.categories, slide.data.color) : createEqualBins(slide.data.data, slide.data.color, slide.data.getPropValue);
var getFillColor = function getFillColor(f) {
var value = slide.data.scaleType === "ordinal" ? f.properties[slide.data.propName] : parseFloat(f.properties[slide.data.propName]);
return colorScale(value) ? colorScale(value) : [0, 0, 0, 55];
};
var getLineColor = function getLineColor(f) {
var _selectedFoundationDa = _slicedToArray(selectedFoundationDatum, 1),
selectedFeature = _selectedFoundationDa[0];
var id = selectedFeature ? selectedFeature.id : null;
return f.id === id ? [255, 255, 0, 255] : [112, 122, 122, 155];
};
var getLineWidth = function getLineWidth(f) {
var _selectedFoundationDa2 = _slicedToArray(selectedFoundationDatum, 1),
selectedFeature = _selectedFoundationDa2[0];
var id = selectedFeature ? selectedFeature.id : null;
return f.id === id ? 75 : 1;
};
return React.createElement(PolygonLayer, {
key: shortid.generate(),
id: slide.data.id,
pickable: true,
data: slide.data.data,
opacity: slide.data.opacity || 0.9,
getPolygon: function getPolygon(f) {
return f.geometry.coordinates;
},
getLineColor: slide.data.getLineColor || getLineColor,
getLineWidth: slide.data.getLineWidth || getLineWidth,
lineWidthMinPixels: 1,
stroked: true,
getFillColor: slide.data.getFillColor || getFillColor,
filled: true,
onClick: onClick || slide.data.onLayerClick,
autoHighlight: true,
highlightColor: slide.data.highlightColor || [255, 255, 0, 55],
parameters: {
depthTest: false
},
updateTriggers: slide.data.updateTriggers || {
getLineColor: selectedFoundationDatum,
getLineWidth: selectedFoundationDatum
}
});
};
var renderMaps = mapLayers.map(function (layer, index) {
var mapType = layer.data.mapType;
return mapType === "PathMap" ? createPathMap(layer, index) : mapType === "ScatterPlotMap" ? createScatterPlotMap(layer, index) : mapType === "IconMap" ? createIconMap(layer, index) : mapType === "ScreenGridMap" ? createScreenGridMap(layer, index) : mapType === "PolygonPlotMap" ? createPolygonMap(layer, index) : mapType === "SmallPolygonMap" ? createPolygonMap(layer, index) : mapType === "ChoroplethMap" ? createChoroplethMap(layer, index) : mapType === "BoundaryMap" ? createBoundaryMap(layer, index) : null;
});
return React.createElement("div", null, React.createElement(DeckGL, _extends({
className: "DeckGL"
}, viewport, {
getCursor: function getCursor() {
return "crosshair";
}
}), renderMaps, children));
};
CivicSandboxMap.propTypes = {
viewport: shape({
latitude: number,
longitude: number,
height: number,
width: number,
zoom: number
}),
mapLayers: arrayOf(shape({
data: shape({})
})).isRequired,
onHoverSlide: func,
onClick: func,
children: node,
selectedFoundationDatum: arrayOf(shape({}))
};
CivicSandboxMap.defaultProps = {
selectedFoundationDatum: []
};
export default CivicSandboxMap;