@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
108 lines • 5.88 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 { Fragment as _Fragment, 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.
*/
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { useTheme } from '@mui/material/styles';
import bbox from '@turf/bbox';
import isString from 'lodash/isString';
import numeral from 'numeral';
import React from 'react';
import Map from "../Map";
import MapPopup from "../MapPopup";
/**
* CountyMap 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 CountyMap = function (_a) {
var _b, _c, _d, _e, _f;
var data = _a.data, geoJSONPath = _a.geoJSONPath, mapboxAccessToken = _a.mapboxAccessToken, mapPopupProps = _a.mapPopupProps, mapProps = _a.mapProps, onHoverInfo = _a.onHoverInfo, processDataFn = _a.processDataFn, selectedCounty = _a.selectedCounty, setOnHoverInfo = _a.setOnHoverInfo, tooltipElement = _a.tooltipElement;
var _g = useTheme(), breakpoints = _g.breakpoints, spacing = _g.spacing;
var _h = React.useState(), countiesJSON = _h[0], setCountiesJSON = _h[1];
var _j = React.useState(), hoverInfo = _j[0], setHoverInfo = _j[1];
var finalHoverInfo = onHoverInfo || hoverInfo;
React.useEffect(function () {
fetch(geoJSONPath)
.then(function (resp) { return resp.json(); })
.then(function (json) {
return setCountiesJSON(json);
})
.catch(function (err) { return console.error('Could not load data', err); }); // eslint-disable-line
}, []);
var processedData = React.useMemo(function () {
return countiesJSON && processDataFn && processDataFn(countiesJSON, data);
}, [data, countiesJSON, processDataFn]);
var initialBoundsPosition = React.useMemo(function () {
var _a;
if (selectedCounty && processedData) {
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
var features = processedData.features.filter(function (d) {
var _a, _b;
return selectedCounty.includes("".concat((_a = d.properties) === null || _a === void 0 ? void 0 : _a.STATE).concat((_b = d.properties) === null || _b === void 0 ? void 0 : _b.COUNTY));
});
if (features.length > 0) {
var _b = bbox({
features: features,
type: 'FeatureCollection',
}), minLng = _b[0], minLat = _b[1], maxLng = _b[2], maxLat = _b[3];
return {
id: features.length > 1
? undefined
: (_a = features[0].properties) === null || _a === void 0 ? void 0 : _a.GEO_ID,
position: [
[minLng, minLat],
[maxLng, maxLat],
],
};
}
}
return undefined;
}, [processedData, selectedCounty]);
// eslint-disable-next-line react/jsx-no-useless-fragment
if (!processedData)
return _jsx(_Fragment, {});
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: processedData, height: parentHeight, initialBoundsPosition: initialBoundsPosition, mapboxAccessToken: mapboxAccessToken, setHoverInfo: setOnHoverInfo || setHoverInfo, sourceId: "county", sourceProps: { promoteId: 'GEO_ID', type: 'geojson' }, width: parentWidth }, mapProps, { children: tooltipElement ||
(finalHoverInfo &&
(isString(parentWidth) ||
parentWidth > breakpoints.values.sm - parseInt(spacing(12), 10)) ? (_jsx(MapPopup, __assign({ popupProps: {
latitude: finalHoverInfo.lat,
longitude: finalHoverInfo.lng,
}, rows: [
{
title: 'County',
value: (_b = finalHoverInfo.feature.properties) === null || _b === void 0 ? void 0 : _b.NAME,
},
{
title: 'State',
value: (_c = finalHoverInfo.feature.properties) === null || _c === void 0 ? void 0 : _c.stateCode,
},
{
title: 'FIPS',
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
value: "".concat((_d = finalHoverInfo.feature.properties) === null || _d === void 0 ? void 0 : _d.STATE).concat((_e = finalHoverInfo.feature.properties) === null || _e === void 0 ? void 0 : _e.COUNTY),
},
{
title: 'Volume',
value: numeral((_f = finalHoverInfo.feature.properties) === null || _f === void 0 ? void 0 : _f.value).format('0,0'),
},
] }, mapPopupProps))) : undefined) })));
};
export default CountyMap;
//# sourceMappingURL=index.js.map