bento-charts 2.4.1 → 2.4.2

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