bento-charts 2.3.0 → 2.4.0

package/dist/Components/Maps/controls/MapLegendDiscrete.js

@@ -0,0 +1,22 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { controlPositionClasses } from './utils';
+var MapLegendDiscrete = function (_a) {
+    var position = _a.position, legendItems = _a.legendItems;
+    return (_jsx("div", __assign({ className: controlPositionClasses[position] }, { children: _jsx("div", __assign({ className: "leaflet-control bento-charts--map--legend" }, { children: _jsx("ul", { children: legendItems.map(function (_a, i) {
+                    var label = _a.label, color = _a.color;
+                    return (_jsxs("li", { children: [_jsx("span", { className: "bento-charts--map--legend--patch", style: { backgroundColor: color !== null && color !== void 0 ? color : "rgba(255, 255, 255, 0)" } }), label] }, i));
+                }) }) })) })));
+};
+export default MapLegendDiscrete;
+//# sourceMappingURL=MapLegendDiscrete.js.map

package/dist/Components/Maps/controls/MapLegendDiscrete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLegendDiscrete.js","sourceRoot":"","sources":["../../../../src/Components/Maps/controls/MapLegendDiscrete.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAOjD,IAAM,iBAAiB,GAAG,UAAC,EAAiD;QAA/C,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAChD,OAAO,CACL,uBAAK,SAAS,EAAE,sBAAsB,CAAC,QAAQ,CAAC,gBAC9C,uBAAK,SAAS,EAAC,2CAA2C,gBACxD,uBACG,WAAW,CAAC,GAAG,CAAC,UAAC,EAAgB,EAAE,CAAC;wBAAjB,KAAK,WAAA,EAAE,KAAK,WAAA;oBAAU,OAAA,CACxC,yBACE,eACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,wBAAwB,EAAE,GAC7D,EACD,KAAK,KALC,CAAC,CAML,CACN;gBARyC,CAQzC,CAAC,GACC,IACD,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/Components/Maps/controls/utils.d.ts

@@ -0,0 +1,4 @@
+import type { ControlPosition } from 'leaflet';
+export declare const controlPositionClasses: {
+    [x in ControlPosition]: string;
+};

package/dist/Components/Maps/controls/utils.js

@@ -0,0 +1,7 @@
+export var controlPositionClasses = {
+    bottomleft: 'leaflet-bottom leaflet-left',
+    bottomright: 'leaflet-bottom leaflet-right',
+    topleft: 'leaflet-top leaflet-left',
+    topright: 'leaflet-bottom leaflet-right',
+};
+//# sourceMappingURL=utils.js.map

package/dist/Components/Maps/controls/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/Components/Maps/controls/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,sBAAsB,GAAuC;IACxE,UAAU,EAAE,6BAA6B;IACzC,WAAW,EAAE,8BAA8B;IAC3C,OAAO,EAAE,0BAA0B;IACnC,QAAQ,EAAE,8BAA8B;CACzC,CAAC"}

package/dist/constants/mapConstants.d.ts

@@ -0,0 +1,2 @@
+export declare const OSM_TILE_LAYER_ATTRIBUTION = "\n&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors\n";
+export declare const OSM_TILE_LAYER_TEMPLATE = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

package/dist/constants/mapConstants.js

@@ -0,0 +1,3 @@
+export var OSM_TILE_LAYER_ATTRIBUTION = "\n&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors\n";
+export var OSM_TILE_LAYER_TEMPLATE = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+//# sourceMappingURL=mapConstants.js.map

package/dist/constants/mapConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapConstants.js","sourceRoot":"","sources":["../../src/constants/mapConstants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,0BAA0B,GAAG,6FAEzC,CAAC;AACF,MAAM,CAAC,IAAM,uBAAuB,GAAG,oDAAoD,CAAC"}

package/dist/index.js

@@ -1,5 +1,10 @@
+// Disable unused item linting in WebStorm:
+// noinspection JSUnusedGlobalSymbols
+// Categorical charts
 export { default as BarChart } from './Components/Charts/BentoBarChart';
 export { default as PieChart } from './Components/Charts/BentoPie';
+// Maps are not included in index.ts - instead, they need to be included from `bento-charts/maps`.
+// This way, we can have optional peer dependencies.
 export { default as ChartConfigProvider } from './ChartConfigProvider';
 export * from './types/chartTypes';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,qCAAqC;AAErC,qBAAqB;AACrB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAEnE,kGAAkG;AAClG,oDAAoD;AAEpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,oBAAoB,CAAC"}

package/dist/maps.d.ts

@@ -0,0 +1,3 @@
+export { default as PointMap } from './Components/Maps/BentoPointMap';
+export { default as ChoroplethMap } from './Components/Maps/BentoChoroplethMap';
+export * from './types/mapTypes';

package/dist/maps.js

@@ -0,0 +1,5 @@
+// Maps
+export { default as PointMap } from './Components/Maps/BentoPointMap';
+export { default as ChoroplethMap } from './Components/Maps/BentoChoroplethMap';
+export * from './types/mapTypes';
+//# sourceMappingURL=maps.js.map

package/dist/maps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"maps.js","sourceRoot":"","sources":["../src/maps.ts"],"names":[],"mappings":"AAAA,OAAO;AACP,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAChF,cAAc,kBAAkB,CAAC"}

package/dist/types/chartTypes.d.ts

@@ -1,6 +1,6 @@
-import { PieProps, BarProps } from 'recharts';
-export type ChartDataType = ChartDataItem[];
-export interface ChartDataItem {
+import type { PieProps, BarProps } from 'recharts';
+export type CategoricalChartDataType = CategoricalChartDataItem[];
+export interface CategoricalChartDataItem {
     x: string;
     y: number;
 }
@@ -33,7 +33,7 @@ export type ChartTheme = {
 };
 export type FilterCallback<T> = (value: T, index: number, array: T[]) => boolean;
 export type UnitaryMapCallback<T> = (value: T, index: number, array: T[]) => T;
-export type ChartFilterCallback = FilterCallback<ChartDataItem>;
+export type ChartFilterCallback = FilterCallback<CategoricalChartDataItem>;
 export type SupportedLng = 'en' | 'fr';
 type TranslationWords = 'Count' | 'Other';
 export type LngDictionary = {
@@ -42,22 +42,24 @@ export type LngDictionary = {
 export type TranslationObject = {
     [key in SupportedLng]: LngDictionary;
 };
-interface BaseChartProps {
-    data: ChartDataType;
+export interface BaseChartComponentProps {
     height: number;
     preFilter?: ChartFilterCallback;
-    dataMap?: UnitaryMapCallback<ChartDataItem>;
+    dataMap?: UnitaryMapCallback<CategoricalChartDataItem>;
     postFilter?: ChartFilterCallback;
+}
+interface BaseCategoricalChartProps extends BaseChartComponentProps {
+    data: CategoricalChartDataType;
     removeEmpty?: boolean;
 }
-export interface PieChartProps extends BaseChartProps {
+export interface PieChartProps extends BaseCategoricalChartProps {
     colorTheme?: keyof ChartTheme['pie'];
     sort?: boolean;
     onClick?: PieProps['onClick'];
     chartThreshold?: number;
     maxLabelChars?: number;
 }
-export interface BarChartProps extends BaseChartProps {
+export interface BarChartProps extends BaseCategoricalChartProps {
     colorTheme?: keyof ChartTheme['bar'];
     title?: string;
     units: string;

package/dist/types/geoJSONTypes.d.ts

@@ -0,0 +1,18 @@
+export interface GeoJSONGeomPolygon {
+    type: 'Polygon';
+    coordinates: number[][][];
+}
+export interface BentoGeoJSONProperties {
+    title: string;
+    [x: string]: unknown;
+}
+export interface GeoJSONPolygonFeature {
+    type: 'Feature';
+    geometry: GeoJSONGeomPolygon;
+    properties: BentoGeoJSONProperties;
+}
+export interface GeoJSONPolygonOnlyFeatureCollection {
+    type: 'FeatureCollection';
+    features: GeoJSONPolygonFeature[];
+    [x: string]: unknown;
+}

package/dist/types/geoJSONTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=geoJSONTypes.js.map

package/dist/types/geoJSONTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geoJSONTypes.js","sourceRoot":"","sources":["../../src/types/geoJSONTypes.ts"],"names":[],"mappings":""}

package/dist/types/mapTypes.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement, ReactNode } from 'react';
+import type { Feature as GeoJSONFeatureType } from 'geojson';
+import { BaseChartComponentProps, CategoricalChartDataType } from './chartTypes';
+import type { GeoJSONPolygonOnlyFeatureCollection } from './geoJSONTypes';
+export interface GeoPointDataItem {
+    coordinates: [number, number];
+    title: string;
+}
+type PointMapOnClick = (point: GeoPointDataItem) => void;
+type GeoJSONShapeOnClick = (shape: GeoJSONFeatureType) => void;
+export interface BaseMapProps extends BaseChartComponentProps {
+    center: [number, number];
+    zoom: number;
+    tileLayer?: ReactElement;
+}
+export interface PointMapProps extends BaseMapProps {
+    data: GeoPointDataItem[];
+    onClick?: PointMapOnClick;
+    renderPopupBody?: (p: GeoPointDataItem) => ReactNode;
+}
+export interface MapDiscreteLegendItem {
+    color: string | undefined;
+    label: string;
+}
+export interface ChoroplethMapColorModeContinuous {
+    mode: 'continuous';
+    minColor: string;
+    maxColor: string;
+}
+export interface ChoroplethMapColorModeDiscrete {
+    mode: 'discrete';
+    colorFunction: (x: number | undefined) => string;
+    legendItems: MapDiscreteLegendItem[];
+}
+export interface ChoroplethMapProps extends BaseMapProps {
+    data: CategoricalChartDataType;
+    features: GeoJSONPolygonOnlyFeatureCollection;
+    colorMode: ChoroplethMapColorModeContinuous | ChoroplethMapColorModeDiscrete;
+    categoryProp: string;
+    onClick?: GeoJSONShapeOnClick;
+    renderPopupBody?: (f: GeoJSONFeatureType, d: number | undefined) => ReactNode;
+}
+export {};

package/dist/types/mapTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=mapTypes.js.map

package/dist/types/mapTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapTypes.js","sourceRoot":"","sources":["../../src/types/mapTypes.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "bento-charts",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Charts library for Bento-platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "npx tsc",
     "prepublishOnly": "npm run build",
-    "lint": "npx eslint src/**",
-    "buildpack": "rm ./packs/*.tgz && tsc && npm pack --pack-destination ./packs"
+    "lint": "npx eslint src",
+    "buildpack": "rm ./packs/*.tgz && tsc && npm pack --pack-destination ./packs",
+    "test": "npx webpack-dev-server"
   },
   "release": {
     "branches": [
@@ -37,26 +38,48 @@
   },
   "homepage": "https://github.com/bento-platform/Bento-Charts#readme",
   "peerDependencies": {
+    "leaflet": "^1.9.4",
     "react": ">=16.0.0",
     "react-dom": ">=14.0.0",
+    "react-leaflet": "^4.2.1",
     "recharts": "^2.4.3"
   },
+  "peerDependenciesMeta": {
+    "leaflet": {
+      "optional": true
+    },
+    "react-leafet": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@semantic-release/git": "^10.0.1",
+    "@types/leaflet": "^1.9.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
+    "@types/react-leaflet": "^3.0.0",
     "@types/recharts": "^1.8.24",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
+    "@webpack-cli/serve": "^2.0.5",
+    "antd": "^5.9.2",
+    "css-loader": "^6.8.1",
     "eslint": "^8.36.0",
     "eslint-plugin-react": "^7.32.2",
+    "file-loader": "^6.2.0",
+    "geojson": "^0.5.0",
+    "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
     "prettier": "2.7.1",
     "semantic-release": "^20.1.3",
+    "style-loader": "^3.3.3",
     "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "prettier": {
     "trailingComma": "es5",
@@ -64,5 +87,8 @@
     "semi": true,
     "singleQuote": true,
     "printWidth": 120
+  },
+  "dependencies": {
+    "d3-interpolate": "^3.0.1"
   }
 }

package/src/ChartConfigProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 import { DEFAULT_CHART_THEME, defaultTranslationObject } from './constants/chartConstants';
-import { ChartTheme, LngDictionary, SupportedLng, TranslationObject } from './types/chartTypes';
+import type { ChartTheme, LngDictionary, SupportedLng, TranslationObject } from './types/chartTypes';
 
 type ChartContextType = {
   theme: ChartTheme;
@@ -35,7 +35,14 @@ export function useChartMaxLabelChars() {
   return useContext(ChartContext).maxLabelChars;
 }
 
-const ChartConfigProvider = ({ theme, Lng, translationMap, children, globalThreshold, maxLabelChars }: ChartConfigProviderProps) => {
+const ChartConfigProvider = ({
+  theme,
+  Lng,
+  translationMap,
+  children,
+  globalThreshold,
+  maxLabelChars,
+}: ChartConfigProviderProps) => {
   let lang: SupportedLng = 'en';
   try {
     lang = Lng as SupportedLng;

package/src/Components/Charts/BentoBarChart.tsx

@@ -13,7 +13,7 @@ import {
   TICK_MARGIN,
 } from '../../constants/chartConstants';
 
-import type { BarChartProps, ChartDataItem, TooltipPayload } from '../../types/chartTypes';
+import type { BarChartProps, CategoricalChartDataItem, TooltipPayload } from '../../types/chartTypes';
 import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
 import NoData from '../NoData';
 
@@ -39,7 +39,7 @@ const BentoBarChart = ({
   const t = useChartTranslation();
   const { fill: chartFill, missing } = useChartTheme().bar[colorTheme];
 
-  const fill = (entry: ChartDataItem) => (entry.x === 'missing' ? missing : chartFill);
+  const fill = (entry: CategoricalChartDataItem) => (entry.x === 'missing' ? missing : chartFill);
 
   data = [...data];
   if (preFilter) data = data.filter(preFilter);

package/src/Components/Charts/BentoPie.tsx

@@ -19,8 +19,8 @@ import {
   useChartTheme,
   useChartTranslation,
   useChartThreshold,
-  useChartMaxLabelChars
-} from "../../ChartConfigProvider";
+  useChartMaxLabelChars,
+} from '../../ChartConfigProvider';
 import { polarToCartesian } from '../../util/chartUtils';
 import NoData from '../NoData';
 
@@ -144,64 +144,66 @@ const toNumber = (val: number | string | undefined, defaultValue?: number): numb
   return defaultValue || 0;
 };
 
-const RenderLabel = (maxLabelChars: number): PieProps['label'] => (params: PieLabelRenderProps ) => { // eslint-disable-line
-  const { fill, payload, index, activeIndex } = params;
-  const percent = params.percent || 0;
-  const midAngle = params.midAngle || 0;
+const RenderLabel =
+  (maxLabelChars: number): PieProps['label'] =>
+  (params: PieLabelRenderProps) => {  // eslint-disable-line
+    const { fill, payload, index, activeIndex } = params;
+    const percent = params.percent || 0;
+    const midAngle = params.midAngle || 0;
 
-  // skip rendering this static label if the sector is selected.
-  // this will let the 'renderActiveState' draw without overlapping.
-  // also, skip rendering if segment is too small a percentage (avoids label clutter)
-  if (index === activeIndex || percent < LABEL_THRESHOLD) {
-    return;
-  }
+    // skip rendering this static label if the sector is selected.
+    // this will let the 'renderActiveState' draw without overlapping.
+    // also, skip rendering if segment is too small a percentage (avoids label clutter)
+    if (index === activeIndex || percent < LABEL_THRESHOLD) {
+      return;
+    }
 
-  const outerRadius = toNumber(params.outerRadius);
-  const cx = toNumber(params.cx);
-  const cy = toNumber(params.cy);
+    const outerRadius = toNumber(params.outerRadius);
+    const cx = toNumber(params.cx);
+    const cy = toNumber(params.cy);
 
-  const name = payload.name === 'null' ? '(Empty)' : payload.name;
+    const name = payload.name === 'null' ? '(Empty)' : payload.name;
 
-  const sin = Math.sin(-RADIAN * midAngle);
-  const cos = Math.cos(-RADIAN * midAngle);
-  const sx = cx + (outerRadius + 10) * cos;
-  const sy = cy + (outerRadius + 10) * sin;
-  const mx = cx + (outerRadius + 20) * cos;
-  const my = cy + (outerRadius + 20) * sin;
-  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
-  const ey = my;
-  const textAnchor = cos >= 0 ? 'start' : 'end';
+    const sin = Math.sin(-RADIAN * midAngle);
+    const cos = Math.cos(-RADIAN * midAngle);
+    const sx = cx + (outerRadius + 10) * cos;
+    const sy = cy + (outerRadius + 10) * sin;
+    const mx = cx + (outerRadius + 20) * cos;
+    const my = cy + (outerRadius + 20) * sin;
+    const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+    const ey = my;
+    const textAnchor = cos >= 0 ? 'start' : 'end';
 
-  const currentTextStyle: CSS.Properties = {
-    ...TEXT_STYLE,
-    fontWeight: payload.selected ? 'bold' : 'normal',
-    fontStyle: payload.name === 'null' ? 'italic' : 'normal',
-  };
+    const currentTextStyle: CSS.Properties = {
+      ...TEXT_STYLE,
+      fontWeight: payload.selected ? 'bold' : 'normal',
+      fontStyle: payload.name === 'null' ? 'italic' : 'normal',
+    };
 
-  const offsetRadius = 20;
-  const startPoint = polarToCartesian(cx, cy, outerRadius, midAngle);
-  const endPoint = polarToCartesian(cx, cy, outerRadius + offsetRadius, midAngle);
-  const lineProps = {
-    ...params,
-    fill: 'none',
-    stroke: fill,
-    points: [startPoint, endPoint],
-  };
+    const offsetRadius = 20;
+    const startPoint = polarToCartesian(cx, cy, outerRadius, midAngle);
+    const endPoint = polarToCartesian(cx, cy, outerRadius + offsetRadius, midAngle);
+    const lineProps = {
+      ...params,
+      fill: 'none',
+      stroke: fill,
+      points: [startPoint, endPoint],
+    };
 
-  return (
-    <g>
-      <Curve {...lineProps} type="linear" className="recharts-pie-label-line" />
-      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
-      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey + 3} textAnchor={textAnchor} style={currentTextStyle}>
-        {labelShortName(name, maxLabelChars)}
-      </text>
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={14} textAnchor={textAnchor} style={COUNT_TEXT_STYLE}>
-        {`(${payload.value})`}
-      </text>
-    </g>
-  );
-};
+    return (
+      <g>
+        <Curve {...lineProps} type="linear" className="recharts-pie-label-line" />
+        <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
+        <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey + 3} textAnchor={textAnchor} style={currentTextStyle}>
+          {labelShortName(name, maxLabelChars)}
+        </text>
+        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={14} textAnchor={textAnchor} style={COUNT_TEXT_STYLE}>
+          {`(${payload.value})`}
+        </text>
+      </g>
+    );
+  };
 
 const RenderActiveLabel: PieProps['activeShape'] = (params) => {
   const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = params;

package/src/Components/Maps/BentoChoroplethMap.tsx

@@ -0,0 +1,137 @@
+import React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { GeoJSON, Popup } from 'react-leaflet';
+import { interpolateRgb } from 'd3-interpolate';
+import type { Feature as GeoJSONFeatureType } from 'geojson';
+import type {
+  ControlPosition,
+  GeoJSON as LeafletGeoJSON,
+  LeafletMouseEvent,
+  LeafletEventHandlerFnMap,
+  PathOptions,
+} from 'leaflet';
+
+import type { ChoroplethMapProps } from '../../types/mapTypes';
+
+import BentoMapContainer from './BentoMapContainer';
+import MapLegendContinuous from './controls/MapLegendContinuous';
+import MapLegendDiscrete from './controls/MapLegendDiscrete';
+
+const DEFAULT_CATEGORY = '';
+const POS_BOTTOM_RIGHT: ControlPosition = 'bottomright';
+
+const BentoChoroplethMap = ({
+  height,
+  data: originalData,
+  preFilter,
+  dataMap,
+  postFilter,
+  center,
+  zoom,
+  tileLayer,
+  colorMode,
+  features,
+  categoryProp,
+  onClick,
+  renderPopupBody,
+}: ChoroplethMapProps) => {
+  const data = useMemo(() => {
+    let data = [...originalData];
+    if (preFilter) data = data.filter(preFilter);
+    if (dataMap) data = data.map(dataMap);
+    if (postFilter) data = data.filter(postFilter);
+    return data;
+  }, [originalData]);
+
+  const dataByFeatureCat = useMemo(() => Object.fromEntries(data.map((d) => [d.x, d.y])), [data]);
+
+  const minYVal = useMemo(() => Math.min(...data.map((d) => d.y)), [data]);
+  const maxYVal = useMemo(() => Math.max(...data.map((d) => d.y)), [data]);
+
+  const calculateColor = useCallback(
+    (v: number | undefined): string =>
+      colorMode.mode === 'continuous'
+        ? interpolateRgb(colorMode.minColor, colorMode.maxColor)(((v ?? minYVal) - minYVal) / (maxYVal - minYVal))
+        : colorMode.colorFunction(v),
+    [colorMode, minYVal, maxYVal]
+  );
+
+  const shapeStyle = useCallback(
+    (f: GeoJSONFeatureType): PathOptions => {
+      const fProps = f.properties ?? {};
+      if (!Object.keys(fProps).includes(categoryProp)) {
+        console.warn(`Feature is missing category prop ${categoryProp}`, f);
+      }
+      const cat: string = fProps[categoryProp] ?? DEFAULT_CATEGORY;
+      return {
+        color: 'white',
+        weight: 2,
+        fillColor: calculateColor(dataByFeatureCat[cat]),
+        fillOpacity: 1, // actual opacity set by fillColor
+      };
+    },
+    [data, features]
+  );
+
+  const [popupContents, setPopupContents] = useState<React.ReactNode | null>(null);
+
+  const eventHandlers = useMemo(
+    () =>
+      ({
+        click: (e: LeafletMouseEvent) => {
+          const feature = e.sourceTarget.feature as GeoJSONFeatureType;
+          const fProps = feature.properties ?? {};
+          const title = fProps.title ? `${fProps.title} (${fProps[categoryProp]})` : fProps[categoryProp];
+          setPopupContents(
+            <div>
+              <h4 style={{ marginBottom: renderPopupBody ? 6 : 0 }}>
+                {onClick ? (
+                  <a
+                    href="#"
+                    onClick={() => {
+                      if (onClick) onClick(feature);
+                    }}
+                  >
+                    {title}
+                  </a>
+                ) : (
+                  <span>{title}</span>
+                )}
+              </h4>
+              {renderPopupBody ? renderPopupBody(feature, dataByFeatureCat[fProps[categoryProp]]) : null}
+            </div>
+          );
+        },
+      } as LeafletEventHandlerFnMap),
+    [onClick, categoryProp, renderPopupBody]
+  );
+
+  const geoJsonLayer: Ref<LeafletGeoJSON> = useRef(null);
+  useEffect(() => {
+    // Bizarre workaround needed for react-leaflet when handling `features` change:
+    // See https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-731379795
+    if (geoJsonLayer.current) {
+      geoJsonLayer.current.clearLayers().addData(features);
+    }
+  }, [features]);
+
+  return (
+    <BentoMapContainer height={height} center={center} zoom={zoom} tileLayer={tileLayer}>
+      <GeoJSON ref={geoJsonLayer} data={features} style={shapeStyle} eventHandlers={eventHandlers}>
+        <Popup>{popupContents}</Popup>
+      </GeoJSON>
+      {colorMode.mode === 'continuous' ? (
+        <MapLegendContinuous
+          position={POS_BOTTOM_RIGHT}
+          minColor={colorMode.minColor}
+          minValue={minYVal}
+          maxColor={colorMode.maxColor}
+          maxValue={maxYVal}
+        />
+      ) : (
+        <MapLegendDiscrete position={POS_BOTTOM_RIGHT} legendItems={colorMode.legendItems} />
+      )}
+    </BentoMapContainer>
+  );
+};
+
+export default BentoChoroplethMap;

package/src/Components/Maps/BentoMapContainer.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { MapContainer } from 'react-leaflet';
+import L, { Point } from 'leaflet';
+
+import BentoOSMTileLayer from './BentoOSMTileLayer';
+import type { BaseMapProps } from '../../types/mapTypes';
+
+import iconPng from 'leaflet/dist/images/marker-icon.png';
+import icon2XPng from 'leaflet/dist/images/marker-icon-2x.png';
+import iconShadowPng from 'leaflet/dist/images/marker-shadow.png';
+
+const defaultIcon = L.icon({
+  iconUrl: iconPng,
+  iconRetinaUrl: icon2XPng,
+  iconSize: new Point(25, 41),
+  iconAnchor: new Point(12, 41),
+  popupAnchor: new Point(1, -41),
+  shadowUrl: iconShadowPng,
+});
+
+L.Marker.prototype.options.icon = defaultIcon;
+
+interface MapContainerProps extends BaseMapProps {
+  children: ReactNode;
+}
+
+const BentoMapContainer = ({ height, center, zoom, children, tileLayer }: MapContainerProps) => (
+  <MapContainer style={{ height }} center={center} zoom={zoom}>
+    {tileLayer ?? <BentoOSMTileLayer />}
+    {children}
+  </MapContainer>
+);
+
+export default BentoMapContainer;

package/src/Components/Maps/BentoOSMTileLayer.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TileLayer } from 'react-leaflet';
+import { OSM_TILE_LAYER_ATTRIBUTION, OSM_TILE_LAYER_TEMPLATE } from '../../constants/mapConstants';
+
+const BentoOSMTileLayer = () => <TileLayer attribution={OSM_TILE_LAYER_ATTRIBUTION} url={OSM_TILE_LAYER_TEMPLATE} />;
+
+export default BentoOSMTileLayer;