oolib 2.155.0 → 2.155.2

package/dist/v2/components/PieChart/index.js

@@ -0,0 +1,116 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = void 0;
+var react_1 = __importStar(require("react"));
+var recharts_1 = require("recharts");
+var _EXPORTS_1 = require("../../../utils/_EXPORTS");
+var getTotalCount_1 = require("../../../utils/getTotalCount");
+var chartColors = [
+    "#5C80FF",
+    "#FFA800",
+    "#00BC8F",
+    "#FF51CE",
+    "rgb(173, 89, 108)",
+    "rgb(114, 190, 244)",
+    "rgb(255, 178, 122)",
+    "rgb(14, 126, 161)",
+    "rgb(60, 169, 116)",
+    "rgb(254, 187, 178)",
+    "rgb(204, 128, 217)",
+    "rgb(91, 184, 175)",
+];
+var usePrepareData = function (_a) {
+    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, plotDataPoint = _a.plotDataPoint;
+    return (0, react_1.useMemo)(function () {
+        var finalData = __spreadArray([], _data, true);
+        var totalCount = (0, getTotalCount_1.getTotalCount)({ data: finalData, countPath: valuePath });
+        finalData = finalData.map(function (d) { return ({
+            labels: __assign(__assign({}, (plotDataPoint === "percentage"
+                ? { percentage: (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount) }
+                : {})), { count: (0, _EXPORTS_1.getVal)(d, valuePath), name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+        }); });
+        // Sort by value
+        finalData.sort(function (a, b) { return b.labels.count - a.labels.count; });
+        return finalData;
+    }, [_data, labelPath, valuePath, plotDataPoint]);
+};
+var CustomLabel = function (_a) {
+    var viewBox = _a.viewBox, value = _a.value;
+    var cx = viewBox.cx, cy = viewBox.cy;
+    return (react_1.default.createElement("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "central", className: "text-sm font-medium" }, value));
+};
+var renderActiveShape = function (props) {
+    var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload;
+    return (react_1.default.createElement("g", null,
+        react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 8, startAngle: startAngle, endAngle: endAngle, fill: fill }),
+        react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, startAngle: startAngle, endAngle: endAngle, innerRadius: innerRadius - 4, outerRadius: innerRadius - 2, fill: fill })));
+};
+var PieChart = function (_a) {
+    var _data = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.colors, colors = _c === void 0 ? chartColors : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.plotDataPoint, plotDataPoint = _e === void 0 ? "percentage" : _e, innerLabel = _a.innerLabel;
+    var data = usePrepareData({
+        _data: _data,
+        labelPath: labelPath,
+        valuePath: valuePath,
+        plotDataPoint: plotDataPoint,
+    });
+    var _f = (0, react_1.useState)(), activeIndex = _f[0], setActiveIndex = _f[1];
+    var onPieEnter = function (_, index) {
+        setActiveIndex(index);
+    };
+    var onPieLeave = function () {
+        setActiveIndex(undefined);
+    };
+    var onPieClick = function (_, index) {
+        if (onClick) {
+            onClick(data[index].labels.name);
+        }
+    };
+    return (react_1.default.createElement("div", { className: "w-full", style: { height: "300px" } },
+        react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
+            react_1.default.createElement(recharts_1.PieChart, null,
+                react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "labels.count", nameKey: "labels.name", cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 80, paddingAngle: 1, activeIndex: activeIndex, activeShape: renderActiveShape, onMouseEnter: onPieEnter, onMouseLeave: onPieLeave, onClick: onClick ? onPieClick : undefined, style: onClick ? { cursor: "pointer" } : {} }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colors[(index + colorIdx) % colors.length], opacity: activeIndex !== undefined && activeIndex !== index ? 0.4 : 1 })); }))))));
+};
+exports.PieChart = PieChart;

package/dist/v2/themes/colors.d.ts

@@ -1,3 +1,4 @@
+export declare const dataVizColors: string[];
 export declare const colors: {
     primary: string;
     secondary: string;

package/dist/v2/themes/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colors = void 0;
+exports.colors = exports.dataVizColors = void 0;
 var primary = "#006686";
 var secondary = "#456272";
 var tertiary = "#764F8B";
@@ -41,6 +41,40 @@ var hint = "#B77222";
 var green = '#53AC00';
 var greenBG = '#E8F6DA';
 var greenStroke = '#C4DAAF';
+var greyColor100 = '#383838';
+var greyColor90 = '#4c4c4c';
+var greyColor80 = '#606060';
+var greyColor70 = '#747474';
+var greyColor50 = '#9B9B9B';
+var greyColor40 = '#afafaf';
+var greyColor15 = '#e1e1e1';
+var greyColor10 = '#EBEBEB';
+var greyColor5 = '#f5f5f5';
+var greyColor3 = '#f9f9f9';
+exports.dataVizColors = [
+    "#FF665D",
+    "#4DBC5D",
+    "#F89700",
+    "#49A3FF",
+    "#E5BF01",
+    "#2ABBB5",
+    "#AC8E68",
+    "#CF8AF2",
+];
+// export const dataVizColors = [
+//         "#5C80FF",
+//         "#FFA800",
+//         "#00BC8F",
+//         "#FF51CE",
+//         "rgb(173, 89, 108)",
+//         "rgb(114, 190, 244)",
+//         "rgb(255, 178, 122)",
+//         "rgb(14, 126, 161)",
+//         "rgb(60, 169, 116)",
+//         "rgb(254, 187, 178)",
+//         "rgb(204, 128, 217)",
+//         "rgb(91, 184, 175)",
+// ]
 exports.colors = {
     primary: primary,
     secondary: secondary,

package/dist/v2/themes/typo.js

@@ -25,12 +25,12 @@ var UI_HEADLINE = (0, styled_components_1.css)(templateObject_5 || (templateObje
 var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  ", ";;\n  font-size: 28px;\n  line-height: 36px;\n  font-weight: 600;\n"], ["\n  ", ";\n  ", ";;\n  font-size: 28px;\n  line-height: 36px;\n  font-weight: 600;\n"])), uiFont, fontCss);
 var UI_TITLE = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 20px;\n  line-height: 26px;\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  ", ";\n  ", ";\n"], ["\n  font-size: 20px;\n  line-height: 26px;\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
 var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 16px;\n  line-height: 21px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 16px;\n  line-height: 21px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_BODY = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-weight: 400;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"], ["\n  font-weight: 400;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_SM = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n \n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 16px;\n  line-height: 21px;\n  \n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n \n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 16px;\n  line-height: 21px;\n  \n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-weight: 500;\n  ", "\n  ", "\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n  \n"], ["\n  font-weight: 500;\n  ", "\n  ", "\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n  \n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_SEMIBOLD_SM = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-weight: 500;\n  ", "\n  ", "\n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  font-weight: 500;\n  ", "\n  ", "\n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    line-height: 21px;\n    font-size: 16px;\n  }\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    line-height: 21px;\n    font-size: 16px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 20px;\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 20px;\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_SM = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 14px;\n  line-height: 18px;\n  \n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 14px;\n  line-height: 18px;\n  \n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_SEMIBOLD_SM = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-weight: 500;\n  ", "\n  ", "\n\n  font-size: 14px;\n  line-height: 18px;\n\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  font-weight: 500;\n  ", "\n  ", "\n\n  font-size: 14px;\n  line-height: 18px;\n\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 14px;\n  line-height: 18px;\n  \n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 14px;\n  line-height: 18px;\n  \n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-weight: 400;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"], ["\n  font-weight: 400;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-weight: 500;\n  ", "\n  ", "\n  \n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"], ["\n  font-weight: 500;\n  ", "\n  ", "\n  \n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 21px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
 var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
 var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
 var UI_CAPTION = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: 12px;\n  line-height: 16px;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 12px;\n  line-height: 16px;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
@@ -41,7 +41,7 @@ var UI_STAT_LG = (0, styled_components_1.css)(templateObject_21 || (templateObje
 var UI_STAT_SM = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
 var CONTENT_H1 = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  font-size: 36px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "], ["\n  font-size: 36px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "])), contentFont, fontCss);
 var CONTENT_H2 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  font-size: 25px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "], ["\n  font-size: 25px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "])), contentFont, fontCss);
-var CONTENT_H3 = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_H3 = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "], ["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "])), contentFont, fontCss);
 var CONTENT_BODY = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  font-size: 15px;\n  line-height: 140%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 15px;\n  line-height: 140%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
 var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
 var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 400;\n  font-style: italic;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 400;\n  font-style: italic;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);

package/package.json

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

package/dist/components/dataViz/comps/BarChart/index.d.ts

@@ -1,2 +0,0 @@
-export function BarChart(props: any): React.JSX.Element;
-import React from "react";

package/dist/components/dataViz/comps/BarChart/index.js

@@ -1,184 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BarChart = void 0;
-var react_1 = __importStar(require("react"));
-var d3Modules_1 = __importDefault(require("../../../../d3Modules"));
-var utils_1 = require("../../utils");
-var testJSON_1 = require("../../../../utils/testJSON");
-var getVal_1 = require("../../../../utils/getterSetterDeleter/getVal");
-var themes_1 = require("../../../../themes");
-var styled_components_1 = require("styled-components");
-var utilsOolib_1 = require("../../../../utilsOolib");
-var BarChart = function (props) {
-    var config = {
-        width: 550,
-        height: 100,
-        margin: { top: 50, right: 120, bottom: 120, left: 100 },
-    };
-    var theme = (0, styled_components_1.useTheme)();
-    var width = props.width || config.width;
-    var height = props.height || config.height;
-    var marginProp = (0, testJSON_1.testJSON)(JSON.stringify(props.margin))
-        ? props.margin
-        : undefined;
-    var margin = marginProp
-        ? {
-            top: marginProp.top || config.margin.top,
-            bottom: marginProp.bottom || config.margin.bottom,
-            left: marginProp.left || config.margin.left,
-            right: marginProp.right || config.margin.right,
-        }
-        : config.margin;
-    var data = props.data, id = props.id, className = props.className, numValuePath = props.numValuePath, numLabelPath = props.numLabelPath, categoryValuePath = props.categoryValuePath, _a = props.categoryAxis, categoryAxis = _a === void 0 ? 'y' : _a, _b = props.barWidth, barWidth = _b === void 0 ? 20 : _b, numberAxisLabel = props.numberAxisLabel, _c = props.highlight
-    /**
-     * can be 'max' or 'min' or undefined. if undefined,
-     * all bars will be painted the same color. if defined,
-     * only the max/min will be painted a color.
-     * rest of bars will be grey
-     */
-    , highlight = _c === void 0 ? 'max' : _c
-    /**
-     * can be 'max' or 'min' or undefined. if undefined,
-     * all bars will be painted the same color. if defined,
-     * only the max/min will be painted a color.
-     * rest of bars will be grey
-     */
-    ;
-    var wrapperId = "OKE_PiChart".concat(id ? "_" + id : "");
-    var wrapperClass = "OKE-PiChart ".concat(className || "");
-    (0, react_1.useEffect)(function () { return drawChart(data); }, [data]);
-    var drawChart = function (data) {
-        // console.log({DATA : data})
-        //first clear the div
-        d3Modules_1.default.select("#" + wrapperId + ">svg").remove();
-        //then draw
-        var svg = (0, utils_1.genResponsiveSvgCanvas)({
-            width: width,
-            height: height,
-            wrapperId: wrapperId,
-            margin: margin,
-            translate: "".concat(margin.left, ",").concat(margin.right)
-        });
-        // X axis
-        var categoryAxisGenerator = d3Modules_1.default
-            .scaleBand()
-            //   .range([0, width]) alt
-            .range([0, height])
-            .domain(data.map(function (d) {
-            return (0, getVal_1.getVal)(d, categoryValuePath);
-        }))
-            .padding(0.2);
-        var categoryAxis = svg
-            .append("g")
-            //.attr("transform", "translate(0," + height + ")") //alt
-            .attr("transform", "translate(0, 0)")
-            //.call(d3.axisBottom(categoryAxis)) //alt
-            .call(d3Modules_1.default.axisLeft(categoryAxisGenerator));
-        categoryAxis.selectAll("text")
-            //   .attr("transform", "translate(-5,0)")
-            .style("text-anchor", "end")
-            .attr("color", themes_1.colors.greyColor100);
-        categoryAxis.select('.domain').remove();
-        categoryAxis.selectAll('.tick line').remove();
-        // Add Y axis
-        var numbersAxisGenerator = d3Modules_1.default
-            .scaleLinear()
-            .domain([0, (0, utils_1.getMax)({ data: data, valuePath: numValuePath })])
-            //   .range([height, 0]) // alt
-            .range([0, width]);
-        var numberAxisG = svg.append("g");
-        var numberAxis = numberAxisG
-            //.attr("transform", "translate(0, 0)") alt
-            .attr("transform", "translate(0," + height + ")") //alt
-            //.call(d3.axisLeft(numbersAxis)); //alt
-            .call(d3Modules_1.default.axisBottom(numbersAxisGenerator));
-        numberAxis.select('.domain').attr('stroke', themes_1.colors.greyColor40);
-        numberAxis.selectAll('.tick text').attr('color', themes_1.colors.greyColor70);
-        numberAxis.selectAll('.tick line').attr('stroke', themes_1.colors.greyColor40);
-        if (numberAxisLabel) {
-            svg.append('text')
-                .text(numberAxisLabel)
-                .attr("x", 0)
-                .attr("y", height + 35)
-                .attr('fill', themes_1.colors.greyColor100);
-        }
-        // Bars
-        svg
-            .selectAll("mybar")
-            .data(data)
-            .enter()
-            .append("rect")
-            //   .attr("x", function (d) {
-            //     return categoryAxis(getVal(d, categoryValuePath)) + 10;
-            //   }) //alt
-            .attr("y", function (d) {
-            return categoryAxisGenerator((0, getVal_1.getVal)(d, categoryValuePath)) + (categoryAxisGenerator.bandwidth() / 2) - (barWidth / 2);
-        })
-            //   .attr("y", function (d) {
-            //     return numbersAxis(getVal(d, numValuePath));
-            //   }) //alt
-            .attr("x", 0)
-            //.attr("width", barWidth) //alt
-            .attr("height", barWidth)
-            //   .attr("height", function (d) {
-            //     return height - numbersAxis(getVal(d, numValuePath));
-            //   }) //alt
-            .attr("width", function (d) {
-            return numbersAxisGenerator((0, getVal_1.getVal)(d, numValuePath));
-        })
-            .attr('rx', 5)
-            .attr("transform", 'translateX(50%)')
-            .attr("fill", function (d) {
-            return !highlight
-                ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
-                : highlight === 'max'
-                    ? (0, utils_1.getMax)({ data: data, valuePath: numValuePath }) === (0, getVal_1.getVal)(d, numValuePath)
-                        ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
-                        : themes_1.colors.greyColor15
-                    : (0, utils_1.getMin)({ data: data, valuePath: numValuePath }) === (0, getVal_1.getVal)(d, numValuePath)
-                        ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
-                        : themes_1.colors.greyColor15;
-        });
-        //Bar Number Labels
-        svg
-            .selectAll("barnumlabels")
-            .data(data)
-            .enter()
-            .append("text")
-            .text(function (d) { return (0, getVal_1.getVal)(d, numLabelPath || numValuePath); })
-            .attr("y", function (d) {
-            return categoryAxisGenerator((0, getVal_1.getVal)(d, categoryValuePath)) + (categoryAxisGenerator.bandwidth() / 2) + 4;
-        })
-            .attr("x", function (d) {
-            return numbersAxisGenerator((0, getVal_1.getVal)(d, numValuePath)) + 5;
-        });
-    };
-    return react_1.default.createElement("div", { id: wrapperId, className: wrapperClass });
-};
-exports.BarChart = BarChart;

package/dist/components/dataViz/utils/index.d.ts

@@ -1,24 +0,0 @@
-export function genResponsiveSvgCanvas({ margin, width, height, wrapperId, translate }: {
-    margin: any;
-    width: any;
-    height: any;
-    wrapperId: any;
-    translate: any;
-}): any;
-export function getMinMax({ data, valuePath }: {
-    data: any;
-    valuePath: any;
-}): number[];
-export function getMax({ data, valuePath }: {
-    data: any;
-    valuePath: any;
-}): number;
-export function getMin({ data, valuePath }: {
-    data: any;
-    valuePath: any;
-}): number;
-export function calcSvgElemScaleFactor({ setWidth, actualWidth, setValueToScale, }: {
-    setWidth: any;
-    actualWidth: any;
-    setValueToScale: any;
-}): number;

package/dist/components/dataViz/utils/index.js

@@ -1,50 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcSvgElemScaleFactor = exports.getMin = exports.getMax = exports.getMinMax = exports.genResponsiveSvgCanvas = void 0;
-var d3Modules_1 = __importDefault(require("../../../d3Modules"));
-var getVal_1 = require("../../../utils/getterSetterDeleter/getVal");
-var genResponsiveSvgCanvas = function (_a) {
-    var margin = _a.margin, width = _a.width, height = _a.height, wrapperId = _a.wrapperId, translate = _a.translate;
-    return d3Modules_1.default
-        .select("#" + wrapperId)
-        .append("svg")
-        // Responsive SVG needs these 2 attributes and no width and height attr.
-        .attr("preserveAspectRatio", "xMinYMin meet")
-        .attr("viewBox", "0 0 ".concat(width + margin.left + margin.right, " ").concat(height + margin.top + margin.bottom))
-        .append("g")
-        .classed("vizCanvas", true)
-        .attr("transform", "translate(".concat(translate || "".concat(width / 2, ",").concat(height / 2), ")"))
-        .attr("font-family", "'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu','noto_sans_te', 'noto_sans_kn', 'noto_sans_or', sans-serif");
-};
-exports.genResponsiveSvgCanvas = genResponsiveSvgCanvas;
-var getOnlyNumbersAry = function (_a) {
-    var data = _a.data, valuePath = _a.valuePath;
-    return data.map(function (d) { return parseFloat((0, getVal_1.getVal)(d, valuePath)); });
-};
-var getMinMax = function (_a) {
-    var data = _a.data, valuePath = _a.valuePath;
-    var onlyNumbers = getOnlyNumbersAry({ data: data, valuePath: valuePath });
-    return [Math.min.apply(Math, onlyNumbers), Math.max.apply(Math, onlyNumbers)];
-};
-exports.getMinMax = getMinMax;
-var getMax = function (_a) {
-    var data = _a.data, valuePath = _a.valuePath;
-    var onlyNumbers = getOnlyNumbersAry({ data: data, valuePath: valuePath });
-    return Math.max.apply(Math, onlyNumbers);
-};
-exports.getMax = getMax;
-var getMin = function (_a) {
-    var data = _a.data, valuePath = _a.valuePath;
-    var onlyNumbers = getOnlyNumbersAry({ data: data, valuePath: valuePath });
-    return Math.min.apply(Math, onlyNumbers);
-};
-exports.getMin = getMin;
-var calcSvgElemScaleFactor = function (_a) {
-    var setWidth = _a.setWidth, actualWidth = _a.actualWidth, setValueToScale = _a.setValueToScale;
-    var scaleFactor = actualWidth / setWidth;
-    return setValueToScale * (1 / scaleFactor);
-};
-exports.calcSvgElemScaleFactor = calcSvgElemScaleFactor;