@watermarkinsights/ripple 5.12.0-9 → 5.12.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-788526f5.js');
-const functions = require('./functions-5ac8a62f.js');
+const index = require('./index-e86c28b6.js');
+const functions = require('./functions-4b187487.js');
 
 const colors = {
     salmon: "#ff5f4e",
@@ -71,7 +71,7 @@ const allChartsDetails = {
     bar5: {
         size: 400,
         colors: [
-            colors.gray, // this is only used if prop notStartedColor is set
+            colors.gray,
             colors.lavender,
             colors.midnight,
             "#0089e4",
@@ -397,9 +397,9 @@ function getPathData(amount, offset, chartType) {
     const half = this.chartDetails.size / 2;
     const innerRadius = this.chartDetails.thickness;
     const outerRadius = 1;
-    const isHybridDoughnut = chartType === "doughnut";
+    const isProgressIndicator = chartType === "doughnut";
     const outerSeparatorOffset = 1.5;
-    const innerSeparatorOffset = isHybridDoughnut ? 2.25 : 3;
+    const innerSeparatorOffset = isProgressIndicator ? 2.25 : 3;
     if (activeAngle === 360) {
         // fix to avoid bad svg shape when the path goes all around (100%)
         endAngle -= 0.01;
@@ -466,18 +466,28 @@ function applyMinimumAngle(minimumAngle, slicesDetails, total) {
 }
 function renderDoughnut(chartType) {
     const outerSize = this.chartDetails.size + this.chartDetails.padding;
-    const isHybridDoughnut = chartType === "doughnut";
+    const isProgressIndicator = chartType === "doughnut";
     // no sorting in progress indicators
-    let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
+    let slicesDetails = isProgressIndicator ? 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 + "%";
+    // perc is only for progress indicator
+    const amount = slicesDetails[0].amount;
+    let perc = amountToPercent(amount, this.total, true);
+    if (perc === 0 && amount > 0) {
+        perc = "<1%";
+    }
+    else if (perc === 100 && amount < this.total) {
+        perc = ">99%";
+    }
+    else {
+        perc = 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" }, 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) : ""))))));
+            isProgressIndicator ? (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) => {
@@ -508,7 +518,17 @@ function renderFocusOutline() {
 function renderDoughnutText(s) {
     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"}%`));
+    let val;
+    if (s.perc === 0 && s.amount > 0) {
+        val = "<1%";
+    }
+    else if (s.perc === 100 && s.amount < this.total) {
+        val = ">99%";
+    }
+    else {
+        val = s.perc + "%";
+    }
+    return (index.h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, val));
 }
 function renderStackedBar(chartType) {
     const isHybridBar = chartType === "bar";