oolib 2.213.4 → 2.214.0

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

@@ -1,186 +0,0 @@
-"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 () {
-    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;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-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 Legend_1 = require("../BarChart/comps/Legend");
-var __1 = require("../../../..");
-var BarChart_1 = require("../BarChart");
-var usePrepareData_1 = require("../utils/usePrepareData");
-var BarChart_2 = require("../BarChart");
-var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
-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 usePieChartData = function (barChartData, isBreakdown) {
-    return (0, react_1.useMemo)(function () {
-        if (!barChartData || barChartData.length === 0) {
-            return [];
-        }
-        if (!isBreakdown) {
-            // For non-breakdown data, the structure is already compatible
-            return barChartData.map(function (item) { return ({
-                labels: {
-                    percentage: item.labels.percentage,
-                    count: item.labels.count,
-                    name: item.labels.name,
-                    tooltipLabel: item.labels.tooltipLabel || item.labels.name,
-                },
-            }); });
-        }
-        else {
-            // For breakdown data, sum all values for each main category
-            return barChartData.map(function (itemArray) {
-                var totalCount = itemArray.reduce(function (sum, item) { return sum + item.labels.count; }, 0);
-                var mainItem = itemArray[0]; // Use the first item for the main label
-                // Calculate total across all items for percentage calculation
-                var grandTotal = barChartData.reduce(function (total, group) {
-                    return total + group.reduce(function (groupSum, item) { return groupSum + item.labels.count; }, 0);
-                }, 0);
-                return {
-                    labels: {
-                        percentage: (0, _EXPORTS_1.getPercentage)(totalCount, grandTotal),
-                        count: totalCount,
-                        name: mainItem.labels.name,
-                        tooltipLabel: mainItem.labels.tooltipLabel || mainItem.labels.name,
-                    },
-                };
-            });
-        }
-    }, [barChartData, isBreakdown]);
-};
-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 RADIAN = Math.PI / 180;
-var renderCustomizedLabel = function (_a) {
-    var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, percent = _a.percent, index = _a.index, payload = _a.payload;
-    // Only show label if percentage is above a threshold (e.g., 5%)
-    if (percent < 0.05)
-        return null;
-    // Calculate position closer to the center of the slice
-    var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-    var x = cx + radius * Math.cos(-midAngle * RADIAN);
-    var y = cy + radius * Math.sin(-midAngle * RADIAN);
-    return (react_1.default.createElement("text", { key: "label-".concat(index), x: x, y: y, fill: __1.colors2.black, textAnchor: "middle", dominantBaseline: "central", className: "UI_CAPTION_SEMIBOLD_DF" }, "".concat((percent * 100).toFixed(0), "%")));
-};
-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, midAngle = props.midAngle;
-    // const radius = innerRadius + (outerRadius - innerRadius) * 0.45; // Moved closer to center
-    // const x = cx + radius * Math.cos(-midAngle * RADIAN);
-    // const y = cy + radius * Math.sin(-midAngle * RADIAN);
-    return (react_1.default.createElement("g", null,
-        react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 6, startAngle: startAngle, endAngle: endAngle, fill: fill })));
-};
-var PieChart = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, _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, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.showCount, showCount = _g === void 0 ? false : _g, innerLabel = _a.innerLabel, style = _a.style;
-    var _h = (0, react_1.useState)(null), tooltipData = _h[0], setTooltipData = _h[1]; // Add this line
-    var isBreakdown = Array.isArray(valuePath);
-    var barChartData = (0, usePrepareData_1.usePrepareData)({
-        _data: _data,
-        labelPath: labelPath,
-        valuePath: valuePath,
-        tooltipLabelsMapping: tooltipLabelsMapping,
-        tooltipLabelsPath: tooltipLabelsPath,
-        isBreakdown: isBreakdown,
-        showPercent: showPercent,
-        summarizeAfterIdx: undefined, // PieChart doesn't use summarization
-        colorIdx: colorIdx
-    }).data;
-    // Adapt the BarChart data format to PieChart format
-    var data = usePieChartData(barChartData, isBreakdown);
-    var _j = (0, BarChart_1.useDecideLegendOrientation)({
-        widthThreshold: 500
-    }), vizWrapperRef = _j.vizWrapperRef, orientation = _j.orientation;
-    var _k = (0, BarChart_2.useTrackMousePosition)({ containerRef: vizWrapperRef }), mousePosition = _k.mousePosition, isHovering = _k.isHovering;
-    var _l = (0, react_1.useState)(), activeIndex = _l[0], setActiveIndex = _l[1];
-    var onPieEnter = function (data, index) {
-        setActiveIndex(index);
-        setTooltipData(data.payload);
-    };
-    var onPieLeave = function () {
-        setActiveIndex(undefined);
-        setTooltipData(null);
-    };
-    var onPieClick = function (_, index) {
-        if (onClick) {
-            onClick(data[index].labels.name);
-        }
-    };
-    if (data.length === 0)
-        return react_1.default.createElement("div", null, "No data available");
-    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative' }) },
-        (isHovering && tooltipData) && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [tooltipData.labels], showPercent: showPercent, mousePosition: mousePosition })),
-        react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
-            react_1.default.createElement("div", { className: "w-full", style: { height: "100%" } },
-                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, cx: "50%", cy: "50%", label: renderCustomizedLabel, fill: "#8884d8", dataKey: "labels.count", nameKey: "labels.name", innerRadius: 70, outerRadius: 140, labelLine: false, activeShape: renderActiveShape, onMouseEnter: onPieEnter, onMouseLeave: onPieLeave, onClick: onClick ? onPieClick : undefined, style: { cursor: "pointer" }, activeIndex: activeIndex }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colors[(index + colorIdx) % colors.length] })); })))))),
-        react_1.default.createElement("div", { style: __assign({ position: 'sticky' }, (orientation === 'vertical' ? { top: 0 } : { bottom: 0, background: __1.colors2.white })) },
-            react_1.default.createElement(Legend_1.Legend, { orientation: orientation, label: breakdownCategoryName || "Categories", data: data.map(function (d, index) { return ({
-                    text: d.labels.tooltipLabel || d.labels.name,
-                    color: colors[(index + colorIdx) % colors.length]
-                }); }) }))));
-};
-exports.PieChart = PieChart;

package/dist/v2/components/dataviz/types.d.ts

@@ -1,13 +0,0 @@
-export interface CountVizLabels {
-    percentage?: number;
-    count: number;
-    name: string;
-    dataIndex: number;
-    barColor: string;
-    textColor: string;
-    tooltipLabel?: string;
-}
-export interface CountVizDatum {
-    labels: CountVizLabels;
-}
-export type CountVizData = (CountVizDatum | CountVizDatum[])[];

package/dist/v2/components/dataviz/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/v2/components/dataviz/utils/usePrepareData.d.ts

@@ -1,21 +0,0 @@
-import { CountVizData } from "../types";
-interface PrepareDataParams {
-    _data: any;
-    labelPath: string;
-    valuePath: string | string[];
-    isBreakdown: boolean;
-    showPercent: boolean;
-    tooltipLabelsMapping?: {
-        [key: string]: string;
-    };
-    tooltipLabelsPath: string | string[];
-    summarizeAfterIdx?: number;
-    colorIdx?: number;
-}
-interface PreparedData {
-    data: CountVizData;
-    dataToSummarize: CountVizData;
-    dataMaxValue: number;
-}
-export declare const usePrepareData: ({ _data, labelPath, valuePath, tooltipLabelsMapping, tooltipLabelsPath, isBreakdown, showPercent, summarizeAfterIdx, colorIdx }: PrepareDataParams) => PreparedData;
-export {};

package/dist/v2/components/dataviz/utils/usePrepareData.js

@@ -1,213 +0,0 @@
-"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 __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.usePrepareData = void 0;
-var react_1 = require("react");
-var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
-var getTotalCount_1 = require("../../../../utils/getTotalCount");
-var colors_1 = require("../../../themes/colors");
-var getBarColorForBreakdownData = function (_a) {
-    var colorIdx = _a.colorIdx, index = _a.index;
-    return colors_1.dataVizColors[(colorIdx + index) % colors_1.dataVizColors.length];
-};
-var getTextColorForBreakdownData = function (_a) {
-    var colorIdx = _a.colorIdx, index = _a.index;
-    return colors_1.dataVizColorsText[(colorIdx + index) % colors_1.dataVizColorsText.length];
-};
-// Helper function to get identifier using tooltipLabel logic - reused in mapping and final step
-var getIdentifierFromPath = function (d, path, i, tooltipLabelsPath, tooltipLabelsMapping) {
-    var identifier;
-    if (tooltipLabelsPath) {
-        // Use tooltipLabelsPath logic to get the identifier - matches original logic exactly
-        if (Array.isArray(tooltipLabelsPath)) {
-            // Check if tooltipLabelsPath[i] exists before using it
-            identifier = tooltipLabelsPath[i]
-                ? (0, _EXPORTS_1.getVal)(d, tooltipLabelsPath[i]) || tooltipLabelsPath[i]
-                : path; // fallback to path if tooltipLabelsPath[i] doesn't exist
-        }
-        else if (typeof tooltipLabelsPath === 'string') {
-            identifier = (0, _EXPORTS_1.getVal)(d, tooltipLabelsPath) || tooltipLabelsPath;
-        }
-        else {
-            identifier = path;
-        }
-    }
-    else if (tooltipLabelsMapping) {
-        identifier = tooltipLabelsMapping[path] || path;
-    }
-    else {
-        identifier = path;
-    }
-    return identifier;
-};
-// Create a consistent mapping of unique identifiers to color indices for breakdown data
-var createValueToColorMapping = function (data, tooltipLabelsPath, valuePath, tooltipLabelsMapping) {
-    var uniqueValues = new Set();
-    // Find the longest children array to use as template
-    var longestChildrenArray = [];
-    var longestLength = 0;
-    data.forEach(function (d) {
-        if (d.children && d.children.length > longestLength) {
-            longestLength = d.children.length;
-            longestChildrenArray = d.children;
-        }
-    });
-    // Use the longest children array as template to collect unique identifiers
-    valuePath.forEach(function (path, i) {
-        var identifier = getIdentifierFromPath({ children: longestChildrenArray }, path, i, tooltipLabelsPath, tooltipLabelsMapping);
-        uniqueValues.add(identifier);
-    });
-    // Create consistent mapping
-    var valueToColorIndex = {};
-    Array.from(uniqueValues).sort().forEach(function (value, index) {
-        valueToColorIndex[value] = index;
-    });
-    return valueToColorIndex;
-};
-var usePrepareData = function (_a) {
-    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent, summarizeAfterIdx = _a.summarizeAfterIdx, colorIdx = _a.colorIdx;
-    return (0, react_1.useMemo)(function () {
-        var finalData = __spreadArray([], _data, true);
-        if (finalData.length === 0)
-            return ({ data: finalData, dataToSummarize: [], dataMaxValue: 0 });
-        var valueToColorMapping = isBreakdown ? createValueToColorMapping(finalData, tooltipLabelsPath, valuePath, tooltipLabelsMapping) : {};
-        var totalCount = !isBreakdown
-            ? (0, getTotalCount_1.getTotalCount)({ data: finalData, countPath: valuePath })
-            : finalData.map(function (d) {
-                var valueSum = valuePath
-                    .map(function (path) { return (0, _EXPORTS_1.getVal)(d, path) || 0; }) // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
-                    .reduce(function (acc, curr) { return acc + curr; }, 0);
-                return valueSum;
-            });
-        finalData = finalData.map(function (d, index) {
-            if (!isBreakdown) {
-                var count = (0, _EXPORTS_1.getVal)(d, valuePath) || 0; // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
-                return {
-                    labels: __assign(__assign({}, (showPercent
-                        ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount) }
-                        : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath), barColor: colors_1.dataVizColors[colorIdx], textColor: colors_1.dataVizColorsText[colorIdx] }),
-                };
-            }
-            return valuePath.map(function (path, i) {
-                var count = (0, _EXPORTS_1.getVal)(d, path) || 0;
-                // Get the identifier using the same logic as tooltipLabel for consistent coloring
-                var identifier = getIdentifierFromPath(d, path, i, tooltipLabelsPath, tooltipLabelsMapping);
-                // Use the consistent color mapping instead of array index
-                var colorIndex = valueToColorMapping[identifier] !== undefined
-                    ? valueToColorMapping[identifier]
-                    : i; // fallback to index if identifier not found
-                /**
-                 * for breakdown first we assign a color to each valuepath.
-                 * and then that color stays consistent for that valuepath across different breakdown groups
-                 */
-                var barColor = getBarColorForBreakdownData({ colorIdx: colorIdx, index: colorIndex });
-                var textColor = getTextColorForBreakdownData({ colorIdx: colorIdx, index: colorIndex });
-                return {
-                    labels: __assign(__assign({}, (showPercent
-                        ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount[index]) }
-                        : {})), { count: count, tooltipLabel: identifier, name: (0, _EXPORTS_1.getVal)(d, labelPath), barColor: barColor, textColor: textColor }),
-                };
-            });
-        });
-        // Sort by total value
-        finalData.sort(function (a, b) {
-            if (!isBreakdown) {
-                return b.labels.count - a.labels.count;
-            }
-            else {
-                /**
-                 * this sorts the order of the entire breakdown group/stack
-                 * putting the one with the total largest count first all the way to the least
-                 */
-                var bTotal = b
-                    .map(function (bItem) { return bItem.labels.count; })
-                    .reduce(function (acc, curr) { return acc + curr; }, 0);
-                var aTotal = a
-                    .map(function (aItem) { return aItem.labels.count; })
-                    .reduce(function (acc, curr) { return acc + curr; }, 0);
-                return bTotal - aTotal;
-            }
-        });
-        // Sort inner arrays from largest to smallest when it's a breakdown
-        if (isBreakdown) {
-            finalData.forEach(function (innerArray) {
-                innerArray.sort(function (a, b) {
-                    return b.labels.count - a.labels.count;
-                });
-            });
-        }
-        finalData = isBreakdown
-            ? finalData.map(function (d, i) {
-                return d.map(function (dd, ii) { return (__assign(__assign({}, dd), { labels: __assign(__assign({}, dd.labels), { dataIndex: i }) })); });
-            })
-            : finalData.map(function (d, i) { return (__assign(__assign({}, d), { labels: __assign(__assign({}, d.labels), { dataIndex: i }) })); });
-        var mainData = !isBreakdown
-            ? (summarizeAfterIdx ? finalData.filter(function (_, i) { return i <= summarizeAfterIdx; }) : finalData)
-            : finalData;
-        var convertDataToSummrizeIntoBreakdownFormat = function (data) {
-            var reshaped = data.map(function (d, i) { return (__assign(__assign({}, d), { labels: __assign(__assign({}, d.labels), { name: "Others", tooltipLabel: d.labels.name, dataIndex: i, barColor: getBarColorForBreakdownData({ colorIdx: colorIdx + 1, index: i }), textColor: getTextColorForBreakdownData({ colorIdx: colorIdx + 1, index: i }) }) })); });
-            return [reshaped];
-        };
-        var dataToSummarize = (!isBreakdown && summarizeAfterIdx)
-            ? convertDataToSummrizeIntoBreakdownFormat(finalData.filter(function (_, i) { return i > summarizeAfterIdx; }))
-            : undefined;
-        var calcDataMaxValue = function (mainData, dataToSummarize, isBreakdown) {
-            //now if there is no data to summarize its simple. take the first element and get its count (for !isBreakdown) or accumulate to count for first element (isBreakdown)
-            // with dataToSummarize, its interesting, because a summarized bar is a 'summation' of everything it is summarizing. sooo.. the summation (and not the individual values) should be taken into consideration while figuring out maxValue
-            var getHighestNumInArray = function (ary) {
-                var highest = 0;
-                ary.forEach(function (item) { if (item.labels.count > highest)
-                    highest = item.labels.count; });
-                return highest;
-            };
-            var getHighestNumInArrayOfArrays = function (ary) {
-                var highest = 0;
-                ary.forEach(function (subAry) {
-                    var subHighest = getHighestNumInArray(subAry);
-                    if (subHighest > highest)
-                        highest = subHighest;
-                });
-                return highest;
-            };
-            if (!dataToSummarize) {
-                return !isBreakdown
-                    ? getHighestNumInArray(mainData) //if not breakdown, simply get the highest count in this single level array structre : [ { labels: { count: <>, ... }}, ... ]
-                    : getHighestNumInArrayOfArrays(mainData); // if breakdown, get the highest count across all the nested arrays in this structure : [ [ { labels: { count: <>, ... }}, ... ], ... ]
-            }
-            else {
-                var totalCountOfSummarizedData = dataToSummarize[0].reduce(function (acc, b) { return acc + b.labels.count; }, 0);
-                var maxCountFromMainData = !isBreakdown
-                    ? getHighestNumInArray(mainData)
-                    : getHighestNumInArrayOfArrays(mainData);
-                return maxCountFromMainData > totalCountOfSummarizedData
-                    ? maxCountFromMainData
-                    : totalCountOfSummarizedData;
-            }
-        };
-        return {
-            data: mainData,
-            dataMaxValue: calcDataMaxValue(mainData, dataToSummarize, isBreakdown),
-            dataToSummarize: dataToSummarize,
-        };
-    }, [_data, labelPath, valuePath, isBreakdown, showPercent]);
-};
-exports.usePrepareData = usePrepareData;