@watermarkinsights/ripple 3.4.0-2 → 3.5.0-1
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/{global-ea9e87be.js → global-1c3c3254.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-chart.cjs.entry.js +57 -99
- package/dist/collection/components/wm-chart/wm-chart.css +63 -74
- package/dist/collection/components/wm-chart/wm-chart.js +63 -111
- package/dist/esm/{global-c7a1f76c.js → global-18c520e9.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-chart.entry.js +58 -100
- package/dist/ripple/p-2fb473ff.entry.js +1 -0
- package/dist/ripple/{p-d298bf82.js → p-bb367632.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/types/components/wm-chart/wm-chart.d.ts +9 -8
- package/package.json +1 -1
- package/dist/ripple/p-bcb41945.entry.js +0 -1
|
@@ -90,10 +90,8 @@ export class Chart {
|
|
|
90
90
|
};
|
|
91
91
|
/* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
|
|
92
92
|
this.debouncedResize = debounce(async () => {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
await this.getData();
|
|
96
|
-
}
|
|
93
|
+
this.setHybridType();
|
|
94
|
+
await this.getData();
|
|
97
95
|
forceUpdate(this.el);
|
|
98
96
|
}, 10);
|
|
99
97
|
this.debouncedSliceUpdate = debounce(async () => {
|
|
@@ -105,6 +103,18 @@ export class Chart {
|
|
|
105
103
|
// use of this getter should be replaced with dateFormat when showValues is fully phased out
|
|
106
104
|
return this.valueFormat || this.showValues || "none";
|
|
107
105
|
}
|
|
106
|
+
get sliceEls() {
|
|
107
|
+
const isBarType = this.currentChartType.includes("bar");
|
|
108
|
+
const isDoughnutType = this.currentChartType.includes("doughnut");
|
|
109
|
+
return isBarType
|
|
110
|
+
? Array.from(this.barEl.querySelectorAll(".bar-segment"))
|
|
111
|
+
: isDoughnutType
|
|
112
|
+
? Array.from(this.doughnutEl.querySelectorAll(".doughnut-segment"))
|
|
113
|
+
: undefined;
|
|
114
|
+
}
|
|
115
|
+
get currentChartType() {
|
|
116
|
+
return this.chartType === "hybrid" ? this.hybridType : this.chartType;
|
|
117
|
+
}
|
|
108
118
|
toggleTabbingOn() {
|
|
109
119
|
this.isTabbing = true;
|
|
110
120
|
}
|
|
@@ -136,6 +146,24 @@ export class Chart {
|
|
|
136
146
|
break;
|
|
137
147
|
}
|
|
138
148
|
}
|
|
149
|
+
handleSliceClick(ev, s) {
|
|
150
|
+
if (this.popoverEl && !this.isTabbing) {
|
|
151
|
+
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
152
|
+
this.openPopover(s);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
handleSliceFocus(ev, s) {
|
|
156
|
+
if (this.popoverEl && this.isTabbing) {
|
|
157
|
+
s.coords = getPosition(ev.target);
|
|
158
|
+
this.openPopover(s);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
handleSliceKeyDown(ev) {
|
|
162
|
+
if (this.popoverEl && this.popoverEl.open && ev.key === "Enter") {
|
|
163
|
+
const popoverBtn = this.popoverEl.querySelector("button");
|
|
164
|
+
popoverBtn && popoverBtn.click();
|
|
165
|
+
}
|
|
166
|
+
}
|
|
139
167
|
focusNext() {
|
|
140
168
|
const activeEl = checkForActiveElInShadow(document.activeElement);
|
|
141
169
|
const index =
|
|
@@ -288,9 +316,6 @@ export class Chart {
|
|
|
288
316
|
setHybridType() {
|
|
289
317
|
this.hybridType = window.innerWidth > 1340 ? "doughnut0" : "bar1";
|
|
290
318
|
}
|
|
291
|
-
getType() {
|
|
292
|
-
return this.chartType === "hybrid" ? this.hybridType : this.chartType;
|
|
293
|
-
}
|
|
294
319
|
/* GET THE DATA */
|
|
295
320
|
async getData() {
|
|
296
321
|
this.slicesData = [];
|
|
@@ -317,8 +342,8 @@ export class Chart {
|
|
|
317
342
|
inSmallCluster = true;
|
|
318
343
|
}
|
|
319
344
|
// for bar5, first color should be skipped unless notStartedColor is set to true
|
|
320
|
-
const ind = this.
|
|
321
|
-
const color = this.types[this.
|
|
345
|
+
const ind = this.currentChartType === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
|
|
346
|
+
const color = this.types[this.currentChartType].colors[ind];
|
|
322
347
|
const sliceData = {
|
|
323
348
|
amount: amount,
|
|
324
349
|
perc: perc,
|
|
@@ -335,16 +360,10 @@ export class Chart {
|
|
|
335
360
|
acc += amount;
|
|
336
361
|
this.slicesData.push(sliceData);
|
|
337
362
|
});
|
|
338
|
-
this.chartData = this.types[this.
|
|
339
|
-
}
|
|
340
|
-
getSliceEls() {
|
|
341
|
-
if (this.svgEl) {
|
|
342
|
-
this.sliceEls = Array.from(this.svgEl.querySelectorAll(this.chartData.isBar ? "rect" : "path"));
|
|
343
|
-
}
|
|
363
|
+
this.chartData = this.types[this.currentChartType];
|
|
344
364
|
}
|
|
345
365
|
handleResize() {
|
|
346
|
-
|
|
347
|
-
if (this.chartType.includes("bar") || this.chartType === "hybrid") {
|
|
366
|
+
if (this.chartType === "hybrid") {
|
|
348
367
|
this.debouncedResize();
|
|
349
368
|
}
|
|
350
369
|
}
|
|
@@ -360,12 +379,6 @@ export class Chart {
|
|
|
360
379
|
}
|
|
361
380
|
await this.getData();
|
|
362
381
|
}
|
|
363
|
-
componentDidLoad() {
|
|
364
|
-
this.getSliceEls();
|
|
365
|
-
}
|
|
366
|
-
componentDidUpdate() {
|
|
367
|
-
this.getSliceEls();
|
|
368
|
-
}
|
|
369
382
|
handleSliceUpdate() {
|
|
370
383
|
this.debouncedSliceUpdate();
|
|
371
384
|
}
|
|
@@ -384,34 +397,15 @@ export class Chart {
|
|
|
384
397
|
// DOUGHNUT
|
|
385
398
|
renderDoughnut() {
|
|
386
399
|
const outerSize = this.chartData.size + this.chartData.padding;
|
|
387
|
-
return (h("div", { class: "
|
|
388
|
-
h("svg", { width: outerSize + "px", height: outerSize + "px", ref: (el) => (this.
|
|
400
|
+
return (h("div", { class: "chart-wrapper doughnut-wrapper" },
|
|
401
|
+
h("svg", { width: outerSize + "px", height: outerSize + "px", ref: (el) => (this.doughnutEl = el), id: `graphic-${this.uid}`, class: "doughnut-svg" },
|
|
389
402
|
this.renderFilter(),
|
|
390
403
|
this.slicesData.map((s) => this.renderPath(s)),
|
|
391
|
-
this.
|
|
404
|
+
this.currentChartType === "doughnut0" ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, this.amountToPercent(this.slicesData[0].amount, true) + "%")) : (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, this.slicesData.map((s) => (s.amount > 0 ? this.renderDoughnutText(s) : "")))))));
|
|
392
405
|
}
|
|
393
406
|
renderPath(s) {
|
|
394
407
|
return (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` },
|
|
395
|
-
h("path", { id: s.id, fill: s.amount ? s.color : "transparent", d: this.getPathData(s.amount, s.offset), onClick: (ev) =>
|
|
396
|
-
if (this.popoverEl) {
|
|
397
|
-
if (!this.isTabbing) {
|
|
398
|
-
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
399
|
-
this.openPopover(s);
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
}, onFocus: (ev) => {
|
|
403
|
-
if (this.popoverEl) {
|
|
404
|
-
if (this.isTabbing) {
|
|
405
|
-
s.coords = getPosition(ev.target);
|
|
406
|
-
this.openPopover(s);
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
}, onKeyDown: (ev) => {
|
|
410
|
-
if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
|
|
411
|
-
const popoverBtn = this.popoverEl.querySelector("button");
|
|
412
|
-
popoverBtn && popoverBtn.click();
|
|
413
|
-
}
|
|
414
|
-
} }),
|
|
408
|
+
h("path", { id: s.id, class: "doughnut-segment", fill: s.amount ? s.color : "transparent", d: this.getPathData(s.amount, s.offset), onClick: (ev) => this.handleSliceClick(ev, s), onFocus: (ev) => this.handleSliceFocus(ev, s), onKeyDown: (ev) => this.handleSliceKeyDown(ev) }),
|
|
415
409
|
h("text", { class: "sr-only" }, s.legend)));
|
|
416
410
|
}
|
|
417
411
|
renderDoughnutText(s) {
|
|
@@ -423,71 +417,26 @@ export class Chart {
|
|
|
423
417
|
}
|
|
424
418
|
// BAR
|
|
425
419
|
renderBar() {
|
|
426
|
-
return (h("div", { class: "
|
|
427
|
-
this.
|
|
420
|
+
return (h("div", { class: "chart-wrapper bar-wrapper" },
|
|
421
|
+
this.currentChartType === "bar1" ? (h("div", { class: "single-perc" }, this.amountToPercent(this.slicesData[0].amount, true) + "%")) : (""),
|
|
428
422
|
this.drawAxis(),
|
|
429
|
-
h("div", { class:
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
this.getType() !== "bar1" ? (h("g", { class: "percs" }, this.slicesData.map((s) => (s.perc > 0 ? this.renderBarText(s) : "")))) : ("")),
|
|
444
|
-
this.renderCompletionMessage())));
|
|
445
|
-
}
|
|
446
|
-
renderRect(s, idx) {
|
|
447
|
-
let y;
|
|
448
|
-
switch (this.getType()) {
|
|
449
|
-
case "bar2":
|
|
450
|
-
case "bar4":
|
|
451
|
-
case "bar5":
|
|
452
|
-
y = this.tempValueFormat === "percentage" || this.tempValueFormat === "amount" ? "30px" : "0";
|
|
453
|
-
break;
|
|
454
|
-
default:
|
|
455
|
-
y = "0";
|
|
456
|
-
}
|
|
457
|
-
// adjusting the width of the rect slightly ensures repainting on rerenders
|
|
458
|
-
// important for updating width accurate when resizing the page
|
|
459
|
-
const randomTinyNumber = Math.random() / 1000;
|
|
460
|
-
return (h("g", { class: "barcontainer" },
|
|
461
|
-
h("style", null, ` #${s.id} {
|
|
462
|
-
fill:${s.color};
|
|
463
|
-
x: ${`${this.amountToPercent(s.offset, false)}%`};
|
|
464
|
-
y: ${y};
|
|
465
|
-
height: 30px;
|
|
466
|
-
width: calc(${this.amountToPercent(s.amount, false) + randomTinyNumber}%${idx !== this.slicesData.length - 1 ? " - 2px" : ""});
|
|
467
|
-
}`),
|
|
468
|
-
h("rect", { id: s.id, onClick: (ev) => {
|
|
469
|
-
if (this.popoverEl) {
|
|
470
|
-
if (!this.isTabbing) {
|
|
471
|
-
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
472
|
-
this.openPopover(s);
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
}, onFocus: (ev) => {
|
|
476
|
-
if (this.popoverEl) {
|
|
477
|
-
if (this.isTabbing) {
|
|
478
|
-
s.coords = getPosition(ev.target);
|
|
479
|
-
this.openPopover(s);
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
}, onKeyDown: (ev) => {
|
|
483
|
-
if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
|
|
484
|
-
const popoverBtn = this.popoverEl.querySelector("button");
|
|
485
|
-
popoverBtn && popoverBtn.click();
|
|
486
|
-
}
|
|
487
|
-
} }),
|
|
423
|
+
h("div", { class: {
|
|
424
|
+
"inner-bar-wrapper": true,
|
|
425
|
+
"show-values": this.tempValueFormat === "percentage" || this.tempValueFormat === "amount",
|
|
426
|
+
} },
|
|
427
|
+
this.currentChartType !== "bar1" ? (h("div", null, this.slicesData.map((s, idx) => (s.perc > 0 ? this.renderBarText(s, idx) : "")))) : (""),
|
|
428
|
+
h("div", { class: "bar-segments-wrapper", ref: (el) => (this.barEl = el) }, this.slicesData.map((s, idx) => this.renderBarSegment(s, idx))))));
|
|
429
|
+
}
|
|
430
|
+
renderBarSegment(s, idx) {
|
|
431
|
+
const isLastSlice = idx !== this.slicesData.length - 1;
|
|
432
|
+
const width = `calc(${this.amountToPercent(s.amount, false)}%${isLastSlice ? " - 2px" : ""})`;
|
|
433
|
+
return (h("div", { class: `bar-segment ${this.amountToPercent(s.amount, false) === 0 ? "zero" : ""}`, style: {
|
|
434
|
+
backgroundColor: s.color,
|
|
435
|
+
width: width,
|
|
436
|
+
}, onClick: (ev) => this.handleSliceClick(ev, s), onFocus: (ev) => this.handleSliceFocus(ev, s), onKeyDown: (ev) => this.handleSliceKeyDown(ev) },
|
|
488
437
|
h("text", { class: "sr-only" }, s.legend)));
|
|
489
438
|
}
|
|
490
|
-
renderBarText(s) {
|
|
439
|
+
renderBarText(s, idx) {
|
|
491
440
|
let val;
|
|
492
441
|
if (this.tempValueFormat === "percentage") {
|
|
493
442
|
val = s.perc + "%";
|
|
@@ -498,10 +447,13 @@ export class Chart {
|
|
|
498
447
|
else {
|
|
499
448
|
return;
|
|
500
449
|
}
|
|
501
|
-
return (h("
|
|
450
|
+
return (h("span", { class: "value", style: {
|
|
451
|
+
width: `calc(${this.amountToPercent(s.amount, false)}%
|
|
452
|
+
${idx !== this.slicesData.length - 1 ? " - 2px" : ""}`,
|
|
453
|
+
} }, val));
|
|
502
454
|
}
|
|
503
455
|
drawAxis() {
|
|
504
|
-
if (this.
|
|
456
|
+
if (this.currentChartType === "bar3") {
|
|
505
457
|
return (h("svg", { class: "axis" },
|
|
506
458
|
h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }),
|
|
507
459
|
h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }),
|
|
@@ -550,7 +502,7 @@ export class Chart {
|
|
|
550
502
|
id: "chart.interactiveChart",
|
|
551
503
|
defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
|
|
552
504
|
}), tabindex: "0" },
|
|
553
|
-
h("div", { class: `component-wrapper ${this.
|
|
505
|
+
h("div", { class: `component-wrapper ${this.currentChartType} ${this.isTabbing ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.chartType === "bar4" ? "left-label" : ""}` },
|
|
554
506
|
h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` },
|
|
555
507
|
h("span", { class: "label-text" }, this.label),
|
|
556
508
|
this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""),
|
package/dist/esm/loader.js
CHANGED
package/dist/esm/ripple.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-66f8130e.js';
|
|
2
|
-
import { g as generateId, d as debounce,
|
|
2
|
+
import { g as generateId, d as debounce, b as getPosition, f as findParentWithScrollbar, i as intl, c as checkForActiveElInShadow } from './functions-e528c934.js';
|
|
3
3
|
|
|
4
|
-
const wmChartCss = ".component-wrapper{display:flex;flex-direction:column;align-items:center;font-size:0.875rem;position:relative;}.component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}.component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}.component-wrapper .legend-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.component-wrapper .legend-wrapper .legend{display:flex;align-items:center;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;box-sizing:border-box}.component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}.component-wrapper .legend-wrapper .legend .legend-item{position:relative}.component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}.component-wrapper .legend-wrapper .legend .legend-text{padding-left:1rem;line-height:1}.component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}.component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}.component-wrapper .
|
|
4
|
+
const wmChartCss = ":host{width:100%}.component-wrapper{display:flex;flex-direction:column;align-items:center;font-size:0.875rem;position:relative;}.component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}.component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}.component-wrapper .legend-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.component-wrapper .legend-wrapper .legend{display:flex;align-items:center;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;box-sizing:border-box}.component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}.component-wrapper .legend-wrapper .legend .legend-item{position:relative}.component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}.component-wrapper .legend-wrapper .legend .legend-text{padding-left:1rem;line-height:1}.component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}.component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}.component-wrapper .doughnut-svg,.component-wrapper .inner-bar-wrapper{overflow:visible}.component-wrapper .bar-wrapper{flex-grow:1;width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:flex}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}.component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.component-wrapper .value{display:inline-block;text-align:center}.component-wrapper .value:not(:last-of-type){margin-right:2px}.component-wrapper path:active,.component-wrapper path:hover,.component-wrapper path:focus,.component-wrapper .bar-segment:active,.component-wrapper .bar-segment:hover,.component-wrapper .bar-segment:focus{outline:none}.component-wrapper path:active.bar-segment,.component-wrapper path:hover.bar-segment,.component-wrapper path:focus.bar-segment,.component-wrapper .bar-segment:active.bar-segment,.component-wrapper .bar-segment:hover.bar-segment,.component-wrapper .bar-segment:focus.bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}.component-wrapper path:active.doughnut-segment,.component-wrapper path:hover.doughnut-segment,.component-wrapper path:focus.doughnut-segment,.component-wrapper .bar-segment:active.doughnut-segment,.component-wrapper .bar-segment:hover.doughnut-segment,.component-wrapper .bar-segment:focus.doughnut-segment{filter:url(#wmHoverDropShadow)}.component-wrapper path::-moz-focus-inner,.component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}.component-wrapper.doughnut1 label,.component-wrapper.doughnut1 .label-text,.component-wrapper.doughnut2 label,.component-wrapper.doughnut2 .label-text,.component-wrapper.doughnut3 label,.component-wrapper.doughnut3 .label-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.component-wrapper.doughnut0{align-items:center}.component-wrapper.doughnut0 label{text-align:center;width:100%;padding-bottom:1.5rem}.component-wrapper.doughnut0 label .subinfo{position:absolute}.component-wrapper.doughnut0 .legend{display:flex}.component-wrapper.doughnut0 .completion-message{padding-top:0.625rem}.component-wrapper.bar1{padding:1.25rem;position:relative;align-items:flex-start}.component-wrapper.bar1 label{display:flex;flex-direction:column}.component-wrapper.bar1 label .subinfo{position:initial}.component-wrapper.bar1 .legend{display:none}.component-wrapper.bar1 .completion-message{position:absolute;right:0;top:30px;margin-top:4px}.component-wrapper.bar1 .chart-wrapper{display:flex;align-items:center}.component-wrapper.bar1 .chart-wrapper .single-perc{width:4rem;flex:none}.component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper{flex:1;height:30px}@media screen and (min-width: 768px){.component-wrapper.bar1{flex-direction:row;align-items:center}.component-wrapper.bar1 label{width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;flex:none}.component-wrapper.bar1 .bar-wrapper{flex-direction:row-reverse}.component-wrapper.bar1 .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem}}.component-wrapper.bar2,.component-wrapper.bar3,.component-wrapper.bar4,.component-wrapper.bar5{align-items:flex-start}.component-wrapper.bar2 .inner-bar-wrapper,.component-wrapper.bar4 .inner-bar-wrapper,.component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}.component-wrapper.bar2 .inner-bar-wrapper.show-values,.component-wrapper.bar4 .inner-bar-wrapper.show-values,.component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}.component-wrapper.bar3 .legend{padding-bottom:1.25rem}.component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}.component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;transform:translateY(90px)}.component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}.component-wrapper.bar3 .chart-wrapper .axis text{transform:translate(4px, 24px);text-anchor:middle}.component-wrapper.left-label{flex-direction:row}.component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;flex:none;align-self:flex-end;min-height:30px;display:flex;align-items:center}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";
|
|
5
5
|
|
|
6
6
|
const Chart = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -93,10 +93,8 @@ const Chart = class {
|
|
|
93
93
|
};
|
|
94
94
|
/* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
|
|
95
95
|
this.debouncedResize = debounce(async () => {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
await this.getData();
|
|
99
|
-
}
|
|
96
|
+
this.setHybridType();
|
|
97
|
+
await this.getData();
|
|
100
98
|
forceUpdate(this.el);
|
|
101
99
|
}, 10);
|
|
102
100
|
this.debouncedSliceUpdate = debounce(async () => {
|
|
@@ -108,6 +106,18 @@ const Chart = class {
|
|
|
108
106
|
// use of this getter should be replaced with dateFormat when showValues is fully phased out
|
|
109
107
|
return this.valueFormat || this.showValues || "none";
|
|
110
108
|
}
|
|
109
|
+
get sliceEls() {
|
|
110
|
+
const isBarType = this.currentChartType.includes("bar");
|
|
111
|
+
const isDoughnutType = this.currentChartType.includes("doughnut");
|
|
112
|
+
return isBarType
|
|
113
|
+
? Array.from(this.barEl.querySelectorAll(".bar-segment"))
|
|
114
|
+
: isDoughnutType
|
|
115
|
+
? Array.from(this.doughnutEl.querySelectorAll(".doughnut-segment"))
|
|
116
|
+
: undefined;
|
|
117
|
+
}
|
|
118
|
+
get currentChartType() {
|
|
119
|
+
return this.chartType === "hybrid" ? this.hybridType : this.chartType;
|
|
120
|
+
}
|
|
111
121
|
toggleTabbingOn() {
|
|
112
122
|
this.isTabbing = true;
|
|
113
123
|
}
|
|
@@ -139,6 +149,24 @@ const Chart = class {
|
|
|
139
149
|
break;
|
|
140
150
|
}
|
|
141
151
|
}
|
|
152
|
+
handleSliceClick(ev, s) {
|
|
153
|
+
if (this.popoverEl && !this.isTabbing) {
|
|
154
|
+
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
155
|
+
this.openPopover(s);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
handleSliceFocus(ev, s) {
|
|
159
|
+
if (this.popoverEl && this.isTabbing) {
|
|
160
|
+
s.coords = getPosition(ev.target);
|
|
161
|
+
this.openPopover(s);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
handleSliceKeyDown(ev) {
|
|
165
|
+
if (this.popoverEl && this.popoverEl.open && ev.key === "Enter") {
|
|
166
|
+
const popoverBtn = this.popoverEl.querySelector("button");
|
|
167
|
+
popoverBtn && popoverBtn.click();
|
|
168
|
+
}
|
|
169
|
+
}
|
|
142
170
|
focusNext() {
|
|
143
171
|
const activeEl = checkForActiveElInShadow(document.activeElement);
|
|
144
172
|
const index =
|
|
@@ -291,9 +319,6 @@ const Chart = class {
|
|
|
291
319
|
setHybridType() {
|
|
292
320
|
this.hybridType = window.innerWidth > 1340 ? "doughnut0" : "bar1";
|
|
293
321
|
}
|
|
294
|
-
getType() {
|
|
295
|
-
return this.chartType === "hybrid" ? this.hybridType : this.chartType;
|
|
296
|
-
}
|
|
297
322
|
/* GET THE DATA */
|
|
298
323
|
async getData() {
|
|
299
324
|
this.slicesData = [];
|
|
@@ -320,8 +345,8 @@ const Chart = class {
|
|
|
320
345
|
inSmallCluster = true;
|
|
321
346
|
}
|
|
322
347
|
// for bar5, first color should be skipped unless notStartedColor is set to true
|
|
323
|
-
const ind = this.
|
|
324
|
-
const color = this.types[this.
|
|
348
|
+
const ind = this.currentChartType === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
|
|
349
|
+
const color = this.types[this.currentChartType].colors[ind];
|
|
325
350
|
const sliceData = {
|
|
326
351
|
amount: amount,
|
|
327
352
|
perc: perc,
|
|
@@ -338,16 +363,10 @@ const Chart = class {
|
|
|
338
363
|
acc += amount;
|
|
339
364
|
this.slicesData.push(sliceData);
|
|
340
365
|
});
|
|
341
|
-
this.chartData = this.types[this.
|
|
342
|
-
}
|
|
343
|
-
getSliceEls() {
|
|
344
|
-
if (this.svgEl) {
|
|
345
|
-
this.sliceEls = Array.from(this.svgEl.querySelectorAll(this.chartData.isBar ? "rect" : "path"));
|
|
346
|
-
}
|
|
366
|
+
this.chartData = this.types[this.currentChartType];
|
|
347
367
|
}
|
|
348
368
|
handleResize() {
|
|
349
|
-
|
|
350
|
-
if (this.chartType.includes("bar") || this.chartType === "hybrid") {
|
|
369
|
+
if (this.chartType === "hybrid") {
|
|
351
370
|
this.debouncedResize();
|
|
352
371
|
}
|
|
353
372
|
}
|
|
@@ -363,12 +382,6 @@ const Chart = class {
|
|
|
363
382
|
}
|
|
364
383
|
await this.getData();
|
|
365
384
|
}
|
|
366
|
-
componentDidLoad() {
|
|
367
|
-
this.getSliceEls();
|
|
368
|
-
}
|
|
369
|
-
componentDidUpdate() {
|
|
370
|
-
this.getSliceEls();
|
|
371
|
-
}
|
|
372
385
|
handleSliceUpdate() {
|
|
373
386
|
this.debouncedSliceUpdate();
|
|
374
387
|
}
|
|
@@ -379,29 +392,10 @@ const Chart = class {
|
|
|
379
392
|
// DOUGHNUT
|
|
380
393
|
renderDoughnut() {
|
|
381
394
|
const outerSize = this.chartData.size + this.chartData.padding;
|
|
382
|
-
return (h("div", { class: "
|
|
395
|
+
return (h("div", { class: "chart-wrapper doughnut-wrapper" }, h("svg", { width: outerSize + "px", height: outerSize + "px", ref: (el) => (this.doughnutEl = el), id: `graphic-${this.uid}`, class: "doughnut-svg" }, this.renderFilter(), this.slicesData.map((s) => this.renderPath(s)), this.currentChartType === "doughnut0" ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, this.amountToPercent(this.slicesData[0].amount, true) + "%")) : (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, this.slicesData.map((s) => (s.amount > 0 ? this.renderDoughnutText(s) : "")))))));
|
|
383
396
|
}
|
|
384
397
|
renderPath(s) {
|
|
385
|
-
return (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` }, h("path", { id: s.id, fill: s.amount ? s.color : "transparent", d: this.getPathData(s.amount, s.offset), onClick: (ev) => {
|
|
386
|
-
if (this.popoverEl) {
|
|
387
|
-
if (!this.isTabbing) {
|
|
388
|
-
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
389
|
-
this.openPopover(s);
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
}, onFocus: (ev) => {
|
|
393
|
-
if (this.popoverEl) {
|
|
394
|
-
if (this.isTabbing) {
|
|
395
|
-
s.coords = getPosition(ev.target);
|
|
396
|
-
this.openPopover(s);
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
}, onKeyDown: (ev) => {
|
|
400
|
-
if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
|
|
401
|
-
const popoverBtn = this.popoverEl.querySelector("button");
|
|
402
|
-
popoverBtn && popoverBtn.click();
|
|
403
|
-
}
|
|
404
|
-
} }), h("text", { class: "sr-only" }, s.legend)));
|
|
398
|
+
return (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` }, h("path", { id: s.id, class: "doughnut-segment", fill: s.amount ? s.color : "transparent", d: this.getPathData(s.amount, s.offset), onClick: (ev) => this.handleSliceClick(ev, s), onFocus: (ev) => this.handleSliceFocus(ev, s), onKeyDown: (ev) => this.handleSliceKeyDown(ev) }), h("text", { class: "sr-only" }, s.legend)));
|
|
405
399
|
}
|
|
406
400
|
renderDoughnutText(s) {
|
|
407
401
|
if (!s.inSmallCluster) {
|
|
@@ -412,59 +406,20 @@ const Chart = class {
|
|
|
412
406
|
}
|
|
413
407
|
// BAR
|
|
414
408
|
renderBar() {
|
|
415
|
-
return (h("div", { class: "
|
|
416
|
-
"
|
|
417
|
-
"user-is-tabbing": this.isTabbing,
|
|
409
|
+
return (h("div", { class: "chart-wrapper bar-wrapper" }, this.currentChartType === "bar1" ? (h("div", { class: "single-perc" }, this.amountToPercent(this.slicesData[0].amount, true) + "%")) : (""), this.drawAxis(), h("div", { class: {
|
|
410
|
+
"inner-bar-wrapper": true,
|
|
418
411
|
"show-values": this.tempValueFormat === "percentage" || this.tempValueFormat === "amount",
|
|
419
|
-
} }, this.
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
switch (this.getType()) {
|
|
429
|
-
case "bar2":
|
|
430
|
-
case "bar4":
|
|
431
|
-
case "bar5":
|
|
432
|
-
y = this.tempValueFormat === "percentage" || this.tempValueFormat === "amount" ? "30px" : "0";
|
|
433
|
-
break;
|
|
434
|
-
default:
|
|
435
|
-
y = "0";
|
|
436
|
-
}
|
|
437
|
-
// adjusting the width of the rect slightly ensures repainting on rerenders
|
|
438
|
-
// important for updating width accurate when resizing the page
|
|
439
|
-
const randomTinyNumber = Math.random() / 1000;
|
|
440
|
-
return (h("g", { class: "barcontainer" }, h("style", null, ` #${s.id} {
|
|
441
|
-
fill:${s.color};
|
|
442
|
-
x: ${`${this.amountToPercent(s.offset, false)}%`};
|
|
443
|
-
y: ${y};
|
|
444
|
-
height: 30px;
|
|
445
|
-
width: calc(${this.amountToPercent(s.amount, false) + randomTinyNumber}%${idx !== this.slicesData.length - 1 ? " - 2px" : ""});
|
|
446
|
-
}`), h("rect", { id: s.id, onClick: (ev) => {
|
|
447
|
-
if (this.popoverEl) {
|
|
448
|
-
if (!this.isTabbing) {
|
|
449
|
-
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
450
|
-
this.openPopover(s);
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
}, onFocus: (ev) => {
|
|
454
|
-
if (this.popoverEl) {
|
|
455
|
-
if (this.isTabbing) {
|
|
456
|
-
s.coords = getPosition(ev.target);
|
|
457
|
-
this.openPopover(s);
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
}, onKeyDown: (ev) => {
|
|
461
|
-
if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
|
|
462
|
-
const popoverBtn = this.popoverEl.querySelector("button");
|
|
463
|
-
popoverBtn && popoverBtn.click();
|
|
464
|
-
}
|
|
465
|
-
} }), h("text", { class: "sr-only" }, s.legend)));
|
|
412
|
+
} }, this.currentChartType !== "bar1" ? (h("div", null, this.slicesData.map((s, idx) => (s.perc > 0 ? this.renderBarText(s, idx) : "")))) : (""), h("div", { class: "bar-segments-wrapper", ref: (el) => (this.barEl = el) }, this.slicesData.map((s, idx) => this.renderBarSegment(s, idx))))));
|
|
413
|
+
}
|
|
414
|
+
renderBarSegment(s, idx) {
|
|
415
|
+
const isLastSlice = idx !== this.slicesData.length - 1;
|
|
416
|
+
const width = `calc(${this.amountToPercent(s.amount, false)}%${isLastSlice ? " - 2px" : ""})`;
|
|
417
|
+
return (h("div", { class: `bar-segment ${this.amountToPercent(s.amount, false) === 0 ? "zero" : ""}`, style: {
|
|
418
|
+
backgroundColor: s.color,
|
|
419
|
+
width: width,
|
|
420
|
+
}, onClick: (ev) => this.handleSliceClick(ev, s), onFocus: (ev) => this.handleSliceFocus(ev, s), onKeyDown: (ev) => this.handleSliceKeyDown(ev) }, h("text", { class: "sr-only" }, s.legend)));
|
|
466
421
|
}
|
|
467
|
-
renderBarText(s) {
|
|
422
|
+
renderBarText(s, idx) {
|
|
468
423
|
let val;
|
|
469
424
|
if (this.tempValueFormat === "percentage") {
|
|
470
425
|
val = s.perc + "%";
|
|
@@ -475,10 +430,13 @@ const Chart = class {
|
|
|
475
430
|
else {
|
|
476
431
|
return;
|
|
477
432
|
}
|
|
478
|
-
return (h("
|
|
433
|
+
return (h("span", { class: "value", style: {
|
|
434
|
+
width: `calc(${this.amountToPercent(s.amount, false)}%
|
|
435
|
+
${idx !== this.slicesData.length - 1 ? " - 2px" : ""}`,
|
|
436
|
+
} }, val));
|
|
479
437
|
}
|
|
480
438
|
drawAxis() {
|
|
481
|
-
if (this.
|
|
439
|
+
if (this.currentChartType === "bar3") {
|
|
482
440
|
return (h("svg", { class: "axis" }, h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), h("text", { x: "0.5", y: "-6" }, "0%"), h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), h("text", { x: "100%", y: "-6" }, "100%")));
|
|
483
441
|
}
|
|
484
442
|
}
|
|
@@ -513,7 +471,7 @@ const Chart = class {
|
|
|
513
471
|
intl.formatMessage({
|
|
514
472
|
id: "chart.interactiveChart",
|
|
515
473
|
defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
|
|
516
|
-
}), tabindex: "0" }, h("div", { class: `component-wrapper ${this.
|
|
474
|
+
}), tabindex: "0" }, h("div", { class: `component-wrapper ${this.currentChartType} ${this.isTabbing ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.chartType === "bar4" ? "left-label" : ""}` }, h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.chartData.isBar ? this.renderLegend() : "", this.total > 0 && this.chartData.isBar ? this.renderBar() : this.renderDoughnut(), !this.chartData.isBar ? this.renderLegend() : "", h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", ref: (el) => (this.popoverEl = el) }), this.hybridType === "doughnut0" ? this.renderCompletionMessage() : "")));
|
|
517
475
|
}
|
|
518
476
|
get el() { return getElement(this); }
|
|
519
477
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,f as t,h as r,H as n,g as a}from"./p-9baa3039.js";import{g as i,d as o,b as s,f as p,i as h,c as l}from"./p-588b4475.js";const c=class{constructor(r){e(this,r),this.chartType="doughnut1",this.showLegend=!0,this.notStartedColor=!1,this.labelPosition="top",this.isTabbing=!1,this.uid=i(),this.slicesData=[],this.colors={salmon:"#ff5f4e",cyan:"#19a1a9",sleet:"#7f97ad",midnight:"#2e1b46",lavender:"#8b86ca"},this.types={doughnut0:{size:155,colors:[this.colors.cyan,"#bfbfbf"],thickness:.73,padding:25,isBar:!1},doughnut1:{size:130,colors:[this.colors.lavender,this.colors.midnight,"#d4d4d4"],thickness:.5,padding:90,isBar:!1},doughnut2:{size:130,colors:[this.colors.cyan,this.colors.salmon,"#d4d4d4"],thickness:.5,padding:90,isBar:!1},doughnut3:{size:130,colors:[this.colors.lavender,this.colors.midnight,"#919834","#c177cf","#c16e00","#029af2","#2a6993"],thickness:.5,padding:90,isBar:!1},bar1:{size:350,colors:[this.colors.cyan,"#bfbfbf"],padding:0,isBar:!0},bar2:{size:400,colors:["#d4d4d4",this.colors.sleet,this.colors.cyan,this.colors.salmon],padding:0,isBar:!0},bar3:{size:300,colors:["#0d696e",this.colors.cyan,"#8e4129",this.colors.salmon],padding:0,isBar:!0},bar4:{size:400,colors:["#d4d4d4",this.colors.sleet,"#33a919"],padding:0,isBar:!0},bar5:{size:400,colors:["#d4d4d4",this.colors.lavender,this.colors.midnight,"#919834","#c177cf","#c16e00","#029af2","#2a6993"],padding:0,isBar:!0}},this.debouncedResize=o((async()=>{this.setHybridType(),await this.getData(),t(this.el)}),10),this.debouncedSliceUpdate=o((async()=>{await this.getData(),t(this.el)}),100)}get tempValueFormat(){return this.valueFormat||this.showValues||"none"}get sliceEls(){const e=this.currentChartType.includes("bar"),t=this.currentChartType.includes("doughnut");return e?Array.from(this.barEl.querySelectorAll(".bar-segment")):t?Array.from(this.doughnutEl.querySelectorAll(".doughnut-segment")):void 0}get currentChartType(){return"hybrid"===this.chartType?this.hybridType:this.chartType}toggleTabbingOn(){this.isTabbing=!0}toggleTabbingOff(){this.isTabbing=!1}handleKeydown(e){switch(e.keyCode){case 37:case 38:e.preventDefault(),this.isTabbing=!0,this.focusPrevious();break;case 39:case 40:e.preventDefault(),this.isTabbing=!0,this.focusNext();break;case 9:this.exitChart();break;case 27:this.popoverEl.open=!1}}handleSliceClick(e,t){this.popoverEl&&!this.isTabbing&&(t.coords={x:e.clientX,y:e.clientY},this.openPopover(t))}handleSliceFocus(e,t){this.popoverEl&&this.isTabbing&&(t.coords=s(e.target),this.openPopover(t))}handleSliceKeyDown(e){if(this.popoverEl&&this.popoverEl.open&&"Enter"===e.key){const e=this.popoverEl.querySelector("button");e&&e.click()}}focusNext(){const e=l(document.activeElement),t=(this.sliceEls.indexOf(e)+1)%this.sliceEls.length;this.focusSlice(t)}focusPrevious(){if(this.sliceEls){const e=l(document.activeElement);let t=this.sliceEls.indexOf(e);-1===t?t=0:0===t?t=this.sliceEls.length-1:t-=1,this.focusSlice(t)}}focusSlice(e){this.sliceEls&&this.el&&(this.popoverEl&&(this.popoverEl.open=!1),this.el.tabIndex=-1,this.el.focusable=!1,this.sliceEls.map((e=>{e.tabIndex=-1,e.focusable=!1})),this.sliceEls[e].tabIndex=0,this.sliceEls[e].focusable=!0,this.sliceEls[e].focus(),window.setTimeout((()=>{this.popoverEl&&(this.popoverEl.open=!0)}),10))}exitChart(){this.sliceEls&&this.sliceEls.map((e=>{e.tabIndex=-1,e.focusable=!1})),window.setTimeout((()=>{this.el&&(this.el.tabIndex=0,this.el.focusable=!0,this.popoverEl&&(this.popoverEl.open=!1))}),100)}openPopover(e){if(this.popoverEl&&e.title&&e.text){this.popoverEl.popoverTitle=e.title,this.popoverEl.popoverText=e.text,this.popoverEl.buttonText=e.buttonText,this.popoverEl.coords=e.coords,this.popoverEl.sliceRef=e.sliceRef,window.setTimeout((()=>{this.popoverEl&&(this.popoverEl.open=!0)}),30);const t=o((async()=>{this.popoverEl.open=!1}),10);document.addEventListener("scroll",(()=>{t()}));const r=p(this.el);r&&r.addEventListener("scroll",(()=>{t()}))}}amountToPercent(e,t){return t?Math.round(100*e/this.total):Math.round(1e4*e/this.total)/100}amountToDegree(e){return 360*e/this.total}toFixed(e){return parseFloat((Math.floor(100*e)/100).toFixed(2))}polarToCartesian(e,t,r,n){var a=this.toFixed(e+e*t*Math.cos(Math.PI*r/180)),i=this.toFixed(e+e*t*Math.sin(Math.PI*r/180));return void 0!==n?{x1:a,y1:i,x2:this.toFixed(e+e*t*Math.cos(Math.PI*n/180)),y2:this.toFixed(e+e*t*Math.sin(Math.PI*n/180))}:{x:a,y:i}}getPathData(e,t){var r=this.amountToDegree(t)-90,n=e/this.total*360,a=r+n,i=n>180?"1 1":"0 1",o=n>180?"1 0":"0 0",s=this.chartData.size/2,p=this.chartData.thickness;360===n&&(a-=.01);var h=this.polarToCartesian(s,1,r+1.5,a),l=this.polarToCartesian(s,p,r+3,a);return`M ${h.x1}, ${h.y1} `+this.getArc(1,i,h.x2,h.y2)+` L ${l.x2}, ${l.y2} `+this.getArc(p,o,l.x1,l.y1)+" z"}getArc(e,t,r,n){var a=this.toFixed(this.chartData.size/2*e);return`A ${a}, ${a} 0 ${t} ${this.toFixed(r)}, ${this.toFixed(n)}`}setHybridType(){this.hybridType=window.innerWidth>1340?"doughnut0":"bar1"}async getData(){this.slicesData=[];let e=0;const t=this.el.querySelectorAll("wm-chart-slice");this.total=Array.from(t).reduce(((e,t)=>e+parseInt(t.getAttribute("amount")||"0")),0),t.forEach(((r,n)=>{const a=parseInt(r.getAttribute("amount")||"0"),i=this.amountToPercent(a,!0),o=this.amountToPercent(parseInt(t[0===n?t.length-1:n-1].getAttribute("amount")||"0"),!0),s=this.amountToPercent(parseInt(t[n===t.length-1?0:n+1].getAttribute("amount")||"0"),!0);let p=i<4&&(o<5||s<5);0===i&&a>0&&(s<8||o<8)&&(p=!0);const h=this.types[this.currentChartType].colors["bar5"===this.currentChartType?this.notStartedColor?n:n+1:n],l={amount:a,perc:i,legend:r.getAttribute("legend"),color:h||"#d4d4d4",offset:e,id:`${this.uid}-${n+1}`,title:r.getAttribute("popover-title"),text:r.getAttribute("popover-text"),buttonText:r.getAttribute("popover-button-text"),sliceRef:r,inSmallCluster:p};e+=a,this.slicesData.push(l)})),this.chartData=this.types[this.currentChartType]}handleResize(){"hybrid"===this.chartType&&this.debouncedResize()}async componentWillLoad(){if(!this.label)throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");this.showValues&&console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead."),"hybrid"===this.chartType&&this.setHybridType(),await this.getData()}handleSliceUpdate(){this.debouncedSliceUpdate()}renderFilter(){return r("defs",null,r("filter",{id:"wmHoverDropShadow"},r("feGaussianBlur",{stdDeviation:"3"}),r("feOffset",{result:"offsetblur"}),r("feFlood",{"flood-color":"#333"}),r("feComposite",{operator:"in",in2:"offsetblur"}),r("feMerge",null,r("feMergeNode",null),r("feMergeNode",{in:"SourceGraphic"}))))}renderDoughnut(){const e=this.chartData.size+this.chartData.padding;return r("div",{class:"chart-wrapper doughnut-wrapper"},r("svg",{width:e+"px",height:e+"px",ref:e=>this.doughnutEl=e,id:`graphic-${this.uid}`,class:"doughnut-svg"},this.renderFilter(),this.slicesData.map((e=>this.renderPath(e))),"doughnut0"===this.currentChartType?r("text",{class:"value",x:"50%",y:"50%","font-size":"1.5rem","font-weight":"500","text-anchor":"middle","dominant-baseline":"middle"},this.amountToPercent(this.slicesData[0].amount,!0)+"%"):r("g",{transform:`translate(${this.chartData.padding/2}, ${this.chartData.padding/2})`,"text-anchor":"middle","dominant-baseline":"middle"},this.slicesData.map((e=>e.amount>0?this.renderDoughnutText(e):"")))))}renderPath(e){return r("g",{transform:`translate(${this.chartData.padding/2}, ${this.chartData.padding/2})`},r("path",{id:e.id,class:"doughnut-segment",fill:e.amount?e.color:"transparent",d:this.getPathData(e.amount,e.offset),onClick:t=>this.handleSliceClick(t,e),onFocus:t=>this.handleSliceFocus(t,e),onKeyDown:e=>this.handleSliceKeyDown(e)}),r("text",{class:"sr-only"},e.legend))}renderDoughnutText(e){if(!e.inSmallCluster){const t=this.amountToDegree(e.offset+e.amount/2);let{x:n,y:a}=this.polarToCartesian(this.chartData.size/2,1.4,t-90);return r("text",{class:"value",x:n+"px",y:a+"px"},`${e.perc>0?e.perc:"<1"}%`)}}renderBar(){return r("div",{class:"chart-wrapper bar-wrapper"},"bar1"===this.currentChartType?r("div",{class:"single-perc"},this.amountToPercent(this.slicesData[0].amount,!0)+"%"):"",this.drawAxis(),r("div",{class:{"inner-bar-wrapper":!0,"show-values":"percentage"===this.tempValueFormat||"amount"===this.tempValueFormat}},"bar1"!==this.currentChartType?r("div",null,this.slicesData.map(((e,t)=>e.perc>0?this.renderBarText(e,t):""))):"",r("div",{class:"bar-segments-wrapper",ref:e=>this.barEl=e},this.slicesData.map(((e,t)=>this.renderBarSegment(e,t))))))}renderBarSegment(e,t){const n=t!==this.slicesData.length-1,a=`calc(${this.amountToPercent(e.amount,!1)}%${n?" - 2px":""})`;return r("div",{class:"bar-segment "+(0===this.amountToPercent(e.amount,!1)?"zero":""),style:{backgroundColor:e.color,width:a},onClick:t=>this.handleSliceClick(t,e),onFocus:t=>this.handleSliceFocus(t,e),onKeyDown:e=>this.handleSliceKeyDown(e)},r("text",{class:"sr-only"},e.legend))}renderBarText(e,t){let n;if("percentage"===this.tempValueFormat)n=e.perc+"%";else{if("amount"!==this.tempValueFormat)return;n=e.amount}return r("span",{class:"value",style:{width:`calc(${this.amountToPercent(e.amount,!1)}%\n ${t!==this.slicesData.length-1?" - 2px":""}`}},n)}drawAxis(){if("bar3"===this.currentChartType)return r("svg",{class:"axis"},r("line",{x1:"0",x2:"100%",y1:"0",y2:"0"}),r("line",{x1:"0",x2:"0",y1:"0",y2:"-85px"}),r("line",{class:"tick",x1:"0.5",x2:"0.5",y1:"0",y2:"6"}),r("text",{x:"0.5",y:"-6"},"0%"),r("line",{class:"tick",x1:"100%",x2:"100%",y1:"0",y2:"6"}),r("text",{x:"100%",y:"-6"},"100%"))}renderCompletionMessage(){if("hybrid"===this.chartType&&this.completionMessage)return r("span",{class:"completion-message"},this.completionMessage)}renderLegend(){if(this.showLegend){const e=this.slicesData.reduce(((e,t)=>!!t.inSmallCluster||e),!1);return r("div",{class:"legend-wrapper"},r("div",{class:"legend "+(this.chartData.isBar?"--top":"--bottom"),"aria-hidden":"true"},this.total>0?this.slicesData.map((e=>{if(e.amount||e.legend)return r("div",{class:"legend-item"},r("div",{class:"legend-color",style:{"background-color":e.color}}),r("div",{class:"legend-text"},e.legend))})):""),!this.chartData.isBar&&e?r("div",{class:"cluster-warning"},h.formatMessage({id:"chart.hiddenPercentages",defaultMessage:"Percentages smaller than 5% are not shown when too close to each other."}),r("br",null),h.formatMessage({id:"chart.clickToSeeDetails",defaultMessage:"Click or use arrow keys to see details."})):"")}}render(){return r(n,{role:"application","aria-label":this.label+", "+h.formatMessage({id:"chart.interactiveChart",defaultMessage:"Interactive chart. Use arrow keys to browse elements, press Tab to exit."}),tabindex:"0"},r("div",{class:`component-wrapper ${this.currentChartType} ${this.isTabbing?"user-is-tabbing":""} ${"left"===this.labelPosition&&"bar4"===this.chartType?"left-label":""}`},r("label",{class:"label",id:`label-${this.uid}`,htmlFor:`graphic-${this.uid}`},r("span",{class:"label-text"},this.label),this.subinfo?r("span",{class:"subinfo"},this.subinfo):""),this.chartData.isBar?this.renderLegend():"",this.total>0&&this.chartData.isBar?this.renderBar():this.renderDoughnut(),this.chartData.isBar?"":this.renderLegend(),r("priv-chart-popover",{class:this.isTabbing?"user-is-tabbing":"",ref:e=>this.popoverEl=e}),"doughnut0"===this.hybridType?this.renderCompletionMessage():""))}get el(){return a(this)}};c.style=":host{width:100%}.component-wrapper{display:flex;flex-direction:column;align-items:center;font-size:0.875rem;position:relative;}.component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}.component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}.component-wrapper .legend-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.component-wrapper .legend-wrapper .legend{display:flex;align-items:center;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;box-sizing:border-box}.component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}.component-wrapper .legend-wrapper .legend .legend-item{position:relative}.component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}.component-wrapper .legend-wrapper .legend .legend-text{padding-left:1rem;line-height:1}.component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}.component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}.component-wrapper .doughnut-svg,.component-wrapper .inner-bar-wrapper{overflow:visible}.component-wrapper .bar-wrapper{flex-grow:1;width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:flex}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}.component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.component-wrapper .value{display:inline-block;text-align:center}.component-wrapper .value:not(:last-of-type){margin-right:2px}.component-wrapper path:active,.component-wrapper path:hover,.component-wrapper path:focus,.component-wrapper .bar-segment:active,.component-wrapper .bar-segment:hover,.component-wrapper .bar-segment:focus{outline:none}.component-wrapper path:active.bar-segment,.component-wrapper path:hover.bar-segment,.component-wrapper path:focus.bar-segment,.component-wrapper .bar-segment:active.bar-segment,.component-wrapper .bar-segment:hover.bar-segment,.component-wrapper .bar-segment:focus.bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}.component-wrapper path:active.doughnut-segment,.component-wrapper path:hover.doughnut-segment,.component-wrapper path:focus.doughnut-segment,.component-wrapper .bar-segment:active.doughnut-segment,.component-wrapper .bar-segment:hover.doughnut-segment,.component-wrapper .bar-segment:focus.doughnut-segment{filter:url(#wmHoverDropShadow)}.component-wrapper path::-moz-focus-inner,.component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}.component-wrapper.doughnut1 label,.component-wrapper.doughnut1 .label-text,.component-wrapper.doughnut2 label,.component-wrapper.doughnut2 .label-text,.component-wrapper.doughnut3 label,.component-wrapper.doughnut3 .label-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.component-wrapper.doughnut0{align-items:center}.component-wrapper.doughnut0 label{text-align:center;width:100%;padding-bottom:1.5rem}.component-wrapper.doughnut0 label .subinfo{position:absolute}.component-wrapper.doughnut0 .legend{display:flex}.component-wrapper.doughnut0 .completion-message{padding-top:0.625rem}.component-wrapper.bar1{padding:1.25rem;position:relative;align-items:flex-start}.component-wrapper.bar1 label{display:flex;flex-direction:column}.component-wrapper.bar1 label .subinfo{position:initial}.component-wrapper.bar1 .legend{display:none}.component-wrapper.bar1 .completion-message{position:absolute;right:0;top:30px;margin-top:4px}.component-wrapper.bar1 .chart-wrapper{display:flex;align-items:center}.component-wrapper.bar1 .chart-wrapper .single-perc{width:4rem;flex:none}.component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper{flex:1;height:30px}@media screen and (min-width: 768px){.component-wrapper.bar1{flex-direction:row;align-items:center}.component-wrapper.bar1 label{width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;flex:none}.component-wrapper.bar1 .bar-wrapper{flex-direction:row-reverse}.component-wrapper.bar1 .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem}}.component-wrapper.bar2,.component-wrapper.bar3,.component-wrapper.bar4,.component-wrapper.bar5{align-items:flex-start}.component-wrapper.bar2 .inner-bar-wrapper,.component-wrapper.bar4 .inner-bar-wrapper,.component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}.component-wrapper.bar2 .inner-bar-wrapper.show-values,.component-wrapper.bar4 .inner-bar-wrapper.show-values,.component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}.component-wrapper.bar3 .legend{padding-bottom:1.25rem}.component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}.component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;transform:translateY(90px)}.component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}.component-wrapper.bar3 .chart-wrapper .axis text{transform:translate(4px, 24px);text-anchor:middle}.component-wrapper.left-label{flex-direction:row}.component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;flex:none;align-self:flex-end;min-height:30px;display:flex;align-items:center}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";export{c as wm_chart}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
window.navigator.plugins.length>0&&console.log("Ripple component library","3.
|
|
1
|
+
window.navigator.plugins.length>0&&console.log("Ripple component library","3.5.0-1"),window.addEventListener("keydown",(function(n){var o=n.key||n.keyCode;if("Tab"==o||9===o){var e=new Event("wmUserIsTabbing");window.dispatchEvent(e),document.querySelector("body").classList.add("wmcl-user-is-tabbing")}"ArrowLeft"!=o&&37!==o&&"ArrowUp"!=o&&38!==o&&"ArrowRight"!=o&&39!==o&&"ArrowDown"!=o&&40!==o||(e=new Event("wmUserIsKeying"),window.dispatchEvent(e),document.querySelector("body").classList.add("wmcl-user-is-keying"))})),window.addEventListener("mousedown",(function(){var n=new Event("wmUserIsNotTabbing");window.dispatchEvent(n),document.querySelector("body").classList.remove("wmcl-user-is-tabbing"),document.querySelector("body").classList.remove("wmcl-user-is-keying")}));const n=document.createElement("div");n.id="wm-tooltip-container";const o=document.createElement("div");o.id="wm-tooltip",o.setAttribute("aria-hidden","true"),o.style.position="fixed",o.style.overflow="hidden",o.style.pointerEvents="none",o.style.lineHeight="normal",o.style.fontFamily="inherit",o.style.fontSize="0.875rem",o.style.textTransform="none",o.style.fontWeight="normal",o.style.background="black",o.style.color="#fff",o.style.zIndex="999999",o.style.maxWidth="13.75rem",o.style.marginRight="1.5rem",o.style.padding="0.375rem",o.style.transitionProperty="opacity",o.style.transitionDelay="opacity",o.style.opacity="0",n.appendChild(o),document.querySelector("body").appendChild(n);
|