bento-charts 2.4.0 → 2.4.2

package/dist/Components/Maps/controls/MapLegendContinuous.js

@@ -1,19 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { controlPositionClasses } from './utils';
 var MapLegendContinuous = function (_a) {
     var position = _a.position, minValue = _a.minValue, minColor = _a.minColor, maxValue = _a.maxValue, maxColor = _a.maxColor;
-    return (_jsx("div", __assign({ className: controlPositionClasses[position] }, { children: _jsx("div", __assign({ className: "leaflet-control bento-charts--map--legend" }, { children: _jsxs("div", __assign({ className: "bento-charts--map--legend--scale" }, { children: [_jsx("div", { className: "bento-charts--continuous-scale", style: { background: "linear-gradient(0deg, ".concat(minColor, " 0%, ").concat(maxColor, " 100%)") } }), _jsxs("div", __assign({ className: "bento-charts--map--legend--values" }, { children: [_jsx("span", { children: maxValue }), _jsx("span", { children: minValue })] }))] })) })) })));
+    return (_jsx("div", { className: controlPositionClasses[position], children: _jsx("div", { className: "leaflet-control bento-charts--map--legend", children: _jsxs("div", { className: "bento-charts--map--legend--scale", children: [_jsx("div", { className: "bento-charts--continuous-scale", style: { background: "linear-gradient(0deg, ".concat(minColor, " 0%, ").concat(maxColor, " 100%)") } }), _jsxs("div", { className: "bento-charts--map--legend--values", children: [_jsx("span", { children: maxValue }), _jsx("span", { children: minValue })] })] }) }) }));
 };
 export default MapLegendContinuous;
 //# sourceMappingURL=MapLegendContinuous.js.map

package/dist/Components/Maps/controls/MapLegendContinuous.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLegendContinuous.js","sourceRoot":"","sources":["../../../../src/Components/Maps/controls/MapLegendContinuous.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAUjD,IAAM,mBAAmB,GAAG,UAAC,EAA4E;QAA1E,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAC7E,OAAO,CACL,uBAAK,SAAS,EAAE,sBAAsB,CAAC,QAAQ,CAAC,gBAC9C,uBAAK,SAAS,EAAC,2CAA2C,gBACxD,wBAAK,SAAS,EAAC,kCAAkC,iBAC/C,cACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,UAAU,EAAE,gCAAyB,QAAQ,kBAAQ,QAAQ,WAAQ,EAAE,GAChF,EACF,wBAAK,SAAS,EAAC,mCAAmC,iBAChD,yBAAO,QAAQ,GAAQ,EACvB,yBAAO,QAAQ,GAAQ,KACnB,KACF,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MapLegendContinuous.js","sourceRoot":"","sources":["../../../../src/Components/Maps/controls/MapLegendContinuous.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAUjD,IAAM,mBAAmB,GAAG,UAAC,EAA4E;QAA1E,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAC7E,OAAO,CACL,cAAK,SAAS,EAAE,sBAAsB,CAAC,QAAQ,CAAC,YAC9C,cAAK,SAAS,EAAC,2CAA2C,YACxD,eAAK,SAAS,EAAC,kCAAkC,aAC/C,cACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,UAAU,EAAE,gCAAyB,QAAQ,kBAAQ,QAAQ,WAAQ,EAAE,GAChF,EACF,eAAK,SAAS,EAAC,mCAAmC,aAChD,yBAAO,QAAQ,GAAQ,EACvB,yBAAO,QAAQ,GAAQ,IACnB,IACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/Components/Maps/controls/MapLegendDiscrete.js

@@ -1,22 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { controlPositionClasses } from './utils';
 var MapLegendDiscrete = function (_a) {
     var position = _a.position, legendItems = _a.legendItems;
-    return (_jsx("div", __assign({ className: controlPositionClasses[position] }, { children: _jsx("div", __assign({ className: "leaflet-control bento-charts--map--legend" }, { children: _jsx("ul", { children: legendItems.map(function (_a, i) {
+    return (_jsx("div", { className: controlPositionClasses[position], children: _jsx("div", { className: "leaflet-control bento-charts--map--legend", children: _jsx("ul", { children: legendItems.map(function (_a, i) {
                     var label = _a.label, color = _a.color;
                     return (_jsxs("li", { children: [_jsx("span", { className: "bento-charts--map--legend--patch", style: { backgroundColor: color !== null && color !== void 0 ? color : "rgba(255, 255, 255, 0)" } }), label] }, i));
-                }) }) })) })));
+                }) }) }) }));
 };
 export default MapLegendDiscrete;
 //# sourceMappingURL=MapLegendDiscrete.js.map

package/dist/Components/Maps/controls/MapLegendDiscrete.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLegendDiscrete.js","sourceRoot":"","sources":["../../../../src/Components/Maps/controls/MapLegendDiscrete.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAOjD,IAAM,iBAAiB,GAAG,UAAC,EAAiD;QAA/C,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAChD,OAAO,CACL,uBAAK,SAAS,EAAE,sBAAsB,CAAC,QAAQ,CAAC,gBAC9C,uBAAK,SAAS,EAAC,2CAA2C,gBACxD,uBACG,WAAW,CAAC,GAAG,CAAC,UAAC,EAAgB,EAAE,CAAC;wBAAjB,KAAK,WAAA,EAAE,KAAK,WAAA;oBAAU,OAAA,CACxC,yBACE,eACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,wBAAwB,EAAE,GAC7D,EACD,KAAK,KALC,CAAC,CAML,CACN;gBARyC,CAQzC,CAAC,GACC,IACD,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"MapLegendDiscrete.js","sourceRoot":"","sources":["../../../../src/Components/Maps/controls/MapLegendDiscrete.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAOjD,IAAM,iBAAiB,GAAG,UAAC,EAAiD;QAA/C,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAChD,OAAO,CACL,cAAK,SAAS,EAAE,sBAAsB,CAAC,QAAQ,CAAC,YAC9C,cAAK,SAAS,EAAC,2CAA2C,YACxD,uBACG,WAAW,CAAC,GAAG,CAAC,UAAC,EAAgB,EAAE,CAAC;wBAAjB,KAAK,WAAA,EAAE,KAAK,WAAA;oBAAU,OAAA,CACxC,yBACE,eACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,wBAAwB,EAAE,GAC7D,EACD,KAAK,KALC,CAAC,CAML,CACN;gBARyC,CAQzC,CAAC,GACC,GACD,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/Components/NoData.js

@@ -1,24 +1,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 var NoData = function (_a) {
     var height = _a.height;
-    return (_jsx("div", __assign({ style: {
+    return (_jsx("div", { style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             height: "".concat(height, "px"),
             width: '100%',
-        } }, { children: "No Data" })));
+        }, children: "No Data" }));
 };
 export default NoData;
 //# sourceMappingURL=NoData.js.map

package/dist/Components/NoData.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoData.js","sourceRoot":"","sources":["../../src/Components/NoData.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,IAAM,MAAM,GAAG,UAAC,EAAuB;QAArB,MAAM,YAAA;IACtB,OAAO,CACL,uBACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,UAAG,MAAM,OAAI;YACrB,KAAK,EAAE,MAAM;SACd,6BAGG,CACP,CAAC;AACJ,CAAC,CAAC;AAMF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"NoData.js","sourceRoot":"","sources":["../../src/Components/NoData.tsx"],"names":[],"mappings":";AAEA,IAAM,MAAM,GAAG,UAAC,EAAuB;QAArB,MAAM,YAAA;IACtB,OAAO,CACL,cACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,UAAG,MAAM,OAAI;YACrB,KAAK,EAAE,MAAM;SACd,wBAGG,CACP,CAAC;AACJ,CAAC,CAAC;AAMF,eAAe,MAAM,CAAC"}

package/dist/constants/chartConstants.d.ts

@@ -19,5 +19,4 @@ export declare const TICKS_SHOW_ALL_LABELS_BELOW = 11;
 export declare const TICK_MARGIN = 5;
 export declare const CHART_ASPECT_RATIO = 1.4;
 export declare const LABEL_THRESHOLD = 0.05;
-export declare const OTHER_THRESHOLD = 0.01;
 export declare const RADIAN: number;

package/dist/constants/chartConstants.js

@@ -98,7 +98,6 @@ export var TICK_MARGIN = 5; // vertical spacing between tick line and tick label
 // pie chart
 export var CHART_ASPECT_RATIO = 1.4;
 export var LABEL_THRESHOLD = 0.05;
-export var OTHER_THRESHOLD = 0.01;
 // ################### UTIL CONSTANTS ###################
 export var RADIAN = Math.PI / 180;
 //# sourceMappingURL=chartConstants.js.map

package/dist/constants/chartConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":"AAGA,4DAA4D;AAC5D,MAAM,CAAC,IAAM,wBAAwB,GAAsB;IACzD,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,OAAO;KACf;CACF,CAAC;AAEF,0DAA0D;AAC1D,oBAAoB;AACpB,MAAM,CAAC,IAAM,MAAM,GAAe;IAChC,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,SAAS,CAAC;AACxC,MAAM,CAAC,IAAM,kBAAkB,GAAG,SAAS,CAAC;AAE5C,MAAM,CAAC,IAAM,mBAAmB,GAAe;IAC7C,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;KAChB;IACD,GAAG,EAAE;QACH,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,kBAAkB;SAC5B;KACF;CACF,CAAC;AAEF,uDAAuD;AAEvD,SAAS;AACT,MAAM,CAAC,IAAM,cAAc,GAAmB;IAC5C,eAAe,EAAE,0BAA0B;IAC3C,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,gBAAgB;IACxB,SAAS,EAAE,gCAAgC;IAC3C,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAmB;IACjD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,IAAM,UAAU,GAAmB;IACxC,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,MAAM;CACb,CAAC;AACF,MAAM,CAAC,IAAM,gBAAgB,GAAmB;IAC9C,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,0DAA0D;AAC1D,YAAY;AACZ,MAAM,CAAC,IAAM,YAAY,GAAG,GAAG,CAAC;AAChC,MAAM,CAAC,IAAM,oBAAoB,GAAG,EAAE,CAAC;AACvC,MAAM,CAAC,IAAM,kBAAkB,GAAG,CAAC,EAAE,CAAC;AACtC,MAAM,CAAC,IAAM,2BAA2B,GAAG,EAAE,CAAC,CAAC,sDAAsD;AACrG,MAAM,CAAC,IAAM,WAAW,GAAG,CAAC,CAAC,CAAC,oDAAoD;AAElF,YAAY;AACZ,MAAM,CAAC,IAAM,kBAAkB,GAAG,GAAG,CAAC;AACtC,MAAM,CAAC,IAAM,eAAe,GAAG,IAAI,CAAC;AAEpC,yDAAyD;AACzD,MAAM,CAAC,IAAM,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC"}

package/dist/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/dist/types/chartTypes.d.ts

@@ -34,6 +34,7 @@ export type ChartTheme = {
 export type FilterCallback<T> = (value: T, index: number, array: T[]) => boolean;
 export type UnitaryMapCallback<T> = (value: T, index: number, array: T[]) => T;
 export type ChartFilterCallback = FilterCallback<CategoricalChartDataItem>;
+export type ChartDataMapCallback = UnitaryMapCallback<CategoricalChartDataItem>;
 export type SupportedLng = 'en' | 'fr';
 type TranslationWords = 'Count' | 'Other';
 export type LngDictionary = {
@@ -42,16 +43,18 @@ export type LngDictionary = {
 export type TranslationObject = {
     [key in SupportedLng]: LngDictionary;
 };
-export interface BaseChartComponentProps {
-    height: number;
+export interface CategoricalChartDataWithTransforms {
+    data: CategoricalChartDataType;
     preFilter?: ChartFilterCallback;
-    dataMap?: UnitaryMapCallback<CategoricalChartDataItem>;
+    dataMap?: ChartDataMapCallback;
     postFilter?: ChartFilterCallback;
-}
-interface BaseCategoricalChartProps extends BaseChartComponentProps {
-    data: CategoricalChartDataType;
     removeEmpty?: boolean;
 }
+export interface BaseChartComponentProps {
+    height: number;
+}
+export interface BaseCategoricalChartProps extends BaseChartComponentProps, CategoricalChartDataWithTransforms {
+}
 export interface PieChartProps extends BaseCategoricalChartProps {
     colorTheme?: keyof ChartTheme['pie'];
     sort?: boolean;

package/dist/types/mapTypes.d.ts

@@ -1,6 +1,6 @@
 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 {
     coordinates: [number, number];
@@ -32,8 +32,7 @@ export interface ChoroplethMapColorModeDiscrete {
     colorFunction: (x: number | undefined) => string;
     legendItems: MapDiscreteLegendItem[];
 }
-export interface ChoroplethMapProps extends BaseMapProps {
-    data: CategoricalChartDataType;
+export interface ChoroplethMapProps extends BaseCategoricalChartProps, BaseMapProps {
     features: GeoJSONPolygonOnlyFeatureCollection;
     colorMode: ChoroplethMapColorModeContinuous | ChoroplethMapColorModeDiscrete;
     categoryProp: string;

package/dist/util/chartUtils.d.ts

@@ -1,4 +1,6 @@
+import type { CategoricalChartDataWithTransforms } from '../types/chartTypes';
 export declare const polarToCartesian: (cx: number, cy: number, radius: number, angle: number) => {
     x: number;
     y: number;
 };
+export declare const useTransformedChartData: ({ data: originalData, preFilter, dataMap, postFilter, removeEmpty: origRemoveEmpty, }: CategoricalChartDataWithTransforms, defaultRemoveEmpty?: boolean, sortY?: boolean) => import("../types/chartTypes").CategoricalChartDataItem[];

package/dist/util/chartUtils.js

@@ -1,3 +1,13 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useMemo } from 'react';
 import { RADIAN } from '../constants/chartConstants';
 export var polarToCartesian = function (cx, cy, radius, angle) {
     return {
@@ -5,4 +15,24 @@ export var polarToCartesian = function (cx, cy, radius, angle) {
         y: cy + Math.sin(-RADIAN * angle) * radius,
     };
 };
+export var useTransformedChartData = function (_a, defaultRemoveEmpty, sortY) {
+    var originalData = _a.data, preFilter = _a.preFilter, dataMap = _a.dataMap, postFilter = _a.postFilter, origRemoveEmpty = _a.removeEmpty;
+    if (defaultRemoveEmpty === void 0) { defaultRemoveEmpty = true; }
+    if (sortY === void 0) { sortY = false; }
+    return useMemo(function () {
+        var removeEmpty = origRemoveEmpty !== null && origRemoveEmpty !== void 0 ? origRemoveEmpty : defaultRemoveEmpty;
+        var data = __spreadArray([], originalData, true);
+        if (preFilter)
+            data = data.filter(preFilter);
+        if (dataMap)
+            data = data.map(dataMap);
+        if (postFilter)
+            data = data.filter(postFilter);
+        if (removeEmpty)
+            data = data.filter(function (e) { return e.y !== 0; });
+        if (sortY)
+            data.sort(function (a, b) { return a.y - b.y; });
+        return data;
+    }, [originalData, preFilter, dataMap, postFilter, origRemoveEmpty]);
+};
 //# sourceMappingURL=chartUtils.js.map

package/dist/util/chartUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"chartUtils.js","sourceRoot":"","sources":["../../src/util/chartUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAAU,EAAE,EAAU,EAAE,MAAc,EAAE,KAAa;IACpF,OAAO;QACL,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,MAAM;QAC1C,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,MAAM;KAC3C,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"chartUtils.js","sourceRoot":"","sources":["../../src/util/chartUtils.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAAU,EAAE,EAAU,EAAE,MAAc,EAAE,KAAa;IACpF,OAAO;QACL,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,MAAM;QAC1C,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,MAAM;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG,UACrC,EAMqC,EACrC,kBAAyB,EACzB,KAAa;QAPL,YAAY,UAAA,EAClB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,UAAU,gBAAA,EACG,eAAe,iBAAA;IAE9B,mCAAA,EAAA,yBAAyB;IACzB,sBAAA,EAAA,aAAa;IAEb,OAAA,OAAO,CAAC;QACN,IAAM,WAAW,GAAG,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,kBAAkB,CAAC;QAE1D,IAAI,IAAI,qBAAO,YAAY,OAAC,CAAC;QAE7B,IAAI,SAAS;YAAE,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC7C,IAAI,OAAO;YAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,UAAU;YAAE,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAE/C,IAAI,WAAW;YAAE,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,KAAK,CAAC,EAAT,CAAS,CAAC,CAAC;QAEtD,IAAI,KAAK;YAAE,IAAI,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAT,CAAS,CAAC,CAAC;QAE1C,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC;AAdnE,CAcmE,CAAC"}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "bento-charts",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Charts library for Bento-platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "npx tsc",
+    "build": "npx tsc && npm run copy-files",
+    "copy-files": "cp ./src/styles.css ./dist/",
     "prepublishOnly": "npm run build",
     "lint": "npx eslint src",
     "buildpack": "rm ./packs/*.tgz && tsc && npm pack --pack-destination ./packs",
@@ -53,30 +54,31 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
+    "@commitlint/cli": "^17.7.2",
+    "@commitlint/config-conventional": "^17.7.0",
     "@semantic-release/git": "^10.0.1",
-    "@types/leaflet": "^1.9.3",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.10",
+    "@types/leaflet": "^1.9.6",
+    "@types/react": "^18.2.24",
+    "@types/react-dom": "^18.2.8",
     "@types/react-leaflet": "^3.0.0",
-    "@types/recharts": "^1.8.24",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@types/recharts": "^1.8.25",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "@webpack-cli/serve": "^2.0.5",
-    "antd": "^5.9.2",
+    "antd": "^5.9.4",
     "css-loader": "^6.8.1",
-    "eslint": "^8.36.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.50.0",
+    "eslint-plugin-react": "^7.33.2",
     "file-loader": "^6.2.0",
     "geojson": "^0.5.0",
     "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
-    "prettier": "2.7.1",
-    "semantic-release": "^20.1.3",
+    "prettier": "3.0.3",
+    "react-router-dom": "^6.16.0",
+    "semantic-release": "^22.0.5",
     "style-loader": "^3.3.3",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.2.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"

package/src/Components/Charts/BentoBarChart.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps } from 'recharts';
 import {
   TOOL_TIP_STYLE,
@@ -16,6 +16,7 @@ import {
 import type { BarChartProps, CategoricalChartDataItem, TooltipPayload } from '../../types/chartTypes';
 import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
 import NoData from '../NoData';
+import { useTransformedChartData } from '../../util/chartUtils';
 
 const tickFormatter = (tickLabel: string) => {
   if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
@@ -24,38 +25,27 @@ const tickFormatter = (tickLabel: string) => {
   return `${tickLabel.substring(0, MAX_TICK_LABEL_CHARS)}...`;
 };
 
-const BentoBarChart = ({
-  data,
-  height,
-  units,
-  title,
-  preFilter,
-  dataMap,
-  postFilter,
-  onClick,
-  removeEmpty = true,
-  colorTheme = 'default',
-}: BarChartProps) => {
+const BentoBarChart = ({ height, units, title, onClick, colorTheme = 'default', ...params }: BarChartProps) => {
   const t = useChartTranslation();
   const { fill: chartFill, missing } = useChartTheme().bar[colorTheme];
 
   const fill = (entry: CategoricalChartDataItem) => (entry.x === 'missing' ? missing : chartFill);
 
-  data = [...data];
-  if (preFilter) data = data.filter(preFilter);
-  if (dataMap) data = data.map(dataMap);
-  if (postFilter) data = data.filter(postFilter);
-
-  if (removeEmpty) data = data.filter((d) => d.y !== 0);
-
-  if (data.length === 0) return <NoData height={height} />;
+  const data = useTransformedChartData(params, true);
 
   const totalCount = data.reduce((sum, e) => sum + e.y, 0);
 
-  const onHover: BarProps['onMouseEnter'] = (_data, _index, e) => {
-    const { target } = e;
-    if (onClick && target) (target as SVGElement).style.cursor = 'pointer';
-  };
+  const onHover: BarProps['onMouseEnter'] = useCallback(
+    (_data, _index, e) => {
+      const { target } = e;
+      if (onClick && target) (target as SVGElement).style.cursor = 'pointer';
+    },
+    [onClick]
+  );
+
+  if (data.length === 0) {
+    return <NoData height={height} />;
+  }
 
   // Regarding XAxis.ticks below:
   //  The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397

package/src/Components/Charts/BentoPie.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { PieChart, Pie, Cell, Curve, Tooltip, Sector, PieProps, PieLabelRenderProps } from 'recharts';
 import type CSS from 'csstype';
 
@@ -21,7 +21,7 @@ import {
   useChartThreshold,
   useChartMaxLabelChars,
 } from '../../ChartConfigProvider';
-import { polarToCartesian } from '../../util/chartUtils';
+import { polarToCartesian, useTransformedChartData } from '../../util/chartUtils';
 import NoData from '../NoData';
 
 const labelShortName = (name: string, maxChars: number) => {
@@ -32,18 +32,17 @@ const labelShortName = (name: string, maxChars: number) => {
   return `${name.substring(0, maxChars - 3)}\u2026`;
 };
 
+const OUTER_RADIUS_REDUCTION_FACTOR = 3.75; // originally from 300 / 80
+const INNER_RADIUS_REDUCTION_FACTOR = 8.5; // roughly originally from 300 / 35
+
 const BentoPie = ({
-  data,
   height,
-  preFilter,
-  dataMap,
-  postFilter,
   onClick,
   sort = true,
-  removeEmpty = true,
   colorTheme = 'default',
   chartThreshold = useChartThreshold(),
   maxLabelChars = useChartMaxLabelChars(),
+  ...params
 }: PieChartProps) => {
   const t = useChartTranslation();
   const theme = useChartTheme().pie[colorTheme];
@@ -52,86 +51,83 @@ 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);
+  const transformedData = useTransformedChartData(params, true, sort);
+  const { data, sum } = useMemo(() => {
+    let data = [...transformedData];
 
-  if (sort) data.sort((a, b) => a.y - b.y);
-
-  // 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}>
-          <Pie
-            data={bentoFormatData}
-            dataKey="value"
-            cx="50%"
-            cy="50%"
-            innerRadius={35}
-            outerRadius={80}
-            label={RenderLabel(maxLabelChars)}
-            labelLine={false}
-            isAnimationActive={false}
-            onMouseEnter={onEnter}
-            onMouseLeave={onLeave}
-            onMouseOver={onHover}
-            activeIndex={activeIndex}
-            activeShape={RenderActiveLabel}
-            onClick={onClick}
-          >
-            {data.map((entry, index) => {
-              let fill = theme[index % theme.length];
-              fill = entry.x.toLowerCase() === 'missing' ? CHART_MISSING_FILL : fill;
-              return <Cell key={index} fill={fill} />;
-            })}
-          </Pie>
-          <Tooltip
-            content={<CustomTooltip totalCount={sum} />}
-            isAnimationActive={false}
-            allowEscapeViewBox={{ x: true, y: true }}
-          />
-        </PieChart>
-      </div>
-    </>
+    <div style={CHART_WRAPPER_STYLE}>
+      <PieChart height={height} width={height * CHART_ASPECT_RATIO}>
+        <Pie
+          data={data}
+          dataKey="value"
+          cx="50%"
+          cy="50%"
+          innerRadius={height / INNER_RADIUS_REDUCTION_FACTOR}
+          outerRadius={height / OUTER_RADIUS_REDUCTION_FACTOR}
+          label={renderLabel(maxLabelChars)}
+          labelLine={false}
+          isAnimationActive={false}
+          onMouseEnter={onEnter}
+          onMouseLeave={onLeave}
+          onMouseOver={onHover}
+          activeIndex={activeIndex}
+          activeShape={RenderActiveLabel}
+          onClick={onClick}
+        >
+          {data.map((entry, index) => {
+            const fill = entry.name.toLowerCase() === 'missing' ? CHART_MISSING_FILL : theme[index % theme.length];
+            return <Cell key={index} fill={fill} />;
+          })}
+        </Pie>
+        <Tooltip
+          content={<CustomTooltip totalCount={sum} />}
+          isAnimationActive={false}
+          allowEscapeViewBox={{ x: true, y: true }}
+        />
+      </PieChart>
+    </div>
   );
 };
 
@@ -144,9 +140,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 +199,9 @@ const RenderLabel =
       </g>
     );
   };
+  BentoPieLabel.displayName = BentoPieLabel;
+  return BentoPieLabel;
+};
 
 const RenderActiveLabel: PieProps['activeShape'] = (params) => {
   const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = params;