npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/collection/components/q2-chart-bar/test/q2-chart-bar-test.vr.js ADDED Viewed

@@ -0,0 +1,105 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const CHART_SIZE = 'style="width: 600px; height: 400px"';
+const SHORT_DATA = [
+    { id: 'sun', name: 'Sun', value: 45 },
+    { id: 'mon', name: 'Mon', value: 36 },
+    { id: 'tue', name: 'Tue', value: 62 },
+    { id: 'wed', name: 'Wed', value: 51 },
+    { id: 'thu', name: 'Thu', value: 104 },
+    { id: 'fri', name: 'Fri', value: 122 },
+    { id: 'sat', name: 'Sat', value: 215 },
+];
+const LONG_NAME_DATA = [
+    { id: 'jan', name: 'January', value: 45 },
+    { id: 'feb', name: 'February', value: 36 },
+    { id: 'mar', name: 'March', value: 62 },
+    { id: 'apr', name: 'April', value: 51 },
+    { id: 'may', name: 'May', value: 104 },
+    { id: 'jun', name: 'June', value: 122 },
+    { id: 'jul', name: 'July', value: 215 },
+];
+const VARIANTS = [
+    {
+        name: 'vertical-default',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales"></q2-chart-bar>`,
+    },
+    {
+        name: 'horizontal',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" orientation="horizontal"></q2-chart-bar>`,
+    },
+    {
+        name: 'with-chart-name',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" chart-sub-title="Q1 2025" show-chart-name="true"></q2-chart-bar>`,
+    },
+    {
+        name: 'currency-format',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" format="currency" format-modifier="2dec"></q2-chart-bar>`,
+    },
+    {
+        name: 'sorted',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" sort="true"></q2-chart-bar>`,
+    },
+    {
+        name: 'hide-bar-labels',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" hide-bar-labels="true"></q2-chart-bar>`,
+    },
+    {
+        name: 'hide-value-labels',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" hide-value-axis-labels="true"></q2-chart-bar>`,
+    },
+    {
+        name: 'offset-data-names',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" offset-data-names="true"></q2-chart-bar>`,
+        data: LONG_NAME_DATA,
+    },
+    {
+        name: 'custom-color',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" color="var(--t-accent-2)"></q2-chart-bar>`,
+    },
+    {
+        name: 'align-name-left',
+        html: `<q2-chart-bar ${CHART_SIZE} chart-name="Sales" show-chart-name="true" align-chart-name="left"></q2-chart-bar>`,
+    },
+];
+const setChartData = async (page, data) => {
+    await page.locator('q2-chart-bar').evaluate((el, payload) => {
+        el.data = payload;
+    }, data);
+    // echarts marks the canvas with aria-hidden="true" once the 'finished' event has fired.
+    // Waiting on that attribute keeps the snapshot from racing the canvas paint.
+    await page.locator('q2-chart-bar').evaluate(async (el) => {
+        var _a;
+        const canvas = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('canvas');
+        if (!canvas)
+            return;
+        if (canvas.getAttribute('aria-hidden') === 'true')
+            return;
+        await new Promise(resolve => {
+            const observer = new MutationObserver(() => {
+                if (canvas.getAttribute('aria-hidden') === 'true') {
+                    observer.disconnect();
+                    resolve();
+                }
+            });
+            observer.observe(canvas, { attributes: true, attributeFilter: ['aria-hidden'] });
+        });
+    });
+};
+const restingCase = (variant, theme) => {
+    test(`q2-chart-bar--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        var _a;
+        await setupPage(page, variant.html, { theme });
+        await setChartData(page, (_a = variant.data) !== null && _a !== void 0 ? _a : SHORT_DATA);
+        await expect(page).toHaveScreenshot(`q2-chart-bar--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-chart-bar — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-chart-bar-test.vr.js.map

package/dist/collection/components/q2-chart-bar/test/q2-chart-bar-test.vr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"q2-chart-bar-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-chart-bar/test/q2-chart-bar-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\nconst CHART_SIZE = 'style=\"width: 600px; height: 400px\"';\n\nconst SHORT_DATA = [\n { id: 'sun', name: 'Sun', value: 45 },\n { id: 'mon', name: 'Mon', value: 36 },\n { id: 'tue', name: 'Tue', value: 62 },\n { id: 'wed', name: 'Wed', value: 51 },\n { id: 'thu', name: 'Thu', value: 104 },\n { id: 'fri', name: 'Fri', value: 122 },\n { id: 'sat', name: 'Sat', value: 215 },\n];\n\nconst LONG_NAME_DATA = [\n { id: 'jan', name: 'January', value: 45 },\n { id: 'feb', name: 'February', value: 36 },\n { id: 'mar', name: 'March', value: 62 },\n { id: 'apr', name: 'April', value: 51 },\n { id: 'may', name: 'May', value: 104 },\n { id: 'jun', name: 'June', value: 122 },\n { id: 'jul', name: 'July', value: 215 },\n];\n\ntype ChartDatum = { id: string; name: string; value: number };\n\ntype Variant = {\n name: string;\n html: string;\n data?: ChartDatum[];\n};\n\nconst VARIANTS: Variant[] = [\n {\n name: 'vertical-default',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\"></q2-chart-bar>`,\n },\n {\n name: 'horizontal',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" orientation=\"horizontal\"></q2-chart-bar>`,\n },\n {\n name: 'with-chart-name',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" chart-sub-title=\"Q1 2025\" show-chart-name=\"true\"></q2-chart-bar>`,\n },\n {\n name: 'currency-format',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" format=\"currency\" format-modifier=\"2dec\"></q2-chart-bar>`,\n },\n {\n name: 'sorted',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" sort=\"true\"></q2-chart-bar>`,\n },\n {\n name: 'hide-bar-labels',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" hide-bar-labels=\"true\"></q2-chart-bar>`,\n },\n {\n name: 'hide-value-labels',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" hide-value-axis-labels=\"true\"></q2-chart-bar>`,\n },\n {\n name: 'offset-data-names',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" offset-data-names=\"true\"></q2-chart-bar>`,\n data: LONG_NAME_DATA,\n },\n {\n name: 'custom-color',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" color=\"var(--t-accent-2)\"></q2-chart-bar>`,\n },\n {\n name: 'align-name-left',\n html: `<q2-chart-bar ${CHART_SIZE} chart-name=\"Sales\" show-chart-name=\"true\" align-chart-name=\"left\"></q2-chart-bar>`,\n },\n];\n\nconst setChartData = async (page: import('@playwright/test').Page, data: ChartDatum[]) => {\n await page.locator('q2-chart-bar').evaluate((el: HTMLElement & { data: ChartDatum[] }, payload) => {\n el.data = payload;\n }, data);\n // echarts marks the canvas with aria-hidden=\"true\" once the 'finished' event has fired.\n // Waiting on that attribute keeps the snapshot from racing the canvas paint.\n await page.locator('q2-chart-bar').evaluate(async (el: HTMLElement) => {\n const canvas = el.shadowRoot?.querySelector('canvas');\n if (!canvas) return;\n if (canvas.getAttribute('aria-hidden') === 'true') return;\n await new Promise<void>(resolve => {\n const observer = new MutationObserver(() => {\n if (canvas.getAttribute('aria-hidden') === 'true') {\n observer.disconnect();\n resolve();\n }\n });\n observer.observe(canvas, { attributes: true, attributeFilter: ['aria-hidden'] });\n });\n });\n};\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n test(`q2-chart-bar--${variant.name}--resting — ${theme}`, async ({ page }) => {\n await setupPage(page, variant.html, { theme });\n await setChartData(page, variant.data ?? SHORT_DATA);\n await expect(page).toHaveScreenshot(`q2-chart-bar--${variant.name}--resting--${theme}.png`);\n });\n};\n\ntest.describe('q2-chart-bar — variants × themes', () => {\n for (const variant of VARIANTS) {\n for (const theme of THEMES) {\n restingCase(variant, theme);\n }\n }\n});\n"]}

package/dist/collection/components/q2-chart-donut/q2-chart-donut.css CHANGED Viewed

@@ -65,6 +65,35 @@ button {
   visibility: hidden;
 }
+/**
+ * @prop --tct-chart-donut-text-color: (<color>) Controls the text color of the chart donut center card content.
+ * @prop --tct-chart-donut-focus-visible-box-shadow: (*) Controls the box shadow of the chart container when focused via keyboard.
+ * @prop --tct-chart-donut-button-background?: (<color>) Controls the optional background color of the chart center button in its default state.
+ * @prop --tct-chart-donut-button-hover-background?: (<color>) Controls the optional background color of the chart center button on hover.
+ * @prop --tct-chart-donut-button-active-background?: (<color>) Controls the optional background color of the chart center button when active.
+ * @prop --tct-chart-donut-button-focus-background?: (<color>) Controls the optional background color of the chart center button when focused via keyboard.
+ * @prop --tct-chart-donut-button-hover-box-shadow: (*) Controls the box shadow applied to the chart center button on hover, active, and focus.
+ * @prop --tct-chart-donut-button-tween: (*) Controls the transition timing of the chart center button's interactive state changes.
+ * @prop --tct-chart-donut-button-padding: (<length-percentage>+) Controls the inner padding of the chart center button.
+ * @prop --tct-chart-donut-button-container-padding: (<length-percentage>+) Controls the inner padding of the chart center card container.
+ * @prop --tct-chart-donut-icon-size: (<length>) Controls the size of the icon displayed inside the chart center card.
+ * @prop --tct-chart-donut-icon-margin: (<length-percentage>+) Controls the margin around the icon displayed inside the chart center card.
+ * @prop --tct-chart-donut-name-font-size: (<length-percentage>) Controls the font size of the name label inside the chart center card.
+ * @prop --tct-chart-donut-value-font-size: (<length-percentage>) Controls the font size of the value label inside the chart center card.
+ * @prop --tct-chart-donut-legend-margin-top?: (<length-percentage>) Controls the optional top margin of the legend below the chart.
+ * @prop --tct-chart-donut-color-1: (<color>) Controls the first slice color of the donut chart.
+ * @prop --tct-chart-donut-color-2: (<color>) Controls the second slice color of the donut chart.
+ * @prop --tct-chart-donut-color-3: (<color>) Controls the third slice color of the donut chart.
+ * @prop --tct-chart-donut-color-4: (<color>) Controls the fourth slice color of the donut chart.
+ * @prop --tct-chart-donut-color-5: (<color>) Controls the fifth slice color of the donut chart.
+ * @prop --tct-chart-donut-color-6: (<color>) Controls the sixth slice color of the donut chart.
+ * @prop --tct-chart-donut-color-7: (<color>) Controls the seventh slice color of the donut chart.
+ * @prop --tct-chart-donut-color-8: (<color>) Controls the eighth slice color of the donut chart.
+ * @prop --tct-chart-donut-color-9: (<color>) Controls the ninth slice color of the donut chart.
+ * @prop --tct-chart-donut-color-10: (<color>) Controls the tenth slice color of the donut chart.
+ * @prop --tct-chart-donut-color-11: (<color>) Controls the eleventh slice color of the donut chart.
+ * @prop --tct-chart-donut-color-12: (<color>) Controls the twelfth slice color of the donut chart.
+ */
 :host {
   position: relative;
   width: 100%;

package/dist/collection/components/q2-chart-donut/q2-chart-donut.js CHANGED Viewed

@@ -347,6 +347,7 @@ export class Q2ChartDonut {
             return Intl.NumberFormat('en-US', {
                 style: 'currency',
                 currency: 'USD',
+                maximumFractionDigits: this.currencyRound ? 0 : 2,
             }).format(valueAsFloat);
         }
         else {
@@ -520,7 +521,7 @@ export class Q2ChartDonut {
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'eb78727bb8c480478cde795c1e6bd744f988480f', onChange: this.onClickElsewhere }, h("figure", { key: '041df945c97ac0e291340123b54b3c0c14d2981e' }, h("div", { key: '550a9445398812293af981ff10d4109ed23657c9', class: "container" }, h("div", { key: '48d7a6a9639c4a3f19ec1534d08d456474a206d7', 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: '7764c5810953930a594449817e2906699346df6c' }, h("q2-legend", { key: '7674d2cfd8da31367f4e1b56d42f09b79f4ba99b', 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: '0b10100a5ce2a3f875854d05b536e12b3ed5f729', onChange: this.onClickElsewhere }, h("figure", { key: '63f3b993a6fa0132832af0a6afebcee412400442' }, h("div", { key: 'b38746147033702cbe87938e38b10038e78e26d8', class: "container" }, h("div", { key: '1e778a866c060c14e32c8590e9b3c0ea23ad31e2', 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: '598d1509ab4a21c79afb358b63fe7aadc4aec3a3' }, h("q2-legend", { key: 'f900ea24ffbcc52f137fe25a78d3843835ba2ffd', class: "legend", data: this.legendData, format: this.format, currencyRound: this.currencyRound, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     static get is() { return "q2-chart-donut"; }
     static get encapsulation() { return "shadow"; }
@@ -558,6 +559,25 @@ export class Q2ChartDonut {
                 "setter": false,
                 "reflect": true
             },
+            "currencyRound": {
+                "type": "boolean",
+                "attribute": "currency-round",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "data": {
                 "type": "unknown",
                 "attribute": "data",

package/dist/collection/components/q2-chart-donut/q2-chart-donut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-donut.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-donut/q2-chart-donut.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Element,\n EventEmitter,\n Event,\n Method,\n Watch,\n Listen,\n} from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TooltipComponent,\n TooltipComponentOption,\n LegendComponent,\n AriaComponent,\n AriaComponentOption,\n LegendComponentOption,\n} from 'echarts/components';\nimport { PieChart, PieSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { isEventFromElement, isMobile, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { getCSSProperty } from 'src/utils/charting';\n\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n TooltipComponentOption \| LegendComponentOption \| AriaComponentOption \| PieSeriesOption\n>;\n/*\n @name Donut Chart\n * @category Data Visualization\n * @summary Use for showing proportions of a whole as segments in a ring.\n /\n@Component({ tag: 'q2-chart-donut', shadow: true, styleUrl: 'q2-chart-donut.scss' })\nexport class Q2ChartDonut implements ComponentInterface {\n // #region Own Properties\n\n btnElement: HTMLDivElement;\n centerButtonElement: HTMLButtonElement;\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n colors: string[];\n defaultRecord = { id: null, value: null, name: null };\n hostElementStyles: CSSStyleDeclaration;\n isInChangeEvent: boolean;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hoveredId: string;\n\n @State()\n legendData: DonutChartData[];\n\n // #endregion\n // #region Public Property API\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: DonutChartData[] = [];\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /* The amount which the slice will scale when hovered. /\n @Prop()\n hoverScaleSize: number = 5;\n\n /\n The inner radius of the chart slices which is represeted by a percentage of the radius.\n \n @warning\n * If you update this property to be greater than or equal to the `outerRadius`,\n * we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n innerRadius: string = '70%';\n\n /\n Determine whether the data in the center renders inside a button element.\n \n @info\n * This also enables extra keyboard controls when the button is focused.\n /\n @Prop({ reflect: true })\n isClickable: boolean;\n\n /* The minimum size of the chart slizes which is represented as a percentage of the circumferences. /\n @Prop()\n minSliceSize: string = '2.5%';\n\n /\n The outer radius of the chart slices which is represented by a percentage of the radius.\n \n @warning\n * If you update this property to be less than or equal to the `innerRadius`,\n * we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n outerRadius: string = '85%';\n\n /* The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change. /\n @Prop({ mutable: true })\n selectedId: string;\n\n /* The amount which the slice will separate from the chart when selected. /\n @Prop()\n selectedOffset: number = 10;\n\n /\n Determines whether the legend is displayed.\n \n @info\n * The legend is a list of the data points in the chart and their colors.\n /\n @Prop({ reflect: true })\n showLegend: boolean = false;\n\n /* The icon that displays by default when no slices are selected. /\n @Prop({ reflect: true })\n summaryIcon: string;\n\n /\n The name that displays by default when no slices are selected.\n * @localizable\n /\n @Prop({ reflect: true })\n summaryName: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a slice is selected.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<DonutChartData>;\n\n /\n Emitted when the center button is clicked.\n \n Requires the `isClickable` prop to be set to `true`.\n * @deprecated Use 'tctClick' instead\n /\n @Event()\n click: EventEmitter<DonutChartData>;\n\n /\n Emitted when a slice is selected.\n /\n @Event()\n tctChange: EventEmitter<DonutChartData>;\n\n /\n Emitted when the center button is clicked.\n \n Requires the `isClickable` prop to be set to `true`.\n /\n @Event()\n tctClick: EventEmitter<DonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // CRITICAL: Dispose eCharts instance to prevent memory leaks\n // eCharts holds references to canvas, event listeners (mouseover, mouseout, click, selectchanged, finished),\n // and animation frames. All chart event listeners are automatically cleaned up by dispose()\n if (this.chart) {\n this.chart.dispose();\n this.chart = null;\n }\n\n // Disconnect ResizeObserver\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n\n // Clear cached style references that hold DOM references (Safari memory management)\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Clear DOM references\n this.chartContainer = null;\n this.centerButtonElement = null;\n this.btnElement = null;\n\n // Clear data references\n this.colors = null;\n this.legendData = null;\n\n // Clear state to prevent lingering references\n this.hoveredId = null;\n this.selectedId = null;\n }\n\n componentDidLoad(): void {\n const chart = echarts.init(this.chartContainer);\n\n this.cacheComputedStyles();\n this.colors = this.getColors();\n\n this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n this.resizeObserver.observe(this.hostElement);\n\n this.updateChart(chart);\n this.setupChartEvents(chart);\n this.checkSelectedId();\n\n this.chart = chart;\n this.setLegendData();\n this.selectById(this.selectedId);\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.isClickable) return;\n this.centerButtonElement?.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clears any selected slice.\n /\n @Method()\n async clearSelection() {\n const { selectedId } = this;\n if (!selectedId) return;\n\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(selectedId),\n });\n }\n\n /\n Returns the chart instance for e2e testing.\n \n @testOnly\n /\n @Method()\n async getChartOptions(): Promise<any> {\n return this.chart.getOption();\n }\n\n /\n Selects a slice by its provided `id` in the provided `data`.\n /\n @Method()\n async selectById(id: string) {\n const dataIndex = this.getIndexById(id);\n if (dataIndex === -1) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n /\n Selects a slice by its index in the provided `data`.\n /\n @Method()\n async selectByIndex(index: number) {\n const dataIndex = this.data[index] ? index : null;\n if (!dataIndex) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n /\n A method to select a slice with index.\n \n @testOnly\n /\n @Method()\n async selectDataPoint(index: number) {\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: index,\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('innerRadius')\n @Watch('outerRadius')\n @Watch('minSliceSize')\n @Watch('hoverScaleSize')\n @Watch('selectedOffset')\n propsUpdates() {\n if (!this.chart) return;\n this.updateChart(this.chart);\n }\n\n @Watch('data')\n dataUpdated() {\n if (!this.chart) return;\n this.colors = this.getColors();\n this.updateChart(this.chart);\n this.setLegendData();\n }\n\n @Watch('innerRadius')\n innerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (innerRadiusInt >= outerRadiusInt) {\n this.innerRadius = `${outerRadiusInt - 15}%`;\n }\n }\n\n @Watch('outerRadius')\n outerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (outerRadiusInt <= innerRadiusInt) {\n this.outerRadius = `${innerRadiusInt + 15}%`;\n }\n }\n\n /\n Function to detect and set a data range (category) as selected\n * Logic for when legends are present, and can set selectedId when ledgend category is clicked\n * Also can be used by dev to preset\n /\n @Watch('selectedId')\n checkSelectedId() {\n if (!!this.selectedId) {\n this.hoveredId = this.selectedId;\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.selectById(this.selectedId);\n }\n } else {\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(this.hoveredId),\n });\n }\n this.hoveredId = null;\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get centerData() {\n const { hoveredId, data } = this;\n const idToDisplay = hoveredId;\n const index = this.getIndexById(idToDisplay);\n\n return idToDisplay\n ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n : {\n name: loc(this.summaryName \|\| 'tecton.element.chartDonut.button.summaryName'),\n icon: this.summaryIcon,\n value: data.reduce((acc, cur) => acc + cur.value, 0),\n color: null,\n };\n }\n\n get isMobile(): boolean {\n return isMobile();\n }\n\n get legendHoveredId() {\n return this.hoveredId === this.selectedId ? null : this.hoveredId;\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n displayValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (isNaN(valueAsFloat)) return;\n\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n } else {\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n }\n\n getColors() {\n const defaultColors = [1, 3, 8, 4, 2, 10, 7, 11, 6, 9, 12, 5].map(e => `--comp-color-${e}`);\n return this.data.reduce((acc, cur, idx) => {\n let color = defaultColors[idx % defaultColors.length];\n if (cur.color) color = cur.color;\n\n acc.push(getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles) \|\| color);\n return acc;\n }, []);\n }\n\n getCSSProperty(name: string) {\n let fallback;\n if (name.startsWith('var(') && name.endsWith(')')) {\n const regExp = /var\$(.)\$/g;\n const result = regExp.exec(name);\n const split = result.length >= 2 ? result[1].split(',') : [];\n name = split[0];\n fallback = split[1];\n }\n let result = this.chartContainerStyles.getPropertyValue(name).trim();\n if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n return result \|\| fallback;\n }\n\n getDataById(id: string) {\n if (!id) return;\n return this.data.find(item => item.id === id);\n }\n\n getDataByIndex(index: number) {\n if (typeof index !== 'number') return;\n return this.data[index];\n }\n\n getDataIndexForId(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getIndexById(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getMinSliceSizeAsAngle() {\n return (parseFloat(this.minSliceSize) / 100) * 360;\n }\n\n onButtonClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n const { selectedId } = this;\n const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n mirrorEmit(this, ['click', 'tctClick'], data);\n };\n\n onButtonKeyDown = (event: KeyboardEvent) => {\n const { selectedId, data } = this;\n let selectedIndex = this.getIndexById(selectedId) \|\| 0;\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n selectedIndex--;\n if (selectedIndex < 0) selectedIndex = data.length - 1;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedIndex++;\n if (selectedIndex > data.length - 1) selectedIndex = 0;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'Escape':\n this.clearSelection();\n break;\n\n case ' ':\n event.preventDefault();\n break;\n\n default:\n return;\n }\n };\n\n onClickElsewhere = (event: Event) => {\n event.stopPropagation();\n this.clearSelection();\n };\n\n onContainerClick = (event: Event) => {\n if (this.isInChangeEvent) return;\n if (!(event.target instanceof HTMLElement)) return;\n this.clearSelection();\n event.stopPropagation();\n };\n\n onLegendClick = event => {\n event.stopPropagation();\n if (event.detail) {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.selectedId = event.detail.id;\n this.chart.dispatchAction({\n type: 'select',\n seriesIndex: 0,\n dataIndex,\n });\n } else {\n const dataIndex = this.getDataIndexForId(this.selectedId);\n this.hoveredId = this.selectedId;\n this.selectedId = null;\n this.chart.dispatchAction({\n type: 'unselect',\n seriesIndex: 0,\n dataIndex,\n });\n }\n };\n\n onLegendMouseenter = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = event.detail.id;\n this.chart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n onLegendMouseleave = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = this.selectedId;\n this.chart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n resizeChart() {\n this.chart.resize();\n }\n\n setLegendData() {\n const chartColors = this.chart.getOption().series[0].color;\n this.legendData = this.data.map((item, index) => {\n const newItem = { ...item };\n if (!newItem.color) newItem.color = chartColors[index];\n\n return newItem;\n });\n }\n\n // Edit with caution. Echarts does not interpret events the same on mobile.\n setupChartEvents(chart: echarts.ECharts) {\n if (!this.isMobile) {\n chart.on('mouseover', (params: any) => {\n this.hoveredId = params.data.id;\n });\n chart.on('mouseout', () => {\n this.hoveredId = this.selectedId;\n });\n }\n chart.on('click', params => {\n params.event.stop();\n });\n chart.on('selectchanged', (params: any) => {\n const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n const data =\n typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n this.selectedId = data.id;\n this.isInChangeEvent = true;\n mirrorEmit(this, ['change', 'tctChange'], data);\n setTimeout(() => {\n this.isInChangeEvent = false;\n }, 0);\n });\n chart.on('finished', () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n });\n }\n\n updateChart(chart: echarts.ECharts) {\n this.validateColor();\n return chart.setOption<EChartsOption>({\n tooltip: {\n show: false,\n },\n legend: {\n show: false,\n },\n aria: {\n enabled: true,\n },\n series: [\n {\n name: this.chartName,\n animationType: 'scale',\n color: this.colors,\n id: 'pie',\n type: 'pie',\n selectedOffset: this.selectedOffset,\n selectedMode: 'single',\n radius: [this.innerRadius, this.outerRadius],\n label: {\n show: false,\n },\n labelLine: {\n show: false,\n },\n padAngle: 3,\n itemStyle: {\n borderRadius: 2,\n },\n emphasis: {\n disabled: this.isMobile,\n scaleSize: this.hoverScaleSize,\n itemStyle: {\n color: 'inherit',\n },\n },\n minAngle: this.getMinSliceSizeAsAngle(),\n data: this.data,\n },\n ],\n });\n }\n\n validateColor() {\n // check if there is name duplicated, then custom style using `itemStyle` object will be used.\n if (\n this.data.length >\n Object.keys(\n this.data.reduce((acc, cur) => {\n acc[cur.name] = cur.name;\n return acc;\n }, {})\n ).length\n ) {\n this.data.forEach((el, i) => {\n el.itemStyle = { ...el.itemStyle, color: el.color \|\| this.colors[i] };\n });\n }\n }\n\n // #endregion\n // #region Render Methods\n\n renderCenterBlock() {\n const { icon, name, value, color } = this.centerData;\n const { isClickable } = this;\n const TagName = isClickable ? 'button' : 'div';\n const displayValue = this.displayValue(value);\n\n const props = isClickable\n ? {\n onKeyDown: this.onButtonKeyDown,\n onClick: this.onButtonClick,\n ref: el => (this.centerButtonElement = el),\n 'aria-describedby': 'center-card-description',\n 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n }\n : null;\n\n return (\n <div\n class=\"center-card-container\"\n style={{ width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` }}\n >\n <div\n id=\"center-card-description\"\n class=\"sr\"\n >\n {loc('tecton.element.chartDonut.button.description')}\n </div>\n <TagName\n class=\"center-card\"\n test-id=\"centerCard\"\n {...props}\n >\n {!!icon && (\n <q2-icon\n type={icon}\n style={\n color && {\n '--tct-icon-stroke-primary': color,\n '--tct-icon-stroke-secondary': color,\n color,\n }\n }\n ></q2-icon>\n )}\n {!!name && <div class=\"name\">{name}</div>}\n {!isNaN(value) && <div class=\"value\">{displayValue}</div>}\n </TagName>\n </div>\n );\n }\n\n render() {\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <figure>\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n aria-describedby={!this.isClickable ? 'center-card-description' : undefined}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"chartContainer\"\n onClick={this.onContainerClick}\n tabIndex={!this.isClickable ? 0 : undefined}\n onKeyDown={!this.isClickable ? this.onButtonKeyDown : undefined}\n ></div>\n {this.renderCenterBlock()}\n </div>\n {this.showLegend && (\n <figcaption>\n <q2-legend\n class=\"legend\"\n data={this.legendData}\n format={this.format}\n hoveredItemId={this.legendHoveredId}\n onClick={this.onLegendClick}\n onMouseleave={this.onLegendMouseleave}\n onMouseenter={this.onLegendMouseenter}\n selectedItemId={this.selectedId}\n />\n </figcaption>\n )}\n </figure>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-chart-donut.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-donut/q2-chart-donut.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Element,\n EventEmitter,\n Event,\n Method,\n Watch,\n Listen,\n} from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TooltipComponent,\n TooltipComponentOption,\n LegendComponent,\n AriaComponent,\n AriaComponentOption,\n LegendComponentOption,\n} from 'echarts/components';\nimport { PieChart, PieSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { isEventFromElement, isMobile, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { getCSSProperty } from 'src/utils/charting';\n\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n TooltipComponentOption \| LegendComponentOption \| AriaComponentOption \| PieSeriesOption\n>;\n/*\n @name Donut Chart\n * @category Data Visualization\n * @summary Use for showing proportions of a whole as segments in a ring.\n /\n@Component({ tag: 'q2-chart-donut', shadow: true, styleUrl: 'q2-chart-donut.scss' })\nexport class Q2ChartDonut implements ComponentInterface {\n // #region Own Properties\n\n btnElement: HTMLDivElement;\n centerButtonElement: HTMLButtonElement;\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n colors: string[];\n defaultRecord = { id: null, value: null, name: null };\n hostElementStyles: CSSStyleDeclaration;\n isInChangeEvent: boolean;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hoveredId: string;\n\n @State()\n legendData: DonutChartData[];\n\n // #endregion\n // #region Public Property API\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00. /\n @Prop()\n currencyRound: boolean;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: DonutChartData[] = [];\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /* The amount which the slice will scale when hovered. /\n @Prop()\n hoverScaleSize: number = 5;\n\n /\n The inner radius of the chart slices which is represeted by a percentage of the radius.\n \n @warning\n * If you update this property to be greater than or equal to the `outerRadius`,\n * we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n innerRadius: string = '70%';\n\n /\n Determine whether the data in the center renders inside a button element.\n \n @info\n * This also enables extra keyboard controls when the button is focused.\n /\n @Prop({ reflect: true })\n isClickable: boolean;\n\n /* The minimum size of the chart slizes which is represented as a percentage of the circumferences. /\n @Prop()\n minSliceSize: string = '2.5%';\n\n /\n The outer radius of the chart slices which is represented by a percentage of the radius.\n \n @warning\n * If you update this property to be less than or equal to the `innerRadius`,\n * we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n outerRadius: string = '85%';\n\n /* The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change. /\n @Prop({ mutable: true })\n selectedId: string;\n\n /* The amount which the slice will separate from the chart when selected. /\n @Prop()\n selectedOffset: number = 10;\n\n /\n Determines whether the legend is displayed.\n \n @info\n * The legend is a list of the data points in the chart and their colors.\n /\n @Prop({ reflect: true })\n showLegend: boolean = false;\n\n /* The icon that displays by default when no slices are selected. /\n @Prop({ reflect: true })\n summaryIcon: string;\n\n /\n The name that displays by default when no slices are selected.\n * @localizable\n /\n @Prop({ reflect: true })\n summaryName: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a slice is selected.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<DonutChartData>;\n\n /\n Emitted when the center button is clicked.\n \n Requires the `isClickable` prop to be set to `true`.\n * @deprecated Use 'tctClick' instead\n /\n @Event()\n click: EventEmitter<DonutChartData>;\n\n /\n Emitted when a slice is selected.\n /\n @Event()\n tctChange: EventEmitter<DonutChartData>;\n\n /\n Emitted when the center button is clicked.\n \n Requires the `isClickable` prop to be set to `true`.\n /\n @Event()\n tctClick: EventEmitter<DonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // CRITICAL: Dispose eCharts instance to prevent memory leaks\n // eCharts holds references to canvas, event listeners (mouseover, mouseout, click, selectchanged, finished),\n // and animation frames. All chart event listeners are automatically cleaned up by dispose()\n if (this.chart) {\n this.chart.dispose();\n this.chart = null;\n }\n\n // Disconnect ResizeObserver\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n\n // Clear cached style references that hold DOM references (Safari memory management)\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Clear DOM references\n this.chartContainer = null;\n this.centerButtonElement = null;\n this.btnElement = null;\n\n // Clear data references\n this.colors = null;\n this.legendData = null;\n\n // Clear state to prevent lingering references\n this.hoveredId = null;\n this.selectedId = null;\n }\n\n componentDidLoad(): void {\n const chart = echarts.init(this.chartContainer);\n\n this.cacheComputedStyles();\n this.colors = this.getColors();\n\n this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n this.resizeObserver.observe(this.hostElement);\n\n this.updateChart(chart);\n this.setupChartEvents(chart);\n this.checkSelectedId();\n\n this.chart = chart;\n this.setLegendData();\n this.selectById(this.selectedId);\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.isClickable) return;\n this.centerButtonElement?.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clears any selected slice.\n /\n @Method()\n async clearSelection() {\n const { selectedId } = this;\n if (!selectedId) return;\n\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(selectedId),\n });\n }\n\n /\n Returns the chart instance for e2e testing.\n \n @testOnly\n /\n @Method()\n async getChartOptions(): Promise<any> {\n return this.chart.getOption();\n }\n\n /\n Selects a slice by its provided `id` in the provided `data`.\n /\n @Method()\n async selectById(id: string) {\n const dataIndex = this.getIndexById(id);\n if (dataIndex === -1) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n /\n Selects a slice by its index in the provided `data`.\n /\n @Method()\n async selectByIndex(index: number) {\n const dataIndex = this.data[index] ? index : null;\n if (!dataIndex) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n /\n A method to select a slice with index.\n \n @testOnly\n /\n @Method()\n async selectDataPoint(index: number) {\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: index,\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('innerRadius')\n @Watch('outerRadius')\n @Watch('minSliceSize')\n @Watch('hoverScaleSize')\n @Watch('selectedOffset')\n propsUpdates() {\n if (!this.chart) return;\n this.updateChart(this.chart);\n }\n\n @Watch('data')\n dataUpdated() {\n if (!this.chart) return;\n this.colors = this.getColors();\n this.updateChart(this.chart);\n this.setLegendData();\n }\n\n @Watch('innerRadius')\n innerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (innerRadiusInt >= outerRadiusInt) {\n this.innerRadius = `${outerRadiusInt - 15}%`;\n }\n }\n\n @Watch('outerRadius')\n outerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (outerRadiusInt <= innerRadiusInt) {\n this.outerRadius = `${innerRadiusInt + 15}%`;\n }\n }\n\n /\n Function to detect and set a data range (category) as selected\n * Logic for when legends are present, and can set selectedId when ledgend category is clicked\n * Also can be used by dev to preset\n /\n @Watch('selectedId')\n checkSelectedId() {\n if (!!this.selectedId) {\n this.hoveredId = this.selectedId;\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.selectById(this.selectedId);\n }\n } else {\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(this.hoveredId),\n });\n }\n this.hoveredId = null;\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get centerData() {\n const { hoveredId, data } = this;\n const idToDisplay = hoveredId;\n const index = this.getIndexById(idToDisplay);\n\n return idToDisplay\n ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n : {\n name: loc(this.summaryName \|\| 'tecton.element.chartDonut.button.summaryName'),\n icon: this.summaryIcon,\n value: data.reduce((acc, cur) => acc + cur.value, 0),\n color: null,\n };\n }\n\n get isMobile(): boolean {\n return isMobile();\n }\n\n get legendHoveredId() {\n return this.hoveredId === this.selectedId ? null : this.hoveredId;\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n displayValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (isNaN(valueAsFloat)) return;\n\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: this.currencyRound ? 0 : 2,\n }).format(valueAsFloat);\n } else {\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n }\n\n getColors() {\n const defaultColors = [1, 3, 8, 4, 2, 10, 7, 11, 6, 9, 12, 5].map(e => `--comp-color-${e}`);\n return this.data.reduce((acc, cur, idx) => {\n let color = defaultColors[idx % defaultColors.length];\n if (cur.color) color = cur.color;\n\n acc.push(getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles) \|\| color);\n return acc;\n }, []);\n }\n\n getCSSProperty(name: string) {\n let fallback;\n if (name.startsWith('var(') && name.endsWith(')')) {\n const regExp = /var\$(.)\$/g;\n const result = regExp.exec(name);\n const split = result.length >= 2 ? result[1].split(',') : [];\n name = split[0];\n fallback = split[1];\n }\n let result = this.chartContainerStyles.getPropertyValue(name).trim();\n if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n return result \|\| fallback;\n }\n\n getDataById(id: string) {\n if (!id) return;\n return this.data.find(item => item.id === id);\n }\n\n getDataByIndex(index: number) {\n if (typeof index !== 'number') return;\n return this.data[index];\n }\n\n getDataIndexForId(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getIndexById(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getMinSliceSizeAsAngle() {\n return (parseFloat(this.minSliceSize) / 100) * 360;\n }\n\n onButtonClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n const { selectedId } = this;\n const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n mirrorEmit(this, ['click', 'tctClick'], data);\n };\n\n onButtonKeyDown = (event: KeyboardEvent) => {\n const { selectedId, data } = this;\n let selectedIndex = this.getIndexById(selectedId) \|\| 0;\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n selectedIndex--;\n if (selectedIndex < 0) selectedIndex = data.length - 1;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedIndex++;\n if (selectedIndex > data.length - 1) selectedIndex = 0;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'Escape':\n this.clearSelection();\n break;\n\n case ' ':\n event.preventDefault();\n break;\n\n default:\n return;\n }\n };\n\n onClickElsewhere = (event: Event) => {\n event.stopPropagation();\n this.clearSelection();\n };\n\n onContainerClick = (event: Event) => {\n if (this.isInChangeEvent) return;\n if (!(event.target instanceof HTMLElement)) return;\n this.clearSelection();\n event.stopPropagation();\n };\n\n onLegendClick = event => {\n event.stopPropagation();\n if (event.detail) {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.selectedId = event.detail.id;\n this.chart.dispatchAction({\n type: 'select',\n seriesIndex: 0,\n dataIndex,\n });\n } else {\n const dataIndex = this.getDataIndexForId(this.selectedId);\n this.hoveredId = this.selectedId;\n this.selectedId = null;\n this.chart.dispatchAction({\n type: 'unselect',\n seriesIndex: 0,\n dataIndex,\n });\n }\n };\n\n onLegendMouseenter = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = event.detail.id;\n this.chart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n onLegendMouseleave = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = this.selectedId;\n this.chart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n resizeChart() {\n this.chart.resize();\n }\n\n setLegendData() {\n const chartColors = this.chart.getOption().series[0].color;\n this.legendData = this.data.map((item, index) => {\n const newItem = { ...item };\n if (!newItem.color) newItem.color = chartColors[index];\n\n return newItem;\n });\n }\n\n // Edit with caution. Echarts does not interpret events the same on mobile.\n setupChartEvents(chart: echarts.ECharts) {\n if (!this.isMobile) {\n chart.on('mouseover', (params: any) => {\n this.hoveredId = params.data.id;\n });\n chart.on('mouseout', () => {\n this.hoveredId = this.selectedId;\n });\n }\n chart.on('click', params => {\n params.event.stop();\n });\n chart.on('selectchanged', (params: any) => {\n const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n const data =\n typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n this.selectedId = data.id;\n this.isInChangeEvent = true;\n mirrorEmit(this, ['change', 'tctChange'], data);\n setTimeout(() => {\n this.isInChangeEvent = false;\n }, 0);\n });\n chart.on('finished', () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n });\n }\n\n updateChart(chart: echarts.ECharts) {\n this.validateColor();\n return chart.setOption<EChartsOption>({\n tooltip: {\n show: false,\n },\n legend: {\n show: false,\n },\n aria: {\n enabled: true,\n },\n series: [\n {\n name: this.chartName,\n animationType: 'scale',\n color: this.colors,\n id: 'pie',\n type: 'pie',\n selectedOffset: this.selectedOffset,\n selectedMode: 'single',\n radius: [this.innerRadius, this.outerRadius],\n label: {\n show: false,\n },\n labelLine: {\n show: false,\n },\n padAngle: 3,\n itemStyle: {\n borderRadius: 2,\n },\n emphasis: {\n disabled: this.isMobile,\n scaleSize: this.hoverScaleSize,\n itemStyle: {\n color: 'inherit',\n },\n },\n minAngle: this.getMinSliceSizeAsAngle(),\n data: this.data,\n },\n ],\n });\n }\n\n validateColor() {\n // check if there is name duplicated, then custom style using `itemStyle` object will be used.\n if (\n this.data.length >\n Object.keys(\n this.data.reduce((acc, cur) => {\n acc[cur.name] = cur.name;\n return acc;\n }, {})\n ).length\n ) {\n this.data.forEach((el, i) => {\n el.itemStyle = { ...el.itemStyle, color: el.color \|\| this.colors[i] };\n });\n }\n }\n\n // #endregion\n // #region Render Methods\n\n renderCenterBlock() {\n const { icon, name, value, color } = this.centerData;\n const { isClickable } = this;\n const TagName = isClickable ? 'button' : 'div';\n const displayValue = this.displayValue(value);\n\n const props = isClickable\n ? {\n onKeyDown: this.onButtonKeyDown,\n onClick: this.onButtonClick,\n ref: el => (this.centerButtonElement = el),\n 'aria-describedby': 'center-card-description',\n 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n }\n : null;\n\n return (\n <div\n class=\"center-card-container\"\n style={{ width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` }}\n >\n <div\n id=\"center-card-description\"\n class=\"sr\"\n >\n {loc('tecton.element.chartDonut.button.description')}\n </div>\n <TagName\n class=\"center-card\"\n test-id=\"centerCard\"\n {...props}\n >\n {!!icon && (\n <q2-icon\n type={icon}\n style={\n color && {\n '--tct-icon-stroke-primary': color,\n '--tct-icon-stroke-secondary': color,\n color,\n }\n }\n ></q2-icon>\n )}\n {!!name && <div class=\"name\">{name}</div>}\n {!isNaN(value) && <div class=\"value\">{displayValue}</div>}\n </TagName>\n </div>\n );\n }\n\n render() {\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <figure>\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n aria-describedby={!this.isClickable ? 'center-card-description' : undefined}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"chartContainer\"\n onClick={this.onContainerClick}\n tabIndex={!this.isClickable ? 0 : undefined}\n onKeyDown={!this.isClickable ? this.onButtonKeyDown : undefined}\n ></div>\n {this.renderCenterBlock()}\n </div>\n {this.showLegend && (\n <figcaption>\n <q2-legend\n class=\"legend\"\n data={this.legendData}\n format={this.format}\n currencyRound={this.currencyRound}\n hoveredItemId={this.legendHoveredId}\n onClick={this.onLegendClick}\n onMouseleave={this.onLegendMouseleave}\n onMouseenter={this.onLegendMouseenter}\n selectedItemId={this.selectedId}\n />\n </figcaption>\n )}\n </figure>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-chart-donut/test/q2-chart-donut-test.vr.js ADDED Viewed

@@ -0,0 +1,151 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const SHORT_DATA = [
+    { id: 'food', name: 'Food & Dining', value: 2796.59, icon: 'silverware' },
+    { id: 'uncategorized', name: 'Uncategorized', value: 2702.52, icon: 'question' },
+    { id: 'shopping', name: 'Shopping', value: 2107.93, icon: 'pricetag' },
+    { id: 'auto', name: 'Auto & Transport', value: 1335.14, icon: 'car-front' },
+    { id: 'other', name: 'All other spending', value: 1659.66, icon: 'money-time' },
+];
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-chart-donut style="width: 300px"></q2-chart-donut>`,
+    },
+    {
+        name: 'with-summary',
+        html: `<q2-chart-donut style="width: 300px" summary-icon="coins" summary-name="Total Amount" chart-name="Spending"></q2-chart-donut>`,
+    },
+    {
+        name: 'with-legend',
+        html: `<q2-chart-donut style="width: 300px" summary-icon="coins" summary-name="Total" show-legend></q2-chart-donut>`,
+    },
+    {
+        name: 'clickable',
+        html: `<q2-chart-donut style="width: 300px" summary-icon="coins" summary-name="Total" is-clickable="true" show-legend></q2-chart-donut>`,
+    },
+    {
+        name: 'currency',
+        html: `<q2-chart-donut style="width: 300px" format="currency" summary-icon="coins" summary-name="Total" show-legend></q2-chart-donut>`,
+    },
+    {
+        name: 'inner-radius-50',
+        html: `<q2-chart-donut style="width: 300px" summary-icon="coins" summary-name="Total" inner-radius="50%" show-legend></q2-chart-donut>`,
+    },
+    {
+        name: 'selected',
+        html: `<q2-chart-donut style="width: 300px" summary-icon="coins" summary-name="Total" selected-id="food" show-legend></q2-chart-donut>`,
+    },
+    {
+        name: 'combined-hero',
+        html: `<q2-chart-donut style="width: 300px" chart-name="Recent Spending" format="currency" currency-round summary-icon="coins" summary-name="Total Amount" is-clickable="true" inner-radius="70%" show-legend></q2-chart-donut>`,
+    },
+];
+const setChartData = async (page, data) => {
+    await page.locator('q2-chart-donut').evaluate((el, payload) => {
+        el.data = payload;
+    }, data);
+    // echarts marks the canvas with aria-hidden="true" once the 'finished' event has fired.
+    // Waiting on that attribute keeps the snapshot from racing the canvas paint.
+    await page.locator('q2-chart-donut').evaluate(async (el) => {
+        var _a;
+        const canvas = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('canvas');
+        if (!canvas)
+            return;
+        if (canvas.getAttribute('aria-hidden') === 'true')
+            return;
+        await new Promise(resolve => {
+            const observer = new MutationObserver(() => {
+                if (canvas.getAttribute('aria-hidden') === 'true') {
+                    observer.disconnect();
+                    resolve();
+                }
+            });
+            observer.observe(canvas, { attributes: true, attributeFilter: ['aria-hidden'] });
+        });
+    });
+};
+const restingCase = (variant, theme) => {
+    test(`q2-chart-donut--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await setChartData(page, SHORT_DATA);
+        await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-chart-donut--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await setChartData(page, SHORT_DATA);
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--focus--${theme}.png`);
+    });
+};
+const CLICKABLE_VARIANT = VARIANTS.find(v => v.name === 'clickable');
+const WITH_LEGEND_VARIANT = VARIANTS.find(v => v.name === 'with-legend');
+// q2-legend renders asynchronously after data flows through q2-chart-donut. The render race
+// timing varies by theme — `flat` lost the race in our first generate run. This polls until
+// the second legend button is queryable in the nested shadow DOM, with a bounded timeout.
+const waitForSecondLegendButton = async (page) => {
+    await page.waitForFunction(() => {
+        var _a, _b;
+        const host = document.querySelector('q2-chart-donut');
+        const legend = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('q2-legend');
+        const buttons = (_b = legend === null || legend === void 0 ? void 0 : legend.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('button.item-button');
+        return !!buttons && buttons.length >= 2;
+    }, null, { timeout: 5000 });
+};
+// Hover the second legend item button (in q2-legend's shadow DOM, nested inside q2-chart-donut's shadow DOM).
+const legendHoverCase = (variant, theme) => {
+    test(`q2-chart-donut--${variant.name}--legend-hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await setChartData(page, SHORT_DATA);
+        await waitForSecondLegendButton(page);
+        await page.locator('q2-chart-donut').evaluate((el) => {
+            var _a, _b;
+            const legend = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('q2-legend');
+            const button = (_b = legend === null || legend === void 0 ? void 0 : legend.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('button.item-button')[1];
+            if (!button)
+                throw new Error('legend item button not found');
+            button.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+        });
+        await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--legend-hover--${theme}.png`);
+    });
+};
+const legendClickCase = (variant, theme) => {
+    test(`q2-chart-donut--${variant.name}--legend-click — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await setChartData(page, SHORT_DATA);
+        await waitForSecondLegendButton(page);
+        await page.locator('q2-chart-donut').evaluate((el) => {
+            var _a, _b;
+            const legend = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('q2-legend');
+            const button = (_b = legend === null || legend === void 0 ? void 0 : legend.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('button.item-button')[1];
+            if (!button)
+                throw new Error('legend item button not found');
+            button.click();
+        });
+        // Allow the chart's selection animation a moment to settle before snapping.
+        await page.waitForTimeout(300);
+        await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--legend-click--${theme}.png`);
+    });
+};
+test.describe('q2-chart-donut — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    if (CLICKABLE_VARIANT) {
+        for (const theme of THEMES) {
+            focusCase(CLICKABLE_VARIANT, theme);
+        }
+    }
+    if (WITH_LEGEND_VARIANT) {
+        for (const theme of THEMES) {
+            legendHoverCase(WITH_LEGEND_VARIANT, theme);
+            legendClickCase(WITH_LEGEND_VARIANT, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-chart-donut-test.vr.js.map

package/dist/collection/components/q2-chart-donut/test/q2-chart-donut-test.vr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"q2-chart-donut-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-chart-donut/test/q2-chart-donut-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport type { Page } from '@playwright/test';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype DonutDatum = { id: string; name: string; value: number; icon: string };\n\nconst SHORT_DATA: DonutDatum[] = [\n { id: 'food', name: 'Food & Dining', value: 2796.59, icon: 'silverware' },\n { id: 'uncategorized', name: 'Uncategorized', value: 2702.52, icon: 'question' },\n { id: 'shopping', name: 'Shopping', value: 2107.93, icon: 'pricetag' },\n { id: 'auto', name: 'Auto & Transport', value: 1335.14, icon: 'car-front' },\n { id: 'other', name: 'All other spending', value: 1659.66, icon: 'money-time' },\n];\n\ntype Variant = {\n name: string;\n html: string;\n};\n\nconst VARIANTS: Variant[] = [\n {\n name: 'default',\n html: `<q2-chart-donut style=\"width: 300px\"></q2-chart-donut>`,\n },\n {\n name: 'with-summary',\n html: `<q2-chart-donut style=\"width: 300px\" summary-icon=\"coins\" summary-name=\"Total Amount\" chart-name=\"Spending\"></q2-chart-donut>`,\n },\n {\n name: 'with-legend',\n html: `<q2-chart-donut style=\"width: 300px\" summary-icon=\"coins\" summary-name=\"Total\" show-legend></q2-chart-donut>`,\n },\n {\n name: 'clickable',\n html: `<q2-chart-donut style=\"width: 300px\" summary-icon=\"coins\" summary-name=\"Total\" is-clickable=\"true\" show-legend></q2-chart-donut>`,\n },\n {\n name: 'currency',\n html: `<q2-chart-donut style=\"width: 300px\" format=\"currency\" summary-icon=\"coins\" summary-name=\"Total\" show-legend></q2-chart-donut>`,\n },\n {\n name: 'inner-radius-50',\n html: `<q2-chart-donut style=\"width: 300px\" summary-icon=\"coins\" summary-name=\"Total\" inner-radius=\"50%\" show-legend></q2-chart-donut>`,\n },\n {\n name: 'selected',\n html: `<q2-chart-donut style=\"width: 300px\" summary-icon=\"coins\" summary-name=\"Total\" selected-id=\"food\" show-legend></q2-chart-donut>`,\n },\n {\n name: 'combined-hero',\n html: `<q2-chart-donut style=\"width: 300px\" chart-name=\"Recent Spending\" format=\"currency\" currency-round summary-icon=\"coins\" summary-name=\"Total Amount\" is-clickable=\"true\" inner-radius=\"70%\" show-legend></q2-chart-donut>`,\n },\n];\n\nconst setChartData = async (page: Page, data: DonutDatum[]) => {\n await page.locator('q2-chart-donut').evaluate((el: HTMLElement & { data: DonutDatum[] }, payload) => {\n el.data = payload;\n }, data);\n // echarts marks the canvas with aria-hidden=\"true\" once the 'finished' event has fired.\n // Waiting on that attribute keeps the snapshot from racing the canvas paint.\n await page.locator('q2-chart-donut').evaluate(async (el: HTMLElement) => {\n const canvas = el.shadowRoot?.querySelector('canvas');\n if (!canvas) return;\n if (canvas.getAttribute('aria-hidden') === 'true') return;\n await new Promise<void>(resolve => {\n const observer = new MutationObserver(() => {\n if (canvas.getAttribute('aria-hidden') === 'true') {\n observer.disconnect();\n resolve();\n }\n });\n observer.observe(canvas, { attributes: true, attributeFilter: ['aria-hidden'] });\n });\n });\n};\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n test(`q2-chart-donut--${variant.name}--resting — ${theme}`, async ({ page }) => {\n await setupPage(page, variant.html, { theme, setupLoc: true });\n await setChartData(page, SHORT_DATA);\n await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--resting--${theme}.png`);\n });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n test(`q2-chart-donut--${variant.name}--focus — ${theme}`, async ({ page }) => {\n await setupPage(page, variant.html, { theme, setupLoc: true });\n await setChartData(page, SHORT_DATA);\n await page.keyboard.press('Tab');\n await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--focus--${theme}.png`);\n });\n};\n\nconst CLICKABLE_VARIANT = VARIANTS.find(v => v.name === 'clickable');\nconst WITH_LEGEND_VARIANT = VARIANTS.find(v => v.name === 'with-legend');\n\n// q2-legend renders asynchronously after data flows through q2-chart-donut. The render race\n// timing varies by theme — `flat` lost the race in our first generate run. This polls until\n// the second legend button is queryable in the nested shadow DOM, with a bounded timeout.\nconst waitForSecondLegendButton = async (page: import('@playwright/test').Page) => {\n await page.waitForFunction(\n () => {\n const host = document.querySelector('q2-chart-donut');\n const legend = host?.shadowRoot?.querySelector('q2-legend');\n const buttons = legend?.shadowRoot?.querySelectorAll<HTMLButtonElement>('button.item-button');\n return !!buttons && buttons.length >= 2;\n },\n null,\n { timeout: 5000 }\n );\n};\n\n// Hover the second legend item button (in q2-legend's shadow DOM, nested inside q2-chart-donut's shadow DOM).\nconst legendHoverCase = (variant: Variant, theme: Theme) => {\n test(`q2-chart-donut--${variant.name}--legend-hover — ${theme}`, async ({ page }) => {\n await setupPage(page, variant.html, { theme, setupLoc: true });\n await setChartData(page, SHORT_DATA);\n await waitForSecondLegendButton(page);\n await page.locator('q2-chart-donut').evaluate((el: HTMLElement) => {\n const legend = el.shadowRoot?.querySelector('q2-legend');\n const button = legend?.shadowRoot?.querySelectorAll<HTMLButtonElement>('button.item-button')[1];\n if (!button) throw new Error('legend item button not found');\n button.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));\n });\n await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--legend-hover--${theme}.png`);\n });\n};\n\nconst legendClickCase = (variant: Variant, theme: Theme) => {\n test(`q2-chart-donut--${variant.name}--legend-click — ${theme}`, async ({ page }) => {\n await setupPage(page, variant.html, { theme, setupLoc: true });\n await setChartData(page, SHORT_DATA);\n await waitForSecondLegendButton(page);\n await page.locator('q2-chart-donut').evaluate((el: HTMLElement) => {\n const legend = el.shadowRoot?.querySelector('q2-legend');\n const button = legend?.shadowRoot?.querySelectorAll<HTMLButtonElement>('button.item-button')[1];\n if (!button) throw new Error('legend item button not found');\n button.click();\n });\n // Allow the chart's selection animation a moment to settle before snapping.\n await page.waitForTimeout(300);\n await expect(page).toHaveScreenshot(`q2-chart-donut--${variant.name}--legend-click--${theme}.png`);\n });\n};\n\ntest.describe('q2-chart-donut — variants × themes', () => {\n for (const variant of VARIANTS) {\n for (const theme of THEMES) {\n restingCase(variant, theme);\n }\n }\n if (CLICKABLE_VARIANT) {\n for (const theme of THEMES) {\n focusCase(CLICKABLE_VARIANT, theme);\n }\n }\n if (WITH_LEGEND_VARIANT) {\n for (const theme of THEMES) {\n legendHoverCase(WITH_LEGEND_VARIANT, theme);\n legendClickCase(WITH_LEGEND_VARIANT, theme);\n }\n }\n});\n"]}