@watermarkinsights/ripple 5.11.0-2 → 5.11.0-4

package/dist/cjs/{app-globals-86975eea.js → app-globals-9ac264d7.js}

@@ -2,7 +2,7 @@
 
 require('./index-788526f5.js');
 
-const version = "5.11.0-2";
+const version = "5.11.0-4";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/cjs/{chartFunctions-a3a08880.js → chartFunctions-7314b414.js}

@@ -345,6 +345,7 @@ async function getDetails(chartType) {
         }
         const sliceDetails = {
             amount: amount,
+            visualAmount: amount,
             perc: perc,
             legend: c.getAttribute("legend"),
             color: chartColors[colorIndex] || colors.gray,
@@ -455,10 +456,10 @@ function applyMinimumAngle(minimumAngle, slicesDetails, total) {
         // apply new amounts based on adjust angles
         let offsetAcc = 0;
         slicesDetails = slicesDetails.map((s, idx) => {
-            const newAmount = (adjustedAngles[idx] / 360) * total;
+            const visualAmount = (adjustedAngles[idx] / 360) * total;
             const newOffset = offsetAcc;
-            offsetAcc += newAmount;
-            return Object.assign(Object.assign({}, s), { amount: newAmount, offset: newOffset });
+            offsetAcc += visualAmount;
+            return Object.assign(Object.assign({}, s), { visualAmount: visualAmount, offset: newOffset });
         });
     }
     return slicesDetails;
@@ -469,12 +470,14 @@ function renderDoughnut(chartType) {
     // no sorting in progress indicators
     let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
     slicesDetails = applyMinimumAngle(7, slicesDetails, this.total);
+    let perc = amountToPercent(slicesDetails[0].amount, this.total, true);
+    perc = perc === 0 ? "<1%" : perc + "%";
     return (index.h("div", { class: "chart-wrapper doughnut-wrapper" },
         index.h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
             renderFilter(),
             slicesDetails.map((s) => renderPath.call(this, s, chartType)),
             renderFocusOutline.call(this),
-            isHybridDoughnut ? (index.h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(slicesDetails[0].amount, this.total, true) + "%")) : (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
+            isHybridDoughnut ? (index.h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
 }
 function highlightSegmentInfo(infoEls, s) {
     infoEls.forEach((el) => {
@@ -494,7 +497,7 @@ function removeSegmentInfoHighlight(infoEls) {
 function renderPath(s, chartType) {
     const percentageValue = amountToPercent(s.amount, this.total, true) + "%";
     return (!isNaN(s.amount) && (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
-        index.h("path", { id: s.id, class: "segment doughnut-segment", fill: s.amount ? s.color : "transparent", d: getPathData.call(this, s.amount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index }))));
+        index.h("path", { id: s.id, class: "segment doughnut-segment", fill: s.visualAmount ? s.color : "transparent", d: getPathData.call(this, s.visualAmount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index }))));
 }
 function renderFocusOutline() {
     return this.isTabbing ? (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
@@ -503,7 +506,7 @@ function renderFocusOutline() {
         index.h("use", { tabindex: -1, id: "kfbg2", xlinkHref: `#${this.focusedSliceId}` }))) : ("");
 }
 function renderDoughnutText(s) {
-    const arcMiddle = amountToDegree(s.offset + s.amount / 2, this.total);
+    const arcMiddle = amountToDegree(s.offset + s.visualAmount / 2, this.total);
     let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);
     return (index.h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, `${s.perc > 0 ? s.perc : "<1"}%`));
 }

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
-const appGlobals = require('./app-globals-86975eea.js');
+const appGlobals = require('./app-globals-9ac264d7.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/ripple.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
-const appGlobals = require('./app-globals-86975eea.js');
+const appGlobals = require('./app-globals-9ac264d7.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com