q2-tecton-elements 1.46.0 → 1.47.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-0e15dc8d.js');
+const index$1 = require('./index-a93362ed.js');
 const charting = require('./charting-a5d7e947.js');
 const installCanvasRenderer = require('./installCanvasRenderer-c9432539.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-0e15dc8d.js');
+const index$1 = require('./index-a93362ed.js');
 const charting = require('./charting-a5d7e947.js');
 const installCanvasRenderer = require('./installCanvasRenderer-c9432539.js');
 const sectorHelper = require('./sectorHelper-b8542e4b.js');

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-0e15dc8d.js');
+const index$1 = require('./index-a93362ed.js');
 const installCanvasRenderer = require('./installCanvasRenderer-c9432539.js');
 const sectorHelper = require('./sectorHelper-b8542e4b.js');
 
@@ -4037,7 +4037,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;
 
 installCanvasRenderer.use([install$4, install$1, install, installCanvasRenderer.install$1, installCanvasRenderer.install, sectorHelper.installLabelLayout]);
@@ -4085,6 +4085,9 @@ const Q2ChartDonut = class {
                 case 'Escape':
                     this.clearSelection();
                     break;
+                case ' ':
+                    event.preventDefault();
+                    break;
                 default:
                     return;
             }
@@ -4103,6 +4106,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;
@@ -4113,9 +4155,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() {
@@ -4128,6 +4172,7 @@ const Q2ChartDonut = class {
         this.setupChartEvents(chart);
         this.checkSelectedId();
         this.chart = chart;
+        this.setLegendData();
         this.selectById(this.selectedId);
         index$1.overrideFocus(this.hostElement);
     }
@@ -4150,6 +4195,9 @@ const Q2ChartDonut = class {
     get isMobile() {
         return index$1.isMobile();
     }
+    get legendHoveredId() {
+        return this.hoveredId === this.selectedId ? null : this.hoveredId;
+    }
     /// Helpers ///
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -4222,6 +4270,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) {
@@ -4233,8 +4292,7 @@ const Q2ChartDonut = class {
             });
         }
         chart.on('click', params => {
-            // Don't emit click event when clicking a chart slice
-            params.event.event.stopPropagation();
+            params.event.stop();
         });
         chart.on('selectchanged', (params) => {
             var _a, _b, _c, _d;
@@ -4247,6 +4305,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({
@@ -4414,14 +4479,14 @@ const Q2ChartDonut = class {
                 'aria-roledescription': index$1.loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (index.h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, isClickable && (index.h("div", { id: "center-card-description", class: "sr" }, index$1.loc('tecton.element.chartDonut.button.description'))), index.h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (index.h("q2-icon", { type: icon, style: color && {
+        return (index.h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, index.h("div", { id: "center-card-description", class: "sr" }, index$1.loc('tecton.element.chartDonut.button.description')), index.h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (index.h("q2-icon", { type: icon, style: color && {
                 '--tct-icon-stroke-primary': color,
                 '--tct-icon-stroke-secondary': color,
                 color,
             } })), !!name && index.h("div", { class: "name" }, name), !!value && index.h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: 'e5bec431c5bdc58d9ec1f89d374a7e24475f832b', onChange: this.onClickElsewhere }, index.h("div", { key: 'd1bf82b8746b7d9c000d1493a69f77306dbe61ed', class: "container" }, index.h("div", { key: 'f4e6e3fba1b86f91a429daaa70a7811ed192a503', ref: el => (this.chartContainer = el), class: "chart-container", role: "status", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
+        return (index.h("click-elsewhere", { key: '1700d18c30cb0da1da745fa5434efe01b3aa842a', onChange: this.onClickElsewhere }, index.h("figure", { key: 'aa57add1e248244c9d32f4aaa860cccfea408859' }, index.h("div", { key: 'c30cf1183ea3542428262317587fca983e33f429', class: "container" }, index.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 && (index.h("figcaption", { key: 'd06dc65b1460dc205b8f051c9ed9c52b8a176189' }, index.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 }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {