@watermarkinsights/ripple 5.27.0-alpha.4 → 5.27.0-alpha.6

package/dist/cjs/{app-globals-2ce719ff.js → app-globals-0e8cfe80.js}

@@ -2,7 +2,7 @@
 
 require('./index-788526f5.js');
 
-const version = "5.27.0-alpha.4";
+const version = "5.27.0-alpha.6";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/cjs/{chartFunctions-0ac688ee.js → chartFunctions-e647a84c.js}

@@ -782,10 +782,63 @@ function findNiceRoundNumber(value) {
     // Fallback: next order of magnitude
     return 10 * magnitude;
 }
+function computeLegendData(data) {
+    const seen = new Set();
+    const result = [];
+    data.forEach((groupItems) => {
+        groupItems.forEach((item) => {
+            if (!seen.has(item.barLegend)) {
+                seen.add(item.barLegend);
+                result.push(item);
+            }
+        });
+    });
+    return result;
+}
+function groupProcessedData(data, defaultGroupName) {
+    const groups = new Map();
+    data.forEach((item) => {
+        let groupName = item.groupName;
+        if (!groupName) {
+            groupName = defaultGroupName;
+        }
+        if (!groups.has(groupName)) {
+            groups.set(groupName, []);
+        }
+        groups.get(groupName).push(item);
+    });
+    return groups;
+}
+function sortGroupedData(data) {
+    const barData = [...data];
+    // Determine group order and barLegend order by first occurrences
+    const groupOrder = [];
+    barData.forEach((item) => {
+        if (item.groupName && !groupOrder.includes(item.groupName)) {
+            groupOrder.push(item.groupName);
+        }
+    });
+    const barLegendOrder = barData
+        .filter((item) => item.groupName === groupOrder[0])
+        .map((item) => item.barLegend);
+    // Two step sorting: sort by group order, then by barLegend order
+    const sortedBarData = barData.sort((a, b) => {
+        const groupIndexA = groupOrder.indexOf(a.groupName || "");
+        const groupIndexB = groupOrder.indexOf(b.groupName || "");
+        if (groupIndexA !== groupIndexB) {
+            return groupIndexA - groupIndexB;
+        }
+        const legendIndexA = barLegendOrder.indexOf(a.barLegend);
+        const legendIndexB = barLegendOrder.indexOf(b.barLegend);
+        return legendIndexA - legendIndexB;
+    });
+    return sortedBarData;
+}
 
 exports.abbrNumber = abbrNumber;
 exports.allChartsDetails = allChartsDetails;
 exports.amountToPercent = amountToPercent;
+exports.computeLegendData = computeLegendData;
 exports.exitChart = exitChart;
 exports.findLargestNiceInterval = findLargestNiceInterval;
 exports.findNiceRoundNumber = findNiceRoundNumber;
@@ -793,6 +846,7 @@ exports.formatDisplayValue = formatDisplayValue;
 exports.getDetails = getDetails;
 exports.getInterval = getInterval;
 exports.getMaxTicks = getMaxTicks;
+exports.groupProcessedData = groupProcessedData;
 exports.handleChartKeydown = handleChartKeydown;
 exports.removeSegmentInfoHighlight = removeSegmentInfoHighlight;
 exports.renderCompletionMessage = renderCompletionMessage;
@@ -803,4 +857,5 @@ exports.renderLegend = renderLegend;
 exports.renderLegendItem = renderLegendItem;
 exports.renderSimpleBar = renderSimpleBar;
 exports.renderStackedBar = renderStackedBar;
+exports.sortGroupedData = sortGroupedData;
 exports.suffixNumber = suffixNumber;

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
-const appGlobals = require('./app-globals-2ce719ff.js');
+const appGlobals = require('./app-globals-0e8cfe80.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/ripple.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
-const appGlobals = require('./app-globals-2ce719ff.js');
+const appGlobals = require('./app-globals-0e8cfe80.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/cjs/wm-chart-bar.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
 const interfaces = require('./interfaces-8419be91.js');
-const chartFunctions = require('./chartFunctions-0ac688ee.js');
+const chartFunctions = require('./chartFunctions-e647a84c.js');
 const intl = require('./intl-02a445a1.js');
 const functions = require('./functions-2041a1d8.js');
 
@@ -17,13 +17,13 @@ const ChartBar = class {
         this.wmChartBarHighlighted = index.createEvent(this, "wmChartBarHighlighted", 7);
         this.gridMax = 0;
         this.isGrouped = false;
-        this.groupedData = new Map();
         this.legendData = [];
+        this.ungroupedDataName = "_ungrouped";
         this.config = undefined;
         this.data = undefined;
         this.printMode = undefined;
         this.subinfo = undefined;
-        this.processedData = [];
+        this.processedData = new Map();
         this.gridInfo = undefined;
         this.isKeying = false;
     }
@@ -32,7 +32,8 @@ const ChartBar = class {
     ////////////////////////////////////////////////////////////
     get colorPalette() {
         var _a, _b, _c, _d;
-        let palette = ["wmcolor-dataviz-discrete-01"]; // default to single color
+        // Default to discrete palette for grouped charts, single color for ungrouped
+        let palette = this.isGrouped ? interfaces.chartPalettes.discrete : ["wmcolor-dataviz-discrete-01"];
         if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) === "semantic") {
             palette = interfaces.chartPalettes.semantic;
         }
@@ -60,6 +61,9 @@ const ChartBar = class {
         var _a, _b, _c;
         return !!this.gridInfo && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.gridMax) != undefined && ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showGrid) !== null && _c !== void 0 ? _c : true);
     }
+    get flattenedData() {
+        return [...this.processedData.values()].flat();
+    }
     // #endregion getters
     ////////////////////////////////////////////////////////////
     // #region Component lifecycle
@@ -95,7 +99,7 @@ const ChartBar = class {
             this.isGrouped = this.data.some((item) => item.groupName);
             let processedItems = this.processChartData();
             if (this.isGrouped) {
-                processedItems = this.sortGroupedData(processedItems);
+                processedItems = chartFunctions.sortGroupedData(processedItems);
             }
             else if (this.sort === "ascending") {
                 processedItems.sort((a, b) => a.amount - b.amount);
@@ -103,12 +107,9 @@ const ChartBar = class {
             else if (this.sort === "descending") {
                 processedItems.sort((a, b) => b.amount - a.amount);
             }
-            this.processedData = processedItems;
-            this.legendData = this.computeLegendData(this.processedData);
+            this.processedData = chartFunctions.groupProcessedData(processedItems, this.ungroupedDataName);
+            this.legendData = chartFunctions.computeLegendData(this.processedData);
             this.gridInfo = this.calculateGridInfo();
-            if (this.isGrouped) {
-                this.groupedData = this.computeGroupedData(this.processedData);
-            }
         }
     }
     processChartData() {
@@ -179,53 +180,6 @@ const ChartBar = class {
             tickLabels: tickLabels,
         };
     }
-    sortGroupedData(data) {
-        const barData = [...data];
-        // Determine group order and barLegend order by first occurrences
-        const groupOrder = [];
-        barData.forEach((item) => {
-            if (item.groupName && !groupOrder.includes(item.groupName)) {
-                groupOrder.push(item.groupName);
-            }
-        });
-        const barLegendOrder = barData
-            .filter((item) => item.groupName === groupOrder[0])
-            .map((item) => item.barLegend);
-        // Two step sorting: sort by group order, then by barLegend order
-        const sortedBarData = barData.sort((a, b) => {
-            const groupIndexA = groupOrder.indexOf(a.groupName || "");
-            const groupIndexB = groupOrder.indexOf(b.groupName || "");
-            if (groupIndexA !== groupIndexB) {
-                return groupIndexA - groupIndexB;
-            }
-            const legendIndexA = barLegendOrder.indexOf(a.barLegend);
-            const legendIndexB = barLegendOrder.indexOf(b.barLegend);
-            return legendIndexA - legendIndexB;
-        });
-        return sortedBarData;
-    }
-    computeLegendData(data) {
-        const seen = new Set();
-        return data.filter((item) => {
-            if (seen.has(item.barLegend))
-                return false;
-            seen.add(item.barLegend);
-            return true;
-        });
-    }
-    computeGroupedData(data) {
-        const groups = new Map();
-        data.forEach((item) => {
-            const groupName = item.groupName;
-            if (groupName) {
-                if (!groups.has(groupName)) {
-                    groups.set(groupName, []);
-                }
-                groups.get(groupName).push(item);
-            }
-        });
-        return groups;
-    }
     // #endregion data processing
     ////////////////////////////////////////////////////////////
     // #region Keyboard interaction and Event handling
@@ -252,7 +206,7 @@ const ChartBar = class {
         }
     }
     handleBarKeyDown(ev, item) {
-        const barIdx = this.processedData.indexOf(item);
+        const barIdx = this.flattenedData.indexOf(item);
         switch (ev.key) {
             case "ArrowUp":
             case "ArrowLeft":
@@ -320,20 +274,22 @@ const ChartBar = class {
         const wrappedIdx = ((barIdx % bars.length) + bars.length) % bars.length;
         const barToFocus = bars[wrappedIdx];
         barToFocus.focus();
-        const item = this.processedData[wrappedIdx];
-        this.highlightBar(item);
-        const cornerOffset = 12;
-        this.openPopover(item, {
-            x: barToFocus.getBoundingClientRect().left + cornerOffset,
-            y: barToFocus.getBoundingClientRect().top + cornerOffset,
-        });
+        const item = this.flattenedData[wrappedIdx];
+        if (item) {
+            this.highlightBar(item);
+            const cornerOffset = 12;
+            this.openPopover(item, {
+                x: barToFocus.getBoundingClientRect().left + cornerOffset,
+                y: barToFocus.getBoundingClientRect().top + cornerOffset,
+            });
+        }
     }
     handlePopoverToggled(_ev) {
         setTimeout(() => {
             // allow time for the popover to reopen if the click that closed it was on a bar, to prevent flash
             if (this.popoverEl.open) {
                 const chartData = this.popoverEl.chartData;
-                const item = this.processedData.find((item) => item.barLegend === (chartData === null || chartData === void 0 ? void 0 : chartData.barLegend) && item.groupName === (chartData === null || chartData === void 0 ? void 0 : chartData.groupName));
+                const item = this.flattenedData.find((item) => item.barLegend === (chartData === null || chartData === void 0 ? void 0 : chartData.barLegend) && item.groupName === (chartData === null || chartData === void 0 ? void 0 : chartData.groupName));
                 item && this.highlightBar(item);
             }
             else {
@@ -368,7 +324,7 @@ const ChartBar = class {
         this.wmChartBarHighlighted.emit({ idx: -1 });
     }
     highlightBar(item) {
-        const idx = this.processedData.indexOf(item);
+        const idx = this.flattenedData.indexOf(item);
         const barItems = this.el.shadowRoot.querySelectorAll(".bar-wrapper");
         barItems.forEach((barItem) => {
             barItem.classList.add("faded");
@@ -381,7 +337,7 @@ const ChartBar = class {
         const barItems = this.el.shadowRoot.querySelectorAll(".bar-wrapper");
         barItems.forEach((barItem, idx) => {
             var _a;
-            if (((_a = this.processedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) === barLegend) {
+            if (((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) === barLegend) {
                 barItem.classList.remove("faded");
             }
             else {
@@ -400,7 +356,13 @@ const ChartBar = class {
     // #region Rendering
     ////////////////////////////////////////////////////////////
     renderBarLegends() {
-        return this.processedData.map((item) => (index.h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend)));
+        const legends = [];
+        this.processedData.forEach((items) => {
+            items.forEach((item) => {
+                legends.push(index.h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend));
+            });
+        });
+        return legends;
     }
     renderBar(item, effectiveGridMax) {
         var _a;
@@ -412,17 +374,31 @@ const ChartBar = class {
             return;
         }
         const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
-        return this.processedData.map((item) => this.renderBar(item, effectiveGridMax));
+        const bars = [];
+        this.processedData.forEach((items) => {
+            items.forEach((item) => {
+                bars.push(this.renderBar(item, effectiveGridMax));
+            });
+        });
+        return bars;
     }
     renderGroupLegends() {
-        return Array.from(this.groupedData.keys()).map((groupName) => (index.h("div", { key: `legend-${groupName}`, class: "group-legend" }, groupName)));
+        const legends = [];
+        this.processedData.forEach((_, groupName) => {
+            legends.push(index.h("div", { key: `legend-${groupName}`, class: "group-legend" }, groupName));
+        });
+        return legends;
     }
     renderGroupedBars() {
         if (!this.gridInfo || !this.processedData) {
             return;
         }
         const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
-        return Array.from(this.groupedData.entries()).map(([groupName, items]) => (index.h("div", { key: `group-${groupName}`, class: "group-bars" }, items.map((item) => this.renderBar(item, effectiveGridMax)))));
+        const groupedBars = [];
+        this.processedData.forEach((items, groupName) => {
+            groupedBars.push(index.h("div", { key: `group-${groupName}`, class: "group-bars" }, items.map((item) => this.renderBar(item, effectiveGridMax))));
+        });
+        return groupedBars;
     }
     renderXAxis() {
         var _a;
@@ -441,8 +417,10 @@ const ChartBar = class {
     // #endregion rendering
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const rowCount = this.isGrouped ? this.groupedData.size || 1 : this.processedData.length || 1;
-        return (index.h(index.Host, { key: 'dc18c7f0e16c9395390d8b10991ce596710b7b75' }, index.h("div", { key: '0d9898a48bed4b345b05b26e6067160fbb14975c', class: "popover-wrapper" }, index.h("priv-chart-popover", { key: 'b717d8bfc2b2451175283b696a1d0b9ed7d17acf', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), index.h("div", { key: '6f7abe87bd608f99c3a0635a6bb10413963560df', ref: (el) => (this.componentWrapperEl = el), class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": intl.chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (index.h("label", { key: '1bdacd770d63612d320708a9b62a65f0b1e88db0', id: "label", class: "label" }, index.h("span", { key: '67d56b01c22520ffcaab23b08f7543fa410685b3', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText ? index.h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), index.h("div", { key: 'f09a65a3693b113876f131167d09e77571d3520f', class: "chart-wrapper" }, index.h("div", { key: '0789c67f4cd70957b453102c084663d09ea0701f', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), index.h("div", { key: 'a187cffa2adc02c70d0e4ead3b198a3ee53d32d5', class: "left-axis-label" }, index.h("span", { key: 'ecdab36313608c9ad83aed01fa2519e7bdd43785', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.categoryAxisLabel))), index.h("div", { key: 'f37584ae13b6c8b4478462ce04e99efdf8401040', class: "chart-center" }, index.h("div", { key: '53aba0880f1737b4efa6af44e2392d391f1e504a', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && (this.isGrouped ? this.renderGroupLegends() : this.renderBarLegends()), index.h("div", { key: '7207315cb4a1afabcb41d6f3dfc8f453439ae48a', class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_f = this.config) === null || _f === void 0 ? void 0 : _f.gridMax) != undefined && !this.isGrouped && this.renderBars(), ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.isGrouped && this.renderGroupedBars())), index.h("div", { key: '2b23571f457d8cad85569d36b18e96ab64c64bd7', class: "bottom-axis-label" }, index.h("span", { key: 'e0e1b04b36301eda3a7cb91a99341f17e9ad8430', class: "axis-label-text" }, (_h = this.config) === null || _h === void 0 ? void 0 : _h.valueAxisLabel)), this.gridVisible && this.renderXAxis()), index.h("div", { key: '2d72f2f92066de300791627e7aecfbdb1de9c713', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), chartFunctions.renderInstructionsText())));
+        const rowCount = this.isGrouped
+            ? this.processedData.size || 1
+            : ((_a = this.processedData.get(this.ungroupedDataName)) === null || _a === void 0 ? void 0 : _a.length) || 1;
+        return (index.h(index.Host, { key: '1c87d56eb8d2efc9ff5dc28ba8c31cd74f114320' }, index.h("div", { key: '280fc2d3ea4d191fc2c5a7c74a631824efbcf40e', class: "popover-wrapper" }, index.h("priv-chart-popover", { key: '96899ce56eb4b0bc7be3cb94cd60a98770f1e134', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), index.h("div", { key: '5352946f4cd3e02a6e0483279c5a54b04b624a39', ref: (el) => (this.componentWrapperEl = el), class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": intl.chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_b = this.config) === null || _b === void 0 ? void 0 : _b.label }, ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.showLabel) !== null && _d !== void 0 ? _d : true) && (index.h("label", { key: 'b8b9ad3890b71dbba8e13bf49aba8b706088440e', id: "label", class: "label" }, index.h("span", { key: '38a02f30582c17454a75bfb182fb581d7e9ac16c', class: "label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.label), this.subinfoText ? index.h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), index.h("div", { key: 'f8d02c5539618d4e6ba7bed322a9b212976dc7b8', class: "chart-wrapper" }, index.h("div", { key: 'ffd036730778b11e3287215838cb4c8535d30b4e', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), index.h("div", { key: '39743d5fc4d7982b54d8e6c9636c756883dd36e6', class: "left-axis-label" }, index.h("span", { key: '60f613acabdf5ded9213128530626e2b2fdeaba6', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.categoryAxisLabel))), index.h("div", { key: 'a04f828912679a1dd5f012c3e9f69b5d4e7216e1', class: "chart-center" }, index.h("div", { key: '72a30421887c24bf0a89bd35e4b96e9b9f8fdd72', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && (this.isGrouped ? this.renderGroupLegends() : this.renderBarLegends()), index.h("div", { key: '3c142e2b75533ea9b94761f5476a0d6443e47b93', class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && (this.isGrouped ? this.renderGroupedBars() : this.renderBars()))), index.h("div", { key: '2f5a4864e5b9186b2a2230c470d02ed6f4352ebf', class: "bottom-axis-label" }, index.h("span", { key: '78bdab308efd6fbc6b383f794e4daedc509d9d10', class: "axis-label-text" }, (_h = this.config) === null || _h === void 0 ? void 0 : _h.valueAxisLabel)), this.gridVisible && this.renderXAxis()), index.h("div", { key: 'be80d9d9c8e5f7fcb5dd20ff64f48728d4acbbf6', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), chartFunctions.renderInstructionsText())));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }