oolib 2.192.2 → 2.193.0

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

@@ -13,7 +13,7 @@ export function BarGraphCollection({ data: originalData, valuePath, labelPath, t
     totalDataCount: any;
     debug: any;
 }): React.JSX.Element;
-export function BarGraph({ tagCategory, index1, showCount, showPercent, onClick, debug }: {
+export function BarGraph({ tagCategory, index1, showCount, showPercent, onClick, debug, }: {
     tagCategory: any;
     index1: any;
     showCount?: boolean;

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

@@ -75,7 +75,10 @@ var BarGraphCollection = function (_a) {
     if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
         return null;
     }
+    var barDivisions = (0, useGetDimensions_1.divideBarIntoEqualParts)(highestCount);
     return (react_1.default.createElement(styled_1.StyledBarGraphContainer, { style: { width: "auto" }, ref: containerRef },
+        react_1.default.createElement("div", { style: { position: "absolute", left: 50, height: "".concat(exports.BAR_GRAPH_HEIGHT, "px"), width: "20px" } },
+            react_1.default.createElement(styled_1.YAxisLabels, null, (0, styled_1.generateYAxisValues)(barDivisions).map(function (value, index) { return (react_1.default.createElement(__2.UI_BODY_SM, { key: index }, String(value))); }))),
         react_1.default.createElement(styled_1.StyledBarGraphCollectionWrapper, { style: {
                 width: "auto",
                 gap: "".concat(exports.BAR_GAP, "rem"),
@@ -90,7 +93,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, debug: debug }),
+                react_1.default.createElement(exports.BarGraph, { tagCategory: tagCategory, index1: index1, showCount: showCount, showPercent: showPercent, onClick: onClick, debug: debug, highestCount: highestCount }),
                 categoryTitle && react_1.default.createElement("div", { title: categoryTitle, style: {
                         width: "".concat(tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.width, "px"),
                         background: grey5,

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

@@ -5,3 +5,5 @@ export const StyledBarGraphWrapper: import("styled-components").StyledComponent<
 export const StyledSingleBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledBar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const YAxisLabels: import("styled-components").StyledComponent<"div", any, {}, never>;
+export function generateYAxisValues(barDivisions: any): any[];

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

@@ -3,19 +3,49 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledLabelWrapper = exports.StyledBar = exports.StyledSingleBarWrapper = exports.StyledBarGraphWrapper = exports.StyledBarGraphCollectionWrapper = exports.StyledBarGraphContainer = exports.CONTAINER_PADDING = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
+exports.generateYAxisValues = exports.YAxisLabels = exports.StyledLabelWrapper = exports.StyledBar = exports.StyledSingleBarWrapper = exports.StyledBarGraphWrapper = exports.StyledBarGraphCollectionWrapper = exports.StyledBarGraphContainer = exports.CONTAINER_PADDING = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
 var __1 = require("../../../..");
 exports.CONTAINER_PADDING = 10;
 var barColor = __1.colors2.secondaryContainer; // temp color
 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.StyledBarGraphWrapper = 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  "])));
 var generateDebugLines = function (barSections, debug) {
     if (!debug)
         return '';
@@ -36,4 +66,18 @@ exports.StyledSingleBarWrapper = styled_components_1.default.div(templateObject_
 });
 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;
+exports.YAxisLabels = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: inherit;\n  display: flex;\n\n  flex-direction: column-reverse;\n  justify-content: space-between;\n\n  color: ", ";\n  z-index: 100;\n"], ["\n  height: inherit;\n  display: flex;\n\n  flex-direction: column-reverse;\n  justify-content: space-between;\n\n  color: ", ";\n  z-index: 100;\n"])), __1.colors2.grey50);
+var generateYAxisValues = function (barDivisions) {
+    // For 5 labels, we want to divide the range into 4 equal parts
+    var numLabels = 5;
+    var step = barDivisions / (numLabels - 1);
+    var values = [];
+    for (var i = 0; i < numLabels; i++) {
+        values.push(Math.round(step * i));
+    }
+    // Ensure the last value is exactly barDivisions to avoid rounding errors
+    values[values.length - 1] = barDivisions;
+    return values;
+};
+exports.generateYAxisValues = generateYAxisValues;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.d.ts

@@ -1 +1,2 @@
+export function divideBarIntoEqualParts(num: 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

@@ -11,9 +11,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGetDimensions = void 0;
+exports.useGetDimensions = exports.divideBarIntoEqualParts = void 0;
 var __1 = require("..");
 var styled_1 = require("../styled");
+var divideBarIntoEqualParts = function (num) {
+    if (num <= 100)
+        return num;
+    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;
+};
+exports.divideBarIntoEqualParts = divideBarIntoEqualParts;
 var useGetDimensions = function (data, maxHeight, containerWidth, totalDataCount, highestCount) {
     var singleBarWidth;
     var totalBars = data === null || data === void 0 ? void 0 : data.reduce(function (total, tagCategory) {
@@ -26,25 +39,7 @@ 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 divideBarIntoEqualParts = function (num) {
-        if (num <= 10)
-            return num;
-        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);
+    var barSections = (0, exports.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);

package/package.json

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