q2-tecton-elements 1.45.3 → 1.46.1

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

@@ -4033,7 +4033,7 @@ function install(registers) {
   registers.registerProcessor(negativeDataFilter('pie'));
 }
 
-const q2ChartDonutCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:focus{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 3px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}";
+const q2ChartDonutCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:focus{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 3px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
 const Q2ChartDonutStyle0 = q2ChartDonutCss;
 
 use([install$4, install$1, install, install$6, install$7, installLabelLayout]);
@@ -4081,6 +4081,9 @@ const Q2ChartDonut = class {
                 case 'Escape':
                     this.clearSelection();
                     break;
+                case ' ':
+                    event.preventDefault();
+                    break;
                 default:
                     return;
             }
@@ -4099,6 +4102,45 @@ const Q2ChartDonut = class {
             this.clearSelection();
             event.stopPropagation();
         };
+        this.onLegendClick = event => {
+            if (event.detail) {
+                const dataIndex = this.getDataIndexForId(event.detail.id);
+                this.selectedId = event.detail.id;
+                this.chart.dispatchAction({
+                    type: 'select',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+            else {
+                const dataIndex = this.getDataIndexForId(this.selectedId);
+                this.hoveredId = this.selectedId;
+                this.selectedId = null;
+                this.chart.dispatchAction({
+                    type: 'unselect',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+        };
+        this.onLegendMouseleave = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = this.selectedId;
+            this.chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
+        this.onLegendMouseenter = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = event.detail.id;
+            this.chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
         this.data = [];
         this.chartName = undefined;
         this.format = undefined;
@@ -4109,9 +4151,11 @@ const Q2ChartDonut = class {
         this.outerRadius = '85%';
         this.selectedId = undefined;
         this.selectedOffset = 10;
+        this.showLegend = false;
         this.summaryIcon = undefined;
         this.summaryName = undefined;
         this.hoveredId = undefined;
+        this.legendData = undefined;
     }
     /// LifeCycle Hooks ///
     componentDidLoad() {
@@ -4124,6 +4168,7 @@ const Q2ChartDonut = class {
         this.setupChartEvents(chart);
         this.checkSelectedId();
         this.chart = chart;
+        this.setLegendData();
         this.selectById(this.selectedId);
         overrideFocus(this.hostElement);
     }
@@ -4146,6 +4191,9 @@ const Q2ChartDonut = class {
     get isMobile() {
         return isMobile();
     }
+    get legendHoveredId() {
+        return this.hoveredId === this.selectedId ? null : this.hoveredId;
+    }
     /// Helpers ///
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -4218,6 +4266,17 @@ const Q2ChartDonut = class {
     getMinSliceSizeAsAngle() {
         return (parseFloat(this.minSliceSize) / 100) * 360;
     }
+    getDataIndexForId(id) {
+        return this.data.findIndex(item => item.id === id);
+    }
+    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;
+        });
+    }
     // Edit with caution. Echarts does not interpret events the same on mobile.
     setupChartEvents(chart) {
         if (!this.isMobile) {
@@ -4243,6 +4302,13 @@ const Q2ChartDonut = class {
                 this.isInChangeEvent = false;
             }, 0);
         });
+        chart.on('finished', () => {
+            var _a;
+            const canvas = chart.getDom().querySelector('canvas');
+            if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.hasAttribute('aria-hidden')) !== null && _a !== void 0 ? _a : false)
+                return;
+            canvas.setAttribute('aria-hidden', 'true');
+        });
     }
     updateChart(chart) {
         return chart.setOption({
@@ -4410,14 +4476,14 @@ const Q2ChartDonut = class {
                 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, isClickable && (h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description'))), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
+        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
                 '--tct-icon-stroke-primary': color,
                 '--tct-icon-stroke-secondary': color,
                 color,
             } })), !!name && h("div", { class: "name" }, name), !!value && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        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())));
+        return (h("click-elsewhere", { key: '53c1a369526583b3260eecebc9d20a98d7eee02f', onChange: this.onClickElsewhere }, h("figure", { key: '3c995800e322483fc72d193643632a9b10394e87' }, h("div", { key: '13ec1654546b45801c8f92c7cdd317951408659e', class: "container" }, h("div", { key: '93b2989c435714e0ba8d93327483603c830d677b', 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: '850fa60a26cd2b39dc534260efa9634f82cfc220' }, h("q2-legend", { key: '7a8b918ad722cfefd05c28688819e0a41f39e11e', 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 getElement(this); }
     static get watchers() { return {