bento-charts 2.3.0 → 2.4.0

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/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,16 +51,19 @@ 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'];
@@ -68,7 +71,7 @@ export interface PieChartProps extends BaseChartProps {
   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;
+};