q2-tecton-elements 1.44.0 → 1.45.0

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { o as overrideFocus, l as loc, i as isEventFromElement } from './index2.js';
+import { o as overrideFocus, l as loc, d as isMobile, i as isEventFromElement } from './index2.js';
 import { d as defineCustomElement$3 } from './click-elsewhere2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
 import { al as normalizeCssArray, W as Rect, _ as __extends, am as ComponentModel, an as toCamelCase, ao as env, ap as isString, aq as isDom, D as isFunction, ar as normalizeEvent, x as convertToColorString, a0 as isArray, I as each$1, as as bind, at as indexOf, au as getPaddingFromTooltipModel, av as transformLocalCoord, j as isObject, aw as throwError, E as ZRText, ax as getTooltipRenderMode, ay as createOrUpdate, az as clear, aA as register, d as getECData, aB as findPointFromSeries, aC as findEventDispatcher, aD as createTooltipMarkup, aE as TooltipMarkupStyleCreator, aF as getValueLabel, aG as trim, aH as getAxisRawValue, aI as normalizeTooltipFormatResult, a as extend, aJ as buildTooltipMarkup, aK as clone, aL as encodeHTML, aM as format, aN as formatTpl, aO as parsePercent, aP as getLayoutRect, aQ as unregister, aR as ComponentView, aS as Model, aT as preParseFinder, aU as queryReferringComponents, a9 as use, aV as install$5, aW as noop, aX as merge, aY as isNameSpecified, a4 as createHashMap, m as map, a6 as filter, o as isNumber, y as defaults, aZ as parse, a_ as stringify, b as setLabelStyle, a$ as enableHoverEmphasis, b0 as createTextStyle, b1 as setTooltipConfig, b2 as box, b3 as createOrUpdatePatternFromDecal, c as createSymbol, ai as curry$1, G as Group$2, b4 as getLayoutParams, ad as inheritDefaultOption, b5 as mergeLayoutParam, b6 as createIcon, b7 as retrieve2, u as updateProps, b8 as normalizeArcAngles, b9 as linearMap, a3 as makeInner, R as Point, ba as shiftLayoutOnY, i as initProps, s as saveOldStyle, z as setStatesStylesFromModel, t as toggleHoverEmphasis, g as getLabelStatesModels, bb as Polyline, bc as retrieve3, V as Sector, af as removeElementWithFadeOut, C as ChartView, bd as prepareSeriesDataSchema, be as SeriesData, bf as makeSeriesEncodeForNameBased, bg as getPercentSeats, bh as defaultEmphasis, S as SeriesModel, bi as createLegacyDataSelectAction, ab as install$6, aa as install$7, ac as init } from './installCanvasRenderer.js';
@@ -4147,7 +4147,10 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             color: null,
         };
     }
-    /// Helpers
+    get isMobile() {
+        return isMobile();
+    }
+    /// Helpers ///
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
         this.hostElementStyles = getComputedStyle(this.hostElement);
@@ -4219,17 +4222,20 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
     getMinSliceSizeAsAngle() {
         return (parseFloat(this.minSliceSize) / 100) * 360;
     }
+    // Edit with caution. Echarts does not interpret events the same on mobile.
     setupChartEvents(chart) {
-        chart.on('mouseover', (params) => {
-            this.hoveredId = params.data.id;
-        });
+        if (!this.isMobile) {
+            chart.on('mouseover', (params) => {
+                this.hoveredId = params.data.id;
+            });
+            chart.on('mouseout', () => {
+                this.hoveredId = this.selectedId;
+            });
+        }
         chart.on('click', params => {
             // Don't emit click event when clicking a chart slice
             params.event.event.stopPropagation();
         });
-        chart.on('mouseout', () => {
-            this.hoveredId = this.selectedId;
-        });
         chart.on('selectchanged', (params) => {
             var _a, _b, _c, _d;
             const selectedIndex = (_d = (_c = (_b = (_a = params.selected) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.dataIndex) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : null;
@@ -4274,6 +4280,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
                         borderColor: this.getCSSProperty('--comp-background-color'),
                     },
                     emphasis: {
+                        disabled: this.isMobile,
                         scaleSize: this.hoverScaleSize,
                         itemStyle: {
                             color: 'inherit',
@@ -4294,6 +4301,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
     }
     dataUpdated() {
         this.colors = this.getColors();
+        this.updateChart(this.chart);
     }
     innerRadiusUpdated() {
         const { innerRadius, outerRadius } = this;
@@ -4413,7 +4421,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: 'f41e814c20a45c444c1e4a562514b5423fa0a4f3', onChange: this.onClickElsewhere }, h("div", { key: 'bb4e46e5d7306a9dc1c8a01c199f8686fdd3d215', class: "container" }, h("div", { key: 'cd23b2c3c4715795a6b4e01ecba29a5aa903b834', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
+        return (h("click-elsewhere", { key: 'e5bec431c5bdc58d9ec1f89d374a7e24475f832b', onChange: this.onClickElsewhere }, h("div", { key: 'd1bf82b8746b7d9c000d1493a69f77306dbe61ed', class: "container" }, h("div", { key: 'f4e6e3fba1b86f91a429daaa70a7811ed192a503', ref: el => (this.chartContainer = el), class: "chart-container", role: "status", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -4423,7 +4431,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
         "minSliceSize": ["propsUpdates"],
         "hoverScaleSize": ["propsUpdates"],
         "selectedOffset": ["propsUpdates"],
-        "data": ["propsUpdates", "dataUpdated"],
+        "data": ["dataUpdated"],
         "selectedId": ["checkSelectedId"]
     }; }
     static get style() { return Q2ChartDonutStyle0; }
@@ -4452,7 +4460,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
         "minSliceSize": ["propsUpdates"],
         "hoverScaleSize": ["propsUpdates"],
         "selectedOffset": ["propsUpdates"],
-        "data": ["propsUpdates", "dataUpdated"],
+        "data": ["dataUpdated"],
         "selectedId": ["checkSelectedId"]
     }]);
 function defineCustomElement$1() {