@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
217 lines • 9.34 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { grey } from '@mui/material/colors';
import { useThemeProps } from '@mui/material/styles';
import Color from 'color';
import React from 'react';
import { Layer } from 'react-map-gl/mapbox';
import Map from "../Map";
import MapPopup from "../MapPopup";
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
var MIN_ZOOM = 12;
var MAX_ZOOM = 16;
/**
* HeatMap component which under the hood uses mapbox and react-map-gl. For this to work it's necessary
* to add the link bellow in the head of your page: <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
* For more information: https://visgl.github.io/react-map-gl/docs/get-started/get-started#styling
*/
export var HeatMap = function (inProps) {
var _a, _b;
var _c = useThemeProps({
name: DLS_COMPONENT_NAMES.HEAT_MAP,
props: inProps,
}), _d = _c.color, color = _d === void 0 ? grey[700] : _d, data = _c.data, mapboxAccessToken = _c.mapboxAccessToken, mapPopupProps = _c.mapPopupProps, mapProps = _c.mapProps, onHoverInfo = _c.onHoverInfo, setOnHoverInfo = _c.setOnHoverInfo, _e = _c.sourceId, sourceId = _e === void 0 ? 'heatmap' : _e, tooltipElement = _c.tooltipElement;
var _f = React.useState(), hoverInfo = _f[0], setHoverInfo = _f[1];
var _g = React.useState(), lastZoom = _g[0], setLastZoom = _g[1];
var finalHoverInfo = onHoverInfo || hoverInfo;
var setFinalOnHoverInfo = setOnHoverInfo || setHoverInfo;
var heatMapDataLayer = React.useMemo(function () {
return {
id: 'heatmap',
maxzoom: MAX_ZOOM,
paint: {
'heatmap-intensity': [
'interpolate',
['linear'],
['zoom'],
5,
1,
10,
2,
12,
3,
],
'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 12, 1, 13, 0],
'heatmap-radius': [
'interpolate',
['linear'],
['zoom'],
5,
3.5,
7,
8,
9,
12,
12,
20,
],
'heatmap-weight': [
'interpolate',
['linear'],
['get', 'value'],
1,
0,
50,
0.5,
100,
1,
],
},
source: sourceId,
type: 'heatmap',
};
}, []);
var circleDataLayer = React.useMemo(function () {
return {
id: 'circle-data',
minzoom: MIN_ZOOM,
paint: {
'circle-color': {
default: Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(1)
.rgb()
.string(),
property: 'quantity',
stops: [
[
0,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.9)
.rgb()
.string(),
],
[
1,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.8)
.rgb()
.string(),
],
[
2,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.7)
.rgb()
.string(),
],
[
3,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.6)
.rgb()
.string(),
],
[
4,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.5)
.rgb()
.string(),
],
[
5,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.4)
.rgb()
.string(),
],
[
6,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.3)
.rgb()
.string(),
],
[
7,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.2)
.rgb()
.string(),
],
[
8,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0.1)
.rgb()
.string(),
],
[
9,
Color((mapProps === null || mapProps === void 0 ? void 0 : mapProps.color) || color)
.fade(0)
.rgb()
.string(),
],
],
},
'circle-opacity': ['interpolate', ['linear'], ['zoom'], 12, 0, 13, 1],
'circle-radius': [
'interpolate',
['exponential'],
['get', 'value'],
['zoom'],
{ value: 1, zoom: 15 },
5,
{ value: 62, zoom: 15 },
10,
{ value: 1, zoom: 22 },
20,
{ value: 62, zoom: 22 },
50,
],
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
},
source: sourceId,
type: 'circle',
};
}, [color, mapProps]);
var onZoom = function (event) {
setLastZoom(event.viewState.zoom);
};
var parentHeight = (mapProps === null || mapProps === void 0 ? void 0 : mapProps.height) || 450;
var parentWidth = (mapProps === null || mapProps === void 0 ? void 0 : mapProps.width) || '100%';
return (_jsx(Map, __assign({ data: data, height: parentHeight, layerProps: heatMapDataLayer, layers: [_jsx(Layer, __assign({}, circleDataLayer), "circle-layer")], mapboxAccessToken: mapboxAccessToken, onClick: undefined, onZoom: onZoom, onZoomEnd: undefined, setHoverInfo: lastZoom && lastZoom >= MIN_ZOOM ? setFinalOnHoverInfo : undefined, sourceId: sourceId, width: parentWidth }, mapProps, { children: tooltipElement ||
(finalHoverInfo && lastZoom && lastZoom >= MIN_ZOOM ? (_jsx(MapPopup, __assign({ popupProps: {
latitude: finalHoverInfo.lat,
longitude: finalHoverInfo.lng,
}, rows: [
{
title: 'ZIP Code',
value: (_a = finalHoverInfo.feature.properties) === null || _a === void 0 ? void 0 : _a.zip,
},
{
title: 'Volume',
value: (_b = finalHoverInfo.feature.properties) === null || _b === void 0 ? void 0 : _b.value,
},
] }, mapPopupProps))) : undefined) })));
};
export default HeatMap;
//# sourceMappingURL=index.js.map