oolib 2.136.0 → 2.136.1

package/dist/components/PercentBarChart/comps/CustomizedLabel/index.d.ts

@@ -5,14 +5,13 @@ type TCustomizedLabeValue = {
     count: number;
     name: string;
 };
-export declare const CustomizedLabel: ({ y, width, height, value, showCount, suffix, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
+export declare const CustomizedLabel: ({ y, width, height, value, plotDataPoint, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
     y?: number | string;
     width?: number | string;
     height?: number | string;
     value?: TCustomizedLabeValue;
     opacity: number;
-    suffix?: string;
-    showCount?: boolean;
+    plotDataPoint?: "percentage" | "count";
     _base_configs: TBaseConfigs;
     onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
     onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;

package/dist/components/PercentBarChart/comps/CustomizedLabel/index.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../../../themes");
 var CustomizedLabel = function (_a) {
     var y = _a.y, width = _a.width, //i think this is the width and the height of the bar. dont need it just yet..
-    height = _a.height, value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity, _base_configs = _a._base_configs, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown;
+    height = _a.height, value = _a.value, plotDataPoint = _a.plotDataPoint, opacity = _a.opacity, _base_configs = _a._base_configs, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown;
     var yOffset = -(_base_configs.labelToBarGap + _base_configs.barHeight);
     var percent = value.percentage;
     var count = value.count;
@@ -16,8 +16,14 @@ var CustomizedLabel = function (_a) {
     var percentXOffset = 0;
     var xOffsetRelative = 10;
     return (react_1.default.createElement("g", null,
-        react_1.default.createElement("text", { opacity: opacity, x: percentXOffset, y: y + yOffset, fill: themes_1.colors.greyColor100, textAnchor: "start", dominantBaseline: "middle", className: "UI_BODY_BOLD_SM" }, "".concat(percent).concat(suffix || ""),
-            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, showCount ? count : ""),
+        react_1.default.createElement("text", { opacity: opacity, x: percentXOffset, y: y + yOffset, fill: themes_1.colors.greyColor100, textAnchor: "start", dominantBaseline: "middle", className: "UI_BODY_BOLD_SM" },
+            plotDataPoint === "percentage"
+                ? percent + "%"
+                : plotDataPoint === "count"
+                    ? count
+                    : "",
+            plotDataPoint === "percentage" && ( // basically no need to show this only if plotDataPoint is count, since in that case, count is already shown above
+            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, count)),
             react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, name)),
         react_1.default.createElement("rect", { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: percentXOffset, y: y + _base_configs.mouseEventDetectorYOffset, width: width, height: _base_configs.mouseEventDetectorHeight, fill: "red", "fill-opacity": _base_configs.mouseEventDetectorOpacity })));
 };

package/dist/components/PercentBarChart/index.d.ts

@@ -7,7 +7,7 @@ export type TBaseConfigs = {
     mouseEventDetectorHeight: number;
     mouseEventDetectorOpacity: number;
 };
-export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, valueSuffix, showCount }: {
+export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, plotDataPoint, }: {
     data: any;
     valuePath: string;
     labelPath: string;
@@ -16,5 +16,7 @@ export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPat
     colors?: string[];
     colorIdx?: number;
     valueSuffix?: string;
+    plotDataPoint?: 'percentage' | 'count';
     showCount?: boolean;
+    showPercent?: boolean;
 }) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -83,28 +83,23 @@ var PercentBarChart = function (_a) {
     _c = _a.labelPath, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
     labelPath = _c === void 0 ? "name" : _c, // same as above for label path
     onClick = _a.onClick, _d = _a.colors, colors = _d === void 0 ? chartColors : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
-    _f = _a.valueSuffix, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
-    valueSuffix = _f === void 0 ? "%" : _f, _g = _a.showCount, showCount = _g === void 0 ? true : _g;
+    _f = _a.plotDataPoint, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
+    plotDataPoint = _f === void 0 ? 'percentage' : _f;
     var totalCount = (0, getTotalCount_1.getTotalCount)({ data: _data, countPath: valuePath });
     var data = (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
         finalData = finalData.map(function (d, i) {
-            var percentage = (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount);
             var count = (0, _EXPORTS_1.getVal)(d, valuePath);
             return ({
-                labels: {
-                    percentage: percentage,
-                    count: count,
-                    name: (0, _EXPORTS_1.getVal)(d, labelPath),
-                },
+                labels: __assign(__assign({}, (plotDataPoint === 'percentage' ? { percentage: (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount) } : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
             });
         });
         finalData.sort(function (a, b) {
-            return Number(b.value || 0) - Number(a.value || 0);
+            return Number((0, _EXPORTS_1.getVal)(b, "labels.".concat(plotDataPoint)) || 0) - Number((0, _EXPORTS_1.getVal)(a, "labels.".concat(plotDataPoint)) || 0);
         });
         return finalData;
     }, [_data, labelPath, valuePath]);
-    var _h = (0, react_1.useState)(undefined), activeBar = _h[0], setActiveBar = _h[1];
+    var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
     var changeBarOpacityFn = function (name) {
         return activeBar && activeBar !== name ? 0.4 : 1;
     };
@@ -137,13 +132,12 @@ var PercentBarChart = function (_a) {
                     } },
                     react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
                     react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
-                    react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.percentage" },
+                    react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.".concat(plotDataPoint) },
                         react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ y: props.y,
                                 width: props.width,
                                 height: props.height,
                                 value: props.value, //here value is the percentage
-                                showCount: showCount, suffix: valueSuffix,
-                                opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
+                                plotDataPoint: plotDataPoint, opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
                                 ? {
                                     onMouseOver: function (e, value) { return setActiveBar(value.name); },
                                     onMouseOut: function () { return setActiveBar(undefined); },

package/dist/stories/Oolib/components/PercentBarChart.stories.js

@@ -10,10 +10,10 @@ exports.default = {
     title: "Components/PercentBarChart",
 };
 var data = [
-    { display: "Great food", value: 72, },
-    { display: "Great Ambience", value: 10, },
-    { display: "Great Music", value: 9, },
-    { display: "Great Cocktails", value: 5, },
+    { display: 'Logged In Once', value: 60 },
+    { display: 'Registered Users', value: 100 },
+    { display: 'Created Profile', value: 20 },
+    { display: 'Wrote at least 1 story', value: 8 }
 ];
 var PercentBarChart_ = function (args) {
     var handleBarClick = function (name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.136.0",
+  "version": "2.136.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",