q2-tecton-elements 1.50.1 → 1.51.0

package/dist/cjs/q2-chart-donut.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-64d8b839.js');
+const index$1 = require('./index-9aa4a776.js');
 const charting = require('./charting-f4946e77.js');
 const sectorHelper = require('./sectorHelper-674a5b82.js');
 
@@ -4329,20 +4329,7 @@ const Q2ChartDonut = class {
         }
     }
     getColors() {
-        const defaultColors = [
-            '--comp-color-1',
-            '--comp-color-2',
-            '--comp-color-3',
-            '--comp-color-4',
-            '--comp-color-5',
-            '--comp-color-6',
-            '--comp-color-7',
-            '--comp-color-8',
-            '--comp-color-9',
-            '--comp-color-10',
-            '--comp-color-11',
-            '--comp-color-12',
-        ];
+        const defaultColors = [1, 3, 8, 4, 2, 10, 7, 11, 6, 9, 12, 5].map(e => `--comp-color-${e}`);
         return this.data.reduce((acc, cur, idx) => {
             let color = defaultColors[idx % defaultColors.length];
             if (cur.color)
@@ -4428,7 +4415,20 @@ const Q2ChartDonut = class {
             canvas.setAttribute('aria-hidden', 'true');
         });
     }
+    validateColor() {
+        // check if there is name duplicated, then custom style using `itemStyle` object will be used.
+        if (this.data.length >
+            Object.keys(this.data.reduce((acc, cur) => {
+                acc[cur.name] = cur.name;
+                return acc;
+            }, {})).length) {
+            this.data.forEach((el, i) => {
+                el.itemStyle = Object.assign(Object.assign({}, el.itemStyle), { color: el.color || this.colors[i] });
+            });
+        }
+    }
     updateChart(chart) {
+        this.validateColor();
         return chart.setOption({
             tooltip: {
                 show: false,
@@ -4495,7 +4495,7 @@ const Q2ChartDonut = class {
             } })), !!name && index.h("div", { class: "name" }, name), !isNaN(value) && index.h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: '696f2c528be4727613f055b7af2fdd691887a23d', onChange: this.onClickElsewhere }, index.h("figure", { key: '65ddd99c4568a92b4355ecb4ea2ed781d300cb10' }, index.h("div", { key: 'f60b832a32fc06b19ffcd44c0c72373ae921200c', class: "container" }, index.h("div", { key: 'b1cba2e57d2e36aea414db321a2efa7fd724cb66', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (index.h("figcaption", { key: '9f7876b0d4f0642cf45ff4823149c5c3bccfa166' }, index.h("q2-legend", { key: 'b2ebec13e70c3e4af4527f5b12f76a9bda6fd965', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (index.h("click-elsewhere", { key: '653843d0844777cd5a1eca08ff2212af8866a30a', onChange: this.onClickElsewhere }, index.h("figure", { key: '3189ea33feae10932fe45ed1a6930badb4a9b438' }, index.h("div", { key: '3be03652e90ae4a776b9bf87ec575863c8f03621', class: "container" }, index.h("div", { key: '2e08d9019dfaabefd989ba51870bc778fa04905c', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (index.h("figcaption", { key: '158058ae81b1c016474f73c943d1452c6955022b' }, index.h("q2-legend", { key: '2d3f38b153a808c6eb15c69cc5450cc6838a5166', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {