@watermarkinsights/ripple 3.20.0-1 → 3.20.0-3
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/{chartFunctions-0df85acd.js → chartFunctions-d32c8e50.js} +47 -15
- package/dist/cjs/{global-c39855e1.js → global-2cd7ace3.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 +11 -3
- package/dist/cjs/wm-file-list.cjs.entry.js +9 -1
- package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +2 -2
- package/dist/collection/components/charts/wm-chart/wm-chart.css +4 -1
- package/dist/collection/components/charts/wm-chart/wm-chart.js +17 -4
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.css +4 -1
- package/dist/collection/components/wm-file-list/wm-file-list.js +9 -1
- package/dist/collection/global/chartFunctions.js +47 -15
- package/dist/esm/{chartFunctions-30a7edc8.js → chartFunctions-91c2935f.js} +47 -15
- package/dist/esm/{global-42100ed1.js → global-e9844803.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-chart.entry.js +11 -3
- package/dist/esm/wm-file-list.entry.js +9 -1
- package/dist/esm/wm-progress-indicator_3.entry.js +2 -2
- package/dist/esm-es5/chartFunctions-91c2935f.js +1 -0
- package/dist/esm-es5/{global-42100ed1.js → global-e9844803.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.entry.js +1 -1
- package/dist/esm-es5/wm-file-list.entry.js +1 -1
- package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
- package/dist/ripple/p-0ada1e67.js +1 -0
- package/dist/ripple/p-2406fb5f.entry.js +1 -0
- package/dist/ripple/{p-6dc9ce65.system.js → p-550fb511.system.js} +1 -1
- package/dist/ripple/{p-6d037bde.system.js → p-7656d265.system.js} +1 -1
- package/dist/ripple/p-87f4a998.entry.js +1 -0
- package/dist/ripple/p-a0798ac9.system.entry.js +1 -0
- package/dist/ripple/{p-899b1fe3.js → p-a78394a5.js} +1 -1
- package/dist/ripple/p-a8ce8091.system.js +1 -0
- package/dist/ripple/p-b1d1df2d.system.entry.js +1 -0
- package/dist/ripple/p-c9fe83dc.system.entry.js +1 -0
- package/dist/ripple/p-ede6e634.entry.js +1 -0
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/charts/wm-chart/wm-chart.d.ts +3 -2
- package/dist/types/components/wm-file-list/wm-file-list.d.ts +1 -0
- package/dist/types/components.d.ts +3 -3
- package/dist/types/global/interfaces.d.ts +1 -0
- package/package.json +1 -1
- package/dist/esm-es5/chartFunctions-30a7edc8.js +0 -1
- package/dist/ripple/p-0235414d.system.entry.js +0 -1
- package/dist/ripple/p-0fe962e6.entry.js +0 -1
- package/dist/ripple/p-324ce87e.system.entry.js +0 -1
- package/dist/ripple/p-99cbbda6.system.js +0 -1
- package/dist/ripple/p-e329fc71.entry.js +0 -1
- package/dist/ripple/p-e9fb36d9.js +0 -1
- package/dist/ripple/p-ed3f61e9.entry.js +0 -1
- package/dist/ripple/p-ff873f7f.system.entry.js +0 -1
|
@@ -45,6 +45,15 @@ const types = {
|
|
|
45
45
|
padding: 90,
|
|
46
46
|
isBar: false,
|
|
47
47
|
},
|
|
48
|
+
// an internal type only for use when doughnut 2 is populated with 4 slices
|
|
49
|
+
// in this case, the first slice is colored purple
|
|
50
|
+
doughnut2plus: {
|
|
51
|
+
size: 130,
|
|
52
|
+
colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],
|
|
53
|
+
thickness: 0.5,
|
|
54
|
+
padding: 90,
|
|
55
|
+
isBar: false,
|
|
56
|
+
},
|
|
48
57
|
doughnut3: {
|
|
49
58
|
size: 130,
|
|
50
59
|
colors: [colors.lavender, colors.midnight, "#0089e4", colors.forest, "#ea8500", "#d54f41", "#146ca9"],
|
|
@@ -277,22 +286,11 @@ async function getData(chartType) {
|
|
|
277
286
|
children.forEach((c, i) => {
|
|
278
287
|
const amount = parseInt(c.getAttribute("amount") || "0");
|
|
279
288
|
const perc = amountToPercent(amount, this.total, true);
|
|
280
|
-
//
|
|
281
|
-
// to avoid percentage text overlap for small values
|
|
289
|
+
// for determining if slice is in a cluster
|
|
282
290
|
const prev = children[i === 0 ? children.length - 1 : i - 1];
|
|
283
291
|
const prevPerc = amountToPercent(parseInt(prev.getAttribute("amount") || "0"), this.total, true);
|
|
284
292
|
const next = children[i === children.length - 1 ? 0 : i + 1];
|
|
285
293
|
const nextPerc = amountToPercent(parseInt(next.getAttribute("amount") || "0"), this.total, true);
|
|
286
|
-
const isSmall = perc < 4;
|
|
287
|
-
const prevIsSmall = prevPerc < 5;
|
|
288
|
-
const nextIsSmall = nextPerc < 5;
|
|
289
|
-
let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
|
|
290
|
-
// because <1% slice percentage text has an additional character
|
|
291
|
-
// the inSmallCluster threshold needs to be widened for that slice only
|
|
292
|
-
const lessThanOnePerc = perc === 0 && amount > 0;
|
|
293
|
-
if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {
|
|
294
|
-
inSmallCluster = true;
|
|
295
|
-
}
|
|
296
294
|
// for bar5, first color should be skipped unless notStartedColor is set to true
|
|
297
295
|
const ind = chartType === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
|
|
298
296
|
const color = types[chartType].colors[ind];
|
|
@@ -307,12 +305,44 @@ async function getData(chartType) {
|
|
|
307
305
|
text: c.getAttribute("popover-text"),
|
|
308
306
|
buttonText: c.getAttribute("popover-button-text"),
|
|
309
307
|
sliceRef: c,
|
|
310
|
-
inSmallCluster:
|
|
308
|
+
inSmallCluster: isInSmallCluster(prevPerc, perc, amount, nextPerc),
|
|
311
309
|
};
|
|
312
310
|
acc += amount;
|
|
313
311
|
this.slicesData.push(sliceData);
|
|
314
312
|
});
|
|
315
313
|
}
|
|
314
|
+
function sortSlicesData(slicesData) {
|
|
315
|
+
// in doughnut charts, sort slices by decreasing amount
|
|
316
|
+
let sortedSlicesData = [...slicesData].sort((a, b) => a.amount === b.amount ? 0 : a.amount > b.amount ? -1 : 1);
|
|
317
|
+
let acc = 0;
|
|
318
|
+
// recalculate sortedSlice.offsets to reorder rendered result and recluster based on new order
|
|
319
|
+
sortedSlicesData.forEach((s, idx) => {
|
|
320
|
+
// for determining if slice is in a cluster
|
|
321
|
+
const prev = sortedSlicesData[idx === 0 ? sortedSlicesData.length - 1 : idx - 1];
|
|
322
|
+
const prevPerc = amountToPercent(prev.amount, this.total, true);
|
|
323
|
+
const next = sortedSlicesData[idx === sortedSlicesData.length - 1 ? 0 : idx + 1];
|
|
324
|
+
const nextPerc = amountToPercent(next.amount, this.total, true);
|
|
325
|
+
s.offset = acc;
|
|
326
|
+
acc += s.amount;
|
|
327
|
+
s.inSmallCluster = isInSmallCluster(prevPerc, s.perc, s.amount, nextPerc);
|
|
328
|
+
});
|
|
329
|
+
return sortedSlicesData;
|
|
330
|
+
}
|
|
331
|
+
function isInSmallCluster(prevPerc, perc, amount, nextPerc) {
|
|
332
|
+
// determine whether the slice is in a cluster of small values
|
|
333
|
+
// to avoid percentage text overlap for small values
|
|
334
|
+
const isSmall = perc < 4;
|
|
335
|
+
const prevIsSmall = prevPerc < 5;
|
|
336
|
+
const nextIsSmall = nextPerc < 5;
|
|
337
|
+
let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
|
|
338
|
+
// because <1% slice percentage text has an additional character
|
|
339
|
+
// the inSmallCluster threshold needs to be widened for that slice only
|
|
340
|
+
const lessThanOnePerc = perc === 0 && amount > 0;
|
|
341
|
+
if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {
|
|
342
|
+
inSmallCluster = true;
|
|
343
|
+
}
|
|
344
|
+
return inSmallCluster;
|
|
345
|
+
}
|
|
316
346
|
function getPathData(amount, offset, chartType) {
|
|
317
347
|
const startAngle = amountToDegree(offset, this.total) - 90; // start at noon, not at 3 o'clock
|
|
318
348
|
const activeAngle = (amount / this.total) * 360;
|
|
@@ -353,11 +383,13 @@ function renderFilter() {
|
|
|
353
383
|
function renderDoughnut(chartType) {
|
|
354
384
|
const outerSize = this.chartData.size + this.chartData.padding;
|
|
355
385
|
const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
|
|
386
|
+
// sorting does not occur for progress indicators
|
|
387
|
+
let slicesData = isHybridDoughnut ? this.slicesData : sortSlicesData.call(this, this.slicesData);
|
|
356
388
|
return (index.h("div", { class: "chart-wrapper doughnut-wrapper" },
|
|
357
389
|
index.h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
|
|
358
390
|
renderFilter(),
|
|
359
|
-
|
|
360
|
-
isHybridDoughnut ? (index.h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(
|
|
391
|
+
slicesData.map((s) => renderPath.call(this, s, chartType)),
|
|
392
|
+
isHybridDoughnut ? (index.h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(slicesData[0].amount, this.total, true) + "%")) : (index.h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesData.map((s) => (s.amount > 0 ? renderDoughnutText.call(this, s) : "")))))));
|
|
361
393
|
}
|
|
362
394
|
function renderPath(s, chartType) {
|
|
363
395
|
return (index.h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` },
|
package/dist/cjs/loader.cjs.js
CHANGED
package/dist/cjs/ripple.cjs.js
CHANGED
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-df6a3611.js');
|
|
6
6
|
const functions = require('./functions-8a1e2619.js');
|
|
7
|
-
const chartFunctions = require('./chartFunctions-
|
|
7
|
+
const chartFunctions = require('./chartFunctions-d32c8e50.js');
|
|
8
8
|
|
|
9
|
-
const wmChartCss = ":host .component-wrapper,wm-chart .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;}:host .component-wrapper .label,wm-chart .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-chart .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-chart .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-chart .component-wrapper .doughnut-svg,:host .component-wrapper .inner-bar-wrapper,wm-chart .component-wrapper .inner-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-chart .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .values,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type),wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-chart .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-chart .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value,wm-chart .component-wrapper .value{display:inline-block;text-align:center}:host .component-wrapper .value:not(:last-of-type),wm-chart .component-wrapper .value:not(:last-of-type){margin-right:2px}:host .component-wrapper path:active,wm-chart .component-wrapper path:active,:host .component-wrapper path:hover,wm-chart .component-wrapper path:hover,:host .component-wrapper path:focus,wm-chart .component-wrapper path:focus,:host .component-wrapper .bar-segment:active,wm-chart .component-wrapper .bar-segment:active,:host .component-wrapper .bar-segment:hover,wm-chart .component-wrapper .bar-segment:hover,:host .component-wrapper .bar-segment:focus,wm-chart .component-wrapper .bar-segment:focus{outline:none}:host .component-wrapper .bar-segment:active.bar-segment,wm-chart .component-wrapper .bar-segment:active.bar-segment,:host .component-wrapper .bar-segment:hover.bar-segment,wm-chart .component-wrapper .bar-segment:hover.bar-segment,:host .component-wrapper .bar-segment:focus.bar-segment,wm-chart .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}:host .component-wrapper path:active.doughnut-segment,wm-chart .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-chart .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-chart .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .bar-segment:active.doughnut-segment,wm-chart .component-wrapper .bar-segment:active.doughnut-segment,:host .component-wrapper .bar-segment:hover.doughnut-segment,wm-chart .component-wrapper .bar-segment:hover.doughnut-segment,:host .component-wrapper .bar-segment:focus.doughnut-segment,wm-chart .component-wrapper .bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-chart .component-wrapper path::-moz-focus-inner,:host .component-wrapper .bar-segment::-moz-focus-inner,wm-chart .component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-chart .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-chart .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-chart .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-chart .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut3 label,wm-chart .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-chart .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-chart .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-chart .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-chart .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-chart .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-chart .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-chart .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-chart .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-chart .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-chart .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-chart .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-chart .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-chart .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-bar-wrapper,wm-chart .component-wrapper.bar .chart-wrapper .inner-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-chart .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-chart .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-chart .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-chart .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-chart .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-chart .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-chart .component-wrapper.bar2,:host .component-wrapper.bar3,wm-chart .component-wrapper.bar3,:host .component-wrapper.bar4,wm-chart .component-wrapper.bar4,:host .component-wrapper.bar5,wm-chart .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-bar-wrapper,wm-chart .component-wrapper.bar2 .inner-bar-wrapper,:host .component-wrapper.bar4 .inner-bar-wrapper,wm-chart .component-wrapper.bar4 .inner-bar-wrapper,:host .component-wrapper.bar5 .inner-bar-wrapper,wm-chart .component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-bar-wrapper.show-values,wm-chart .component-wrapper.bar2 .inner-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-bar-wrapper.show-values,wm-chart .component-wrapper.bar4 .inner-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-bar-wrapper.show-values,wm-chart .component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-chart .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-chart .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-chart .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.left-label,wm-chart .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-chart .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .legend-wrapper,wm-chart .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-chart .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.--top,wm-chart .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-chart .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-chart .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-chart .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-chart .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-chart .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar1,wm-chart .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar,wm-chart .component-wrapper .legend-wrapper .legend.bar{display:none}:host .component-wrapper .legend-wrapper .legend.bar3,wm-chart .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host .component-wrapper .legend-wrapper .cluster-warning,wm-chart .component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}: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
|
+
const wmChartCss = ":host .component-wrapper,wm-chart .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;}:host .component-wrapper .label,wm-chart .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-chart .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-chart .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-chart .component-wrapper .doughnut-svg,:host .component-wrapper .inner-bar-wrapper,wm-chart .component-wrapper .inner-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-chart .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .values,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment,wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type),wm-chart .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-chart .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-chart .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value,wm-chart .component-wrapper .value{display:inline-block;text-align:center}:host .component-wrapper .value:not(:last-of-type),wm-chart .component-wrapper .value:not(:last-of-type){margin-right:2px}:host .component-wrapper path:active,wm-chart .component-wrapper path:active,:host .component-wrapper path:hover,wm-chart .component-wrapper path:hover,:host .component-wrapper path:focus,wm-chart .component-wrapper path:focus,:host .component-wrapper .bar-segment:active,wm-chart .component-wrapper .bar-segment:active,:host .component-wrapper .bar-segment:hover,wm-chart .component-wrapper .bar-segment:hover,:host .component-wrapper .bar-segment:focus,wm-chart .component-wrapper .bar-segment:focus{outline:none}:host .component-wrapper .bar-segment:active.bar-segment,wm-chart .component-wrapper .bar-segment:active.bar-segment,:host .component-wrapper .bar-segment:hover.bar-segment,wm-chart .component-wrapper .bar-segment:hover.bar-segment,:host .component-wrapper .bar-segment:focus.bar-segment,wm-chart .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}:host .component-wrapper path:active.doughnut-segment,wm-chart .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-chart .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-chart .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .bar-segment:active.doughnut-segment,wm-chart .component-wrapper .bar-segment:active.doughnut-segment,:host .component-wrapper .bar-segment:hover.doughnut-segment,wm-chart .component-wrapper .bar-segment:hover.doughnut-segment,:host .component-wrapper .bar-segment:focus.doughnut-segment,wm-chart .component-wrapper .bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-chart .component-wrapper path::-moz-focus-inner,:host .component-wrapper .bar-segment::-moz-focus-inner,wm-chart .component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-chart .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-chart .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-chart .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-chart .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2plus label,wm-chart .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-chart .component-wrapper.doughnut2plus .label-text,:host .component-wrapper.doughnut3 label,wm-chart .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-chart .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-chart .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-chart .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-chart .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-chart .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-chart .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-chart .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-chart .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-chart .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-chart .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-chart .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-chart .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-chart .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-bar-wrapper,wm-chart .component-wrapper.bar .chart-wrapper .inner-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-chart .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-chart .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-chart .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-chart .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-chart .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-chart .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-chart .component-wrapper.bar2,:host .component-wrapper.bar3,wm-chart .component-wrapper.bar3,:host .component-wrapper.bar4,wm-chart .component-wrapper.bar4,:host .component-wrapper.bar5,wm-chart .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-bar-wrapper,wm-chart .component-wrapper.bar2 .inner-bar-wrapper,:host .component-wrapper.bar4 .inner-bar-wrapper,wm-chart .component-wrapper.bar4 .inner-bar-wrapper,:host .component-wrapper.bar5 .inner-bar-wrapper,wm-chart .component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-bar-wrapper.show-values,wm-chart .component-wrapper.bar2 .inner-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-bar-wrapper.show-values,wm-chart .component-wrapper.bar4 .inner-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-bar-wrapper.show-values,wm-chart .component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-chart .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-chart .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-chart .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.left-label,wm-chart .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-chart .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .legend-wrapper,wm-chart .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-chart .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.--top,wm-chart .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-chart .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-chart .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-chart .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-chart .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-chart .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar1,wm-chart .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar,wm-chart .component-wrapper .legend-wrapper .legend.bar{display:none}:host .component-wrapper .legend-wrapper .legend.bar3,wm-chart .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host .component-wrapper .legend-wrapper .cluster-warning,wm-chart .component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}: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}";
|
|
10
10
|
|
|
11
11
|
const Chart = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -49,7 +49,15 @@ const Chart = class {
|
|
|
49
49
|
return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
|
|
50
50
|
}
|
|
51
51
|
get currentChartType() {
|
|
52
|
-
|
|
52
|
+
let output = this.chartType;
|
|
53
|
+
if (this.chartType === "hybrid") {
|
|
54
|
+
output = this.hybridType;
|
|
55
|
+
}
|
|
56
|
+
else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
|
|
57
|
+
// render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
|
|
58
|
+
output = "doughnut2plus";
|
|
59
|
+
}
|
|
60
|
+
return output;
|
|
53
61
|
}
|
|
54
62
|
get chartData() {
|
|
55
63
|
return chartFunctions.types[this.currentChartType];
|
|
@@ -14,8 +14,16 @@ const FileList = class {
|
|
|
14
14
|
get fileList() {
|
|
15
15
|
return this.files ? JSON.parse(this.files) : [];
|
|
16
16
|
}
|
|
17
|
+
renderFile(file) {
|
|
18
|
+
// file list does not allow for default file actions
|
|
19
|
+
// if none are passed, display no buttons
|
|
20
|
+
if (file.fileActions === undefined) {
|
|
21
|
+
file.fileActions = "";
|
|
22
|
+
}
|
|
23
|
+
return index.h("wm-file", { file: JSON.stringify(file), "show-info": this.showInfo });
|
|
24
|
+
}
|
|
17
25
|
render() {
|
|
18
|
-
return (index.h("div", { role: "list", class: "list-wrapper" }, this.fileList.map((file) =>
|
|
26
|
+
return (index.h("div", { role: "list", class: "list-wrapper" }, this.fileList.map((file) => this.renderFile(file))));
|
|
19
27
|
}
|
|
20
28
|
get el() { return index.getElement(this); }
|
|
21
29
|
};
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-df6a3611.js');
|
|
6
6
|
const functions = require('./functions-8a1e2619.js');
|
|
7
|
-
const chartFunctions = require('./chartFunctions-
|
|
7
|
+
const chartFunctions = require('./chartFunctions-d32c8e50.js');
|
|
8
8
|
|
|
9
|
-
const wmProgressIndicatorCss = ":host .component-wrapper,wm-progress-indicator .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;}:host .component-wrapper .label,wm-progress-indicator .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-progress-indicator .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-progress-indicator .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-progress-indicator .component-wrapper .doughnut-svg,:host .component-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper .inner-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .values,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type),wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-progress-indicator .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-progress-indicator .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value,wm-progress-indicator .component-wrapper .value{display:inline-block;text-align:center}:host .component-wrapper .value:not(:last-of-type),wm-progress-indicator .component-wrapper .value:not(:last-of-type){margin-right:2px}:host .component-wrapper path:active,wm-progress-indicator .component-wrapper path:active,:host .component-wrapper path:hover,wm-progress-indicator .component-wrapper path:hover,:host .component-wrapper path:focus,wm-progress-indicator .component-wrapper path:focus,:host .component-wrapper .bar-segment:active,wm-progress-indicator .component-wrapper .bar-segment:active,:host .component-wrapper .bar-segment:hover,wm-progress-indicator .component-wrapper .bar-segment:hover,:host .component-wrapper .bar-segment:focus,wm-progress-indicator .component-wrapper .bar-segment:focus{outline:none}:host .component-wrapper .bar-segment:active.bar-segment,wm-progress-indicator .component-wrapper .bar-segment:active.bar-segment,:host .component-wrapper .bar-segment:hover.bar-segment,wm-progress-indicator .component-wrapper .bar-segment:hover.bar-segment,:host .component-wrapper .bar-segment:focus.bar-segment,wm-progress-indicator .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}:host .component-wrapper path:active.doughnut-segment,wm-progress-indicator .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-progress-indicator .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-progress-indicator .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .bar-segment:active.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:active.doughnut-segment,:host .component-wrapper .bar-segment:hover.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:hover.doughnut-segment,:host .component-wrapper .bar-segment:focus.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-progress-indicator .component-wrapper path::-moz-focus-inner,:host .component-wrapper .bar-segment::-moz-focus-inner,wm-progress-indicator .component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-progress-indicator .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-progress-indicator .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-progress-indicator .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-progress-indicator .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut3 label,wm-progress-indicator .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-progress-indicator .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-progress-indicator .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-progress-indicator .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-progress-indicator .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-progress-indicator .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-progress-indicator .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-progress-indicator .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-progress-indicator .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-progress-indicator .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-progress-indicator .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper .inner-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-progress-indicator .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-progress-indicator .component-wrapper.bar2,:host .component-wrapper.bar3,wm-progress-indicator .component-wrapper.bar3,:host .component-wrapper.bar4,wm-progress-indicator .component-wrapper.bar4,:host .component-wrapper.bar5,wm-progress-indicator .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar2 .inner-bar-wrapper,:host .component-wrapper.bar4 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar4 .inner-bar-wrapper,:host .component-wrapper.bar5 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar2 .inner-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar4 .inner-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.left-label,wm-progress-indicator .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-progress-indicator .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .legend-wrapper,wm-progress-indicator .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-progress-indicator .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.--top,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar1,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar{display:none}:host .component-wrapper .legend-wrapper .legend.bar3,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host .component-wrapper .legend-wrapper .cluster-warning,wm-progress-indicator .component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}: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
|
+
const wmProgressIndicatorCss = ":host .component-wrapper,wm-progress-indicator .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;}:host .component-wrapper .label,wm-progress-indicator .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-progress-indicator .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-progress-indicator .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-progress-indicator .component-wrapper .doughnut-svg,:host .component-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper .inner-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .values,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type),wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-progress-indicator .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-progress-indicator .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value,wm-progress-indicator .component-wrapper .value{display:inline-block;text-align:center}:host .component-wrapper .value:not(:last-of-type),wm-progress-indicator .component-wrapper .value:not(:last-of-type){margin-right:2px}:host .component-wrapper path:active,wm-progress-indicator .component-wrapper path:active,:host .component-wrapper path:hover,wm-progress-indicator .component-wrapper path:hover,:host .component-wrapper path:focus,wm-progress-indicator .component-wrapper path:focus,:host .component-wrapper .bar-segment:active,wm-progress-indicator .component-wrapper .bar-segment:active,:host .component-wrapper .bar-segment:hover,wm-progress-indicator .component-wrapper .bar-segment:hover,:host .component-wrapper .bar-segment:focus,wm-progress-indicator .component-wrapper .bar-segment:focus{outline:none}:host .component-wrapper .bar-segment:active.bar-segment,wm-progress-indicator .component-wrapper .bar-segment:active.bar-segment,:host .component-wrapper .bar-segment:hover.bar-segment,wm-progress-indicator .component-wrapper .bar-segment:hover.bar-segment,:host .component-wrapper .bar-segment:focus.bar-segment,wm-progress-indicator .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}:host .component-wrapper path:active.doughnut-segment,wm-progress-indicator .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-progress-indicator .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-progress-indicator .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .bar-segment:active.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:active.doughnut-segment,:host .component-wrapper .bar-segment:hover.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:hover.doughnut-segment,:host .component-wrapper .bar-segment:focus.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-progress-indicator .component-wrapper path::-moz-focus-inner,:host .component-wrapper .bar-segment::-moz-focus-inner,wm-progress-indicator .component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-progress-indicator .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-progress-indicator .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-progress-indicator .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-progress-indicator .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2plus label,wm-progress-indicator .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-progress-indicator .component-wrapper.doughnut2plus .label-text,:host .component-wrapper.doughnut3 label,wm-progress-indicator .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-progress-indicator .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-progress-indicator .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-progress-indicator .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-progress-indicator .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-progress-indicator .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-progress-indicator .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-progress-indicator .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-progress-indicator .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-progress-indicator .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-progress-indicator .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper .inner-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-progress-indicator .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-progress-indicator .component-wrapper.bar2,:host .component-wrapper.bar3,wm-progress-indicator .component-wrapper.bar3,:host .component-wrapper.bar4,wm-progress-indicator .component-wrapper.bar4,:host .component-wrapper.bar5,wm-progress-indicator .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar2 .inner-bar-wrapper,:host .component-wrapper.bar4 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar4 .inner-bar-wrapper,:host .component-wrapper.bar5 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar2 .inner-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar4 .inner-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.left-label,wm-progress-indicator .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-progress-indicator .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .legend-wrapper,wm-progress-indicator .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-progress-indicator .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.--top,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar1,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar{display:none}:host .component-wrapper .legend-wrapper .legend.bar3,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host .component-wrapper .legend-wrapper .cluster-warning,wm-progress-indicator .component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}: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}";
|
|
10
10
|
|
|
11
11
|
const ProgressIndicator = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -171,7 +171,10 @@ wm-chart .component-wrapper.doughnut1 label,
|
|
|
171
171
|
wm-chart .component-wrapper.doughnut1 .label-text, :host .component-wrapper.doughnut2 label,
|
|
172
172
|
wm-chart .component-wrapper.doughnut2 label,
|
|
173
173
|
:host .component-wrapper.doughnut2 .label-text,
|
|
174
|
-
wm-chart .component-wrapper.doughnut2 .label-text, :host .component-wrapper.
|
|
174
|
+
wm-chart .component-wrapper.doughnut2 .label-text, :host .component-wrapper.doughnut2plus label,
|
|
175
|
+
wm-chart .component-wrapper.doughnut2plus label,
|
|
176
|
+
:host .component-wrapper.doughnut2plus .label-text,
|
|
177
|
+
wm-chart .component-wrapper.doughnut2plus .label-text, :host .component-wrapper.doughnut3 label,
|
|
175
178
|
wm-chart .component-wrapper.doughnut3 label,
|
|
176
179
|
:host .component-wrapper.doughnut3 .label-text,
|
|
177
180
|
wm-chart .component-wrapper.doughnut3 .label-text {
|
|
@@ -42,7 +42,15 @@ export class Chart {
|
|
|
42
42
|
return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
|
|
43
43
|
}
|
|
44
44
|
get currentChartType() {
|
|
45
|
-
|
|
45
|
+
let output = this.chartType;
|
|
46
|
+
if (this.chartType === "hybrid") {
|
|
47
|
+
output = this.hybridType;
|
|
48
|
+
}
|
|
49
|
+
else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
|
|
50
|
+
// render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
|
|
51
|
+
output = "doughnut2plus";
|
|
52
|
+
}
|
|
53
|
+
return output;
|
|
46
54
|
}
|
|
47
55
|
get chartData() {
|
|
48
56
|
return types[this.currentChartType];
|
|
@@ -135,9 +143,14 @@ export class Chart {
|
|
|
135
143
|
"type": "string",
|
|
136
144
|
"mutable": false,
|
|
137
145
|
"complexType": {
|
|
138
|
-
"original": "
|
|
139
|
-
"resolved": "\"bar1\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\" | \"doughnut1\" | \"doughnut2\" | \"doughnut3\" | \"hybrid\"",
|
|
140
|
-
"references": {
|
|
146
|
+
"original": "AllCharts",
|
|
147
|
+
"resolved": "\"bar1\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\" | \"doughnut0\" | \"doughnut1\" | \"doughnut2\" | \"doughnut2plus\" | \"doughnut3\" | \"hybrid\"",
|
|
148
|
+
"references": {
|
|
149
|
+
"AllCharts": {
|
|
150
|
+
"location": "import",
|
|
151
|
+
"path": "../../../global/interfaces"
|
|
152
|
+
}
|
|
153
|
+
}
|
|
141
154
|
},
|
|
142
155
|
"required": false,
|
|
143
156
|
"optional": false,
|
|
@@ -171,7 +171,10 @@ wm-progress-indicator .component-wrapper.doughnut1 label,
|
|
|
171
171
|
wm-progress-indicator .component-wrapper.doughnut1 .label-text, :host .component-wrapper.doughnut2 label,
|
|
172
172
|
wm-progress-indicator .component-wrapper.doughnut2 label,
|
|
173
173
|
:host .component-wrapper.doughnut2 .label-text,
|
|
174
|
-
wm-progress-indicator .component-wrapper.doughnut2 .label-text, :host .component-wrapper.
|
|
174
|
+
wm-progress-indicator .component-wrapper.doughnut2 .label-text, :host .component-wrapper.doughnut2plus label,
|
|
175
|
+
wm-progress-indicator .component-wrapper.doughnut2plus label,
|
|
176
|
+
:host .component-wrapper.doughnut2plus .label-text,
|
|
177
|
+
wm-progress-indicator .component-wrapper.doughnut2plus .label-text, :host .component-wrapper.doughnut3 label,
|
|
175
178
|
wm-progress-indicator .component-wrapper.doughnut3 label,
|
|
176
179
|
:host .component-wrapper.doughnut3 .label-text,
|
|
177
180
|
wm-progress-indicator .component-wrapper.doughnut3 .label-text {
|
|
@@ -6,8 +6,16 @@ export class FileList {
|
|
|
6
6
|
get fileList() {
|
|
7
7
|
return this.files ? JSON.parse(this.files) : [];
|
|
8
8
|
}
|
|
9
|
+
renderFile(file) {
|
|
10
|
+
// file list does not allow for default file actions
|
|
11
|
+
// if none are passed, display no buttons
|
|
12
|
+
if (file.fileActions === undefined) {
|
|
13
|
+
file.fileActions = "";
|
|
14
|
+
}
|
|
15
|
+
return h("wm-file", { file: JSON.stringify(file), "show-info": this.showInfo });
|
|
16
|
+
}
|
|
9
17
|
render() {
|
|
10
|
-
return (h("div", { role: "list", class: "list-wrapper" }, this.fileList.map((file) =>
|
|
18
|
+
return (h("div", { role: "list", class: "list-wrapper" }, this.fileList.map((file) => this.renderFile(file))));
|
|
11
19
|
}
|
|
12
20
|
static get is() { return "wm-file-list"; }
|
|
13
21
|
static get encapsulation() { return "shadow"; }
|
|
@@ -42,6 +42,15 @@ export const types = {
|
|
|
42
42
|
padding: 90,
|
|
43
43
|
isBar: false,
|
|
44
44
|
},
|
|
45
|
+
// an internal type only for use when doughnut 2 is populated with 4 slices
|
|
46
|
+
// in this case, the first slice is colored purple
|
|
47
|
+
doughnut2plus: {
|
|
48
|
+
size: 130,
|
|
49
|
+
colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],
|
|
50
|
+
thickness: 0.5,
|
|
51
|
+
padding: 90,
|
|
52
|
+
isBar: false,
|
|
53
|
+
},
|
|
45
54
|
doughnut3: {
|
|
46
55
|
size: 130,
|
|
47
56
|
colors: [colors.lavender, colors.midnight, "#0089e4", colors.forest, "#ea8500", "#d54f41", "#146ca9"],
|
|
@@ -274,22 +283,11 @@ export async function getData(chartType) {
|
|
|
274
283
|
children.forEach((c, i) => {
|
|
275
284
|
const amount = parseInt(c.getAttribute("amount") || "0");
|
|
276
285
|
const perc = amountToPercent(amount, this.total, true);
|
|
277
|
-
//
|
|
278
|
-
// to avoid percentage text overlap for small values
|
|
286
|
+
// for determining if slice is in a cluster
|
|
279
287
|
const prev = children[i === 0 ? children.length - 1 : i - 1];
|
|
280
288
|
const prevPerc = amountToPercent(parseInt(prev.getAttribute("amount") || "0"), this.total, true);
|
|
281
289
|
const next = children[i === children.length - 1 ? 0 : i + 1];
|
|
282
290
|
const nextPerc = amountToPercent(parseInt(next.getAttribute("amount") || "0"), this.total, true);
|
|
283
|
-
const isSmall = perc < 4;
|
|
284
|
-
const prevIsSmall = prevPerc < 5;
|
|
285
|
-
const nextIsSmall = nextPerc < 5;
|
|
286
|
-
let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
|
|
287
|
-
// because <1% slice percentage text has an additional character
|
|
288
|
-
// the inSmallCluster threshold needs to be widened for that slice only
|
|
289
|
-
const lessThanOnePerc = perc === 0 && amount > 0;
|
|
290
|
-
if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {
|
|
291
|
-
inSmallCluster = true;
|
|
292
|
-
}
|
|
293
291
|
// for bar5, first color should be skipped unless notStartedColor is set to true
|
|
294
292
|
const ind = chartType === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
|
|
295
293
|
const color = types[chartType].colors[ind];
|
|
@@ -304,12 +302,44 @@ export async function getData(chartType) {
|
|
|
304
302
|
text: c.getAttribute("popover-text"),
|
|
305
303
|
buttonText: c.getAttribute("popover-button-text"),
|
|
306
304
|
sliceRef: c,
|
|
307
|
-
inSmallCluster:
|
|
305
|
+
inSmallCluster: isInSmallCluster(prevPerc, perc, amount, nextPerc),
|
|
308
306
|
};
|
|
309
307
|
acc += amount;
|
|
310
308
|
this.slicesData.push(sliceData);
|
|
311
309
|
});
|
|
312
310
|
}
|
|
311
|
+
function sortSlicesData(slicesData) {
|
|
312
|
+
// in doughnut charts, sort slices by decreasing amount
|
|
313
|
+
let sortedSlicesData = [...slicesData].sort((a, b) => a.amount === b.amount ? 0 : a.amount > b.amount ? -1 : 1);
|
|
314
|
+
let acc = 0;
|
|
315
|
+
// recalculate sortedSlice.offsets to reorder rendered result and recluster based on new order
|
|
316
|
+
sortedSlicesData.forEach((s, idx) => {
|
|
317
|
+
// for determining if slice is in a cluster
|
|
318
|
+
const prev = sortedSlicesData[idx === 0 ? sortedSlicesData.length - 1 : idx - 1];
|
|
319
|
+
const prevPerc = amountToPercent(prev.amount, this.total, true);
|
|
320
|
+
const next = sortedSlicesData[idx === sortedSlicesData.length - 1 ? 0 : idx + 1];
|
|
321
|
+
const nextPerc = amountToPercent(next.amount, this.total, true);
|
|
322
|
+
s.offset = acc;
|
|
323
|
+
acc += s.amount;
|
|
324
|
+
s.inSmallCluster = isInSmallCluster(prevPerc, s.perc, s.amount, nextPerc);
|
|
325
|
+
});
|
|
326
|
+
return sortedSlicesData;
|
|
327
|
+
}
|
|
328
|
+
function isInSmallCluster(prevPerc, perc, amount, nextPerc) {
|
|
329
|
+
// determine whether the slice is in a cluster of small values
|
|
330
|
+
// to avoid percentage text overlap for small values
|
|
331
|
+
const isSmall = perc < 4;
|
|
332
|
+
const prevIsSmall = prevPerc < 5;
|
|
333
|
+
const nextIsSmall = nextPerc < 5;
|
|
334
|
+
let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
|
|
335
|
+
// because <1% slice percentage text has an additional character
|
|
336
|
+
// the inSmallCluster threshold needs to be widened for that slice only
|
|
337
|
+
const lessThanOnePerc = perc === 0 && amount > 0;
|
|
338
|
+
if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {
|
|
339
|
+
inSmallCluster = true;
|
|
340
|
+
}
|
|
341
|
+
return inSmallCluster;
|
|
342
|
+
}
|
|
313
343
|
function getPathData(amount, offset, chartType) {
|
|
314
344
|
const startAngle = amountToDegree(offset, this.total) - 90; // start at noon, not at 3 o'clock
|
|
315
345
|
const activeAngle = (amount / this.total) * 360;
|
|
@@ -350,11 +380,13 @@ function renderFilter() {
|
|
|
350
380
|
export function renderDoughnut(chartType) {
|
|
351
381
|
const outerSize = this.chartData.size + this.chartData.padding;
|
|
352
382
|
const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
|
|
383
|
+
// sorting does not occur for progress indicators
|
|
384
|
+
let slicesData = isHybridDoughnut ? this.slicesData : sortSlicesData.call(this, this.slicesData);
|
|
353
385
|
return (h("div", { class: "chart-wrapper doughnut-wrapper" },
|
|
354
386
|
h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
|
|
355
387
|
renderFilter(),
|
|
356
|
-
|
|
357
|
-
isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(
|
|
388
|
+
slicesData.map((s) => renderPath.call(this, s, chartType)),
|
|
389
|
+
isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(slicesData[0].amount, this.total, true) + "%")) : (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesData.map((s) => (s.amount > 0 ? renderDoughnutText.call(this, s) : "")))))));
|
|
358
390
|
}
|
|
359
391
|
function renderPath(s, chartType) {
|
|
360
392
|
return (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` },
|
|
@@ -43,6 +43,15 @@ const types = {
|
|
|
43
43
|
padding: 90,
|
|
44
44
|
isBar: false,
|
|
45
45
|
},
|
|
46
|
+
// an internal type only for use when doughnut 2 is populated with 4 slices
|
|
47
|
+
// in this case, the first slice is colored purple
|
|
48
|
+
doughnut2plus: {
|
|
49
|
+
size: 130,
|
|
50
|
+
colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],
|
|
51
|
+
thickness: 0.5,
|
|
52
|
+
padding: 90,
|
|
53
|
+
isBar: false,
|
|
54
|
+
},
|
|
46
55
|
doughnut3: {
|
|
47
56
|
size: 130,
|
|
48
57
|
colors: [colors.lavender, colors.midnight, "#0089e4", colors.forest, "#ea8500", "#d54f41", "#146ca9"],
|
|
@@ -275,22 +284,11 @@ async function getData(chartType) {
|
|
|
275
284
|
children.forEach((c, i) => {
|
|
276
285
|
const amount = parseInt(c.getAttribute("amount") || "0");
|
|
277
286
|
const perc = amountToPercent(amount, this.total, true);
|
|
278
|
-
//
|
|
279
|
-
// to avoid percentage text overlap for small values
|
|
287
|
+
// for determining if slice is in a cluster
|
|
280
288
|
const prev = children[i === 0 ? children.length - 1 : i - 1];
|
|
281
289
|
const prevPerc = amountToPercent(parseInt(prev.getAttribute("amount") || "0"), this.total, true);
|
|
282
290
|
const next = children[i === children.length - 1 ? 0 : i + 1];
|
|
283
291
|
const nextPerc = amountToPercent(parseInt(next.getAttribute("amount") || "0"), this.total, true);
|
|
284
|
-
const isSmall = perc < 4;
|
|
285
|
-
const prevIsSmall = prevPerc < 5;
|
|
286
|
-
const nextIsSmall = nextPerc < 5;
|
|
287
|
-
let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
|
|
288
|
-
// because <1% slice percentage text has an additional character
|
|
289
|
-
// the inSmallCluster threshold needs to be widened for that slice only
|
|
290
|
-
const lessThanOnePerc = perc === 0 && amount > 0;
|
|
291
|
-
if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {
|
|
292
|
-
inSmallCluster = true;
|
|
293
|
-
}
|
|
294
292
|
// for bar5, first color should be skipped unless notStartedColor is set to true
|
|
295
293
|
const ind = chartType === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
|
|
296
294
|
const color = types[chartType].colors[ind];
|
|
@@ -305,12 +303,44 @@ async function getData(chartType) {
|
|
|
305
303
|
text: c.getAttribute("popover-text"),
|
|
306
304
|
buttonText: c.getAttribute("popover-button-text"),
|
|
307
305
|
sliceRef: c,
|
|
308
|
-
inSmallCluster:
|
|
306
|
+
inSmallCluster: isInSmallCluster(prevPerc, perc, amount, nextPerc),
|
|
309
307
|
};
|
|
310
308
|
acc += amount;
|
|
311
309
|
this.slicesData.push(sliceData);
|
|
312
310
|
});
|
|
313
311
|
}
|
|
312
|
+
function sortSlicesData(slicesData) {
|
|
313
|
+
// in doughnut charts, sort slices by decreasing amount
|
|
314
|
+
let sortedSlicesData = [...slicesData].sort((a, b) => a.amount === b.amount ? 0 : a.amount > b.amount ? -1 : 1);
|
|
315
|
+
let acc = 0;
|
|
316
|
+
// recalculate sortedSlice.offsets to reorder rendered result and recluster based on new order
|
|
317
|
+
sortedSlicesData.forEach((s, idx) => {
|
|
318
|
+
// for determining if slice is in a cluster
|
|
319
|
+
const prev = sortedSlicesData[idx === 0 ? sortedSlicesData.length - 1 : idx - 1];
|
|
320
|
+
const prevPerc = amountToPercent(prev.amount, this.total, true);
|
|
321
|
+
const next = sortedSlicesData[idx === sortedSlicesData.length - 1 ? 0 : idx + 1];
|
|
322
|
+
const nextPerc = amountToPercent(next.amount, this.total, true);
|
|
323
|
+
s.offset = acc;
|
|
324
|
+
acc += s.amount;
|
|
325
|
+
s.inSmallCluster = isInSmallCluster(prevPerc, s.perc, s.amount, nextPerc);
|
|
326
|
+
});
|
|
327
|
+
return sortedSlicesData;
|
|
328
|
+
}
|
|
329
|
+
function isInSmallCluster(prevPerc, perc, amount, nextPerc) {
|
|
330
|
+
// determine whether the slice is in a cluster of small values
|
|
331
|
+
// to avoid percentage text overlap for small values
|
|
332
|
+
const isSmall = perc < 4;
|
|
333
|
+
const prevIsSmall = prevPerc < 5;
|
|
334
|
+
const nextIsSmall = nextPerc < 5;
|
|
335
|
+
let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
|
|
336
|
+
// because <1% slice percentage text has an additional character
|
|
337
|
+
// the inSmallCluster threshold needs to be widened for that slice only
|
|
338
|
+
const lessThanOnePerc = perc === 0 && amount > 0;
|
|
339
|
+
if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {
|
|
340
|
+
inSmallCluster = true;
|
|
341
|
+
}
|
|
342
|
+
return inSmallCluster;
|
|
343
|
+
}
|
|
314
344
|
function getPathData(amount, offset, chartType) {
|
|
315
345
|
const startAngle = amountToDegree(offset, this.total) - 90; // start at noon, not at 3 o'clock
|
|
316
346
|
const activeAngle = (amount / this.total) * 360;
|
|
@@ -351,11 +381,13 @@ function renderFilter() {
|
|
|
351
381
|
function renderDoughnut(chartType) {
|
|
352
382
|
const outerSize = this.chartData.size + this.chartData.padding;
|
|
353
383
|
const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
|
|
384
|
+
// sorting does not occur for progress indicators
|
|
385
|
+
let slicesData = isHybridDoughnut ? this.slicesData : sortSlicesData.call(this, this.slicesData);
|
|
354
386
|
return (h("div", { class: "chart-wrapper doughnut-wrapper" },
|
|
355
387
|
h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
|
|
356
388
|
renderFilter(),
|
|
357
|
-
|
|
358
|
-
isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(
|
|
389
|
+
slicesData.map((s) => renderPath.call(this, s, chartType)),
|
|
390
|
+
isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(slicesData[0].amount, this.total, true) + "%")) : (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesData.map((s) => (s.amount > 0 ? renderDoughnutText.call(this, s) : "")))))));
|
|
359
391
|
}
|
|
360
392
|
function renderPath(s, chartType) {
|
|
361
393
|
return (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` },
|