@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.
Files changed (53) hide show
  1. package/dist/cjs/{chartFunctions-0df85acd.js → chartFunctions-d32c8e50.js} +47 -15
  2. package/dist/cjs/{global-c39855e1.js → global-2cd7ace3.js} +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/ripple.cjs.js +1 -1
  5. package/dist/cjs/wm-chart.cjs.entry.js +11 -3
  6. package/dist/cjs/wm-file-list.cjs.entry.js +9 -1
  7. package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +2 -2
  8. package/dist/collection/components/charts/wm-chart/wm-chart.css +4 -1
  9. package/dist/collection/components/charts/wm-chart/wm-chart.js +17 -4
  10. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.css +4 -1
  11. package/dist/collection/components/wm-file-list/wm-file-list.js +9 -1
  12. package/dist/collection/global/chartFunctions.js +47 -15
  13. package/dist/esm/{chartFunctions-30a7edc8.js → chartFunctions-91c2935f.js} +47 -15
  14. package/dist/esm/{global-42100ed1.js → global-e9844803.js} +1 -1
  15. package/dist/esm/loader.js +1 -1
  16. package/dist/esm/ripple.js +1 -1
  17. package/dist/esm/wm-chart.entry.js +11 -3
  18. package/dist/esm/wm-file-list.entry.js +9 -1
  19. package/dist/esm/wm-progress-indicator_3.entry.js +2 -2
  20. package/dist/esm-es5/chartFunctions-91c2935f.js +1 -0
  21. package/dist/esm-es5/{global-42100ed1.js → global-e9844803.js} +1 -1
  22. package/dist/esm-es5/loader.js +1 -1
  23. package/dist/esm-es5/ripple.js +1 -1
  24. package/dist/esm-es5/wm-chart.entry.js +1 -1
  25. package/dist/esm-es5/wm-file-list.entry.js +1 -1
  26. package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
  27. package/dist/ripple/p-0ada1e67.js +1 -0
  28. package/dist/ripple/p-2406fb5f.entry.js +1 -0
  29. package/dist/ripple/{p-6dc9ce65.system.js → p-550fb511.system.js} +1 -1
  30. package/dist/ripple/{p-6d037bde.system.js → p-7656d265.system.js} +1 -1
  31. package/dist/ripple/p-87f4a998.entry.js +1 -0
  32. package/dist/ripple/p-a0798ac9.system.entry.js +1 -0
  33. package/dist/ripple/{p-899b1fe3.js → p-a78394a5.js} +1 -1
  34. package/dist/ripple/p-a8ce8091.system.js +1 -0
  35. package/dist/ripple/p-b1d1df2d.system.entry.js +1 -0
  36. package/dist/ripple/p-c9fe83dc.system.entry.js +1 -0
  37. package/dist/ripple/p-ede6e634.entry.js +1 -0
  38. package/dist/ripple/ripple.esm.js +1 -1
  39. package/dist/ripple/ripple.js +1 -1
  40. package/dist/types/components/charts/wm-chart/wm-chart.d.ts +3 -2
  41. package/dist/types/components/wm-file-list/wm-file-list.d.ts +1 -0
  42. package/dist/types/components.d.ts +3 -3
  43. package/dist/types/global/interfaces.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/dist/esm-es5/chartFunctions-30a7edc8.js +0 -1
  46. package/dist/ripple/p-0235414d.system.entry.js +0 -1
  47. package/dist/ripple/p-0fe962e6.entry.js +0 -1
  48. package/dist/ripple/p-324ce87e.system.entry.js +0 -1
  49. package/dist/ripple/p-99cbbda6.system.js +0 -1
  50. package/dist/ripple/p-e329fc71.entry.js +0 -1
  51. package/dist/ripple/p-e9fb36d9.js +0 -1
  52. package/dist/ripple/p-ed3f61e9.entry.js +0 -1
  53. 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
- // determine whether the slice is in a cluster of small values
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: 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
- this.slicesData.map((s) => renderPath.call(this, s, chartType)),
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(this.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" }, this.slicesData.map((s) => (s.amount > 0 ? renderDoughnutText.call(this, s) : "")))))));
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})` },
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const version = "3.20.0-1";
3
+ const version = "3.20.0-3";
4
4
 
5
5
  // PRINT RIPPLE VERSION IN CONSOLE
6
6
  // test envs return 0 for plugin.length
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-df6a3611.js');
6
- require('./global-c39855e1.js');
6
+ require('./global-2cd7ace3.js');
7
7
 
8
8
  /*
9
9
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index-df6a3611.js');
4
- require('./global-c39855e1.js');
4
+ require('./global-2cd7ace3.js');
5
5
 
6
6
  /*
7
7
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -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-0df85acd.js');
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
- return this.chartType === "hybrid" ? this.hybridType : this.chartType;
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) => (index.h("wm-file", { file: JSON.stringify(file), "show-info": this.showInfo })))));
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-0df85acd.js');
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.doughnut3 label,
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
- return this.chartType === "hybrid" ? this.hybridType : this.chartType;
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": "\"doughnut1\" | \"doughnut2\" | \"doughnut3\" | \"hybrid\" | \"bar1\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\"",
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.doughnut3 label,
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) => (h("wm-file", { file: JSON.stringify(file), "show-info": this.showInfo })))));
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
- // determine whether the slice is in a cluster of small values
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: 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
- this.slicesData.map((s) => renderPath.call(this, s, chartType)),
357
- isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(this.slicesData[0].amount, this.total, true) + "%")) : (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, this.slicesData.map((s) => (s.amount > 0 ? renderDoughnutText.call(this, s) : "")))))));
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
- // determine whether the slice is in a cluster of small values
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: 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
- this.slicesData.map((s) => renderPath.call(this, s, chartType)),
358
- isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(this.slicesData[0].amount, this.total, true) + "%")) : (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, this.slicesData.map((s) => (s.amount > 0 ? renderDoughnutText.call(this, s) : "")))))));
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})` },
@@ -1,4 +1,4 @@
1
- const version = "3.20.0-1";
1
+ const version = "3.20.0-3";
2
2
 
3
3
  // PRINT RIPPLE VERSION IN CONSOLE
4
4
  // test envs return 0 for plugin.length