bento-charts 2.2.0 → 2.4.0

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;

package/src/Components/Maps/BentoPointMap.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Marker, Popup } from 'react-leaflet';
+import BentoMapContainer from './BentoMapContainer';
+import type { PointMapProps } from '../../types/mapTypes';
+
+const BentoPointMap = ({ height, center, zoom, tileLayer, data, onClick, renderPopupBody }: PointMapProps) => {
+  return (
+    <BentoMapContainer height={height} center={center} zoom={zoom} tileLayer={tileLayer}>
+      {data.map((point, i) => {
+        const { coordinates, title } = point;
+
+        // We expect points in [long, lat] order (consistent with GeoJSON), but Leaflet wants them in [lat, long].
+        const coordinatesLatLongOrder: [number, number] = [coordinates[1], coordinates[0]];
+
+        return (
+          <Marker key={i} position={coordinatesLatLongOrder}>
+            <Popup>
+              <h4 style={{ marginBottom: renderPopupBody ? 6 : 0 }}>
+                {onClick ? <a onClick={() => onClick(point)}>{title}</a> : <>{title}</>}
+              </h4>
+              {renderPopupBody ? renderPopupBody(point) : null}
+            </Popup>
+          </Marker>
+        );
+      })}
+    </BentoMapContainer>
+  );
+};
+
+export default BentoPointMap;

package/src/Components/Maps/controls/MapLegendContinuous.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ControlPosition } from 'leaflet';
+import { controlPositionClasses } from './utils';
+
+export interface MapLegendDiscreteProps {
+  position: ControlPosition;
+  minValue: number;
+  minColor: string;
+  maxValue: number;
+  maxColor: string;
+}
+
+const MapLegendContinuous = ({ position, minValue, minColor, maxValue, maxColor }: MapLegendDiscreteProps) => {
+  return (
+    <div className={controlPositionClasses[position]}>
+      <div className="leaflet-control bento-charts--map--legend">
+        <div className="bento-charts--map--legend--scale">
+          <div
+            className="bento-charts--continuous-scale"
+            style={{ background: `linear-gradient(0deg, ${minColor} 0%, ${maxColor} 100%)` }}
+          />
+          <div className="bento-charts--map--legend--values">
+            <span>{maxValue}</span>
+            <span>{minValue}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MapLegendContinuous;

package/src/Components/Maps/controls/MapLegendDiscrete.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ControlPosition } from 'leaflet';
+import type { MapDiscreteLegendItem } from '../../../types/mapTypes';
+import { controlPositionClasses } from './utils';
+
+export interface MapLegendDiscreteProps {
+  position: ControlPosition;
+  legendItems: MapDiscreteLegendItem[];
+}
+
+const MapLegendDiscrete = ({ position, legendItems }: MapLegendDiscreteProps) => {
+  return (
+    <div className={controlPositionClasses[position]}>
+      <div className="leaflet-control bento-charts--map--legend">
+        <ul>
+          {legendItems.map(({ label, color }, i) => (
+            <li key={i}>
+              <span
+                className="bento-charts--map--legend--patch"
+                style={{ backgroundColor: color ?? `rgba(255, 255, 255, 0)` }}
+              />
+              {label}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default MapLegendDiscrete;

package/src/Components/Maps/controls/utils.ts

@@ -0,0 +1,8 @@
+import type { ControlPosition } from 'leaflet';
+
+export const controlPositionClasses: { [x in ControlPosition]: string } = {
+  bottomleft: 'leaflet-bottom leaflet-left',
+  bottomright: 'leaflet-bottom leaflet-right',
+  topleft: 'leaflet-top leaflet-left',
+  topright: 'leaflet-bottom leaflet-right',
+};

package/src/constants/chartConstants.ts

@@ -113,7 +113,6 @@ export const TICK_MARGIN = 5; // vertical spacing between tick line and tick lab
 // pie chart
 export const CHART_ASPECT_RATIO = 1.4;
 export const LABEL_THRESHOLD = 0.05;
-export const MAX_LABEL_CHARS = 14;
 export const OTHER_THRESHOLD = 0.01;
 
 // ################### UTIL CONSTANTS ###################

package/src/constants/mapConstants.ts

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

package/src/index.ts

@@ -1,5 +1,12 @@
+// 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';

package/src/maps.ts

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

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

package/src/styles.css

@@ -0,0 +1,48 @@
+.bento-charts--map--legend {
+  background-color: white;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
+}
+.leaflet-bottom .bento-charts--map--legend {
+  margin-bottom: 28px;
+}
+
+.bento-charts--map--legend ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.bento-charts--map--legend--patch {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid white;
+  vertical-align: top;
+  margin-right: 12px;
+  border-radius: 3px;
+}
+
+.bento-charts--map--legend--scale {
+  height: 100px;
+  display: flex;
+  gap: 12px;
+}
+
+.bento-charts--continuous-scale {
+  width: 1rem;
+  height: 100%;
+}
+
+.bento-charts--map--legend--values {
+  display: flex;
+  flex-direction: column;
+}
+.bento-charts--map--legend--values > span:first-of-type {
+  flex: 1;
+}

package/src/types/chartTypes.ts

@@ -1,8 +1,8 @@
-import { PieProps, BarProps } from 'recharts';
+import type { PieProps, BarProps } from 'recharts';
 
-export type ChartDataType = ChartDataItem[];
+export type CategoricalChartDataType = CategoricalChartDataItem[];
 
-export interface ChartDataItem {
+export interface CategoricalChartDataItem {
   x: string;
   y: number;
 }
@@ -36,7 +36,7 @@ export type FilterCallback<T> = (value: T, index: number, array: T[]) => boolean
 export type UnitaryMapCallback<T> = (value: T, index: number, array: T[]) => T;
 // export type BinaryMapCallback<T, U> = (value: T, index: number, array: T[]) => U;
 
-export type ChartFilterCallback = FilterCallback<ChartDataItem>;
+export type ChartFilterCallback = FilterCallback<CategoricalChartDataItem>;
 
 export type SupportedLng = 'en' | 'fr';
 
@@ -51,23 +51,27 @@ export type TranslationObject = {
 };
 
 // ###################  COMPONENT PROPS #####################
-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/src/types/geoJSONTypes.ts

@@ -0,0 +1,21 @@
+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/src/types/mapTypes.ts

@@ -0,0 +1,52 @@
+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; // heatmaps are 'categorical' + geographical
+  features: GeoJSONPolygonOnlyFeatureCollection;
+  colorMode: ChoroplethMapColorModeContinuous | ChoroplethMapColorModeDiscrete;
+  categoryProp: string;
+  onClick?: GeoJSONShapeOnClick;
+  renderPopupBody?: (f: GeoJSONFeatureType, d: number | undefined) => ReactNode;
+}

package/webpack.config.js

@@ -0,0 +1,60 @@
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const config = {
+  mode: 'development',
+  entry: './test/js/index.tsx',
+  output: {
+    path: __dirname + '/test/dist',
+    publicPath: '',
+    filename: 'js/[name][chunkhash].js',
+  },
+  module: {
+    rules: [
+      { test: /\.[tj](sx|s)?$/, use: { loader: 'ts-loader' }, exclude: /node_modules/ },
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: 'file-loader',
+      },
+    ],
+  },
+  watchOptions: {
+    poll: 1000,
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Development',
+      inject: false,
+      template: 'test/index.ejs',
+    }),
+  ],
+  optimization: {
+    runtimeChunk: 'single',
+  },
+  devtool: 'source-map',
+  devServer: {
+    static: './test/dist',
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+};
+
+module.exports = (_env, argv) => {
+  if (argv.mode === 'development') {
+    config.devtool = 'inline-source-map';
+  }
+  return config;
+};