@watermarkinsights/ripple 5.31.0-alpha.5 → 5.31.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{app-globals-77259a15.js → app-globals-090d85be.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-chart-stack.cjs.entry.js +18 -11
- package/dist/collection/components/charts/wm-chart-stack/wm-chart-stack.js +26 -12
- package/dist/collection/dev/chart-stack.js +19 -0
- package/dist/docs/docs.json +14 -2
- package/dist/docs/skill/index.md +1 -0
- package/dist/docs/skill/wm-chart-stack.md +8 -1
- package/dist/esm/{app-globals-299e37c6.js → app-globals-7bf0ccc7.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-chart-stack.entry.js +18 -11
- package/dist/esm-es5/{app-globals-299e37c6.js → app-globals-7bf0ccc7.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-chart-stack.entry.js +1 -1
- package/dist/ripple/{p-341f9a16.system.js → p-2e053253.system.js} +1 -1
- package/dist/ripple/p-79175cd4.entry.js +1 -0
- package/dist/ripple/{p-99c617c2.system.js → p-a3d106b2.system.js} +1 -1
- package/dist/ripple/{p-f7d03f60.js → p-e2bb7798.js} +1 -1
- package/dist/ripple/{p-4bbd4fad.system.entry.js → p-e97166ce.system.entry.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/charts/wm-chart-stack/wm-chart-stack.d.ts +9 -1
- package/dist/types/components.d.ts +24 -4
- package/package.json +2 -2
- package/dist/ripple/p-1c69ebe2.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-bb947bd5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-090d85be.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
package/dist/cjs/ripple.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-bb947bd5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-090d85be.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
9
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -65,6 +65,9 @@ const ChartStack = class {
|
|
|
65
65
|
get flattenedData() {
|
|
66
66
|
return [...this.processedStacks.values()].flat();
|
|
67
67
|
}
|
|
68
|
+
get segmentWrappers() {
|
|
69
|
+
return this.el.shadowRoot.querySelectorAll(".segment-wrapper");
|
|
70
|
+
}
|
|
68
71
|
getPatternClass(item) {
|
|
69
72
|
var _a;
|
|
70
73
|
return this.isPatternMode ? ((_a = interfaces.patternKey[item.color]) !== null && _a !== void 0 ? _a : "") : "";
|
|
@@ -101,6 +104,14 @@ const ChartStack = class {
|
|
|
101
104
|
this.propagateExternalLegendData();
|
|
102
105
|
this.measurePending = true; // re-measure label fit after this change renders
|
|
103
106
|
}
|
|
107
|
+
else {
|
|
108
|
+
// config or data was unset — clear derived state so the chart renders empty
|
|
109
|
+
this.processedStacks = new Map();
|
|
110
|
+
this.stackTotals = new Map();
|
|
111
|
+
this.legendData = [];
|
|
112
|
+
this.propagateExternalLegendData();
|
|
113
|
+
this.hasHiddenValues = false;
|
|
114
|
+
}
|
|
104
115
|
}
|
|
105
116
|
buildProcessedStacks() {
|
|
106
117
|
if (!this.data) {
|
|
@@ -162,7 +173,6 @@ const ChartStack = class {
|
|
|
162
173
|
return result;
|
|
163
174
|
}
|
|
164
175
|
countStackTotals(processedStacks) {
|
|
165
|
-
this.stackTotals = new Map();
|
|
166
176
|
const stackTotals = new Map();
|
|
167
177
|
processedStacks.forEach((segments, stackName) => {
|
|
168
178
|
const stackTotal = segments.reduce((acc, s) => acc + s.amount, 0);
|
|
@@ -338,22 +348,20 @@ const ChartStack = class {
|
|
|
338
348
|
highlightSegment(item) {
|
|
339
349
|
var _a;
|
|
340
350
|
const idx = this.flattenedData.indexOf(item);
|
|
341
|
-
const segmentWrappers = this.
|
|
351
|
+
const segmentWrappers = this.segmentWrappers;
|
|
342
352
|
segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.add("faded"));
|
|
343
353
|
(_a = segmentWrappers[idx]) === null || _a === void 0 ? void 0 : _a.classList.remove("faded");
|
|
344
354
|
const legendIdx = this.legendData.findIndex((legendItem) => legendItem.barLegend === item.barLegend);
|
|
345
355
|
this.wmChartStackHighlighted.emit({ idx: legendIdx });
|
|
346
356
|
}
|
|
347
357
|
highlightSegmentsByLegend(legend) {
|
|
348
|
-
|
|
349
|
-
segmentWrappers.forEach((segmentWrapper, idx) => {
|
|
358
|
+
this.segmentWrappers.forEach((segmentWrapper, idx) => {
|
|
350
359
|
var _a;
|
|
351
360
|
segmentWrapper.classList.toggle("faded", ((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) !== legend);
|
|
352
361
|
});
|
|
353
362
|
}
|
|
354
363
|
clearHighlights() {
|
|
355
|
-
|
|
356
|
-
wrappers.forEach((wrapper) => wrapper.classList.remove("faded"));
|
|
364
|
+
this.segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.remove("faded"));
|
|
357
365
|
this.wmChartStackHighlighted.emit({ idx: -1 });
|
|
358
366
|
}
|
|
359
367
|
clearFocus() {
|
|
@@ -367,9 +375,8 @@ const ChartStack = class {
|
|
|
367
375
|
// #region Responsiveness
|
|
368
376
|
////////////////////////////////////////////////////////////
|
|
369
377
|
updateHiddenValues() {
|
|
370
|
-
const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
|
|
371
378
|
let anyHidden = false;
|
|
372
|
-
segmentWrappers.forEach((segmentWrapper) => {
|
|
379
|
+
this.segmentWrappers.forEach((segmentWrapper) => {
|
|
373
380
|
const value = segmentWrapper.querySelector(".value");
|
|
374
381
|
if (!value) {
|
|
375
382
|
return;
|
|
@@ -393,7 +400,7 @@ const ChartStack = class {
|
|
|
393
400
|
}
|
|
394
401
|
renderSegment(item, stackIdx, segmentIdx) {
|
|
395
402
|
var _a, _b;
|
|
396
|
-
return (index.h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), index.h("div", { class: `segment ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
|
|
403
|
+
return (index.h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), index.h("div", { class: `segment horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
|
|
397
404
|
}
|
|
398
405
|
renderStacks() {
|
|
399
406
|
const stackNames = [...this.processedStacks.keys()];
|
|
@@ -414,7 +421,7 @@ const ChartStack = class {
|
|
|
414
421
|
const total = (_a = this.stackTotals.get(stackName)) !== null && _a !== void 0 ? _a : 0;
|
|
415
422
|
return (index.h("div", { class: "print-table", "aria-hidden": "true" }, segments.map((item) => {
|
|
416
423
|
var _a, _b, _c;
|
|
417
|
-
return (index.h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, index.h("div", { class: "print-legend" }, index.h("div", { class: `swatch ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), index.h("span", { class: "print-legend-name" }, item.barLegend)), index.h("span", { class: "print-percent" }, item.displayValue), index.h("span", { class: "print-fraction" }, item.amount, "/", total), index.h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
|
|
424
|
+
return (index.h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, index.h("div", { class: "print-legend" }, index.h("div", { class: `swatch horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), index.h("span", { class: "print-legend-name" }, item.barLegend)), index.h("span", { class: "print-percent" }, item.displayValue), index.h("span", { class: "print-fraction" }, item.amount, "/", total), index.h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
|
|
418
425
|
})));
|
|
419
426
|
}
|
|
420
427
|
renderLegend(orientation) {
|
|
@@ -426,7 +433,7 @@ const ChartStack = class {
|
|
|
426
433
|
render() {
|
|
427
434
|
var _a, _b, _c, _d;
|
|
428
435
|
const gridLineRow = this.processedStacks.size * (this.isPrintMode ? 2 : 1) + 1;
|
|
429
|
-
return (index.h(index.Host, { key: '
|
|
436
|
+
return (index.h(index.Host, { key: 'a02be9b6a7e8a570d12fc471ab0899c1d6bff609' }, index.h("div", { key: '27a456aca42c248c767a3d44d4fca43e27342113', class: "popover-wrapper" }, index.h("priv-chart-popover", { key: '710e6b9ed574358949d86736991a94ff23033e1b', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), index.h("div", { key: 'c696620647c3a4bf69b8cbfdfd88fe0d56c0e9e4', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, 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: '7bcc1cdcf20e17af7078d5ddec312accafb0ee2a', id: "label", class: "label" }, index.h("span", { key: '4b1e5090ccbaf485a5efd543575056f77ecc3af8', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && index.h("span", { key: '4eba44204c943e58e16a0edd2787315d44ae2f23', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), index.h("div", { key: 'c11932585eb98bc5b12ead052e6965d954d28b0f', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), index.h("div", { key: '772c6c62d2ff5ef996ca6e72bd18f174a5357dc3', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && index.h("div", { key: '85170b43d60832f82fca6588c39e0ccbcc00cede', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (index.h("div", { key: 'ac782af53cf46f6797bb1a564fdbbc221fd8ea43', class: "x-axis" }, index.h("div", { key: 'f6175cb9012164eda83c920edc9746c25753bc1e', class: "x-axis-line" }), index.h("div", { key: 'd218b9ce3d734dd6e218f16d944e93199ac52580', class: "x-axis-ticks" }, index.h("span", { key: 'eff3d60abf1a6ca2cbaf0247996d891d3cbfadad', class: "tick zero" }, "0%"), index.h("span", { key: '8767b56809d269272bdc1ef9ccd4d194e6c79070', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (index.h("div", { key: '1d9a5524f1669987d19daa5d5fff5dcde93fe4ba', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, intl.stackChartMessages.hiddenValues)), chartFunctions.renderInstructionsText())));
|
|
430
437
|
}
|
|
431
438
|
static get delegatesFocus() { return true; }
|
|
432
439
|
get el() { return index.getElement(this); }
|
|
@@ -9,6 +9,9 @@ import { isElOrChild } from "../../../global/functions";
|
|
|
9
9
|
* Data and configuration are set via JavaScript properties (`chart.config` and `chart.data`) — not
|
|
10
10
|
* HTML attributes.
|
|
11
11
|
*
|
|
12
|
+
* @displayName Stack Chart
|
|
13
|
+
* @category Data Visualization
|
|
14
|
+
*
|
|
12
15
|
* @keyboardInteraction
|
|
13
16
|
* - **Tab**: Enters the chart wrapper.
|
|
14
17
|
* - **Arrow Down / Right**: Focuses the first segment.
|
|
@@ -48,6 +51,10 @@ import { isElOrChild } from "../../../global/functions";
|
|
|
48
51
|
* ];
|
|
49
52
|
* </script>
|
|
50
53
|
*
|
|
54
|
+
* @example {react} Single stack
|
|
55
|
+
* <WmChartStack ref={chartRef} />
|
|
56
|
+
* // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
|
|
57
|
+
*
|
|
51
58
|
* @example {html} Grouped (multiple stacks)
|
|
52
59
|
* <wm-chart-stack id="status-by-requirement"></wm-chart-stack>
|
|
53
60
|
* <script>
|
|
@@ -61,7 +68,7 @@ import { isElOrChild } from "../../../global/functions";
|
|
|
61
68
|
* ];
|
|
62
69
|
* </script>
|
|
63
70
|
*
|
|
64
|
-
* @example {react}
|
|
71
|
+
* @example {react} Grouped (multiple stacks)
|
|
65
72
|
* <WmChartStack ref={chartRef} />
|
|
66
73
|
* // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
|
|
67
74
|
*/
|
|
@@ -117,6 +124,9 @@ export class ChartStack {
|
|
|
117
124
|
get flattenedData() {
|
|
118
125
|
return [...this.processedStacks.values()].flat();
|
|
119
126
|
}
|
|
127
|
+
get segmentWrappers() {
|
|
128
|
+
return this.el.shadowRoot.querySelectorAll(".segment-wrapper");
|
|
129
|
+
}
|
|
120
130
|
getPatternClass(item) {
|
|
121
131
|
var _a;
|
|
122
132
|
return this.isPatternMode ? ((_a = patternKey[item.color]) !== null && _a !== void 0 ? _a : "") : "";
|
|
@@ -153,6 +163,14 @@ export class ChartStack {
|
|
|
153
163
|
this.propagateExternalLegendData();
|
|
154
164
|
this.measurePending = true; // re-measure label fit after this change renders
|
|
155
165
|
}
|
|
166
|
+
else {
|
|
167
|
+
// config or data was unset — clear derived state so the chart renders empty
|
|
168
|
+
this.processedStacks = new Map();
|
|
169
|
+
this.stackTotals = new Map();
|
|
170
|
+
this.legendData = [];
|
|
171
|
+
this.propagateExternalLegendData();
|
|
172
|
+
this.hasHiddenValues = false;
|
|
173
|
+
}
|
|
156
174
|
}
|
|
157
175
|
buildProcessedStacks() {
|
|
158
176
|
if (!this.data) {
|
|
@@ -214,7 +232,6 @@ export class ChartStack {
|
|
|
214
232
|
return result;
|
|
215
233
|
}
|
|
216
234
|
countStackTotals(processedStacks) {
|
|
217
|
-
this.stackTotals = new Map();
|
|
218
235
|
const stackTotals = new Map();
|
|
219
236
|
processedStacks.forEach((segments, stackName) => {
|
|
220
237
|
const stackTotal = segments.reduce((acc, s) => acc + s.amount, 0);
|
|
@@ -390,22 +407,20 @@ export class ChartStack {
|
|
|
390
407
|
highlightSegment(item) {
|
|
391
408
|
var _a;
|
|
392
409
|
const idx = this.flattenedData.indexOf(item);
|
|
393
|
-
const segmentWrappers = this.
|
|
410
|
+
const segmentWrappers = this.segmentWrappers;
|
|
394
411
|
segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.add("faded"));
|
|
395
412
|
(_a = segmentWrappers[idx]) === null || _a === void 0 ? void 0 : _a.classList.remove("faded");
|
|
396
413
|
const legendIdx = this.legendData.findIndex((legendItem) => legendItem.barLegend === item.barLegend);
|
|
397
414
|
this.wmChartStackHighlighted.emit({ idx: legendIdx });
|
|
398
415
|
}
|
|
399
416
|
highlightSegmentsByLegend(legend) {
|
|
400
|
-
|
|
401
|
-
segmentWrappers.forEach((segmentWrapper, idx) => {
|
|
417
|
+
this.segmentWrappers.forEach((segmentWrapper, idx) => {
|
|
402
418
|
var _a;
|
|
403
419
|
segmentWrapper.classList.toggle("faded", ((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) !== legend);
|
|
404
420
|
});
|
|
405
421
|
}
|
|
406
422
|
clearHighlights() {
|
|
407
|
-
|
|
408
|
-
wrappers.forEach((wrapper) => wrapper.classList.remove("faded"));
|
|
423
|
+
this.segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.remove("faded"));
|
|
409
424
|
this.wmChartStackHighlighted.emit({ idx: -1 });
|
|
410
425
|
}
|
|
411
426
|
clearFocus() {
|
|
@@ -419,9 +434,8 @@ export class ChartStack {
|
|
|
419
434
|
// #region Responsiveness
|
|
420
435
|
////////////////////////////////////////////////////////////
|
|
421
436
|
updateHiddenValues() {
|
|
422
|
-
const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
|
|
423
437
|
let anyHidden = false;
|
|
424
|
-
segmentWrappers.forEach((segmentWrapper) => {
|
|
438
|
+
this.segmentWrappers.forEach((segmentWrapper) => {
|
|
425
439
|
const value = segmentWrapper.querySelector(".value");
|
|
426
440
|
if (!value) {
|
|
427
441
|
return;
|
|
@@ -445,7 +459,7 @@ export class ChartStack {
|
|
|
445
459
|
}
|
|
446
460
|
renderSegment(item, stackIdx, segmentIdx) {
|
|
447
461
|
var _a, _b;
|
|
448
|
-
return (h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), h("div", { class: `segment ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
|
|
462
|
+
return (h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), h("div", { class: `segment horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
|
|
449
463
|
}
|
|
450
464
|
renderStacks() {
|
|
451
465
|
const stackNames = [...this.processedStacks.keys()];
|
|
@@ -466,7 +480,7 @@ export class ChartStack {
|
|
|
466
480
|
const total = (_a = this.stackTotals.get(stackName)) !== null && _a !== void 0 ? _a : 0;
|
|
467
481
|
return (h("div", { class: "print-table", "aria-hidden": "true" }, segments.map((item) => {
|
|
468
482
|
var _a, _b, _c;
|
|
469
|
-
return (h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, h("div", { class: "print-legend" }, h("div", { class: `swatch ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), h("span", { class: "print-legend-name" }, item.barLegend)), h("span", { class: "print-percent" }, item.displayValue), h("span", { class: "print-fraction" }, item.amount, "/", total), h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
|
|
483
|
+
return (h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, h("div", { class: "print-legend" }, h("div", { class: `swatch horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), h("span", { class: "print-legend-name" }, item.barLegend)), h("span", { class: "print-percent" }, item.displayValue), h("span", { class: "print-fraction" }, item.amount, "/", total), h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
|
|
470
484
|
})));
|
|
471
485
|
}
|
|
472
486
|
renderLegend(orientation) {
|
|
@@ -478,7 +492,7 @@ export class ChartStack {
|
|
|
478
492
|
render() {
|
|
479
493
|
var _a, _b, _c, _d;
|
|
480
494
|
const gridLineRow = this.processedStacks.size * (this.isPrintMode ? 2 : 1) + 1;
|
|
481
|
-
return (h(Host, { key: '
|
|
495
|
+
return (h(Host, { key: 'a02be9b6a7e8a570d12fc471ab0899c1d6bff609' }, h("div", { key: '27a456aca42c248c767a3d44d4fca43e27342113', class: "popover-wrapper" }, h("priv-chart-popover", { key: '710e6b9ed574358949d86736991a94ff23033e1b', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: 'c696620647c3a4bf69b8cbfdfd88fe0d56c0e9e4', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": 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) && (h("label", { key: '7bcc1cdcf20e17af7078d5ddec312accafb0ee2a', id: "label", class: "label" }, h("span", { key: '4b1e5090ccbaf485a5efd543575056f77ecc3af8', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && h("span", { key: '4eba44204c943e58e16a0edd2787315d44ae2f23', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: 'c11932585eb98bc5b12ead052e6965d954d28b0f', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '772c6c62d2ff5ef996ca6e72bd18f174a5357dc3', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && h("div", { key: '85170b43d60832f82fca6588c39e0ccbcc00cede', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (h("div", { key: 'ac782af53cf46f6797bb1a564fdbbc221fd8ea43', class: "x-axis" }, h("div", { key: 'f6175cb9012164eda83c920edc9746c25753bc1e', class: "x-axis-line" }), h("div", { key: 'd218b9ce3d734dd6e218f16d944e93199ac52580', class: "x-axis-ticks" }, h("span", { key: 'eff3d60abf1a6ca2cbaf0247996d891d3cbfadad', class: "tick zero" }, "0%"), h("span", { key: '8767b56809d269272bdc1ef9ccd4d194e6c79070', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (h("div", { key: '1d9a5524f1669987d19daa5d5fff5dcde93fe4ba', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, stackChartMessages.hiddenValues)), renderInstructionsText())));
|
|
482
496
|
}
|
|
483
497
|
static get is() { return "wm-chart-stack"; }
|
|
484
498
|
static get encapsulation() { return "shadow"; }
|
|
@@ -106,6 +106,16 @@ document.getElementById("pattern-mode-checkbox").addEventListener("change", (ev)
|
|
|
106
106
|
const dataJsonInput = document.getElementById("data-json-input");
|
|
107
107
|
|
|
108
108
|
function setChartData(data) {
|
|
109
|
+
// Restore a config if it was cleared (e.g. via the Unset preset) so the chart re-renders.
|
|
110
|
+
if (!stackChart1.config) {
|
|
111
|
+
stackChart1.config = {
|
|
112
|
+
label: "Year 1 Cohort Submission Status by Requirement",
|
|
113
|
+
subinfo: "Progress of completion of licensure requirements",
|
|
114
|
+
colors: "semantic",
|
|
115
|
+
showLegend: "top",
|
|
116
|
+
valueFormat: "percentage",
|
|
117
|
+
};
|
|
118
|
+
}
|
|
109
119
|
stackChart1.data = data;
|
|
110
120
|
if (dataJsonInput) {
|
|
111
121
|
dataJsonInput.value = JSON.stringify(data, null, 2);
|
|
@@ -178,6 +188,15 @@ document.getElementById("preset-popover").addEventListener("click", () => {
|
|
|
178
188
|
]);
|
|
179
189
|
});
|
|
180
190
|
|
|
191
|
+
// Preset: Unset config and data (test the data -> no data transition)
|
|
192
|
+
document.getElementById("preset-unset").addEventListener("click", () => {
|
|
193
|
+
stackChart1.config = undefined;
|
|
194
|
+
stackChart1.data = undefined;
|
|
195
|
+
if (dataJsonInput) {
|
|
196
|
+
dataJsonInput.value = "";
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
|
|
181
200
|
// Initialize JSON textarea with current data after chart loads
|
|
182
201
|
setTimeout(() => {
|
|
183
202
|
if (stackChart1 && stackChart1.data && dataJsonInput) {
|
package/dist/docs/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-07-
|
|
2
|
+
"timestamp": "2026-07-01T20:56:49",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.21.0",
|
|
@@ -2894,6 +2894,14 @@
|
|
|
2894
2894
|
"tag": "wm-chart-stack",
|
|
2895
2895
|
"docs": "Renders a horizontal stacked bar chart: each stack's segments are sized as a percentage of\nthat stack's total. Supports any number of stacks and segments, each occupying their own row.\nData and configuration are set via JavaScript properties (`chart.config` and `chart.data`) — not\nHTML attributes.",
|
|
2896
2896
|
"docsTags": [
|
|
2897
|
+
{
|
|
2898
|
+
"name": "displayName",
|
|
2899
|
+
"text": "Stack Chart"
|
|
2900
|
+
},
|
|
2901
|
+
{
|
|
2902
|
+
"name": "category",
|
|
2903
|
+
"text": "Data Visualization"
|
|
2904
|
+
},
|
|
2897
2905
|
{
|
|
2898
2906
|
"name": "keyboardInteraction",
|
|
2899
2907
|
"text": "- **Tab**: Enters the chart wrapper.\n- **Arrow Down / Right**: Focuses the first segment.\n- **Arrow Left / Right**: Moves to the previous / next segment within the stack, wrapping at the ends.\n- **Arrow Up / Down**: Moves to the previous / next stack (focusing its first segment), wrapping at the ends.\n- **Enter**: Activates the popover button when the popover is open.\n- **Escape**: Closes the open popover.\n- **Tab** (from within): Exits the chart and clears focus."
|
|
@@ -2910,13 +2918,17 @@
|
|
|
2910
2918
|
"name": "example",
|
|
2911
2919
|
"text": "{html} Single stack\n<wm-chart-stack id=\"submission-status\"></wm-chart-stack>\n<script>\nconst chart = document.querySelector('#submission-status');\nchart.config = { label: 'Submission status', colors: 'semantic', showLegend: 'top' };\nchart.data = [\n{ stackName: 'Status', legend: 'Not Submitted', amount: 2 },\n{ stackName: 'Status', legend: 'Awaiting Review', amount: 4 },\n{ stackName: 'Status', legend: 'Met', amount: 10 },\n{ stackName: 'Status', legend: 'Not Met', amount: 4 },\n];\n</script>"
|
|
2912
2920
|
},
|
|
2921
|
+
{
|
|
2922
|
+
"name": "example",
|
|
2923
|
+
"text": "{react} Single stack\n<WmChartStack ref={chartRef} />\n// In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];"
|
|
2924
|
+
},
|
|
2913
2925
|
{
|
|
2914
2926
|
"name": "example",
|
|
2915
2927
|
"text": "{html} Grouped (multiple stacks)\n<wm-chart-stack id=\"status-by-requirement\"></wm-chart-stack>\n<script>\nconst chart = document.querySelector('#status-by-requirement');\nchart.config = { label: 'Status by requirement', colors: 'semantic', showLegend: 'top' };\nchart.data = [\n{ stackName: 'Requirement 01', legend: 'Met', amount: 12 },\n{ stackName: 'Requirement 01', legend: 'Not Met', amount: 12 },\n{ stackName: 'Requirement 02', legend: 'Met', amount: 33 },\n{ stackName: 'Requirement 02', legend: 'Not Met', amount: 67 },\n];\n</script>"
|
|
2916
2928
|
},
|
|
2917
2929
|
{
|
|
2918
2930
|
"name": "example",
|
|
2919
|
-
"text": "{react}
|
|
2931
|
+
"text": "{react} Grouped (multiple stacks)\n<WmChartStack ref={chartRef} />\n// In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];"
|
|
2920
2932
|
}
|
|
2921
2933
|
],
|
|
2922
2934
|
"usage": {},
|
package/dist/docs/skill/index.md
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
| **Column Chart** | `wm-chart-column` | `wm-chart-column.md` | Data Visualization |
|
|
17
17
|
| **Line Chart** | `wm-line-chart` | `wm-line-chart.md` | Data Visualization |
|
|
18
18
|
| **Progress Monitor** | `wm-progress-monitor` | `wm-progress-monitor.md` | Data Visualization |
|
|
19
|
+
| **Stack Chart** | `wm-chart-stack` | `wm-chart-stack.md` | Data Visualization |
|
|
19
20
|
| **Date Range** | `wm-date-range` | `wm-date-range.md` | Form Inputs |
|
|
20
21
|
| **Datepicker** | `wm-datepicker` | `wm-datepicker.md` | Form Inputs |
|
|
21
22
|
| **File List** | `wm-file-list` | `wm-file-list.md` | Form Inputs |
|
|
@@ -90,7 +90,7 @@ chart.data = [
|
|
|
90
90
|
</script>
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
_Single stack_
|
|
94
94
|
|
|
95
95
|
```react
|
|
96
96
|
<WmChartStack ref={chartRef} />
|
|
@@ -111,4 +111,11 @@ chart.data = [
|
|
|
111
111
|
{ stackName: 'Requirement 02', legend: 'Not Met', amount: 67 },
|
|
112
112
|
];
|
|
113
113
|
</script>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
_Grouped (multiple stacks)_
|
|
117
|
+
|
|
118
|
+
```react
|
|
119
|
+
<WmChartStack ref={chartRef} />
|
|
120
|
+
// In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
|
|
114
121
|
```
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { b as bootstrapLazy } from './index-3425d80d.js';
|
|
2
2
|
export { s as setNonce } from './index-3425d80d.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-7bf0ccc7.js';
|
|
4
4
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
package/dist/esm/ripple.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as promiseResolve, b as bootstrapLazy } from './index-3425d80d.js';
|
|
2
2
|
export { s as setNonce } from './index-3425d80d.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-7bf0ccc7.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
6
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -61,6 +61,9 @@ const ChartStack = class {
|
|
|
61
61
|
get flattenedData() {
|
|
62
62
|
return [...this.processedStacks.values()].flat();
|
|
63
63
|
}
|
|
64
|
+
get segmentWrappers() {
|
|
65
|
+
return this.el.shadowRoot.querySelectorAll(".segment-wrapper");
|
|
66
|
+
}
|
|
64
67
|
getPatternClass(item) {
|
|
65
68
|
var _a;
|
|
66
69
|
return this.isPatternMode ? ((_a = patternKey[item.color]) !== null && _a !== void 0 ? _a : "") : "";
|
|
@@ -97,6 +100,14 @@ const ChartStack = class {
|
|
|
97
100
|
this.propagateExternalLegendData();
|
|
98
101
|
this.measurePending = true; // re-measure label fit after this change renders
|
|
99
102
|
}
|
|
103
|
+
else {
|
|
104
|
+
// config or data was unset — clear derived state so the chart renders empty
|
|
105
|
+
this.processedStacks = new Map();
|
|
106
|
+
this.stackTotals = new Map();
|
|
107
|
+
this.legendData = [];
|
|
108
|
+
this.propagateExternalLegendData();
|
|
109
|
+
this.hasHiddenValues = false;
|
|
110
|
+
}
|
|
100
111
|
}
|
|
101
112
|
buildProcessedStacks() {
|
|
102
113
|
if (!this.data) {
|
|
@@ -158,7 +169,6 @@ const ChartStack = class {
|
|
|
158
169
|
return result;
|
|
159
170
|
}
|
|
160
171
|
countStackTotals(processedStacks) {
|
|
161
|
-
this.stackTotals = new Map();
|
|
162
172
|
const stackTotals = new Map();
|
|
163
173
|
processedStacks.forEach((segments, stackName) => {
|
|
164
174
|
const stackTotal = segments.reduce((acc, s) => acc + s.amount, 0);
|
|
@@ -334,22 +344,20 @@ const ChartStack = class {
|
|
|
334
344
|
highlightSegment(item) {
|
|
335
345
|
var _a;
|
|
336
346
|
const idx = this.flattenedData.indexOf(item);
|
|
337
|
-
const segmentWrappers = this.
|
|
347
|
+
const segmentWrappers = this.segmentWrappers;
|
|
338
348
|
segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.add("faded"));
|
|
339
349
|
(_a = segmentWrappers[idx]) === null || _a === void 0 ? void 0 : _a.classList.remove("faded");
|
|
340
350
|
const legendIdx = this.legendData.findIndex((legendItem) => legendItem.barLegend === item.barLegend);
|
|
341
351
|
this.wmChartStackHighlighted.emit({ idx: legendIdx });
|
|
342
352
|
}
|
|
343
353
|
highlightSegmentsByLegend(legend) {
|
|
344
|
-
|
|
345
|
-
segmentWrappers.forEach((segmentWrapper, idx) => {
|
|
354
|
+
this.segmentWrappers.forEach((segmentWrapper, idx) => {
|
|
346
355
|
var _a;
|
|
347
356
|
segmentWrapper.classList.toggle("faded", ((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) !== legend);
|
|
348
357
|
});
|
|
349
358
|
}
|
|
350
359
|
clearHighlights() {
|
|
351
|
-
|
|
352
|
-
wrappers.forEach((wrapper) => wrapper.classList.remove("faded"));
|
|
360
|
+
this.segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.remove("faded"));
|
|
353
361
|
this.wmChartStackHighlighted.emit({ idx: -1 });
|
|
354
362
|
}
|
|
355
363
|
clearFocus() {
|
|
@@ -363,9 +371,8 @@ const ChartStack = class {
|
|
|
363
371
|
// #region Responsiveness
|
|
364
372
|
////////////////////////////////////////////////////////////
|
|
365
373
|
updateHiddenValues() {
|
|
366
|
-
const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
|
|
367
374
|
let anyHidden = false;
|
|
368
|
-
segmentWrappers.forEach((segmentWrapper) => {
|
|
375
|
+
this.segmentWrappers.forEach((segmentWrapper) => {
|
|
369
376
|
const value = segmentWrapper.querySelector(".value");
|
|
370
377
|
if (!value) {
|
|
371
378
|
return;
|
|
@@ -389,7 +396,7 @@ const ChartStack = class {
|
|
|
389
396
|
}
|
|
390
397
|
renderSegment(item, stackIdx, segmentIdx) {
|
|
391
398
|
var _a, _b;
|
|
392
|
-
return (h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), h("div", { class: `segment ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
|
|
399
|
+
return (h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), h("div", { class: `segment horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
|
|
393
400
|
}
|
|
394
401
|
renderStacks() {
|
|
395
402
|
const stackNames = [...this.processedStacks.keys()];
|
|
@@ -410,7 +417,7 @@ const ChartStack = class {
|
|
|
410
417
|
const total = (_a = this.stackTotals.get(stackName)) !== null && _a !== void 0 ? _a : 0;
|
|
411
418
|
return (h("div", { class: "print-table", "aria-hidden": "true" }, segments.map((item) => {
|
|
412
419
|
var _a, _b, _c;
|
|
413
|
-
return (h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, h("div", { class: "print-legend" }, h("div", { class: `swatch ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), h("span", { class: "print-legend-name" }, item.barLegend)), h("span", { class: "print-percent" }, item.displayValue), h("span", { class: "print-fraction" }, item.amount, "/", total), h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
|
|
420
|
+
return (h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, h("div", { class: "print-legend" }, h("div", { class: `swatch horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), h("span", { class: "print-legend-name" }, item.barLegend)), h("span", { class: "print-percent" }, item.displayValue), h("span", { class: "print-fraction" }, item.amount, "/", total), h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
|
|
414
421
|
})));
|
|
415
422
|
}
|
|
416
423
|
renderLegend(orientation) {
|
|
@@ -422,7 +429,7 @@ const ChartStack = class {
|
|
|
422
429
|
render() {
|
|
423
430
|
var _a, _b, _c, _d;
|
|
424
431
|
const gridLineRow = this.processedStacks.size * (this.isPrintMode ? 2 : 1) + 1;
|
|
425
|
-
return (h(Host, { key: '
|
|
432
|
+
return (h(Host, { key: 'a02be9b6a7e8a570d12fc471ab0899c1d6bff609' }, h("div", { key: '27a456aca42c248c767a3d44d4fca43e27342113', class: "popover-wrapper" }, h("priv-chart-popover", { key: '710e6b9ed574358949d86736991a94ff23033e1b', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: 'c696620647c3a4bf69b8cbfdfd88fe0d56c0e9e4', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": 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) && (h("label", { key: '7bcc1cdcf20e17af7078d5ddec312accafb0ee2a', id: "label", class: "label" }, h("span", { key: '4b1e5090ccbaf485a5efd543575056f77ecc3af8', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && h("span", { key: '4eba44204c943e58e16a0edd2787315d44ae2f23', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: 'c11932585eb98bc5b12ead052e6965d954d28b0f', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '772c6c62d2ff5ef996ca6e72bd18f174a5357dc3', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && h("div", { key: '85170b43d60832f82fca6588c39e0ccbcc00cede', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (h("div", { key: 'ac782af53cf46f6797bb1a564fdbbc221fd8ea43', class: "x-axis" }, h("div", { key: 'f6175cb9012164eda83c920edc9746c25753bc1e', class: "x-axis-line" }), h("div", { key: 'd218b9ce3d734dd6e218f16d944e93199ac52580', class: "x-axis-ticks" }, h("span", { key: 'eff3d60abf1a6ca2cbaf0247996d891d3cbfadad', class: "tick zero" }, "0%"), h("span", { key: '8767b56809d269272bdc1ef9ccd4d194e6c79070', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (h("div", { key: '1d9a5524f1669987d19daa5d5fff5dcde93fe4ba', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, stackChartMessages.hiddenValues)), renderInstructionsText())));
|
|
426
433
|
}
|
|
427
434
|
static get delegatesFocus() { return true; }
|
|
428
435
|
get el() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./index-3425d80d.js";var version="5.31.0-alpha.
|
|
1
|
+
import"./index-3425d80d.js";var version="5.31.0-alpha.6";if(window.navigator.plugins.length>0){console.log("%cRipple component library %c%s","color: #575195; font-weight: bold","font-weight: bold",version)}function wmComponentKeys(o){if(o.key=="Tab"){var n=new Event("wmUserIsTabbing");window.dispatchEvent(n);document.querySelector("body").classList.add("wmcl-user-is-tabbing")}if(o.key=="ArrowLeft"||o.key=="ArrowUp"||o.key=="ArrowRight"||o.key=="ArrowDown"){var n=new Event("wmUserIsKeying");window.dispatchEvent(n);document.querySelector("body").classList.add("wmcl-user-is-keying")}}function wmComponentMouseDownOnce(){var o=new Event("wmUserIsNotTabbing");window.dispatchEvent(o);document.querySelector("body").classList.remove("wmcl-user-is-tabbing");document.querySelector("body").classList.remove("wmcl-user-is-keying")}window.addEventListener("keydown",wmComponentKeys);window.addEventListener("mousedown",wmComponentMouseDownOnce);var tooltipContainer=document.createElement("div");tooltipContainer.id="wm-tooltip-container";var tooltipEl=document.createElement("div");tooltipEl.id="wm-tooltip";tooltipEl.classList.add("wm-tooltip");tooltipEl.setAttribute("popover","manual");tooltipEl.setAttribute("aria-hidden","true");var tooltipStyles=document.createElement("style");tooltipStyles.textContent="\n.wm-tooltip {\n position: fixed;\n overflow: hidden;\n pointer-events: none;\n line-height: normal;\n font-family: inherit;\n font-size: 0.875rem;\n text-transform: none;\n font-weight: normal;\n background: var(--wmcolor-tooltip-background);\n color: var(--wmcolor-tooltip-text);\n z-index: 999999;\n max-width: var(--wmTooltipMaxWidth, 13.75rem);\n margin-right: 1.5rem;\n padding: 0.375rem;\n transition-property: opacity;\n transition-delay: 0s;\n opacity: 0;\n inset: unset;\n top: 0;\n left: 0;\n transform: translateZ(0);\n will-change: transform;\n transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));\n border: none;\n}\n\n.wm-tooltip:popover-open {\n opacity: 0;\n}\n\n.wm-tooltip.show {\n transition-delay: 500ms;\n opacity: 1;\n}\n";var body=document.querySelector("body");if(body){document.head.appendChild(tooltipStyles);tooltipContainer.appendChild(tooltipEl);body.appendChild(tooltipContainer)}else{document.addEventListener("DOMContentLoaded",(function(){var o=document.querySelector("body");document.head.appendChild(tooltipStyles);tooltipContainer.appendChild(tooltipEl);o.appendChild(tooltipContainer)}))}var globalFn=function(){};var globalScripts=globalFn;export{globalScripts as g};
|