npm - q2-tecton-elements - Versions diffs - 1.47.4 → 1.47.5 - Mend

q2-tecton-elements 1.47.4 → 1.47.5

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 (37) hide show

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

@@ -40,7 +40,20 @@ export class Q2ChartArea {
         overrideFocus(this.hostElement);
     }
     disconnectedCallback() {
+        // CRITICAL: Dispose eCharts instance to prevent memory leaks
+        // eCharts holds references to canvas, event listeners, and animation frames
+        if (this.chart) {
+            this.chart.dispose();
+            this.chart = null;
+        }
+        // Remove window resize listener
         window.removeEventListener('resize', this.resizeEventListener);
+        // Clear cached style references that hold DOM references (Safari memory management)
+        this.chartContainerStyles = null;
+        this.hostElementStyles = null;
+        // Clear DOM and event listener references
+        this.chartContainer = null;
+        this.resizeEventListener = null;
     }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -190,7 +203,7 @@ export class Q2ChartArea {
         this.updateChart(this.chart);
     }
     render() {
-        return (h("div", { key: '5ac722f85acf3a00828cfcd6bfb3d13cadc8d4ef', class: "container" }, h("div", { key: 'a39f5664712841ad70c1628c88b77500b694db63', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '9be8e22a08ac2971ecb0aadb9b86eac5830b5cf2', class: "container" }, h("div", { key: '95dc71d45f12bf3820ea17a0641ebb147ea029ac', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-area.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/q2-chart-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,EACH,cAAc,EAEd,aAAa,EAEb,aAAa,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAoB,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAG/E,OAAO,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,mBAAmB,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;AAK5G,MAAM,OAAO,WAAW;;oBAES,EAAE;;;;;;;;;;kCAoDwB,KAAK;mCAGJ,KAAK;;+BAiBT,KAAK;gCAMJ,KAAK;;;6BAiBR,KAAK;mCAGC,KAAK;4BAMZ,KAAK;;IAmBtD,gBAAgB;QACZ,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEhD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,IAAI,CAAC,mBAAmB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACpD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAExB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,oBAAoB;QAChB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACnE,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClE,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,CAAC;IAED,WAAW;QACP,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,OAAO;gBACH,IAAI,EAAE,QAAQ;gBACd,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,CAAC;gBACJ,EAAE,EAAE,CAAC;gBACL,EAAE,EAAE,CAAC;gBACL,UAAU,EAAE;oBACR;wBACI,MAAM,EAAE,CAAC;wBACT,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;qBACvC;oBACD;wBACI,MAAM,EAAE,CAAC;wBACT,KAAK,EAAE,OAAO;qBACjB;iBACJ;gBACD,MAAM,EAAE,KAAK;aAChB,CAAC;QACN,CAAC;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,QAAQ,CAAC,KAAa;QAClB,MAAM,YAAY,GAAG,cAAc,CAAC,kBAAkB,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC3G,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC9F,IAAI,YAAY;YAAE,OAAO,YAAY,CAAC;QACtC,IAAI,YAAY,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QACtC,OAAO,YAAY,CAAC;IACxB,CAAC;IAED,WAAW,CAAC,KAAsB;;QAC9B,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,QAAQ,CAAC,KAAK,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEnG,MAAM,SAAS,GAAG;YACd,IAAI,EAAE,OAAO;YACb,SAAS,EAAE;gBACP,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CACzB,WAAW,CAAC,KAAK,EAAE;oBACf,IAAI,EAAE,IAAI,CAAC,MAAM;oBACjB,QAAQ;iBACX,CAAC;gBACN,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACtC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACtC,IAAI,EAAE,CAAC,IAAI,CAAC,mBAAmB;aAClC;YACD,SAAS,EAAE;gBACP,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,SAAS;aAC3D;SACJ,CAAC;QAEF,MAAM,YAAY,GAAG;YACjB,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,KAAK;YAClB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACnD,SAAS,EAAE;gBACP,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACrC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACrC,KAAK,EAAE,IAAI,CAAC,cAAc,IAAI,EAAE;gBAChC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,IAAI,MAAM;gBAC1C,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC,IAAI,CAAC,kBAAkB;aACjC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE,CAAC,IAAI,CAAC,kBAAkB;aACjC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE,CAAC,IAAI,CAAC,kBAAkB;aACjC;YACD,WAAW,EAAE;gBACT,IAAI,EAAE,IAAI;gBACV,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE;oBACH,IAAI,EAAE,KAAK;oBACX,SAAS,EAAE,CAAC,MAAW,EAAE,EAAE;wBACvB,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;wBACjD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;4BACb,KAAK,EAAE,SAAS;4BAChB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;yBAC7B,CAAC,CAAC;oBACP,CAAC;iBACJ;gBACD,SAAS,EAAE;oBACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,IAAI,kBAAkB,CAAC;oBACjE,IAAI,EAAE,IAAI,CAAC,gBAAgB,IAAI,OAAO;oBACtC,KAAK,EAAE,GAAG;iBACb;gBACD,CAAC,EAAE,CAAC;aACP;YACD,SAAS,EAAE;gBACP,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;aACtC;SACJ,CAAC;QAEF,OAAO,KAAK,CAAC,SAAS,CAAgB;YAClC,IAAI,EAAE;gBACF,OAAO,EAAE,IAAI;aAChB;YACD,KAAK,EAAE;gBACH,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBACzB,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,IAAI,EAAE,IAAI,CAAC,cAAc;gBACzB,OAAO,EAAE,IAAI,CAAC,aAAa;aAC9B;YACD,IAAI,EAAE;gBACF,YAAY,EAAE,IAAI;aACrB;YACD,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE;gBACJ;oBACI,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;oBAC9C,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,MAAM;oBACZ,SAAS,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;qBACvC;oBACD,SAAS,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;qBACvC;oBACD,SAAS,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;qBAC5B;oBACD,UAAU,EAAE,EAAE;oBACd,UAAU,EAAE,KAAK;oBACjB,KAAK,EAAE;wBACH,IAAI,EAAE,IAAI,CAAC,mBAAmB;wBAC9B,QAAQ,EAAE,OAAO;wBACjB,SAAS,EAAE,CAAC,MAAW,EAAE,EAAE;4BACvB,OAAO,WAAW,CAAC,MAAM,CAAC,KAAe,EAAE;gCACvC,IAAI,EAAE,IAAI,CAAC,MAAM;gCACjB,QAAQ;6BACX,CAAC,CAAC;wBACP,CAAC;qBACJ;iBACJ;aACJ;SACJ,CAAC,CAAC;IACP,CAAC;IAED,WAAW;QACP,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAsBD,YAAY;QACR,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,WAAW;YAClB,4DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,iBAAiB,aACf,oBAAoB,GACzB,CACL,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| LineSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-area', shadow: true, styleUrl: 'q2-chart-area.scss' })\nexport class Q2ChartArea implements ComponentInterface {\n /** An array of objects that contain the data to be displayed. /\n @Prop() data: IChartData[] = [];\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true }) alignChartName: 'left' \| 'right' \| 'center';\n\n /\n Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) areaColor: string;\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 }) chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true }) chartSubTitle: string;\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true }) dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true }) dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true }) formatModifier: string;\n\n /* Controls the direction or viibility of grid lines on the chart. /\n @Prop({ reflect: true }) gridLines: 'horizontal' \| 'vertical' \| 'off';\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true }) hideNameAxisLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true }) hideValueAxisLabels: boolean = false;\n\n /\n Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) lineColor: string;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataValues: boolean = false;\n\n /\n Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) pointerLineColor: string;\n\n /* Controls the style of the vertical poiner line. /\n @Prop({ reflect: true }) pointerLineStyle: 'solid' \| 'dashed';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true }) showChartName: boolean = false;\n\n /* Controls the visibility of a value label when a data point is shown on the chart. /\n @Prop({ reflect: true }) showDatapointLabels: boolean = false;\n\n /\n Controls making the area fill color into a gradient.\n * The gradient starts at the top with the `areaColor` value, and fades to white.\n /\n @Prop({ reflect: true }) showGradient: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /\n Emitted when a data point is clicked.\n */\n @Event() change: EventEmitter<{\n index: number;\n data: IChartData;\n }>;\n\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n chart: echarts.ECharts;\n\n resizeEventListener: EventListener;\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getAreaFill() {\n if (this.showGradient) {\n return {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [\n {\n offset: 0,\n color: this.getColor(this.areaColor),\n },\n {\n offset: 1,\n color: 'white',\n },\n ],\n global: false,\n };\n }\n return this.getColor(this.areaColor);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n return primaryColor;\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n splitLine: {\n show: this.gridLines === 'horizontal' \|\| !this.gridLines,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n boundaryGap: false,\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n show: !this.hideNameAxisLabels,\n },\n axisLine: {\n show: !this.hideNameAxisLabels,\n },\n axisTick: {\n show: !this.hideNameAxisLabels,\n },\n axisPointer: {\n show: true,\n type: 'line',\n label: {\n show: false,\n formatter: (params: any) => {\n const dataIndex = params.seriesData[0].dataIndex;\n this.change.emit({\n index: dataIndex,\n data: this.data[dataIndex],\n });\n },\n },\n lineStyle: {\n color: this.getColor(this.pointerLineColor \|\| 'var(--t-gray-10)'),\n type: this.pointerLineStyle \|\| 'solid',\n width: 1.5,\n },\n z: 1,\n },\n splitLine: {\n show: this.gridLines === 'vertical',\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n },\n xAxis: categoryAxis,\n yAxis: valueAxis,\n series: [\n {\n data: this.data.map(datum => datum.value \|\| 0),\n id: 'area',\n type: 'line',\n lineStyle: {\n color: this.getColor(this.lineColor),\n },\n itemStyle: {\n color: this.getColor(this.lineColor),\n },\n areaStyle: {\n color: this.getAreaFill(),\n },\n symbolSize: 10,\n showSymbol: false,\n label: {\n show: this.showDatapointLabels,\n position: 'right',\n formatter: (params: any) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n },\n ],\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n @Watch('data')\n @Watch('alignChartName')\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('lineColor')\n @Watch('pointerLineColor')\n @Watch('pointerLineStyle')\n @Watch('areaColor')\n @Watch('dataNamesOverflow')\n @Watch('dataNamesWidth')\n @Watch('format')\n @Watch('formatModifier')\n @Watch('hideNameAxisLabels')\n @Watch('hideValueAxisLabels')\n @Watch('offsetDataNames')\n @Watch('offsetDataValues')\n @Watch('showChartName')\n @Watch('showDatapointLabels')\n @Watch('showGradient')\n @Watch('gridLines')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n test-id=\"areaChartContainer\"\n ></div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"q2-chart-area.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/q2-chart-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| LineSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-area', shadow: true, styleUrl: 'q2-chart-area.scss' })\nexport class Q2ChartArea implements ComponentInterface {\n /** An array of objects that contain the data to be displayed. /\n @Prop() data: IChartData[] = [];\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true }) alignChartName: 'left' \| 'right' \| 'center';\n\n /\n Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) areaColor: string;\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 }) chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true }) chartSubTitle: string;\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true }) dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true }) dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true }) formatModifier: string;\n\n /* Controls the direction or viibility of grid lines on the chart. /\n @Prop({ reflect: true }) gridLines: 'horizontal' \| 'vertical' \| 'off';\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true }) hideNameAxisLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true }) hideValueAxisLabels: boolean = false;\n\n /\n Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) lineColor: string;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataValues: boolean = false;\n\n /\n Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) pointerLineColor: string;\n\n /* Controls the style of the vertical poiner line. /\n @Prop({ reflect: true }) pointerLineStyle: 'solid' \| 'dashed';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true }) showChartName: boolean = false;\n\n /* Controls the visibility of a value label when a data point is shown on the chart. /\n @Prop({ reflect: true }) showDatapointLabels: boolean = false;\n\n /\n Controls making the area fill color into a gradient.\n * The gradient starts at the top with the `areaColor` value, and fades to white.\n /\n @Prop({ reflect: true }) showGradient: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /\n Emitted when a data point is clicked.\n */\n @Event() change: EventEmitter<{\n index: number;\n data: IChartData;\n }>;\n\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n chart: echarts.ECharts;\n\n resizeEventListener: EventListener;\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n // CRITICAL: Dispose eCharts instance to prevent memory leaks\n // eCharts holds references to canvas, event listeners, and animation frames\n if (this.chart) {\n this.chart.dispose();\n this.chart = null;\n }\n\n // Remove window resize listener\n window.removeEventListener('resize', this.resizeEventListener);\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 and event listener references\n this.chartContainer = null;\n this.resizeEventListener = null;\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getAreaFill() {\n if (this.showGradient) {\n return {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [\n {\n offset: 0,\n color: this.getColor(this.areaColor),\n },\n {\n offset: 1,\n color: 'white',\n },\n ],\n global: false,\n };\n }\n return this.getColor(this.areaColor);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n return primaryColor;\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n splitLine: {\n show: this.gridLines === 'horizontal' \|\| !this.gridLines,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n boundaryGap: false,\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n show: !this.hideNameAxisLabels,\n },\n axisLine: {\n show: !this.hideNameAxisLabels,\n },\n axisTick: {\n show: !this.hideNameAxisLabels,\n },\n axisPointer: {\n show: true,\n type: 'line',\n label: {\n show: false,\n formatter: (params: any) => {\n const dataIndex = params.seriesData[0].dataIndex;\n this.change.emit({\n index: dataIndex,\n data: this.data[dataIndex],\n });\n },\n },\n lineStyle: {\n color: this.getColor(this.pointerLineColor \|\| 'var(--t-gray-10)'),\n type: this.pointerLineStyle \|\| 'solid',\n width: 1.5,\n },\n z: 1,\n },\n splitLine: {\n show: this.gridLines === 'vertical',\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n },\n xAxis: categoryAxis,\n yAxis: valueAxis,\n series: [\n {\n data: this.data.map(datum => datum.value \|\| 0),\n id: 'area',\n type: 'line',\n lineStyle: {\n color: this.getColor(this.lineColor),\n },\n itemStyle: {\n color: this.getColor(this.lineColor),\n },\n areaStyle: {\n color: this.getAreaFill(),\n },\n symbolSize: 10,\n showSymbol: false,\n label: {\n show: this.showDatapointLabels,\n position: 'right',\n formatter: (params: any) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n },\n ],\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n @Watch('data')\n @Watch('alignChartName')\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('lineColor')\n @Watch('pointerLineColor')\n @Watch('pointerLineStyle')\n @Watch('areaColor')\n @Watch('dataNamesOverflow')\n @Watch('dataNamesWidth')\n @Watch('format')\n @Watch('formatModifier')\n @Watch('hideNameAxisLabels')\n @Watch('hideValueAxisLabels')\n @Watch('offsetDataNames')\n @Watch('offsetDataValues')\n @Watch('showChartName')\n @Watch('showDatapointLabels')\n @Watch('showGradient')\n @Watch('gridLines')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n test-id=\"areaChartContainer\"\n ></div>\n </div>\n );\n }\n}\n"]}

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

@@ -33,10 +33,27 @@ export class Q2ChartBar {
         window.addEventListener('resize', this.resizeEventListener);
         this.cacheComputedStyles();
         this.updateChart(chart);
+        this.setupChartEvents(chart);
         overrideFocus(this.hostElement);
     }
     disconnectedCallback() {
+        // Remove event listeners
         window.removeEventListener('resize', this.resizeEventListener);
+        // Clean up chart instance
+        if (this.chart) {
+            if (this.chartFinishedListener) {
+                this.chart.off('finished', this.chartFinishedListener);
+            }
+            this.chart.dispose();
+            this.chart = null;
+        }
+        // Null out cached computed styles to allow GC
+        this.chartContainerStyles = null;
+        this.hostElementStyles = null;
+        // Null out DOM references
+        this.chartContainer = null;
+        this.resizeEventListener = null;
+        this.chartFinishedListener = null;
     }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -135,11 +152,21 @@ export class Q2ChartBar {
     resizeChart() {
         this.chart.resize();
     }
+    setupChartEvents(chart) {
+        this.chartFinishedListener = () => {
+            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');
+        };
+        chart.on('finished', this.chartFinishedListener);
+    }
     propsUpdates() {
         this.updateChart(this.chart);
     }
     render() {
-        return (h("div", { key: '1c7a900e24ad8c960c7e701e00d3218388e97f36', class: "container" }, h("div", { key: 'beb2ec288287a1ae437d9f355a8fd1fed577912d', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "barChartContainer" })));
+        return (h("div", { key: 'd46a9bf3769e9207b97085ece599917c51df17fe', class: "container" }, h("div", { key: '2ee334a1b21bfd7c6d5195378871a91af125552a', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "barChartContainer" })));
     }
     static get is() { return "q2-chart-bar"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-bar.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-bar/q2-chart-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,EACH,cAAc,EAEd,aAAa,EAEb,aAAa,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAI/E,OAAO,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;AAKnG,MAAM,OAAO,UAAU;;oBAEU,EAAE;;;;;;;;;6BAkDmB,KAAK;mCAGC,KAAK;+BAMT,KAAK;gCAMJ,KAAK;;6BAUR,KAAK;oBAMd,KAAK;;IAW9C,gBAAgB;QACZ,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEhD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,IAAI,CAAC,mBAAmB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACpD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAExB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,oBAAoB;QAChB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACnE,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClE,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,CAAC;IAED,QAAQ,CAAC,KAAa;QAClB,MAAM,YAAY,GAAG,cAAc,CAAC,kBAAkB,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC3G,MAAM,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAClG,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC9F,IAAI,YAAY;YAAE,OAAO,YAAY,CAAC;QACtC,IAAI,YAAY,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QACtC,IAAI,WAAW;YAAE,OAAO,WAAW,CAAC;QACpC,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QAChD,OAAO,YAAY,CAAC;IACxB,CAAC;IAED,WAAW,CAAC,IAAkB;QAC1B,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACpB,OAAO;gBACH,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;gBACvB,SAAS,EAAE;oBACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;iBACpC;aACJ,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;IAED,WAAW,CAAC,KAAsB;;QAC9B,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,QAAQ,CAAC,KAAK,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEnG,MAAM,SAAS,GAAG;YACd,IAAI,EAAE,OAAO;YACb,SAAS,EAAE;gBACP,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CACzB,WAAW,CAAC,KAAK,EAAE;oBACf,IAAI,EAAE,IAAI,CAAC,MAAM;oBACjB,QAAQ;iBACX,CAAC;gBACN,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACtC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACtC,IAAI,EAAE,CAAC,IAAI,CAAC,mBAAmB;aAClC;SACJ,CAAC;QAEF,MAAM,YAAY,GAAG;YACjB,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACnD,SAAS,EAAE;gBACP,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACrC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACrC,QAAQ,EAAE,CAAC;gBACX,KAAK,EAAE,IAAI,CAAC,cAAc,IAAI,EAAE;gBAChC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,IAAI,MAAM;gBAC1C,QAAQ,EAAE,UAAU;aACvB;YACD,QAAQ,EAAE;gBACN,cAAc,EAAE,IAAI,CAAC,eAAe;aACvC;SACJ,CAAC;QAEF,OAAO,KAAK,CAAC,SAAS,CAAgB;YAClC,IAAI,EAAE;gBACF,OAAO,EAAE,IAAI;aAChB;YACD,KAAK,EAAE;gBACH,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBACzB,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,IAAI,EAAE,IAAI,CAAC,cAAc;gBACzB,OAAO,EAAE,IAAI,CAAC,aAAa;aAC9B;YACD,IAAI,EAAE;gBACF,YAAY,EAAE,IAAI;aACrB;YACD,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY;YACnE,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;YACnE,MAAM,EAAE;gBACJ;oBACI,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;oBACjC,EAAE,EAAE,KAAK;oBACT,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE;wBACH,IAAI,EAAE,CAAC,IAAI,CAAC,aAAa;wBACzB,QAAQ,EAAE,KAAK;wBACf,UAAU,EAAE,MAAM;wBAClB,SAAS,EAAE,CAAC,MAA0B,EAAE,EAAE;4BACtC,OAAO,WAAW,CAAC,MAAM,CAAC,KAAe,EAAE;gCACvC,IAAI,EAAE,IAAI,CAAC,MAAM;gCACjB,QAAQ;6BACX,CAAC,CAAC;wBACP,CAAC;qBACJ;oBACD,YAAY,EAAE,IAAI,CAAC,IAAI;iBAC1B;aACJ;SACJ,CAAC,CAAC;IACP,CAAC;IAED,WAAW;QACP,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAgBD,YAAY;QACR,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,WAAW;YAClB,4DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,iBAAiB,aACf,mBAAmB,GACxB,CACL,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n /** An array of objects that contain the data to be displayed. /\n @Prop() data: IChartData[] = [];\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true }) alignChartName: 'left' \| 'right' \| 'center';\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 }) chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true }) chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) color: string;\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true }) dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true }) dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true }) formatModifier: string;\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true }) hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true }) hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true }) orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true }) showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true }) sort: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n chart: echarts.ECharts;\n\n resizeEventListener: EventListener;\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: IChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"q2-chart-bar.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-bar/q2-chart-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n /** An array of objects that contain the data to be displayed. /\n @Prop() data: IChartData[] = [];\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true }) alignChartName: 'left' \| 'right' \| 'center';\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 }) chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true }) chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true }) color: string;\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true }) dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true }) dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true }) formatModifier: string;\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true }) hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true }) hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true }) offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true }) orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true }) showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true }) sort: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n chart: echarts.ECharts;\n\n resizeEventListener: EventListener;\n chartFinishedListener: () => void;\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n // Remove event listeners\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clean up chart instance\n if (this.chart) {\n if (this.chartFinishedListener) {\n this.chart.off('finished', this.chartFinishedListener);\n }\n this.chart.dispose();\n this.chart = null;\n }\n\n // Null out cached computed styles to allow GC\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Null out DOM references\n this.chartContainer = null;\n this.resizeEventListener = null;\n this.chartFinishedListener = null;\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: IChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n this.chartFinishedListener = () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n };\n chart.on('finished', this.chartFinishedListener);\n }\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n}\n"]}

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

@@ -139,7 +139,30 @@ export class Q2ChartDonut {
         overrideFocus(this.hostElement);
     }
     disconnectedCallback() {
+        var _a;
+        // CRITICAL: Dispose eCharts instance to prevent memory leaks
+        // eCharts holds references to canvas, event listeners (mouseover, mouseout, click, selectchanged, finished),
+        // and animation frames. All chart event listeners are automatically cleaned up by dispose()
+        if (this.chart) {
+            this.chart.dispose();
+            this.chart = null;
+        }
+        // Disconnect ResizeObserver
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
+        // Clear cached style references that hold DOM references (Safari memory management)
+        this.chartContainerStyles = null;
+        this.hostElementStyles = null;
+        // Clear DOM references
+        this.chartContainer = null;
+        this.centerButtonElement = null;
+        this.btnElement = null;
+        // Clear data references
+        this.colors = null;
+        this.legendData = null;
+        // Clear state to prevent lingering references
+        this.hoveredId = null;
+        this.selectedId = null;
     }
     /// Getters ///
     get centerData() {
@@ -448,7 +471,7 @@ export class Q2ChartDonut {
             } })), !!name && h("div", { class: "name" }, name), !!value && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'fe9b4ba472076ecd92381990e3a92930edf14888', onChange: this.onClickElsewhere }, h("figure", { key: '8755fa2976da39a7a8c4ce2fe13ca04191942e9c' }, h("div", { key: '84e1198bce7f609546efe37cb506fe77e087feb1', class: "container" }, h("div", { key: '9dbcff19f30ca7e5ac4d818e801f63b2c3674117', 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: 'ae47c89d19314470c25394cddeeb284e4431f490' }, h("q2-legend", { key: '85cca395c371302d7dbca7b93f777fee6908b6fc', 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: '5e17be81ffc795f8ac0da10396fab7078280b1aa', onChange: this.onClickElsewhere }, h("figure", { key: '90ca579a42f73352b38a04f6ed8e57a6c2335cae' }, h("div", { key: '2d2eaa7228b22eb2d617e800b6a58c65602efdda', class: "container" }, h("div", { key: 'fa9dd8382b7ba85cc3520e7e9a52cae3024dce09', 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: '70b77fbbbd666a52a7e50a42f742e193ae62e315' }, h("q2-legend", { key: '3c3e03596b3b2729ee15697d6666c968140694e7', class: "legend", data: this.legendData, format: this.format, 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"; }

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 { EChartsCoreOption } from 'echarts/types/dist/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 { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n TooltipComponentOption \| LegendComponentOption \| AriaComponentOption \| PieSeriesOption\n>;\n@Component({ tag: 'q2-chart-donut', shadow: true, styleUrl: 'q2-chart-donut.scss' })\nexport class Q2ChartDonut implements ComponentInterface {\n /** An array of objects that contain the data to be displayed. /\n @Prop() data: IDonutChartData[] = [];\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 }) chartName: string;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n\n /* The amount which the slice will scale when hovered. /\n @Prop() hoverScaleSize: number = 5;\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 }) isClickable: boolean;\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 }) innerRadius: string = '70%';\n\n /* The minimum size of the chart slizes which is represented as a percentage of the circumferences. /\n @Prop() 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 }) 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 }) selectedId: string;\n\n /* The amount which the slice will separate from the chart when selected. /\n @Prop() 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 }) showLegend: boolean = false;\n\n /* The icon that displays by default when no slices are selected. /\n @Prop({ reflect: true }) summaryIcon: string;\n\n /\n The name that displays by default when no slices are selected.\n * @localizable\n /\n @Prop({ reflect: true }) summaryName: string;\n\n isInChangeEvent: boolean;\n chartContainer: HTMLDivElement;\n centerButtonElement: HTMLButtonElement;\n btnElement: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeObserver: ResizeObserver;\n colors: string[];\n chart: echarts.ECharts;\n defaultRecord = { id: null, value: null, name: null };\n\n @State() hoveredId: string;\n @State() legendData: IDonutChartData[];\n\n @Element() hostElement: HTMLElement;\n\n /// Events ///\n /\n Emitted when a slice is selected.\n /\n @Event() change: EventEmitter<IDonutChartData>;\n\n /\n Emitted when the center button is clicked.\n \n Requires the `isClickable` prop to be set to `true`.\n /\n @Event() click: EventEmitter<IDonutChartData>;\n\n /// LifeCycle Hooks ///\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 disconnectedCallback() {\n this.resizeObserver = null;\n }\n\n /// Getters ///\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 /// Helpers ///\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 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 getIndexById(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getDataByIndex(index: number) {\n if (typeof index !== 'number') return;\n return this.data[index];\n }\n\n getDataById(id: string) {\n if (!id) return;\n return this.data.find(item => item.id === id);\n }\n\n getColors() {\n const defaultColors = [\n '--comp-color-1',\n '--comp-color-2',\n '--comp-color-3',\n '--comp-color-4',\n '--comp-color-5',\n '--comp-color-6',\n '--comp-color-7',\n '--comp-color-8',\n '--comp-color-9',\n '--comp-color-10',\n '--comp-color-11',\n '--comp-color-12',\n ];\n\n return this.data.reduce((acc, cur) => {\n let color = defaultColors.shift();\n if (cur.color) color = cur.color;\n\n acc.push(this.getCSSProperty(color) \|\| color);\n return acc;\n }, []);\n }\n\n getMinSliceSizeAsAngle() {\n return (parseFloat(this.minSliceSize) / 100) * 360;\n }\n\n getDataIndexForId(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n setLegendData() {\n const chartColors = this.chart.getOption().series[0].color;\n this.legendData = this.data.map((item, index) => {\n if (!item.color) item.color = chartColors[index];\n\n return item;\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 this.change.emit(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 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 itemStyle: {\n borderWidth: 5,\n borderColor: this.getCSSProperty('--comp-background-color'),\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 resizeChart() {\n this.chart.resize();\n }\n\n /// Watchers ///\n @Watch('chartName')\n @Watch('innerRadius')\n @Watch('outerRadius')\n @Watch('minSliceSize')\n @Watch('hoverScaleSize')\n @Watch('selectedOffset')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n @Watch('data')\n dataUpdated() {\n this.colors = this.getColors();\n this.updateChart(this.chart);\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 // 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 @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 /// Listeners ///\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 /// Methods ///\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 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<EChartsCoreOption> {\n return this.chart.getOption();\n }\n\n /// Event Handlers ///\n onClickElsewhere = (event: Event) => {\n event.stopPropagation();\n this.clearSelection();\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 onButtonClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n const { selectedId } = this;\n const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n this.click.emit(data);\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 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 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 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 /// DOM ///\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} - 10%)` }}\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 {!!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"]}
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 { EChartsCoreOption } from 'echarts/types/dist/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 { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n TooltipComponentOption \| LegendComponentOption \| AriaComponentOption \| PieSeriesOption\n>;\n@Component({ tag: 'q2-chart-donut', shadow: true, styleUrl: 'q2-chart-donut.scss' })\nexport class Q2ChartDonut implements ComponentInterface {\n /** An array of objects that contain the data to be displayed. /\n @Prop() data: IDonutChartData[] = [];\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 }) chartName: string;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n\n /* The amount which the slice will scale when hovered. /\n @Prop() hoverScaleSize: number = 5;\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 }) isClickable: boolean;\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 }) innerRadius: string = '70%';\n\n /* The minimum size of the chart slizes which is represented as a percentage of the circumferences. /\n @Prop() 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 }) 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 }) selectedId: string;\n\n /* The amount which the slice will separate from the chart when selected. /\n @Prop() 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 }) showLegend: boolean = false;\n\n /* The icon that displays by default when no slices are selected. /\n @Prop({ reflect: true }) summaryIcon: string;\n\n /\n The name that displays by default when no slices are selected.\n * @localizable\n /\n @Prop({ reflect: true }) summaryName: string;\n\n isInChangeEvent: boolean;\n chartContainer: HTMLDivElement;\n centerButtonElement: HTMLButtonElement;\n btnElement: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeObserver: ResizeObserver;\n colors: string[];\n chart: echarts.ECharts;\n defaultRecord = { id: null, value: null, name: null };\n\n @State() hoveredId: string;\n @State() legendData: IDonutChartData[];\n\n @Element() hostElement: HTMLElement;\n\n /// Events ///\n /\n Emitted when a slice is selected.\n /\n @Event() change: EventEmitter<IDonutChartData>;\n\n /\n Emitted when the center button is clicked.\n \n Requires the `isClickable` prop to be set to `true`.\n /\n @Event() click: EventEmitter<IDonutChartData>;\n\n /// LifeCycle Hooks ///\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 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 /// Getters ///\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 /// Helpers ///\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 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 getIndexById(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getDataByIndex(index: number) {\n if (typeof index !== 'number') return;\n return this.data[index];\n }\n\n getDataById(id: string) {\n if (!id) return;\n return this.data.find(item => item.id === id);\n }\n\n getColors() {\n const defaultColors = [\n '--comp-color-1',\n '--comp-color-2',\n '--comp-color-3',\n '--comp-color-4',\n '--comp-color-5',\n '--comp-color-6',\n '--comp-color-7',\n '--comp-color-8',\n '--comp-color-9',\n '--comp-color-10',\n '--comp-color-11',\n '--comp-color-12',\n ];\n\n return this.data.reduce((acc, cur) => {\n let color = defaultColors.shift();\n if (cur.color) color = cur.color;\n\n acc.push(this.getCSSProperty(color) \|\| color);\n return acc;\n }, []);\n }\n\n getMinSliceSizeAsAngle() {\n return (parseFloat(this.minSliceSize) / 100) * 360;\n }\n\n getDataIndexForId(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n setLegendData() {\n const chartColors = this.chart.getOption().series[0].color;\n this.legendData = this.data.map((item, index) => {\n if (!item.color) item.color = chartColors[index];\n\n return item;\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 this.change.emit(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 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 itemStyle: {\n borderWidth: 5,\n borderColor: this.getCSSProperty('--comp-background-color'),\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 resizeChart() {\n this.chart.resize();\n }\n\n /// Watchers ///\n @Watch('chartName')\n @Watch('innerRadius')\n @Watch('outerRadius')\n @Watch('minSliceSize')\n @Watch('hoverScaleSize')\n @Watch('selectedOffset')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n @Watch('data')\n dataUpdated() {\n this.colors = this.getColors();\n this.updateChart(this.chart);\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 // 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 @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 /// Listeners ///\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 /// Methods ///\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 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<EChartsCoreOption> {\n return this.chart.getOption();\n }\n\n /// Event Handlers ///\n onClickElsewhere = (event: Event) => {\n event.stopPropagation();\n this.clearSelection();\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 onButtonClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n const { selectedId } = this;\n const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n this.click.emit(data);\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 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 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 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 /// DOM ///\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} - 10%)` }}\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 {!!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"]}

package/dist/components/q2-chart-area.js CHANGED Viewed

@@ -4026,7 +4026,20 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
         overrideFocus(this.hostElement);
     }
     disconnectedCallback() {
+        // CRITICAL: Dispose eCharts instance to prevent memory leaks
+        // eCharts holds references to canvas, event listeners, and animation frames
+        if (this.chart) {
+            this.chart.dispose();
+            this.chart = null;
+        }
+        // Remove window resize listener
         window.removeEventListener('resize', this.resizeEventListener);
+        // Clear cached style references that hold DOM references (Safari memory management)
+        this.chartContainerStyles = null;
+        this.hostElementStyles = null;
+        // Clear DOM and event listener references
+        this.chartContainer = null;
+        this.resizeEventListener = null;
     }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -4176,7 +4189,7 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
         this.updateChart(this.chart);
     }
     render() {
-        return (h("div", { key: '5ac722f85acf3a00828cfcd6bfb3d13cadc8d4ef', class: "container" }, h("div", { key: 'a39f5664712841ad70c1628c88b77500b694db63', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '9be8e22a08ac2971ecb0aadb9b86eac5830b5cf2', class: "container" }, h("div", { key: '95dc71d45f12bf3820ea17a0641ebb147ea029ac', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {