oolib 2.191.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, }: {
+export function BarGraphCollection({ data: originalData, valuePath, labelPath, tooltipLabelsMapping, onClick, showCount, showPercent, groupBy, totalDataCount, debug }: {
     data: any;
     valuePath: any;
     labelPath?: string;
@@ -10,12 +10,15 @@ export function BarGraphCollection({ data: originalData, valuePath, labelPath, t
     showCount?: boolean;
     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,13 +50,19 @@ 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;
+    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);
     var transformedData = (0, react_1.useMemo)(function () {
         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);
+    var data = (0, useGetDimensions_1.useGetDimensions)(transformedData, exports.BAR_GRAPH_HEIGHT, containerWidth, totalDataCount, highestCount);
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
             var _a, _b;
@@ -84,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,
@@ -105,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 () {
@@ -146,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")

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.d.ts

@@ -1 +1 @@
-export function useGetDimensions(data: any, maxHeight: any, containerWidth: any): any;
+export function useGetDimensions(data: any, maxHeight: any, containerWidth: any, totalDataCount: any, highestCount: any): any;

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

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGetDimensions = void 0;
 var __1 = require("..");
 var styled_1 = require("../styled");
-var useGetDimensions = function (data, maxHeight, containerWidth) {
+var useGetDimensions = function (data, maxHeight, containerWidth, totalDataCount, highestCount) {
     var singleBarWidth;
     var totalBars = data === null || data === void 0 ? void 0 : data.reduce(function (total, tagCategory) {
         var _a;
@@ -25,6 +25,28 @@ var useGetDimensions = function (data, maxHeight, containerWidth) {
     // const defaultWidthForBars = (totalBars - 1) * DEFAULT_SINGLE_BAR_WIDTH - (CONTAINER_PADDING * 2);
     var dynamicBarWidth = availableWidthForBars / totalBars;
     singleBarWidth = Math.max(dynamicBarWidth, __1.DEFAULT_SINGLE_BAR_WIDTH);
+    // Calculate the ceiling value for the highest count
+    var divideBarIntoEqualParts = function (num) {
+        if (num <= 5)
+            return 5;
+        if (num <= 10)
+            return 10;
+        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)));
+        return Math.ceil(num / magnitude) * magnitude;
+    };
+    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);
@@ -33,8 +55,12 @@ var useGetDimensions = function (data, maxHeight, containerWidth) {
         var categoryTotalWidth = (barsInCategory * singleBarWidth) + (gapsInCategory * Math.floor(__1.BAR_GAP * 10));
         // percentage to each tag
         return __assign(__assign({}, category), { width: categoryTotalWidth, tagSpecificCount: category.tagSpecificCount.map(function (tag) {
-                var percentage = Number((tag.count / total * 100).toFixed(1));
-                return __assign({ percentage: percentage, height: Math.round((percentage / 100) * maxHeight), width: singleBarWidth }, tag);
+                // Original percentage relative to total dataset
+                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 / barSections) * maxHeight);
+                return __assign({ percentage: percentage, height: relativeHeight, width: singleBarWidth, barSections: barSections }, tag);
             }) });
     });
 };

package/package.json

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