bento-charts 2.4.0 → 2.4.2

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]);
 
@@ -87,8 +79,9 @@ const BentoChoroplethMap = ({
                 {onClick ? (
                   <a
                     href="#"
-                    onClick={() => {
+                    onClick={(e) => {
                       if (onClick) onClick(feature);
+                      e.preventDefault();
                     }}
                   >
                     {title}
@@ -101,7 +94,7 @@ const BentoChoroplethMap = ({
             </div>
           );
         },
-      } as LeafletEventHandlerFnMap),
+      }) as LeafletEventHandlerFnMap,
     [onClick, categoryProp, renderPopupBody]
   );
 

package/src/Components/Maps/BentoPointMap.tsx

@@ -16,7 +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 onClick={() => onClick(point)}>{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

@@ -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 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,21 @@ 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;
 }
 
+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/tsconfig.json

@@ -23,4 +23,4 @@
   "exclude": [
     "node_modules"
   ],
-}
+}

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: {