q2-tecton-elements 1.47.0 → 1.48.1-alpha.0

package/dist/components/q2-chart-donut.js

@@ -4108,6 +4108,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             event.stopPropagation();
         };
         this.onLegendClick = event => {
+            event.stopPropagation();
             if (event.detail) {
                 const dataIndex = this.getDataIndexForId(event.detail.id);
                 this.selectedId = event.detail.id;
@@ -4277,9 +4278,10 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
     setLegendData() {
         const chartColors = this.chart.getOption().series[0].color;
         this.legendData = this.data.map((item, index) => {
-            if (!item.color)
-                item.color = chartColors[index];
-            return item;
+            const newItem = Object.assign({}, item);
+            if (!newItem.color)
+                newItem.color = chartColors[index];
+            return newItem;
         });
     }
     // Edit with caution. Echarts does not interpret events the same on mobile.
@@ -4368,6 +4370,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
     dataUpdated() {
         this.colors = this.getColors();
         this.updateChart(this.chart);
+        this.setLegendData();
     }
     innerRadiusUpdated() {
         const { innerRadius, outerRadius } = this;
@@ -4487,7 +4490,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             } })), !!name && h("div", { class: "name" }, name), !!value && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '1700d18c30cb0da1da745fa5434efe01b3aa842a', onChange: this.onClickElsewhere }, h("figure", { key: 'aa57add1e248244c9d32f4aaa860cccfea408859' }, h("div", { key: 'c30cf1183ea3542428262317587fca983e33f429', class: "container" }, h("div", { key: 'b91edcfa1cc2842723875f3bb254024b6d755da0', 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 && (h("figcaption", { key: 'd06dc65b1460dc205b8f051c9ed9c52b8a176189' }, h("q2-legend", { key: 'a854b6452fb91f7bc8cee0091c473937bcd7e665', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '90996ed9349102c692239d46f08bb3d429a0ee05', onChange: this.onClickElsewhere }, h("figure", { key: 'a41baa8d48497d7ce330e0133bdffa01c0b7977f' }, h("div", { key: '1858aa966d6d46089226f988d077268228352de8', class: "container" }, h("div", { key: 'ef990082c127b145d9e54cb0ed0644c23bc2101d', 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 && (h("figcaption", { key: '7713de14eac9ad9ad0b89e0398247aa7335a9532' }, h("q2-legend", { key: '76f0364735a9c6fef7de7aaf991b2d429b92d737', 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 this; }
     static get watchers() { return {