bento-charts 2.4.1 → 2.5.0

package/src/Components/Charts/BentoPie.tsx

@@ -1,5 +1,15 @@
-import React, { useState } from 'react';
-import { PieChart, Pie, Cell, Curve, Tooltip, Sector, PieProps, PieLabelRenderProps } from 'recharts';
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Curve,
+  Tooltip,
+  Sector,
+  PieProps,
+  PieLabelRenderProps,
+  ResponsiveContainer,
+} from 'recharts';
 import type CSS from 'csstype';
 
 import {
@@ -7,9 +17,7 @@ import {
   LABEL_STYLE,
   COUNT_STYLE,
   CHART_MISSING_FILL,
-  CHART_WRAPPER_STYLE,
   RADIAN,
-  CHART_ASPECT_RATIO,
   LABEL_THRESHOLD,
   COUNT_TEXT_STYLE,
   TEXT_STYLE,
@@ -21,8 +29,9 @@ import {
   useChartThreshold,
   useChartMaxLabelChars,
 } from '../../ChartConfigProvider';
-import { polarToCartesian } from '../../util/chartUtils';
+import { polarToCartesian, useTransformedChartData } from '../../util/chartUtils';
 import NoData from '../NoData';
+import ChartWrapper from './ChartWrapper';
 
 const labelShortName = (name: string, maxChars: number) => {
   if (name.length <= maxChars) {
@@ -33,17 +42,14 @@ const labelShortName = (name: string, maxChars: number) => {
 };
 
 const BentoPie = ({
-  data,
   height,
-  preFilter,
-  dataMap,
-  postFilter,
+  width,
   onClick,
   sort = true,
-  removeEmpty = true,
   colorTheme = 'default',
   chartThreshold = useChartThreshold(),
   maxLabelChars = useChartMaxLabelChars(),
+  ...params
 }: PieChartProps) => {
   const t = useChartTranslation();
   const theme = useChartTheme().pie[colorTheme];
@@ -52,63 +58,63 @@ const BentoPie = ({
 
   // ##################### Data processing #####################
 
-  data = [...data]; // Changing immutable data to mutable data
-  if (preFilter) data = data.filter(preFilter);
-  if (dataMap) data = data.map(dataMap);
-  if (postFilter) data = data.filter(postFilter);
-
-  // removing empty values
-  if (removeEmpty) data = data.filter((e) => e.y !== 0);
-
-  if (sort) data.sort((a, b) => a.y - b.y);
+  const transformedData = useTransformedChartData(params, true, sort);
+  const { data, sum } = useMemo(() => {
+    let data = [...transformedData];
 
-  // combining sections with less than OTHER_THRESHOLD
-  const sum = data.reduce((acc, e) => acc + e.y, 0);
-  const length = data.length;
-  const threshold = chartThreshold * sum;
-  const temp = data.filter((e) => e.y > threshold);
+    // combining sections with less than chartThreshold
+    const sum = data.reduce((acc, e) => acc + e.y, 0);
+    const length = data.length;
+    const threshold = chartThreshold * sum;
+    const dataAboveThreshold = data.filter((e) => e.y > threshold);
+    // length - 1 intentional: if there is just one category below threshold, the "Other" category is not necessary.
+    data = dataAboveThreshold.length === length - 1 ? data : dataAboveThreshold;
+    if (data.length !== length) {
+      data.push({
+        x: t['Other'],
+        y: sum - data.reduce((acc, e) => acc + e.y, 0),
+      });
+    }
 
-  // length - 1 intentional: if there is just one category bellow threshold the "Other" category is not necessary
-  data = temp.length === length - 1 ? data : temp;
-  if (data.length !== length) {
-    data.push({
-      x: t['Other'],
-      y: sum - data.reduce((acc, e) => acc + e.y, 0),
-    });
-  }
+    return {
+      data: data.map((e) => ({ name: e.x, value: e.y })),
+      sum,
+    };
+  }, [transformedData, sort, chartThreshold]);
 
   if (data.length === 0) {
     return <NoData height={height} />;
   }
 
-  const bentoFormatData = data.map((e) => ({ name: e.x, value: e.y }));
-
   // ##################### Rendering #####################
-  const onEnter: PieProps['onMouseEnter'] = (_data, index) => {
+  const onEnter: PieProps['onMouseEnter'] = useCallback((_data, index) => {
     setActiveIndex(index);
-  };
+  }, []);
 
-  const onHover: PieProps['onMouseOver'] = (data, _index, e) => {
-    const { target } = e;
-    if (onClick && target && data.name !== t['Other']) (target as SVGElement).style.cursor = 'pointer';
-  };
+  const onHover: PieProps['onMouseOver'] = useCallback(
+    (data, _index, e) => {
+      const { target } = e;
+      if (onClick && target && data.name !== t['Other']) (target as SVGElement).style.cursor = 'pointer';
+    },
+    [onClick]
+  );
 
-  const onLeave: PieProps['onMouseLeave'] = () => {
+  const onLeave: PieProps['onMouseLeave'] = useCallback(() => {
     setActiveIndex(undefined);
-  };
+  }, []);
 
   return (
-    <>
-      <div style={CHART_WRAPPER_STYLE}>
-        <PieChart height={height} width={height * CHART_ASPECT_RATIO}>
+    <ChartWrapper>
+      <ResponsiveContainer width={width ?? "100%"} height={height}>
+        <PieChart>
           <Pie
-            data={bentoFormatData}
+            data={data}
             dataKey="value"
             cx="50%"
             cy="50%"
-            innerRadius={35}
-            outerRadius={80}
-            label={RenderLabel(maxLabelChars)}
+            innerRadius="25%"
+            outerRadius="55%"
+            label={renderLabel(maxLabelChars)}
             labelLine={false}
             isAnimationActive={false}
             onMouseEnter={onEnter}
@@ -119,8 +125,7 @@ const BentoPie = ({
             onClick={onClick}
           >
             {data.map((entry, index) => {
-              let fill = theme[index % theme.length];
-              fill = entry.x.toLowerCase() === 'missing' ? CHART_MISSING_FILL : fill;
+              const fill = entry.name.toLowerCase() === 'missing' ? CHART_MISSING_FILL : theme[index % theme.length];
               return <Cell key={index} fill={fill} />;
             })}
           </Pie>
@@ -130,8 +135,8 @@ const BentoPie = ({
             allowEscapeViewBox={{ x: true, y: true }}
           />
         </PieChart>
-      </div>
-    </>
+      </ResponsiveContainer>
+    </ChartWrapper>
   );
 };
 
@@ -144,9 +149,8 @@ const toNumber = (val: number | string | undefined, defaultValue?: number): numb
   return defaultValue || 0;
 };
 
-const RenderLabel =
-  (maxLabelChars: number): PieProps['label'] =>
-  (params: PieLabelRenderProps) => {  // eslint-disable-line
+const renderLabel = (maxLabelChars: number): PieProps['label'] => {
+  const BentoPieLabel = (params: PieLabelRenderProps) => {
     const { fill, payload, index, activeIndex } = params;
     const percent = params.percent || 0;
     const midAngle = params.midAngle || 0;
@@ -204,6 +208,9 @@ const RenderLabel =
       </g>
     );
   };
+  BentoPieLabel.displayName = BentoPieLabel;
+  return BentoPieLabel;
+};
 
 const RenderActiveLabel: PieProps['activeShape'] = (params) => {
   const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = params;

package/src/Components/Charts/ChartWrapper.tsx

@@ -0,0 +1,15 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
+import { CHART_WRAPPER_STYLE } from '../../constants/chartConstants';
+
+interface ChartWrapperProps {
+  children: ReactNode;
+}
+
+const ChartWrapper = forwardRef(({children}: ChartWrapperProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <div style={CHART_WRAPPER_STYLE} ref={ref}>
+    {children}
+  </div>
+));
+ChartWrapper.displayName = "ChartWrapper";
+
+export default ChartWrapper;

package/src/Components/Maps/BentoChoroplethMap.tsx

@@ -15,16 +15,13 @@ import type { ChoroplethMapProps } from '../../types/mapTypes';
 import BentoMapContainer from './BentoMapContainer';
 import MapLegendContinuous from './controls/MapLegendContinuous';
 import MapLegendDiscrete from './controls/MapLegendDiscrete';
+import { useTransformedChartData } from '../../util/chartUtils';
 
 const DEFAULT_CATEGORY = '';
 const POS_BOTTOM_RIGHT: ControlPosition = 'bottomright';
 
 const BentoChoroplethMap = ({
   height,
-  data: originalData,
-  preFilter,
-  dataMap,
-  postFilter,
   center,
   zoom,
   tileLayer,
@@ -33,14 +30,9 @@ const BentoChoroplethMap = ({
   categoryProp,
   onClick,
   renderPopupBody,
+  ...params
 }: 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 data = useTransformedChartData(params);
 
   const dataByFeatureCat = useMemo(() => Object.fromEntries(data.map((d) => [d.x, d.y])), [data]);
 
@@ -102,7 +94,7 @@ const BentoChoroplethMap = ({
             </div>
           );
         },
-      } as LeafletEventHandlerFnMap),
+      }) as LeafletEventHandlerFnMap,
     [onClick, categoryProp, renderPopupBody]
   );
 

package/src/Components/Maps/BentoPointMap.tsx

@@ -16,10 +16,19 @@ const BentoPointMap = ({ height, center, zoom, tileLayer, data, onClick, renderP
           <Marker key={i} position={coordinatesLatLongOrder}>
             <Popup>
               <h4 style={{ marginBottom: renderPopupBody ? 6 : 0 }}>
-                {onClick ? <a href="#" onClick={(e) => {
-                  onClick(point);
-                  e.preventDefault();
-                }}>{title}</a> : <>{title}</>}
+                {onClick ? (
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      onClick(point);
+                      e.preventDefault();
+                    }}
+                  >
+                    {title}
+                  </a>
+                ) : (
+                  <>{title}</>
+                )}
               </h4>
               {renderPopupBody ? renderPopupBody(point) : null}
             </Popup>

package/src/constants/chartConstants.ts

@@ -83,6 +83,8 @@ export const CHART_WRAPPER_STYLE: CSS.Properties = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+  overflowX: 'auto',
+  overflowY: 'hidden',
 };
 
 // bar chart
@@ -104,16 +106,13 @@ export const COUNT_TEXT_STYLE: CSS.Properties = {
 
 // ################### CHART CONSTANTS ###################
 // bar chart
-export const ASPECT_RATIO = 1.2;
 export const MAX_TICK_LABEL_CHARS = 15;
 export const UNITS_LABEL_OFFSET = -75;
 export const TICKS_SHOW_ALL_LABELS_BELOW = 11; // Below this # of X-axis ticks, force-show all labels
 export const TICK_MARGIN = 5; // vertical spacing between tick line and tick label
 
 // pie chart
-export const CHART_ASPECT_RATIO = 1.4;
 export const LABEL_THRESHOLD = 0.05;
-export const OTHER_THRESHOLD = 0.01;
 
 // ################### UTIL CONSTANTS ###################
 export const RADIAN = Math.PI / 180;

package/src/types/chartTypes.ts

@@ -37,6 +37,7 @@ 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<CategoricalChartDataItem>;
+export type ChartDataMapCallback = UnitaryMapCallback<CategoricalChartDataItem>;
 
 export type SupportedLng = 'en' | 'fr';
 
@@ -50,19 +51,24 @@ export type TranslationObject = {
   [key in SupportedLng]: LngDictionary;
 };
 
-// ###################  COMPONENT PROPS #####################
-export interface BaseChartComponentProps {
-  height: number;
+export interface CategoricalChartDataWithTransforms {
+  data: CategoricalChartDataType;
   preFilter?: ChartFilterCallback;
-  dataMap?: UnitaryMapCallback<CategoricalChartDataItem>;
+  dataMap?: ChartDataMapCallback;
   postFilter?: ChartFilterCallback;
+  removeEmpty?: boolean;
 }
 
-interface BaseCategoricalChartProps extends BaseChartComponentProps {
-  data: CategoricalChartDataType;
-  removeEmpty?: boolean;
+// ###################  COMPONENT PROPS #####################
+export interface BaseChartComponentProps {
+  height: number;
+  // Width is useful to have, to force re-render / force a specific width, but it is optional.
+  // Otherwise, it will be set to 100%.
+  width?: number | string;
 }
 
+export interface BaseCategoricalChartProps extends BaseChartComponentProps, CategoricalChartDataWithTransforms {}
+
 export interface PieChartProps extends BaseCategoricalChartProps {
   colorTheme?: keyof ChartTheme['pie'];
   sort?: boolean;

package/src/types/mapTypes.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import type { Feature as GeoJSONFeatureType } from 'geojson';
 
-import { BaseChartComponentProps, CategoricalChartDataType } from './chartTypes';
+import { BaseCategoricalChartProps, BaseChartComponentProps } from './chartTypes';
 import type { GeoJSONPolygonOnlyFeatureCollection } from './geoJSONTypes';
 
 export interface GeoPointDataItem {
@@ -42,8 +42,8 @@ export interface ChoroplethMapColorModeDiscrete {
   legendItems: MapDiscreteLegendItem[];
 }
 
-export interface ChoroplethMapProps extends BaseMapProps {
-  data: CategoricalChartDataType; // heatmaps are 'categorical' + geographical
+// heatmaps are 'categorical' + geographical:
+export interface ChoroplethMapProps extends BaseCategoricalChartProps, BaseMapProps {
   features: GeoJSONPolygonOnlyFeatureCollection;
   colorMode: ChoroplethMapColorModeContinuous | ChoroplethMapColorModeDiscrete;
   categoryProp: string;

package/src/util/chartUtils.ts

@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { RADIAN } from '../constants/chartConstants';
+import type { CategoricalChartDataWithTransforms } from '../types/chartTypes';
 
 export const polarToCartesian = (cx: number, cy: number, radius: number, angle: number) => {
   return {
@@ -6,3 +8,30 @@ export const polarToCartesian = (cx: number, cy: number, radius: number, angle:
     y: cy + Math.sin(-RADIAN * angle) * radius,
   };
 };
+
+export const useTransformedChartData = (
+  {
+    data: originalData,
+    preFilter,
+    dataMap,
+    postFilter,
+    removeEmpty: origRemoveEmpty,
+  }: CategoricalChartDataWithTransforms,
+  defaultRemoveEmpty = true,
+  sortY = false,
+) =>
+  useMemo(() => {
+    const removeEmpty = origRemoveEmpty ?? defaultRemoveEmpty;
+
+    let data = [...originalData];
+
+    if (preFilter) data = data.filter(preFilter);
+    if (dataMap) data = data.map(dataMap);
+    if (postFilter) data = data.filter(postFilter);
+
+    if (removeEmpty) data = data.filter((e) => e.y !== 0);
+
+    if (sortY) data.sort((a, b) => a.y - b.y);
+
+    return data;
+  }, [originalData, preFilter, dataMap, postFilter, origRemoveEmpty]);

package/webpack.config.js

@@ -12,7 +12,14 @@ const config = {
   },
   module: {
     rules: [
-      { test: /\.[tj](sx|s)?$/, use: { loader: 'ts-loader' }, exclude: /node_modules/ },
+      {
+        test: /\.[tj](sx|s)?$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          configFile: 'test/tsconfig.json'
+        }
+      },
       {
         test: /\.html$/i,
         loader: 'html-loader',
@@ -43,6 +50,7 @@ const config = {
   devtool: 'source-map',
   devServer: {
     static: './test/dist',
+    historyApiFallback: true,
   },
   resolve: {
     alias: {