@limetech/lime-elements 40.0.3 → 40.1.0

package/dist/esm/limel-chart.entry.js

@@ -6,6 +6,16 @@ const chartCss = () => `@charset "UTF-8";:host(limel-chart[type=bar]) .chart,:ho
 
 const PERCENT = 100;
 const DEFAULT_INCREMENT_SIZE = 10;
+/**
+ * Types whose items are parts of one whole. They draw no axis, and an item's
+ * value or range extent is its share of `maxValue`, or of the combined items.
+ */
+const WHOLE_TYPES = new Set([
+    'stacked-bar',
+    'pie',
+    'doughnut',
+    'ring',
+]);
 const Chart = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -34,6 +44,13 @@ const Chart = class {
          * Only affects chart types with X and Y axes, such as area, bar, and line charts.
          */
         this.displayItemValue = false;
+        /**
+         * Set to `false` to hide the percentage in item tooltips.
+         * The percentage is an item's value or range extent as a share of the
+         * whole. The whole is `maxValue` when set and the combined items otherwise.
+         * Applies to `stacked-bar`, `pie`, `doughnut`, and `ring` charts.
+         */
+        this.displayItemPercentage = true;
         /**
          * Defines how items are visualized in the chart.
          */
@@ -191,6 +208,12 @@ const Chart = class {
                 offset: 0,
             };
         }
+        if (this.isPartOfWhole()) {
+            return {
+                size: (this.getValueSpan(item) / totalRange) * PERCENT,
+                offset: 0,
+            };
+        }
         let startValue = 0;
         if (this.isRangeItem(item)) {
             startValue = this.getMinimumValue(item);
@@ -227,10 +250,7 @@ const Chart = class {
             helperLabel: formattedValue,
             elementId: itemId,
         };
-        if (this.type !== 'bar' &&
-            this.type !== 'dot' &&
-            this.type !== 'nps' &&
-            this.type !== 'scatter') {
+        if (this.displayItemPercentage && this.isPartOfWhole()) {
             tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;
         }
         return (h("limel-tooltip", Object.assign({}, tooltipProps, { openDirection: this.orientation === 'portrait' ? 'right' : 'top' })));
@@ -240,14 +260,12 @@ const Chart = class {
         if (this.range) {
             return this.range;
         }
+        if (this.isPartOfWhole()) {
+            return this.calculateWholeRange();
+        }
         const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));
         const maxRange = Math.max(...this.items.map(this.getMaximumValue));
-        const totalSum = this.items.reduce((sum, item) => sum + this.getMaximumValue(item), 0);
-        let finalMaxRange = (_a = this.maxValue) !== null && _a !== void 0 ? _a : maxRange;
-        if ((this.type === 'pie' || this.type === 'doughnut') &&
-            !this.maxValue) {
-            finalMaxRange = totalSum;
-        }
+        const finalMaxRange = (_a = this.maxValue) !== null && _a !== void 0 ? _a : maxRange;
         if (!this.axisIncrement) {
             this.axisIncrement = this.calculateAxisIncrement(this.items.map(this.getMaximumValue));
         }
@@ -261,6 +279,29 @@ const Chart = class {
             increment: this.axisIncrement,
         };
     }
+    /**
+     * The range of a chart whose items are parts of one whole: `maxValue`
+     * when set, otherwise the combined item values or range extents. The value
+     * is a scale, not a cap, so the combined size can exceed it. The whole is
+     * not rounded to an axis step, since these types draw no axis and an item's
+     * size has to be its exact share.
+     */
+    calculateWholeRange() {
+        var _a;
+        const sum = this.items.reduce((total, item) => total + this.getValueSpan(item), 0);
+        const inferredWhole = sum > 0 ? sum : 1;
+        // An explicit zero also falls back to 1, so normalization stays finite.
+        const whole = ((_a = this.maxValue) !== null && _a !== void 0 ? _a : inferredWhole) || 1;
+        return {
+            minValue: 0,
+            maxValue: whole,
+            totalRange: whole,
+            increment: whole,
+        };
+    }
+    isPartOfWhole() {
+        return WHOLE_TYPES.has(this.type);
+    }
     calculateAxisIncrement(values, steps = DEFAULT_INCREMENT_SIZE) {
         return this.calculateNiceStep(Math.max(...values), steps);
     }
@@ -314,6 +355,12 @@ const Chart = class {
         const value = item.value;
         return Array.isArray(value) ? Math.max(...value) : value;
     }
+    getValueSpan(item) {
+        const startValue = this.isRangeItem(item)
+            ? this.getMinimumValue(item)
+            : 0;
+        return this.getMaximumValue(item) - startValue;
+    }
     isRangeItem(item) {
         return Array.isArray(item.value);
     }
@@ -359,6 +406,9 @@ const Chart = class {
             }],
         "maxValue": [{
                 "handleChange": 0
+            }],
+        "type": [{
+                "handleChange": 0
             }]
     }; }
 };