oolib 2.197.0 → 2.197.1

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

@@ -29,5 +29,8 @@ export interface BarChartProps {
     summarizeAfterIdx?: number;
     style?: React.CSSProperties;
 }
+export declare const FadeGradientWhenScroll: ({ style }: {
+    style?: {};
+}) => React.JSX.Element;
 export declare const BarChart: React.FC<BarChartProps>;
 export {};

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

@@ -47,7 +47,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BarChart = exports.useTrackMousePosition = void 0;
+exports.BarChart = exports.FadeGradientWhenScroll = exports.useTrackMousePosition = void 0;
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var CustomizedLabel_1 = require("./comps/CustomizedLabel");
@@ -303,6 +303,7 @@ var FadeGradientWhenScroll = function (_a) {
     var _b = _a.style, style = _b === void 0 ? {} : _b;
     return (react_1.default.createElement("div", { style: __assign({ width: '100%', height: '40px', position: 'sticky', left: 0, bottom: 0, background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))") }, style) }));
 };
+exports.FadeGradientWhenScroll = FadeGradientWhenScroll;
 var BarChart = function (_a) {
     var _data = _a.data, valuePath = _a.valuePath, _b = _a.style, style = _b === void 0 ? {} : _b, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
     _c = _a.labelPath, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
@@ -334,9 +335,9 @@ var BarChart = function (_a) {
                 isBreakdown: true,
                 breakdownDisplayType: "stacked",
                 showSumOfBreakdownValues: true, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName })),
-            orientation === 'vertical' && react_1.default.createElement(FadeGradientWhenScroll, null)),
+            orientation === 'vertical' && react_1.default.createElement(exports.FadeGradientWhenScroll, null)),
         isBreakdown && react_1.default.createElement("div", { style: __assign({ position: 'sticky' }, (orientation === 'vertical' ? { top: 0 } : { bottom: 0, background: __1.colors2.white })) },
-            orientation === 'horizontal' && react_1.default.createElement(FadeGradientWhenScroll, { style: { transform: 'translateY(-100%)', top: 0, bottom: 'unset', position: 'absolute', } }),
+            orientation === 'horizontal' && react_1.default.createElement(exports.FadeGradientWhenScroll, { style: { transform: 'translateY(-100%)', top: 0, bottom: 'unset', position: 'absolute', } }),
             react_1.default.createElement(Legend_1.Legend, { orientation: orientation, label: breakdownCategoryName, data: data[0].map(function (d) { return ({
                     text: d.labels.tooltipLabel,
                     color: d.labels.barColor

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -54,6 +58,7 @@ var Typo2_1 = require("../../Typo2");
 var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
 var usePrepareData_1 = require("../utils/usePrepareData");
 var __1 = require("../../../..");
+var styled_components_1 = __importDefault(require("styled-components"));
 /**
  * Maps a value from an input range to a color
  * with the base color at the center point of the range
@@ -116,8 +121,8 @@ function hslToHex(h, s, l) {
 var _configs = {
     gridGap: 2,
     cellRoundness: 4,
-    cellSize: 36,
-    axisLabelWidth: 200
+    cellSize: 40,
+    axisLabelWidth: 150
 };
 var HeatMapCell = function (_a) {
     var value = _a.value, dataMaxValue = _a.dataMaxValue, _b = _a.dataMinValue, dataMinValue = _b === void 0 ? 0 : _b, showPercent = _a.showPercent;
@@ -146,6 +151,11 @@ var HeatMapCell = function (_a) {
             } },
             react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: { color: textColor } }, value.labels.count))));
 };
+var STYLED_UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_SEMIBOLD_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n"], ["\n  ", "\n\n"
+    /**
+     * expects exactly the same data structure as barcharts - breakdown version
+     */
+])), (0, __1.clampText)(2));
 /**
  * expects exactly the same data structure as barcharts - breakdown version
  */
@@ -161,76 +171,105 @@ var HeatMapGrid = function (_a) {
         showPercent: showPercent,
         summarizeAfterIdx: summarizeAfterIdx,
     }), data = _h.data, dataMaxValue = _h.dataMaxValue, dataToSummarize = _h.dataToSummarize;
-    return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "auto 1fr", gap: _configs.gridGap + 'px', overflow: "auto", alignItems: "end" }, style) },
-        react_1.default.createElement("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: _configs.gridGap + "px",
-            } },
-            react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
-            data.map(function (d) { return (react_1.default.createElement("div", { style: {
-                    height: _configs.cellSize + "px",
-                    textAlign: "right",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                } },
-                react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
-                        width: "fit-content",
-                        maxWidth: _configs.axisLabelWidth + "px",
-                        height: "2.4em",
-                        lineHeight: "1.2em",
-                        overflow: "hidden",
-                        wordBreak: "break-word",
-                    } }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name))); })),
+    var vizRef = (0, react_1.useRef)(null);
+    var wrapperRef = (0, react_1.useRef)(null);
+    var setFader = function () {
+        var _a, _b, _c, _d;
+        if (vizRef.current && wrapperRef.current && ((_b = (_a = vizRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.bottom) > ((_d = (_c = wrapperRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.bottom)) {
+            if (!showFader) {
+                setShowFader(true);
+            }
+        }
+        else {
+            setShowFader(false);
+        }
+    };
+    var _j = (0, react_1.useState)(false), showFader = _j[0], setShowFader = _j[1];
+    (0, react_1.useEffect)(function () {
+        setFader();
+    }, []);
+    (0, __1.useScroll)(setFader);
+    return (react_1.default.createElement("div", { ref: wrapperRef, style: __assign({ position: 'relative' }, style) },
         react_1.default.createElement("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: _configs.gridGap + "px",
-                overflowX: "auto",
+                position: 'relative',
+                display: "grid",
+                gridTemplateColumns: "auto 1fr",
+                gap: _configs.gridGap + 'px',
+                overflow: "auto",
+                alignItems: "end",
+                height: '100%'
             } },
             react_1.default.createElement("div", { style: {
                     display: "flex",
-                    alignItems: "center",
+                    flexDirection: "column",
                     gap: _configs.gridGap + "px",
-                } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
-                    width: _configs.cellSize + "px",
-                    height: _configs.axisLabelWidth + "px",
-                    display: "flex",
-                    alignItems: "flex-end",
-                    textWrap: "nowrap",
-                    justifyContent: 'center',
-                    position: "relative",
-                    overflow: "visible",
-                    flexShrink: 0,
                 } },
-                react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
-                        width: _configs.axisLabelWidth + "px",
-                        height: "32px",
-                        position: "absolute",
-                        bottom: '-16px',
-                        left: (_configs.cellSize / 2) + 'px',
-                        transformOrigin: "left center",
-                        transform: "rotate(-90deg)",
-                        // Multi-line 
-                        whiteSpace: "normal",
-                        overflow: "hidden",
-                        display: "-webkit-box",
-                        WebkitBoxOrient: "vertical",
-                        WebkitLineClamp: 2,
-                        textOverflow: "ellipsis",
-                        lineHeight: "16px",
-                    } }, dd.labels.tooltipLabel))); })),
-            data.map(function (d) { return (react_1.default.createElement("div", { style: {
+                react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
+                data.map(function (d) { return (react_1.default.createElement("div", { style: {
+                        height: _configs.cellSize + "px",
+                        textAlign: "right",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-end",
+                    } },
+                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
+                            // width: "fit-content",
+                            maxWidth: _configs.axisLabelWidth + "px",
+                            // maxHeight: "2.4em",
+                            // lineHeight: "1.2em",
+                            // overflow: "hidden",
+                            // wordBreak: "break-word", 
+                        } }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name))); })),
+            react_1.default.createElement("div", { ref: vizRef, style: {
                     display: "flex",
-                    alignItems: "center",
+                    flexDirection: "column",
                     gap: _configs.gridGap + "px",
-                    // flexShrink: 0, 
-                } }, d.map(function (dd) {
-                // console.log({
-                //   color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
-                // });
-                return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
-            }))); }))));
+                    overflowX: "auto", //horizontal scroll
+                    position: 'relative'
+                } },
+                react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: _configs.gridGap + "px",
+                    } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
+                        width: _configs.cellSize + "px",
+                        height: _configs.axisLabelWidth + "px",
+                        display: "flex",
+                        alignItems: "flex-end",
+                        textWrap: "nowrap",
+                        justifyContent: 'center',
+                        position: "relative",
+                        overflow: "visible",
+                        flexShrink: 0,
+                    } },
+                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
+                            width: _configs.axisLabelWidth + "px",
+                            position: "absolute", // Add this
+                            bottom: 0, // which is half of the line height of the current text
+                            left: '50%', // Center horizontally
+                            transformOrigin: "left bottom", // Change origin to bottom
+                            transform: "rotate(-90deg) translateY(50%)", // Adjust transform
+                            // Multi-line 
+                            whiteSpace: "normal",
+                            // overflow: "hidden",
+                            // display: "-webkit-box",
+                            // WebkitBoxOrient: "vertical",
+                            // WebkitLineClamp: 2, 
+                            // textOverflow: "ellipsis",
+                            // lineHeight: "16px", 
+                        } }, dd.labels.tooltipLabel))); })),
+                data.map(function (d) { return (react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: _configs.gridGap + "px",
+                        // flexShrink: 0, 
+                    } }, d.map(function (dd) {
+                    // console.log({
+                    //   color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
+                    // });
+                    return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
+                }))); }))),
+        showFader && react_1.default.createElement(BarChart_1.FadeGradientWhenScroll, { style: { position: 'absolute', bottom: 0, left: 0 } })));
 };
 exports.HeatMapGrid = HeatMapGrid;
+var templateObject_1;

package/package.json

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