oolib 2.194.1 → 2.195.1

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

@@ -24,8 +24,17 @@ 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];
+};
 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;
+    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)
@@ -44,11 +53,17 @@ var usePrepareData = function (_a) {
                 return {
                     labels: __assign(__assign({}, (showPercent
                         ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount) }
-                        : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+                        : {})), { 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;
+                /**
+                 * 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: i });
+                var textColor = getTextColorForBreakdownData({ colorIdx: colorIdx, index: i });
                 return {
                     labels: __assign(__assign({}, (showPercent
                         ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount[index]) }
@@ -56,7 +71,7 @@ var usePrepareData = function (_a) {
                             ? tooltipLabelsPath[i]
                                 ? (0, _EXPORTS_1.getVal)(d, tooltipLabelsPath[i]) || tooltipLabelsPath[i]
                                 : path
-                            : (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+                            : (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path, name: (0, _EXPORTS_1.getVal)(d, labelPath), barColor: barColor, textColor: textColor }),
                 };
             });
         });
@@ -66,6 +81,10 @@ var usePrepareData = function (_a) {
                 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);
@@ -75,34 +94,57 @@ var usePrepareData = function (_a) {
                 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
-            ? finalData.filter(function (_, i) { return i <= summarizeAfterIdx; })
+            ? (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 }) })); });
+            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
+        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
-                    ? mainData[0].labels.count
-                    : mainData[0].reduce(function (acc, b) { return acc + b.labels.count; }, 0);
+                    ? 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
-                    ? mainData[0].labels.count
-                    : mainData[0].reduce(function (acc, b) { return acc + b.labels.count; }, 0);
+                    ? getHighestNumInArray(mainData)
+                    : getHighestNumInArrayOfArrays(mainData);
                 return maxCountFromMainData > totalCountOfSummarizedData
                     ? maxCountFromMainData
                     : totalCountOfSummarizedData;

package/dist/v2/themes/colors.js

@@ -105,5 +105,5 @@ exports.colors = {
     greenBG: greenBG,
     greenStroke: greenStroke,
     redBG: redBG,
-    red: red
+    red: red,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.194.1",
+  "version": "2.195.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -106,6 +106,6 @@
     "phosphor-react": "^1.4.1",
     "react-datepicker": "^7.6.0",
     "react-player": "^2.12.0",
-    "recharts": "^2.12.7"
+    "recharts": "^2.15.3"
   }
 }