bento-charts 2.4.1 → 2.5.0

package/dist/Components/Maps/BentoPointMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"BentoPointMap.js","sourceRoot":"","sources":["../../../src/Components/Maps/BentoPointMap.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,IAAM,aAAa,GAAG,UAAC,EAAkF;QAAhF,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,eAAe,qBAAA;IACtF,OAAO,CACL,KAAC,iBAAiB,aAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,gBAChF,IAAI,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,CAAC;YACT,IAAA,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;YAErC,0GAA0G;YAC1G,IAAM,uBAAuB,GAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnF,OAAO,CACL,KAAC,MAAM,aAAS,QAAQ,EAAE,uBAAuB,gBAC/C,MAAC,KAAK,eACJ,sBAAI,KAAK,EAAE,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,gBACjD,OAAO,CAAC,CAAC,CAAC,qBAAG,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,UAAC,CAAC;oCAChC,OAAO,CAAC,KAAK,CAAC,CAAC;oCACf,CAAC,CAAC,cAAc,EAAE,CAAC;gCACrB,CAAC,gBAAG,KAAK,IAAK,CAAC,CAAC,CAAC,4BAAG,KAAK,GAAI,IAC1B,EACJ,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAC1C,KATG,CAAC,CAUL,CACV,CAAC;QACJ,CAAC,CAAC,IACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BentoPointMap.js","sourceRoot":"","sources":["../../../src/Components/Maps/BentoPointMap.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,IAAM,aAAa,GAAG,UAAC,EAAkF;QAAhF,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,eAAe,qBAAA;IACtF,OAAO,CACL,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,YAChF,IAAI,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,CAAC;YACT,IAAA,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;YAErC,0GAA0G;YAC1G,IAAM,uBAAuB,GAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnF,OAAO,CACL,KAAC,MAAM,IAAS,QAAQ,EAAE,uBAAuB,YAC/C,MAAC,KAAK,eACJ,aAAI,KAAK,EAAE,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,YACjD,OAAO,CAAC,CAAC,CAAC,CACT,YACE,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,UAAC,CAAC;oCACT,OAAO,CAAC,KAAK,CAAC,CAAC;oCACf,CAAC,CAAC,cAAc,EAAE,CAAC;gCACrB,CAAC,YAEA,KAAK,GACJ,CACL,CAAC,CAAC,CAAC,CACF,4BAAG,KAAK,GAAI,CACb,GACE,EACJ,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAC1C,IAlBG,CAAC,CAmBL,CACV,CAAC;QACJ,CAAC,CAAC,GACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -12,12 +12,9 @@ export declare const CHART_WRAPPER_STYLE: CSS.Properties;
 export declare const TITLE_STYLE: CSS.Properties;
 export declare const TEXT_STYLE: CSS.Properties;
 export declare const COUNT_TEXT_STYLE: CSS.Properties;
-export declare const ASPECT_RATIO = 1.2;
 export declare const MAX_TICK_LABEL_CHARS = 15;
 export declare const UNITS_LABEL_OFFSET = -75;
 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

@@ -72,6 +72,8 @@ export var CHART_WRAPPER_STYLE = {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    overflowX: 'auto',
+    overflowY: 'hidden',
 };
 // bar chart
 export var TITLE_STYLE = {
@@ -90,15 +92,12 @@ export var COUNT_TEXT_STYLE = {
 };
 // ################### CHART CONSTANTS ###################
 // bar chart
-export var ASPECT_RATIO = 1.2;
 export var MAX_TICK_LABEL_CHARS = 15;
 export var UNITS_LABEL_OFFSET = -75;
 export var TICKS_SHOW_ALL_LABELS_BELOW = 11; // Below this # of X-axis ticks, force-show all labels
 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;IACpB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,QAAQ;CACpB,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,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,eAAe,GAAG,IAAI,CAAC;AAEpC,yDAAyD;AACzD,MAAM,CAAC,IAAM,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC"}

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,19 @@ 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;
+    width?: number | string;
+}
+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,6 +1,6 @@
 {
   "name": "bento-charts",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Charts library for Bento-platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -54,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,13 +1,11 @@
-import React from 'react';
-import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps } from 'recharts';
+import React, { useCallback } from 'react';
+import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps, ResponsiveContainer } from 'recharts';
 import {
   TOOL_TIP_STYLE,
   COUNT_STYLE,
   LABEL_STYLE,
-  CHART_WRAPPER_STYLE,
   MAX_TICK_LABEL_CHARS,
   TITLE_STYLE,
-  ASPECT_RATIO,
   TICKS_SHOW_ALL_LABELS_BELOW,
   UNITS_LABEL_OFFSET,
   TICK_MARGIN,
@@ -16,6 +14,8 @@ import {
 import type { BarChartProps, CategoricalChartDataItem, TooltipPayload } from '../../types/chartTypes';
 import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
 import NoData from '../NoData';
+import { useTransformedChartData } from '../../util/chartUtils';
+import ChartWrapper from './ChartWrapper';
 
 const tickFormatter = (tickLabel: string) => {
   if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
@@ -24,38 +24,29 @@ 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 BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
+
+const BentoBarChart = ({ height, width, 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
@@ -63,32 +54,34 @@ const BentoBarChart = ({
   //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
   //    - David L, 2023-01-03
   return (
-    <div style={CHART_WRAPPER_STYLE}>
+    <ChartWrapper>
       <div style={TITLE_STYLE}>{title}</div>
-      <BarChart width={height * ASPECT_RATIO} height={height} data={data} margin={{ top: 10, bottom: 100, right: 20 }}>
-        <XAxis
-          dataKey="x"
-          height={20}
-          angle={-45}
-          ticks={data.length ? undefined : ['']}
-          tickFormatter={tickFormatter}
-          tickMargin={TICK_MARGIN}
-          textAnchor="end"
-          interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
-        >
-          <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
-        </XAxis>
-        <YAxis>
-          <Label value={t['Count']} offset={-10} position="left" angle={270} />
-        </YAxis>
-        <Tooltip content={<BarTooltip totalCount={totalCount} />} />
-        <Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover}>
-          {data.map((entry) => (
-            <Cell key={entry.x} fill={fill(entry)} />
-          ))}
-        </Bar>
-      </BarChart>
-    </div>
+      <ResponsiveContainer width={width ?? "100%"} height={height}>
+        <BarChart data={data} margin={BAR_CHART_MARGINS}>
+          <XAxis
+            dataKey="x"
+            height={20}
+            angle={-45}
+            ticks={data.length ? undefined : ['']}
+            tickFormatter={tickFormatter}
+            tickMargin={TICK_MARGIN}
+            textAnchor="end"
+            interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
+          >
+            <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
+          </XAxis>
+          <YAxis>
+            <Label value={t['Count']} offset={-10} position="left" angle={270} />
+          </YAxis>
+          <Tooltip content={<BarTooltip totalCount={totalCount} />} />
+          <Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover}>
+            {data.map((entry) => (
+              <Cell key={entry.x} fill={fill(entry)} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </ChartWrapper>
   );
 };