oolib 2.134.2 → 2.134.4

package/dist/components/HomeCover/styled.js

@@ -33,7 +33,7 @@ var mixins_1 = require("../../themes/mixins");
 var themes_1 = require("../../themes");
 var utilsOolib_1 = require("../../utilsOolib");
 var greyColor3 = themes_1.colors.greyColor3, white = themes_1.colors.white;
-exports.StyledHomeCover = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  ", "\n"], ["\n  display: flex;\n  position: relative;\n  ", "\n"])), function (_a) {
+exports.StyledHomeCover = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  z-index: 0;\n  ", "\n"], ["\n  display: flex;\n  position: relative;\n  z-index: 0;\n  ", "\n"])), function (_a) {
     var variant = _a.variant;
     return variant === "default"
         ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          height: calc(100vh - 6rem);\n          ", " {\n            height: 60rem;\n          }\n        "], ["\n          height: calc(100vh - 6rem);\n          ", " {\n            height: 60rem;\n          }\n        "])), (0, mixins_1.mediaQuery)("sm")) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          height: 30rem;\n        "], ["\n          height: 30rem;\n        "])));

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

@@ -1,16 +1,21 @@
 import React from "react";
 import { TBaseConfigs } from "../..";
-export declare const CustomizedLabel: ({ y, value, showCount, suffix, opacity, _base_configs }: {
+type TCustomizedLabeValue = {
+    percentage: number;
+    count: number;
+    name: string;
+};
+export declare const CustomizedLabel: ({ y, width, height, value, showCount, suffix, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
     y?: number | string;
     width?: number | string;
     height?: number | string;
-    value?: {
-        percentage: number;
-        count: number;
-        name: string;
-    };
+    value?: TCustomizedLabeValue;
     opacity: number;
     suffix?: string;
     showCount?: boolean;
     _base_configs: TBaseConfigs;
+    onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
+    onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
+    onMouseDown?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
 }) => React.JSX.Element;
+export {};

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

@@ -7,18 +7,18 @@ exports.CustomizedLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../../../themes");
 var CustomizedLabel = function (_a) {
-    var y = _a.y, 
-    // width, //i think this is the width and the height of the bar. dont need it just yet..
-    // height,
-    value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity, _base_configs = _a._base_configs;
+    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;
     var yOffset = -(_base_configs.labelToBarGap + _base_configs.barHeight);
     var percent = value.percentage;
     var count = value.count;
     var name = value.name;
     var percentXOffset = 0;
     var xOffsetRelative = 10;
-    return (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("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, name)));
+    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("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 })));
 };
 exports.CustomizedLabel = CustomizedLabel;

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

@@ -3,6 +3,9 @@ export type TBaseConfigs = {
     barHeight: number;
     labelToBarGap: number;
     barGap: number;
+    mouseEventDetectorYOffset: number;
+    mouseEventDetectorHeight: number;
+    mouseEventDetectorOpacity: number;
 };
 export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, valueSuffix, showCount }: {
     data: any;

package/dist/components/PercentBarChart/index.js

@@ -64,10 +64,19 @@ var chartColors = [
     "rgb(204, 128, 217)",
     "rgb(91, 184, 175)",
 ];
+//if any changes are being made to the spacing and such of 
+//this comps design, all these properties need to be carefully 
+//observed and tweaked to ensure no ui has gotten warped due to sideeffects
 var _base_configs = {
+    barRadius: 16,
     barHeight: 6,
     labelToBarGap: 6,
-    barGap: 36,
+    barGap: 30,
+    wrapperMarginBottom: -16,
+    barCategoryGap: 18, // does some wierd shit really, simply pushes the entire graph down by this number. We need to to unhide the first label, which is happening only because we are using <Cell/> comp. too many inconsistencies in recharts
+    mouseEventDetectorYOffset: -34, //this is inside CustomizedLabel. a big rect spread across the bar and label and gap to detect mouse events and transition smoothly to the next bar.
+    mouseEventDetectorHeight: 40,
+    mouseEventDetectorOpacity: 0 //only increase this for debugging. nothing else.
 };
 var PercentBarChart = function (_a) {
     var _data = _a.data, title = _a.title, _b = _a.valuePath, valuePath = _b === void 0 ? "value" : _b, // 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
@@ -102,34 +111,49 @@ var PercentBarChart = function (_a) {
     return (react_1.default.createElement("div", null,
         title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { paddingBottom: "2rem" }, semibold: true }, title)),
         react_1.default.createElement("div", { style: {
-                height: "".concat((_base_configs.barHeight + _base_configs.barGap) * data.length, "px"),
+                height: "".concat(((_base_configs.barHeight + _base_configs.barGap) * data.length), "px"),
                 width: "100%",
             } },
             react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
-                react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: 20, data: data, layout: "vertical", margin: {
+                react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: _base_configs.barCategoryGap, 
+                    // barSize={_base_configs.barHeight}
+                    data: data, layout: "vertical", margin: {
                         top: 0,
                         right: 0,
                         left: 0,
-                        bottom: 0,
+                        bottom: _base_configs.wrapperMarginBottom,
+                    }, onMouseEnter: function () {
+                        var args = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args[_i] = arguments[_i];
+                        }
+                        return console.log('mouse enter', args);
+                    }, onMouseLeave: function () {
+                        var args = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args[_i] = arguments[_i];
+                        }
+                        return console.log('mouse leave', args);
                     } },
                     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, __assign({ radius: 16, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.percentage" }, (onClick
-                        ? {
-                            onMouseOver: function (args) { return setActiveBar(args.labels.name); },
-                            onMouseOut: function () { return setActiveBar(undefined); },
-                            onMouseDown: function (args) {
-                                setActiveBar(args.labels.name);
-                                onClick(args.labels.name);
-                            },
-                        }
-                        : {})),
-                        react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, { y: props.y,
+                    react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.percentage" },
+                        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 }); } }),
-                        data.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(d.labels.name), key: "cell-".concat(index), height: _base_configs.barHeight, fill: colors[colorIdx] })); })))))));
+                                opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
+                                ? {
+                                    onMouseOver: function (e, value) { return setActiveBar(value.name); },
+                                    onMouseOut: function () { return setActiveBar(undefined); },
+                                    onMouseDown: function (e, value) {
+                                        setActiveBar(value.name);
+                                        onClick(value.name);
+                                    },
+                                }
+                                : {}))); } }),
+                        data.map(function (d, index) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(d.labels.name), key: "cell-".concat(index), height: _base_configs.barHeight, fill: colors[colorIdx] }))); })))))));
 };
 exports.PercentBarChart = PercentBarChart;

package/package.json

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