oolib 2.192.0 → 2.192.1

package/dist/v2/components/dataviz/BarGraphCollection/index.d.ts

@@ -1,7 +1,7 @@
 export const BAR_GRAPH_HEIGHT: 250;
 export const DEFAULT_SINGLE_BAR_WIDTH: 24;
 export const BAR_GAP: 0.3;
-export function BarGraphCollection({ data: originalData, valuePath, labelPath, tooltipLabelsMapping, onClick, showCount, showPercent, groupBy, totalDataCount, }: {
+export function BarGraphCollection({ data: originalData, valuePath, labelPath, tooltipLabelsMapping, onClick, showCount, showPercent, groupBy, totalDataCount, debug }: {
     data: any;
     valuePath: any;
     labelPath?: string;
@@ -11,12 +11,14 @@ export function BarGraphCollection({ data: originalData, valuePath, labelPath, t
     showPercent?: boolean;
     groupBy: any;
     totalDataCount: any;
+    debug: any;
 }): React.JSX.Element;
-export function BarGraph({ tagCategory, index1, showCount, showPercent, onClick }: {
+export function BarGraph({ tagCategory, index1, showCount, showPercent, onClick, debug }: {
     tagCategory: any;
     index1: any;
     showCount?: boolean;
     showPercent?: boolean;
     onClick: any;
+    debug: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/dataviz/BarGraphCollection/index.js

@@ -50,7 +50,12 @@ exports.BAR_GRAPH_HEIGHT = 250;
 exports.DEFAULT_SINGLE_BAR_WIDTH = 24;
 exports.BAR_GAP = 0.3;
 var BarGraphCollection = function (_a) {
-    var originalData = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "display" : _b, _c = _a.tooltipLabelsMapping, tooltipLabelsMapping = _c === void 0 ? {} : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, groupBy = _a.groupBy, totalDataCount = _a.totalDataCount;
+    var originalData = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "display" : _b, _c = _a.tooltipLabelsMapping, tooltipLabelsMapping = _c === void 0 ? {} : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, groupBy = _a.groupBy, totalDataCount = _a.totalDataCount, debug = _a.debug
+    // tooltipLabelsPath,
+    // colorIdx = 0,
+    // summarizeAfterIdx = 5,
+    // breakdownDisplayType = "grouped"
+    ;
     var containerRef = (0, react_1.useRef)();
     var _f = (0, react_1.useState)(0), containerWidth = _f[0], setContainerWidth = _f[1];
     var highestCount = originalData === null || originalData === void 0 ? void 0 : originalData.reduce(function (highest, item) { return item.value > highest ? item.value : highest; }, 0);
@@ -58,7 +63,6 @@ var BarGraphCollection = function (_a) {
         return (0, usePrepareData_1.usePrepareData)({ data: originalData, valuePath: valuePath, labelPath: labelPath, tooltipLabelsMapping: tooltipLabelsMapping, groupBy: groupBy });
     }, [originalData, valuePath, labelPath, tooltipLabelsMapping, groupBy]);
     var data = (0, useGetDimensions_1.useGetDimensions)(transformedData, exports.BAR_GRAPH_HEIGHT, containerWidth, totalDataCount, highestCount);
-    //  console.log({ total: calculateTotalPercentage(data) })
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
             var _a, _b;
@@ -86,7 +90,7 @@ var BarGraphCollection = function (_a) {
                     height: "".concat(exports.BAR_GRAPH_HEIGHT + 50, "px"),
                     marginBottom: "0.6rem"
                 } },
-                react_1.default.createElement(exports.BarGraph, { tagCategory: tagCategory, index1: index1, showCount: showCount, showPercent: showPercent, onClick: onClick }),
+                react_1.default.createElement(exports.BarGraph, { tagCategory: tagCategory, index1: index1, showCount: showCount, showPercent: showPercent, onClick: onClick, debug: debug }),
                 categoryTitle && react_1.default.createElement("div", { title: categoryTitle, style: {
                         width: "".concat(tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.width, "px"),
                         background: grey5,
@@ -107,7 +111,7 @@ var BarGraphCollection = function (_a) {
 exports.BarGraphCollection = BarGraphCollection;
 var BarGraph = function (_a) {
     var _b;
-    var tagCategory = _a.tagCategory, index1 = _a.index1, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, onClick = _a.onClick;
+    var tagCategory = _a.tagCategory, index1 = _a.index1, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, onClick = _a.onClick, debug = _a.debug;
     var _e = (0, react_1.useState)({ x: 0, y: 0 }), mousePosition = _e[0], setMousePosition = _e[1];
     var _f = (0, react_1.useState)(null), activeTooltip = _f[0], setActiveTooltip = _f[1];
     (0, react_1.useEffect)(function () {
@@ -148,7 +152,7 @@ var BarGraph = function (_a) {
                 tooltipLabel: tag.display
             }];
         return (react_1.default.createElement("div", { key: tag._id || "".concat(index1, "-").concat(index), onMouseEnter: function () { return handleBarMouseEnter(index); }, onMouseLeave: handleBarMouseLeave, onClick: function () { return handleBarClick(tag); }, style: { cursor: onClick ? 'pointer' : 'default' } },
-            react_1.default.createElement(styled_1.StyledSingleBarWrapper, null,
+            react_1.default.createElement(styled_1.StyledSingleBarWrapper, { barSections: tag.barSections, debug: debug },
                 react_1.default.createElement(styled_1.StyledBar, { style: {
                         height: "".concat(tag.height, "px"),
                         width: "".concat(tag.width, "px")
@@ -159,16 +163,3 @@ var BarGraph = function (_a) {
     })));
 };
 exports.BarGraph = BarGraph;
-//   function calculateTotalPercentage(data) {
-//     let totalPercentage = 0;
-//     // Iterate through each category
-//     data.forEach(category => {
-//         // Sum all percentages within tagSpecificCount
-//         if (category.tagSpecificCount && Array.isArray(category.tagSpecificCount)) {
-//             category.tagSpecificCount.forEach(tag => {
-//                 totalPercentage += tag.percentage || 0;
-//             });
-//         }
-//     });
-//     return totalPercentage;
-// }

package/dist/v2/components/dataviz/BarGraphCollection/styled.js

@@ -16,7 +16,24 @@ var grey5 = __1.colors2.grey5;
 exports.StyledBarGraphContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", "px;\n    padding-bottom: 0.4rem; // UI scroll bar bottom space \n    overflow-x: auto;\n    background-color: white;\n    border-radius: 8px;\n"], ["\n    padding: ", "px;\n    padding-bottom: 0.4rem; // UI scroll bar bottom space \n    overflow-x: auto;\n    background-color: white;\n    border-radius: 8px;\n"])), exports.CONTAINER_PADDING);
 exports.StyledBarGraphCollectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n"], ["\n    display: flex;\n"])));
 exports.StyledBarGraphWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n  "], ["\n    display: flex;\n    position: relative;\n  "])));
-exports.StyledSingleBarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    height: 100%;\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    cursor: pointer;\n    border-radius: 2px;\n\n    &:hover {\n       background-color: ", ";\n    }\n"], ["\n    height: 100%;\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    cursor: pointer;\n    border-radius: 2px;\n\n    &:hover {\n       background-color: ", ";\n    }\n"])), grey5);
+var generateDebugLines = function (barSections, debug) {
+    if (!debug)
+        return '';
+    var lines = [];
+    for (var i = 1; i <= barSections; i++) {
+        lines.push('linear-gradient(to right, #383838 0%, #383838 100%)');
+    }
+    var positions = [];
+    for (var i = 0; i <= barSections; i++) {
+        var position = (100 / barSections) * i;
+        positions.push("0 ".concat(position, "%"));
+    }
+    return "\n        &::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: ".concat(lines.join(', '), ";\n            background-size: ").concat(Array(barSections).fill('100% 1px').join(', '), ";\n            background-position: ").concat(positions.join(', '), ";\n            background-repeat: no-repeat;\n            pointer-events: none;\n            z-index: 0;\n        }\n    ");
+};
+exports.StyledSingleBarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    height: 100%;\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    cursor: pointer;\n    border-radius: 2px;\n\n    &:hover {\n       background-color: ", ";\n    }\n\n    ", "\n    \n    > * {\n        position: relative;\n        z-index: 1;\n    }\n"], ["\n    height: 100%;\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    cursor: pointer;\n    border-radius: 2px;\n\n    &:hover {\n       background-color: ", ";\n    }\n\n    ", "\n    \n    > * {\n        position: relative;\n        z-index: 1;\n    }\n"])), grey5, function (_a) {
+    var barSections = _a.barSections, debug = _a.debug;
+    return generateDebugLines(barSections, debug);
+});
 exports.StyledBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border-radius: 2px;\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    ", ";\n"], ["\n    border-radius: 2px;\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    ", ";\n"])), barColor, __1.colors2.onSecondary, (0, __1.transition)("width"));
 exports.StyledLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    transform: rotate(-90deg);\n    transform-origin: left top;\n    bottom: 0;\n    left: calc(50% - 8px); // 10px for font\n    text-wrap: nowrap;\n    display: flex;\n"], ["\n    position: absolute;\n    transform: rotate(-90deg);\n    transform-origin: left top;\n    bottom: 0;\n    left: calc(50% - 8px); // 10px for font\n    text-wrap: nowrap;\n    display: flex;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.js

@@ -26,25 +26,27 @@ var useGetDimensions = function (data, maxHeight, containerWidth, totalDataCount
     var dynamicBarWidth = availableWidthForBars / totalBars;
     singleBarWidth = Math.max(dynamicBarWidth, __1.DEFAULT_SINGLE_BAR_WIDTH);
     // Calculate the ceiling value for the highest count
-    var getCeilingValue = function (num) {
-        if (num === 0)
+    var divideBarIntoEqualParts = function (num) {
+        if (num <= 5)
+            return 5;
+        if (num <= 10)
             return 10;
-        // Find the power of 10 (magnitude)
+        if (num <= 20)
+            return 20;
+        if (num <= 50)
+            return 50;
+        if (num <= 100)
+            return 100;
+        if (num <= 200)
+            return 200;
+        if (num <= 500)
+            return 500;
+        if (num <= 1000)
+            return 1000;
         var magnitude = Math.pow(10, Math.floor(Math.log10(num)));
-        // Round up to the nearest "nice" number
-        var normalized = num / magnitude; // This gives us a number between 1-10
-        var multiplier;
-        if (normalized <= 1)
-            multiplier = 1;
-        else if (normalized <= 2)
-            multiplier = 2;
-        else if (normalized <= 5)
-            multiplier = 5;
-        else
-            multiplier = 10;
-        return multiplier * magnitude;
+        return Math.ceil(num / magnitude) * magnitude;
     };
-    var ceilingValue = getCeilingValue(highestCount);
+    var barSections = divideBarIntoEqualParts(highestCount);
     return data === null || data === void 0 ? void 0 : data.map(function (category) {
         // total count for this category
         var total = category.tagSpecificCount.reduce(function (sum, tag) { return sum + tag.count; }, 0);
@@ -57,8 +59,8 @@ var useGetDimensions = function (data, maxHeight, containerWidth, totalDataCount
                 var percentage = Number((tag.count / (totalDataCount || total) * 100).toFixed(1));
                 // New height calculation relative to highest count and ceiling
                 // This creates a "zoomed in" effect where bars are more visible
-                var relativeHeight = Math.round((tag.count / ceilingValue) * maxHeight);
-                return __assign({ percentage: percentage, height: relativeHeight, width: singleBarWidth }, tag);
+                var relativeHeight = Math.round((tag.count / barSections) * maxHeight);
+                return __assign({ percentage: percentage, height: relativeHeight, width: singleBarWidth, barSections: barSections }, tag);
             }) });
     });
 };

package/package.json

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