@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
package/dist/cjs/loader.cjs.js
CHANGED
package/dist/cjs/ripple.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-cd179539.js');
|
|
6
6
|
const functions = require('./functions-653e695c.js');
|
|
7
7
|
|
|
8
|
-
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 .
|
|
8
|
+
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}";
|
|
9
9
|
|
|
10
10
|
const Chart = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -97,10 +97,8 @@ const Chart = class {
|
|
|
97
97
|
};
|
|
98
98
|
/* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
|
|
99
99
|
this.debouncedResize = functions.debounce(async () => {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
await this.getData();
|
|
103
|
-
}
|
|
100
|
+
this.setHybridType();
|
|
101
|
+
await this.getData();
|
|
104
102
|
index.forceUpdate(this.el);
|
|
105
103
|
}, 10);
|
|
106
104
|
this.debouncedSliceUpdate = functions.debounce(async () => {
|
|
@@ -112,6 +110,18 @@ const Chart = class {
|
|
|
112
110
|
// use of this getter should be replaced with dateFormat when showValues is fully phased out
|
|
113
111
|
return this.valueFormat || this.showValues || "none";
|
|
114
112
|
}
|
|
113
|
+
get sliceEls() {
|
|
114
|
+
const isBarType = this.currentChartType.includes("bar");
|
|
115
|
+
const isDoughnutType = this.currentChartType.includes("doughnut");
|
|
116
|
+
return isBarType
|
|
117
|
+
? Array.from(this.barEl.querySelectorAll(".bar-segment"))
|
|
118
|
+
: isDoughnutType
|
|
119
|
+
? Array.from(this.doughnutEl.querySelectorAll(".doughnut-segment"))
|
|
120
|
+
: undefined;
|
|
121
|
+
}
|
|
122
|
+
get currentChartType() {
|
|
123
|
+
return this.chartType === "hybrid" ? this.hybridType : this.chartType;
|
|
124
|
+
}
|
|
115
125
|
toggleTabbingOn() {
|
|
116
126
|
this.isTabbing = true;
|
|
117
127
|
}
|
|
@@ -143,6 +153,24 @@ const Chart = class {
|
|
|
143
153
|
break;
|
|
144
154
|
}
|
|
145
155
|
}
|
|
156
|
+
handleSliceClick(ev, s) {
|
|
157
|
+
if (this.popoverEl && !this.isTabbing) {
|
|
158
|
+
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
159
|
+
this.openPopover(s);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
handleSliceFocus(ev, s) {
|
|
163
|
+
if (this.popoverEl && this.isTabbing) {
|
|
164
|
+
s.coords = functions.getPosition(ev.target);
|
|
165
|
+
this.openPopover(s);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
handleSliceKeyDown(ev) {
|
|
169
|
+
if (this.popoverEl && this.popoverEl.open && ev.key === "Enter") {
|
|
170
|
+
const popoverBtn = this.popoverEl.querySelector("button");
|
|
171
|
+
popoverBtn && popoverBtn.click();
|
|
172
|
+
}
|
|
173
|
+
}
|
|
146
174
|
focusNext() {
|
|
147
175
|
const activeEl = functions.checkForActiveElInShadow(document.activeElement);
|
|
148
176
|
const index =
|
|
@@ -295,9 +323,6 @@ const Chart = class {
|
|
|
295
323
|
setHybridType() {
|
|
296
324
|
this.hybridType = window.innerWidth > 1340 ? "doughnut0" : "bar1";
|
|
297
325
|
}
|
|
298
|
-
getType() {
|
|
299
|
-
return this.chartType === "hybrid" ? this.hybridType : this.chartType;
|
|
300
|
-
}
|
|
301
326
|
/* GET THE DATA */
|
|
302
327
|
async getData() {
|
|
303
328
|
this.slicesData = [];
|
|
@@ -324,8 +349,8 @@ const Chart = class {
|
|
|
324
349
|
inSmallCluster = true;
|
|
325
350
|
}
|
|
326
351
|
// for bar5, first color should be skipped unless notStartedColor is set to true
|
|
327
|
-
const ind = this.
|
|
328
|
-
const color = this.types[this.
|
|
352
|
+
const ind = this.currentChartType === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
|
|
353
|
+
const color = this.types[this.currentChartType].colors[ind];
|
|
329
354
|
const sliceData = {
|
|
330
355
|
amount: amount,
|
|
331
356
|
perc: perc,
|
|
@@ -342,16 +367,10 @@ const Chart = class {
|
|
|
342
367
|
acc += amount;
|
|
343
368
|
this.slicesData.push(sliceData);
|
|
344
369
|
});
|
|
345
|
-
this.chartData = this.types[this.
|
|
346
|
-
}
|
|
347
|
-
getSliceEls() {
|
|
348
|
-
if (this.svgEl) {
|
|
349
|
-
this.sliceEls = Array.from(this.svgEl.querySelectorAll(this.chartData.isBar ? "rect" : "path"));
|
|
350
|
-
}
|
|
370
|
+
this.chartData = this.types[this.currentChartType];
|
|
351
371
|
}
|
|
352
372
|
handleResize() {
|
|
353
|
-
|
|
354
|
-
if (this.chartType.includes("bar") || this.chartType === "hybrid") {
|
|
373
|
+
if (this.chartType === "hybrid") {
|
|
355
374
|
this.debouncedResize();
|
|
356
375
|
}
|
|
357
376
|
}
|
|
@@ -367,12 +386,6 @@ const Chart = class {
|
|
|
367
386
|
}
|
|
368
387
|
await this.getData();
|
|
369
388
|
}
|
|
370
|
-
componentDidLoad() {
|
|
371
|
-
this.getSliceEls();
|
|
372
|
-
}
|
|
373
|
-
componentDidUpdate() {
|
|
374
|
-
this.getSliceEls();
|
|
375
|
-
}
|
|
376
389
|
handleSliceUpdate() {
|
|
377
390
|
this.debouncedSliceUpdate();
|
|
378
391
|
}
|
|
@@ -383,29 +396,10 @@ const Chart = class {
|
|
|
383
396
|
// DOUGHNUT
|
|
384
397
|
renderDoughnut() {
|
|
385
398
|
const outerSize = this.chartData.size + this.chartData.padding;
|
|
386
|
-
return (index.h("div", { class: "
|
|
399
|
+
return (index.h("div", { class: "chart-wrapper doughnut-wrapper" }, index.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" ? (index.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) + "%")) : (index.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) : "")))))));
|
|
387
400
|
}
|
|
388
401
|
renderPath(s) {
|
|
389
|
-
return (index.h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` }, index.h("path", { id: s.id, fill: s.amount ? s.color : "transparent", d: this.getPathData(s.amount, s.offset), onClick: (ev) => {
|
|
390
|
-
if (this.popoverEl) {
|
|
391
|
-
if (!this.isTabbing) {
|
|
392
|
-
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
393
|
-
this.openPopover(s);
|
|
394
|
-
}
|
|
395
|
-
}
|
|
396
|
-
}, onFocus: (ev) => {
|
|
397
|
-
if (this.popoverEl) {
|
|
398
|
-
if (this.isTabbing) {
|
|
399
|
-
s.coords = functions.getPosition(ev.target);
|
|
400
|
-
this.openPopover(s);
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
}, onKeyDown: (ev) => {
|
|
404
|
-
if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
|
|
405
|
-
const popoverBtn = this.popoverEl.querySelector("button");
|
|
406
|
-
popoverBtn && popoverBtn.click();
|
|
407
|
-
}
|
|
408
|
-
} }), index.h("text", { class: "sr-only" }, s.legend)));
|
|
402
|
+
return (index.h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` }, index.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) }), index.h("text", { class: "sr-only" }, s.legend)));
|
|
409
403
|
}
|
|
410
404
|
renderDoughnutText(s) {
|
|
411
405
|
if (!s.inSmallCluster) {
|
|
@@ -416,59 +410,20 @@ const Chart = class {
|
|
|
416
410
|
}
|
|
417
411
|
// BAR
|
|
418
412
|
renderBar() {
|
|
419
|
-
return (index.h("div", { class: "
|
|
420
|
-
"
|
|
421
|
-
"user-is-tabbing": this.isTabbing,
|
|
413
|
+
return (index.h("div", { class: "chart-wrapper bar-wrapper" }, this.currentChartType === "bar1" ? (index.h("div", { class: "single-perc" }, this.amountToPercent(this.slicesData[0].amount, true) + "%")) : (""), this.drawAxis(), index.h("div", { class: {
|
|
414
|
+
"inner-bar-wrapper": true,
|
|
422
415
|
"show-values": this.tempValueFormat === "percentage" || this.tempValueFormat === "amount",
|
|
423
|
-
} }, this.
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
switch (this.getType()) {
|
|
433
|
-
case "bar2":
|
|
434
|
-
case "bar4":
|
|
435
|
-
case "bar5":
|
|
436
|
-
y = this.tempValueFormat === "percentage" || this.tempValueFormat === "amount" ? "30px" : "0";
|
|
437
|
-
break;
|
|
438
|
-
default:
|
|
439
|
-
y = "0";
|
|
440
|
-
}
|
|
441
|
-
// adjusting the width of the rect slightly ensures repainting on rerenders
|
|
442
|
-
// important for updating width accurate when resizing the page
|
|
443
|
-
const randomTinyNumber = Math.random() / 1000;
|
|
444
|
-
return (index.h("g", { class: "barcontainer" }, index.h("style", null, ` #${s.id} {
|
|
445
|
-
fill:${s.color};
|
|
446
|
-
x: ${`${this.amountToPercent(s.offset, false)}%`};
|
|
447
|
-
y: ${y};
|
|
448
|
-
height: 30px;
|
|
449
|
-
width: calc(${this.amountToPercent(s.amount, false) + randomTinyNumber}%${idx !== this.slicesData.length - 1 ? " - 2px" : ""});
|
|
450
|
-
}`), index.h("rect", { id: s.id, onClick: (ev) => {
|
|
451
|
-
if (this.popoverEl) {
|
|
452
|
-
if (!this.isTabbing) {
|
|
453
|
-
s.coords = { x: ev.clientX, y: ev.clientY };
|
|
454
|
-
this.openPopover(s);
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
}, onFocus: (ev) => {
|
|
458
|
-
if (this.popoverEl) {
|
|
459
|
-
if (this.isTabbing) {
|
|
460
|
-
s.coords = functions.getPosition(ev.target);
|
|
461
|
-
this.openPopover(s);
|
|
462
|
-
}
|
|
463
|
-
}
|
|
464
|
-
}, onKeyDown: (ev) => {
|
|
465
|
-
if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
|
|
466
|
-
const popoverBtn = this.popoverEl.querySelector("button");
|
|
467
|
-
popoverBtn && popoverBtn.click();
|
|
468
|
-
}
|
|
469
|
-
} }), index.h("text", { class: "sr-only" }, s.legend)));
|
|
416
|
+
} }, this.currentChartType !== "bar1" ? (index.h("div", null, this.slicesData.map((s, idx) => (s.perc > 0 ? this.renderBarText(s, idx) : "")))) : (""), index.h("div", { class: "bar-segments-wrapper", ref: (el) => (this.barEl = el) }, this.slicesData.map((s, idx) => this.renderBarSegment(s, idx))))));
|
|
417
|
+
}
|
|
418
|
+
renderBarSegment(s, idx) {
|
|
419
|
+
const isLastSlice = idx !== this.slicesData.length - 1;
|
|
420
|
+
const width = `calc(${this.amountToPercent(s.amount, false)}%${isLastSlice ? " - 2px" : ""})`;
|
|
421
|
+
return (index.h("div", { class: `bar-segment ${this.amountToPercent(s.amount, false) === 0 ? "zero" : ""}`, style: {
|
|
422
|
+
backgroundColor: s.color,
|
|
423
|
+
width: width,
|
|
424
|
+
}, onClick: (ev) => this.handleSliceClick(ev, s), onFocus: (ev) => this.handleSliceFocus(ev, s), onKeyDown: (ev) => this.handleSliceKeyDown(ev) }, index.h("text", { class: "sr-only" }, s.legend)));
|
|
470
425
|
}
|
|
471
|
-
renderBarText(s) {
|
|
426
|
+
renderBarText(s, idx) {
|
|
472
427
|
let val;
|
|
473
428
|
if (this.tempValueFormat === "percentage") {
|
|
474
429
|
val = s.perc + "%";
|
|
@@ -479,10 +434,13 @@ const Chart = class {
|
|
|
479
434
|
else {
|
|
480
435
|
return;
|
|
481
436
|
}
|
|
482
|
-
return (index.h("
|
|
437
|
+
return (index.h("span", { class: "value", style: {
|
|
438
|
+
width: `calc(${this.amountToPercent(s.amount, false)}%
|
|
439
|
+
${idx !== this.slicesData.length - 1 ? " - 2px" : ""}`,
|
|
440
|
+
} }, val));
|
|
483
441
|
}
|
|
484
442
|
drawAxis() {
|
|
485
|
-
if (this.
|
|
443
|
+
if (this.currentChartType === "bar3") {
|
|
486
444
|
return (index.h("svg", { class: "axis" }, index.h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), index.h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), index.h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), index.h("text", { x: "0.5", y: "-6" }, "0%"), index.h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), index.h("text", { x: "100%", y: "-6" }, "100%")));
|
|
487
445
|
}
|
|
488
446
|
}
|
|
@@ -517,7 +475,7 @@ const Chart = class {
|
|
|
517
475
|
functions.intl.formatMessage({
|
|
518
476
|
id: "chart.interactiveChart",
|
|
519
477
|
defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
|
|
520
|
-
}), tabindex: "0" }, index.h("div", { class: `component-wrapper ${this.
|
|
478
|
+
}), tabindex: "0" }, index.h("div", { class: `component-wrapper ${this.currentChartType} ${this.isTabbing ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.chartType === "bar4" ? "left-label" : ""}` }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, index.h("span", { class: "label-text" }, this.label), this.subinfo ? index.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() : "", index.h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", ref: (el) => (this.popoverEl = el) }), this.hybridType === "doughnut0" ? this.renderCompletionMessage() : "")));
|
|
521
479
|
}
|
|
522
480
|
get el() { return index.getElement(this); }
|
|
523
481
|
};
|
|
@@ -40,6 +40,10 @@
|
|
|
40
40
|
/* TODO: replace with vars above whenever possible */
|
|
41
41
|
/* Buttons */
|
|
42
42
|
/* VIA */
|
|
43
|
+
:host {
|
|
44
|
+
width: 100%;
|
|
45
|
+
}
|
|
46
|
+
|
|
43
47
|
.component-wrapper {
|
|
44
48
|
display: flex;
|
|
45
49
|
flex-direction: column;
|
|
@@ -120,46 +124,63 @@
|
|
|
120
124
|
font-style: italic;
|
|
121
125
|
max-width: 100%;
|
|
122
126
|
}
|
|
123
|
-
.component-wrapper .
|
|
127
|
+
.component-wrapper .doughnut-svg,
|
|
128
|
+
.component-wrapper .inner-bar-wrapper {
|
|
124
129
|
overflow: visible;
|
|
125
130
|
}
|
|
126
|
-
.component-wrapper .chart-svg:active, .component-wrapper .chart-svg:hover, .component-wrapper .chart-svg:focus {
|
|
127
|
-
outline: none;
|
|
128
|
-
-webkit-box-shadow: none;
|
|
129
|
-
-moz-box-shadow: none;
|
|
130
|
-
box-shadow: none;
|
|
131
|
-
}
|
|
132
|
-
.component-wrapper .chart-svg::-moz-focus-inner {
|
|
133
|
-
border: 0;
|
|
134
|
-
outline: none;
|
|
135
|
-
}
|
|
136
|
-
.component-wrapper .chart-svg path:active, .component-wrapper .chart-svg path:hover, .component-wrapper .chart-svg path:focus, .component-wrapper .chart-svg rect:active, .component-wrapper .chart-svg rect:hover, .component-wrapper .chart-svg rect:focus {
|
|
137
|
-
outline: none;
|
|
138
|
-
-webkit-box-shadow: none;
|
|
139
|
-
-moz-box-shadow: none;
|
|
140
|
-
box-shadow: none;
|
|
141
|
-
filter: url(#wmHoverDropShadow);
|
|
142
|
-
}
|
|
143
|
-
.component-wrapper .chart-svg path::-moz-focus-inner, .component-wrapper .chart-svg rect::-moz-focus-inner {
|
|
144
|
-
border: 0;
|
|
145
|
-
outline: none;
|
|
146
|
-
}
|
|
147
131
|
.component-wrapper .bar-wrapper {
|
|
148
132
|
flex-grow: 1;
|
|
149
133
|
width: 100%;
|
|
150
134
|
}
|
|
151
|
-
.component-wrapper .bar-wrapper
|
|
135
|
+
.component-wrapper .bar-wrapper .inner-bar-wrapper {
|
|
136
|
+
width: 100%;
|
|
137
|
+
}
|
|
138
|
+
.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper {
|
|
139
|
+
display: flex;
|
|
140
|
+
}
|
|
141
|
+
.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment {
|
|
152
142
|
height: 30px;
|
|
153
143
|
}
|
|
154
|
-
.component-wrapper .
|
|
144
|
+
.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type) {
|
|
145
|
+
margin-right: 2px;
|
|
146
|
+
}
|
|
147
|
+
.component-wrapper .doughnut-wrapper {
|
|
155
148
|
-webkit-border-radius: 4px;
|
|
156
149
|
-moz-border-radius: 4px;
|
|
157
150
|
-ms-border-radius: 4px;
|
|
158
151
|
border-radius: 4px;
|
|
159
152
|
}
|
|
160
|
-
.component-wrapper .
|
|
161
|
-
|
|
162
|
-
|
|
153
|
+
.component-wrapper .value {
|
|
154
|
+
display: inline-block;
|
|
155
|
+
text-align: center;
|
|
156
|
+
}
|
|
157
|
+
.component-wrapper .value:not(:last-of-type) {
|
|
158
|
+
margin-right: 2px;
|
|
159
|
+
}
|
|
160
|
+
.component-wrapper path:active, .component-wrapper path:hover, .component-wrapper path:focus,
|
|
161
|
+
.component-wrapper .bar-segment:active,
|
|
162
|
+
.component-wrapper .bar-segment:hover,
|
|
163
|
+
.component-wrapper .bar-segment:focus {
|
|
164
|
+
outline: none;
|
|
165
|
+
}
|
|
166
|
+
.component-wrapper path:active.bar-segment, .component-wrapper path:hover.bar-segment, .component-wrapper path:focus.bar-segment,
|
|
167
|
+
.component-wrapper .bar-segment:active.bar-segment,
|
|
168
|
+
.component-wrapper .bar-segment:hover.bar-segment,
|
|
169
|
+
.component-wrapper .bar-segment:focus.bar-segment {
|
|
170
|
+
-webkit-box-shadow: 0px 0px 6px #333;
|
|
171
|
+
-moz-box-shadow: 0px 0px 6px #333;
|
|
172
|
+
box-shadow: 0px 0px 6px #333;
|
|
173
|
+
}
|
|
174
|
+
.component-wrapper path:active.doughnut-segment, .component-wrapper path:hover.doughnut-segment, .component-wrapper path:focus.doughnut-segment,
|
|
175
|
+
.component-wrapper .bar-segment:active.doughnut-segment,
|
|
176
|
+
.component-wrapper .bar-segment:hover.doughnut-segment,
|
|
177
|
+
.component-wrapper .bar-segment:focus.doughnut-segment {
|
|
178
|
+
filter: url(#wmHoverDropShadow);
|
|
179
|
+
}
|
|
180
|
+
.component-wrapper path::-moz-focus-inner,
|
|
181
|
+
.component-wrapper .bar-segment::-moz-focus-inner {
|
|
182
|
+
border: 0;
|
|
183
|
+
outline: none;
|
|
163
184
|
}
|
|
164
185
|
.component-wrapper.doughnut1 label,
|
|
165
186
|
.component-wrapper.doughnut1 .label-text, .component-wrapper.doughnut2 label,
|
|
@@ -193,14 +214,6 @@
|
|
|
193
214
|
.component-wrapper.doughnut0 .completion-message {
|
|
194
215
|
padding-top: 0.625rem;
|
|
195
216
|
}
|
|
196
|
-
.component-wrapper .bar-svg {
|
|
197
|
-
width: 100%;
|
|
198
|
-
}
|
|
199
|
-
.component-wrapper .bar-svg foreignObject {
|
|
200
|
-
width: 100%;
|
|
201
|
-
height: 30px;
|
|
202
|
-
overflow: visible;
|
|
203
|
-
}
|
|
204
217
|
.component-wrapper.bar1 {
|
|
205
218
|
padding: 1.25rem;
|
|
206
219
|
position: relative;
|
|
@@ -222,15 +235,15 @@
|
|
|
222
235
|
top: 30px;
|
|
223
236
|
margin-top: 4px;
|
|
224
237
|
}
|
|
225
|
-
.component-wrapper.bar1 .
|
|
238
|
+
.component-wrapper.bar1 .chart-wrapper {
|
|
226
239
|
display: flex;
|
|
227
240
|
align-items: center;
|
|
228
241
|
}
|
|
229
|
-
.component-wrapper.bar1 .
|
|
242
|
+
.component-wrapper.bar1 .chart-wrapper .single-perc {
|
|
230
243
|
width: 4rem;
|
|
231
244
|
flex: none;
|
|
232
245
|
}
|
|
233
|
-
.component-wrapper.bar1 .
|
|
246
|
+
.component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper {
|
|
234
247
|
flex: 1;
|
|
235
248
|
height: 30px;
|
|
236
249
|
}
|
|
@@ -257,31 +270,22 @@
|
|
|
257
270
|
.component-wrapper.bar2, .component-wrapper.bar3, .component-wrapper.bar4, .component-wrapper.bar5 {
|
|
258
271
|
align-items: flex-start;
|
|
259
272
|
}
|
|
260
|
-
.component-wrapper.bar2 .
|
|
261
|
-
padding-bottom: 0;
|
|
262
|
-
}
|
|
263
|
-
.component-wrapper.bar2 .chart-svg, .component-wrapper.bar4 .chart-svg, .component-wrapper.bar5 .chart-svg {
|
|
273
|
+
.component-wrapper.bar2 .inner-bar-wrapper, .component-wrapper.bar4 .inner-bar-wrapper, .component-wrapper.bar5 .inner-bar-wrapper {
|
|
264
274
|
height: 30px;
|
|
265
|
-
margin-top: 20px;
|
|
266
275
|
margin-bottom: 0;
|
|
267
276
|
}
|
|
268
|
-
.component-wrapper.bar2 .
|
|
277
|
+
.component-wrapper.bar2 .inner-bar-wrapper.show-values, .component-wrapper.bar4 .inner-bar-wrapper.show-values, .component-wrapper.bar5 .inner-bar-wrapper.show-values {
|
|
269
278
|
height: 60px;
|
|
270
279
|
margin-top: 0;
|
|
271
|
-
margin-bottom: 0;
|
|
272
|
-
}
|
|
273
|
-
.component-wrapper.bar2 .chart-svg .percs, .component-wrapper.bar4 .chart-svg .percs, .component-wrapper.bar5 .chart-svg .percs {
|
|
274
|
-
transform: translateY(24px);
|
|
275
|
-
text-anchor: middle;
|
|
276
280
|
}
|
|
277
281
|
.component-wrapper.bar3 .legend {
|
|
278
282
|
padding-bottom: 1.25rem;
|
|
279
283
|
}
|
|
280
|
-
.component-wrapper.bar3 .
|
|
284
|
+
.component-wrapper.bar3 .chart-wrapper {
|
|
281
285
|
position: relative;
|
|
282
286
|
height: 100px;
|
|
283
287
|
}
|
|
284
|
-
.component-wrapper.bar3 .
|
|
288
|
+
.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper {
|
|
285
289
|
position: absolute;
|
|
286
290
|
top: 35px;
|
|
287
291
|
left: 0;
|
|
@@ -289,14 +293,10 @@
|
|
|
289
293
|
bottom: 0;
|
|
290
294
|
height: 30px;
|
|
291
295
|
}
|
|
292
|
-
.component-wrapper.bar3 .
|
|
296
|
+
.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text {
|
|
293
297
|
fill: #4a4a4a;
|
|
294
298
|
}
|
|
295
|
-
.component-wrapper.bar3 .
|
|
296
|
-
transform: translateY(-4px);
|
|
297
|
-
text-anchor: middle;
|
|
298
|
-
}
|
|
299
|
-
.component-wrapper.bar3 .svg-wrapper .axis {
|
|
299
|
+
.component-wrapper.bar3 .chart-wrapper .axis {
|
|
300
300
|
position: absolute;
|
|
301
301
|
top: 0;
|
|
302
302
|
left: 0;
|
|
@@ -305,11 +305,11 @@
|
|
|
305
305
|
overflow: visible;
|
|
306
306
|
transform: translateY(90px);
|
|
307
307
|
}
|
|
308
|
-
.component-wrapper.bar3 .
|
|
308
|
+
.component-wrapper.bar3 .chart-wrapper .axis line {
|
|
309
309
|
stroke: #eeedf4;
|
|
310
310
|
stroke-width: 1px;
|
|
311
311
|
}
|
|
312
|
-
.component-wrapper.bar3 .
|
|
312
|
+
.component-wrapper.bar3 .chart-wrapper .axis text {
|
|
313
313
|
transform: translate(4px, 24px);
|
|
314
314
|
text-anchor: middle;
|
|
315
315
|
}
|
|
@@ -330,24 +330,13 @@
|
|
|
330
330
|
:host(:focus) {
|
|
331
331
|
outline: none;
|
|
332
332
|
}
|
|
333
|
-
:host(:focus) .
|
|
334
|
-
|
|
335
|
-
-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;
|
|
336
|
-
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;
|
|
337
|
-
}
|
|
338
|
-
:host(:focus) .chart-svg.user-is-tabbing:not(.show-values)::-moz-focus-inner {
|
|
339
|
-
border: 0;
|
|
340
|
-
}
|
|
341
|
-
:host(:focus) .chart-svg.user-is-tabbing.show-values .tabbing-focus {
|
|
333
|
+
:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,
|
|
334
|
+
:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper {
|
|
342
335
|
-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;
|
|
343
336
|
-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;
|
|
344
337
|
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;
|
|
345
|
-
width: 100%;
|
|
346
|
-
height: 30px;
|
|
347
338
|
}
|
|
348
|
-
:host(:focus) .
|
|
339
|
+
:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,
|
|
340
|
+
:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner {
|
|
349
341
|
border: 0;
|
|
350
|
-
}
|
|
351
|
-
:host(:focus) .chart-svg.user-is-tabbing.show-values .focus-offset {
|
|
352
|
-
transform: translateY(30px);
|
|
353
342
|
}
|