npm - q2-tecton-elements - Versions diffs - 1.50.1 → 1.51.0 - Mend

q2-tecton-elements 1.50.1 → 1.51.0

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

Files changed (578) hide show

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":"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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 // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n 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 })\n 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 })\n 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 })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\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 })\n 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 })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\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 })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Examples:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n 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 })\n 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 })\n 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 })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n 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 })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\n }\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 // #endregion\n // #region Watchers\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 @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\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 resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\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 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 ...this.gridPadding,\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 // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\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 // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n 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 })\n 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 })\n 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 })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\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 })\n 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 })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\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 })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n 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 })\n 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 })\n 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 })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n 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 })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\n }\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 // #endregion\n // #region Watchers\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 @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\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 resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\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 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 ...this.gridPadding,\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 // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}

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

@@ -17,17 +17,6 @@ describe('q2-chart-bar', () => {
         chart.setProperty('data', data);
         await page.waitForChanges();
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations', async () => {
-            const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });
-            chart = await page.find('q2-chart-bar');
-            chart.setProperty('chartName', 'Month-to-month spending');
-            chart.setProperty('data', data);
-            await page.waitForChanges();
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-chart-bar')).toHaveLength(0);
@@ -75,5 +64,21 @@ describe('q2-chart-bar', () => {
             });
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });
+                chart = await page.find('q2-chart-bar');
+                chart.setProperty('chartName', 'Month-to-month spending');
+                chart.setProperty('data', data);
+                await page.waitForChanges();
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-chart-bar-test.e2e.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-bar-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-bar/test/q2-chart-bar-test.e2e.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,+BAA+B,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEvG,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC1B,IAAI,IAAa,CAAC;IAClB,IAAI,KAAiB,CAAC;IACtB,MAAM,IAAI,GAAG;QACT,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAC3D,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE;QAC1C,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE;QACtC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,gCAAgC,EAAE;QACjF,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;KAC3C,CAAC;IAEF,UAAU,CAAC,KAAK,IAAI,EAAE;QAClB,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;QACvD,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACxC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,yBAAyB,CAAC,CAAC;QAC1D,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,~~QAAQ,CAAC,6BAA6B,~~EAAE,~~GAAG,EAAE;QACzC,EAAE,~~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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-bar', () => {\n let page: E2EPage;\n let chart: E2EElement;\n const data = [\n { value: 1048, name: 'March', id: 'march', color: 'green' },\n { value: 580, name: 'April', id: 'april' },\n { value: 735, name: 'May', id: 'may' },\n { value: 465, name: 'June', id: 'june', color: 'var(--const-stoplight-warning)' },\n { value: 927, name: 'July', id: 'july' },\n ];\n\n beforeEach(async () => {\n page = await setup({ html: '' });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n });\n\n ~~describe('[A11y] guideline compliance', () => {\n~~ it('Does not have accessibility violations', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-chart-bar')).toHaveLength(0);\n });\n\n it('renders a canvas element', async () => {\n const canvas = await page.find('q2-chart-bar >>> canvas');\n expect(canvas).toBeTruthy();\n });\n\n it('renders a descriptive aria-label for the chart', async () => {\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = await chartContainer.getAttribute('aria-label');\n expect(ariaLabelText).toContain('This is a chart about \"Month-to-month spending\" with type Bar chart');\n expect(ariaLabelText).toContain('the data for March is 0, 1048');\n expect(ariaLabelText).toContain('the data for April is 1, 580');\n expect(ariaLabelText).toContain('the data for May is 2, 735');\n expect(ariaLabelText).toContain('the data for June is 3, 465');\n expect(ariaLabelText).toContain('the data for July is 4, 927');\n });\n describe('chartName', () => {\n describe('when provided', () => {\n it('renders with provided chartName', async () => {\n page = await setup({ html: `` });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n await page.waitForChanges();\n\n expect(await chart.getProperty('chartName')).toEqualText('Month-to-month spending');\n });\n });\n describe('when provided a custom name translation', () => {\n it('renders the translated value', async () => {\n page = await setup({\n html: ``,\n });\n await setTestStrings(page, {\n 'q2ChartBar.customName': 'Custom Chart Name',\n });\n page.setContent(`<q2-chart-bar chart-name=\"q2ChartBar.customName\"></q2-chart-bar>`);\n await page.waitForChanges();\n chart = await page.find('q2-chart-bar');\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n expect(await chart.getProperty('chartName')).toEqual('q2ChartBar.customName');\n expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Bar chart');\n });\n });\n });\n});\n"]}
1	+ {"version":3,"file":"q2-chart-bar-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-bar/test/q2-chart-bar-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-bar', () => {\n let page: E2EPage;\n let chart: E2EElement;\n const data = [\n { value: 1048, name: 'March', id: 'march', color: 'green' },\n { value: 580, name: 'April', id: 'april' },\n { value: 735, name: 'May', id: 'may' },\n { value: 465, name: 'June', id: 'june', color: 'var(--const-stoplight-warning)' },\n { value: 927, name: 'July', id: 'july' },\n ];\n\n beforeEach(async () => {\n page = await setup({ html: '' });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-chart-bar')).toHaveLength(0);\n });\n\n it('renders a canvas element', async () => {\n const canvas = await page.find('q2-chart-bar >>> canvas');\n expect(canvas).toBeTruthy();\n });\n\n it('renders a descriptive aria-label for the chart', async () => {\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = await chartContainer.getAttribute('aria-label');\n expect(ariaLabelText).toContain('This is a chart about \"Month-to-month spending\" with type Bar chart');\n expect(ariaLabelText).toContain('the data for March is 0, 1048');\n expect(ariaLabelText).toContain('the data for April is 1, 580');\n expect(ariaLabelText).toContain('the data for May is 2, 735');\n expect(ariaLabelText).toContain('the data for June is 3, 465');\n expect(ariaLabelText).toContain('the data for July is 4, 927');\n });\n describe('chartName', () => {\n describe('when provided', () => {\n it('renders with provided chartName', async () => {\n page = await setup({ html: `` });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n await page.waitForChanges();\n\n expect(await chart.getProperty('chartName')).toEqualText('Month-to-month spending');\n });\n });\n describe('when provided a custom name translation', () => {\n it('renders the translated value', async () => {\n page = await setup({\n html: ``,\n });\n await setTestStrings(page, {\n 'q2ChartBar.customName': 'Custom Chart Name',\n });\n page.setContent(`<q2-chart-bar chart-name=\"q2ChartBar.customName\"></q2-chart-bar>`);\n await page.waitForChanges();\n chart = await page.find('q2-chart-bar');\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n expect(await chart.getProperty('chartName')).toEqual('q2ChartBar.customName');\n expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Bar chart');\n });\n });\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {});\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n});\n"]}

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

@@ -292,20 +292,7 @@ export class Q2ChartDonut {
         }
     }
     getColors() {
-        const defaultColors = [
-            '--comp-color-1',
-            '--comp-color-2',
-            '--comp-color-3',
-            '--comp-color-4',
-            '--comp-color-5',
-            '--comp-color-6',
-            '--comp-color-7',
-            '--comp-color-8',
-            '--comp-color-9',
-            '--comp-color-10',
-            '--comp-color-11',
-            '--comp-color-12',
-        ];
+        const defaultColors = [1, 3, 8, 4, 2, 10, 7, 11, 6, 9, 12, 5].map(e => `--comp-color-${e}`);
         return this.data.reduce((acc, cur, idx) => {
             let color = defaultColors[idx % defaultColors.length];
             if (cur.color)
@@ -391,7 +378,20 @@ export class Q2ChartDonut {
             canvas.setAttribute('aria-hidden', 'true');
         });
     }
+    validateColor() {
+        // check if there is name duplicated, then custom style using `itemStyle` object will be used.
+        if (this.data.length >
+            Object.keys(this.data.reduce((acc, cur) => {
+                acc[cur.name] = cur.name;
+                return acc;
+            }, {})).length) {
+            this.data.forEach((el, i) => {
+                el.itemStyle = Object.assign(Object.assign({}, el.itemStyle), { color: el.color || this.colors[i] });
+            });
+        }
+    }
     updateChart(chart) {
+        this.validateColor();
         return chart.setOption({
             tooltip: {
                 show: false,
@@ -458,7 +458,7 @@ export class Q2ChartDonut {
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '696f2c528be4727613f055b7af2fdd691887a23d', onChange: this.onClickElsewhere }, h("figure", { key: '65ddd99c4568a92b4355ecb4ea2ed781d300cb10' }, h("div", { key: 'f60b832a32fc06b19ffcd44c0c72373ae921200c', class: "container" }, h("div", { key: 'b1cba2e57d2e36aea414db321a2efa7fd724cb66', 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: '9f7876b0d4f0642cf45ff4823149c5c3bccfa166' }, h("q2-legend", { key: 'b2ebec13e70c3e4af4527f5b12f76a9bda6fd965', 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: '653843d0844777cd5a1eca08ff2212af8866a30a', onChange: this.onClickElsewhere }, h("figure", { key: '3189ea33feae10932fe45ed1a6930badb4a9b438' }, h("div", { key: '3be03652e90ae4a776b9bf87ec575863c8f03621', class: "container" }, h("div", { key: '2e08d9019dfaabefd989ba51870bc778fa04905c', 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: '158058ae81b1c016474f73c943d1452c6955022b' }, h("q2-legend", { key: '2d3f38b153a808c6eb15c69cc5450cc6838a5166', 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';\nimport { getCSSProperty } from 'src/utils/charting';\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 // #region Own Properties\n\n btnElement: HTMLDivElement;\n centerButtonElement: HTMLButtonElement;\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n colors: string[];\n defaultRecord = { id: null, value: null, name: null };\n hostElementStyles: CSSStyleDeclaration;\n isInChangeEvent: boolean;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hoveredId: string;\n\n @State()\n legendData: IDonutChartData[];\n\n // #endregion\n // #region Public Property API\n\n /*\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IDonutChartData[] = [];\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /* The amount which the slice will scale when hovered. /\n @Prop()\n hoverScaleSize: number = 5;\n\n /\n The inner radius of the chart slices which is represeted by a percentage of the radius.\n \n @warning\n * If you update this property to be greater than or equal to the `outerRadius`,\n * we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n innerRadius: string = '70%';\n\n /\n Determine whether the data in the center renders inside a button element.\n \n @info\n * This also enables extra keyboard controls when the button is focused.\n /\n @Prop({ reflect: true })\n isClickable: boolean;\n\n /* The minimum size of the chart slizes which is represented as a percentage of the circumferences. /\n @Prop()\n minSliceSize: string = '2.5%';\n\n /\n The outer radius of the chart slices which is represented by a percentage of the radius.\n \n @warning\n * If you update this property to be less than or equal to the `innerRadius`,\n * we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n outerRadius: string = '85%';\n\n /* The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change. /\n @Prop({ mutable: true })\n selectedId: string;\n\n /* The amount which the slice will separate from the chart when selected. /\n @Prop()\n selectedOffset: number = 10;\n\n /\n Determines whether the legend is displayed.\n \n @info\n * The legend is a list of the data points in the chart and their colors.\n /\n @Prop({ reflect: true })\n showLegend: boolean = false;\n\n /* The icon that displays by default when no slices are selected. /\n @Prop({ reflect: true })\n summaryIcon: string;\n\n /\n The name that displays by default when no slices are selected.\n * @localizable\n /\n @Prop({ reflect: true })\n summaryName: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a slice is selected.\n /\n @Event()\n 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()\n click: EventEmitter<IDonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver = null;\n }\n\n componentDidLoad(): void {\n const chart = echarts.init(this.chartContainer);\n\n this.cacheComputedStyles();\n this.colors = this.getColors();\n\n this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n this.resizeObserver.observe(this.hostElement);\n\n this.updateChart(chart);\n this.setupChartEvents(chart);\n this.checkSelectedId();\n\n this.chart = chart;\n this.setLegendData();\n this.selectById(this.selectedId);\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.isClickable) return;\n this.centerButtonElement?.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clears any selected slice.\n /\n @Method()\n async clearSelection() {\n const { selectedId } = this;\n if (!selectedId) return;\n\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(selectedId),\n });\n }\n\n /\n Returns the chart instance for e2e testing.\n \n @testOnly\n /\n @Method()\n async getChartOptions(): Promise<EChartsCoreOption> {\n return this.chart.getOption();\n }\n\n /\n Selects a slice by its provided `id` in the provided `data`.\n /\n @Method()\n async selectById(id: string) {\n const dataIndex = this.getIndexById(id);\n if (dataIndex === -1) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n /\n Selects a slice by its index in the provided `data`.\n /\n @Method()\n async selectByIndex(index: number) {\n const dataIndex = this.data[index] ? index : null;\n if (!dataIndex) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('innerRadius')\n @Watch('outerRadius')\n @Watch('minSliceSize')\n @Watch('hoverScaleSize')\n @Watch('selectedOffset')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n @Watch('data')\n dataUpdated() {\n this.colors = this.getColors();\n this.updateChart(this.chart);\n this.setLegendData();\n }\n\n @Watch('innerRadius')\n innerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (innerRadiusInt >= outerRadiusInt) {\n this.innerRadius = `${outerRadiusInt - 15}%`;\n }\n }\n\n @Watch('outerRadius')\n outerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (outerRadiusInt <= innerRadiusInt) {\n this.outerRadius = `${innerRadiusInt + 15}%`;\n }\n }\n\n /\n Function to detect and set a data range (category) as selected\n * Logic for when legends are present, and can set selectedId when ledgend category is clicked\n * Also can be used by dev to preset\n /\n @Watch('selectedId')\n checkSelectedId() {\n if (!!this.selectedId) {\n this.hoveredId = this.selectedId;\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.selectById(this.selectedId);\n }\n } else {\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(this.hoveredId),\n });\n }\n this.hoveredId = null;\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get centerData() {\n const { hoveredId, data } = this;\n const idToDisplay = hoveredId;\n const index = this.getIndexById(idToDisplay);\n\n return idToDisplay\n ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n : {\n name: loc(this.summaryName \|\| 'tecton.element.chartDonut.button.summaryName'),\n icon: this.summaryIcon,\n value: data.reduce((acc, cur) => acc + cur.value, 0),\n color: null,\n };\n }\n\n get isMobile(): boolean {\n return isMobile();\n }\n\n get legendHoveredId() {\n return this.hoveredId === this.selectedId ? null : this.hoveredId;\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n displayValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (isNaN(valueAsFloat)) return;\n\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n } else {\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n }\n\n getColors() {\n const defaultColors = [\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, idx) => {\n let color = defaultColors[idx % defaultColors.length];\n if (cur.color) color = cur.color;\n\n acc.push(getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles) \|\| color);\n return acc;\n }, []);\n }\n\n getCSSProperty(name: string) {\n let fallback;\n if (name.startsWith('var(') && name.endsWith(')')) {\n const regExp = /var\$(.)\$/g;\n const result = regExp.exec(name);\n const split = result.length >= 2 ? result[1].split(',') : [];\n name = split[0];\n fallback = split[1];\n }\n let result = this.chartContainerStyles.getPropertyValue(name).trim();\n if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n return result \|\| fallback;\n }\n\n getDataById(id: string) {\n if (!id) return;\n return this.data.find(item => item.id === id);\n }\n\n getDataByIndex(index: number) {\n if (typeof index !== 'number') return;\n return this.data[index];\n }\n\n getDataIndexForId(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getIndexById(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getMinSliceSizeAsAngle() {\n return (parseFloat(this.minSliceSize) / 100) * 360;\n }\n\n onButtonClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n const { selectedId } = this;\n const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n this.click.emit(data);\n };\n\n onButtonKeyDown = (event: KeyboardEvent) => {\n const { selectedId, data } = this;\n let selectedIndex = this.getIndexById(selectedId) \|\| 0;\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n selectedIndex--;\n if (selectedIndex < 0) selectedIndex = data.length - 1;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedIndex++;\n if (selectedIndex > data.length - 1) selectedIndex = 0;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'Escape':\n this.clearSelection();\n break;\n\n case ' ':\n event.preventDefault();\n break;\n\n default:\n return;\n }\n };\n\n onClickElsewhere = (event: Event) => {\n event.stopPropagation();\n this.clearSelection();\n };\n\n onContainerClick = (event: Event) => {\n if (this.isInChangeEvent) return;\n if (!(event.target instanceof HTMLElement)) return;\n this.clearSelection();\n event.stopPropagation();\n };\n\n onLegendClick = event => {\n event.stopPropagation();\n if (event.detail) {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.selectedId = event.detail.id;\n this.chart.dispatchAction({\n type: 'select',\n seriesIndex: 0,\n dataIndex,\n });\n } else {\n const dataIndex = this.getDataIndexForId(this.selectedId);\n this.hoveredId = this.selectedId;\n this.selectedId = null;\n this.chart.dispatchAction({\n type: 'unselect',\n seriesIndex: 0,\n dataIndex,\n });\n }\n };\n\n onLegendMouseenter = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = event.detail.id;\n this.chart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n onLegendMouseleave = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = this.selectedId;\n this.chart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n resizeChart() {\n this.chart.resize();\n }\n\n setLegendData() {\n const chartColors = this.chart.getOption().series[0].color;\n this.legendData = this.data.map((item, index) => {\n const newItem = { ...item };\n if (!newItem.color) newItem.color = chartColors[index];\n\n return newItem;\n });\n }\n\n // Edit with caution. Echarts does not interpret events the same on mobile.\n setupChartEvents(chart: echarts.ECharts) {\n if (!this.isMobile) {\n chart.on('mouseover', (params: any) => {\n this.hoveredId = params.data.id;\n });\n chart.on('mouseout', () => {\n this.hoveredId = this.selectedId;\n });\n }\n chart.on('click', params => {\n params.event.stop();\n });\n chart.on('selectchanged', (params: any) => {\n const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n const data =\n typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n this.selectedId = data.id;\n this.isInChangeEvent = true;\n 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: getCSSProperty(\n '--comp-background-color',\n this.chartContainerStyles,\n this.hostElementStyles\n ),\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 // #endregion\n // #region Render Methods\n\n renderCenterBlock() {\n const { icon, name, value, color } = this.centerData;\n const { isClickable } = this;\n const TagName = isClickable ? 'button' : 'div';\n const displayValue = this.displayValue(value);\n\n const props = isClickable\n ? {\n onKeyDown: this.onButtonKeyDown,\n onClick: this.onButtonClick,\n ref: el => (this.centerButtonElement = el),\n 'aria-describedby': 'center-card-description',\n 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n }\n : null;\n\n return (\n <div\n class=\"center-card-container\"\n style={{ width: `calc(${this.innerRadius} - 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 {!isNaN(value) && <div class=\"value\">{displayValue}</div>}\n </TagName>\n </div>\n );\n }\n\n render() {\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <figure>\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n aria-describedby={!this.isClickable ? 'center-card-description' : undefined}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"chartContainer\"\n onClick={this.onContainerClick}\n tabIndex={!this.isClickable ? 0 : undefined}\n onKeyDown={!this.isClickable ? this.onButtonKeyDown : undefined}\n ></div>\n {this.renderCenterBlock()}\n </div>\n {this.showLegend && (\n <figcaption>\n <q2-legend\n class=\"legend\"\n data={this.legendData}\n format={this.format}\n hoveredItemId={this.legendHoveredId}\n onClick={this.onLegendClick}\n onMouseleave={this.onLegendMouseleave}\n onMouseenter={this.onLegendMouseenter}\n selectedItemId={this.selectedId}\n />\n </figcaption>\n )}\n </figure>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-chart-donut.js","sourceRoot":"","sources":["../../../src/components/q2-chart-donut/q2-chart-donut.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Element,\n EventEmitter,\n Event,\n Method,\n Watch,\n Listen,\n} from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport { 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';\nimport { getCSSProperty } from 'src/utils/charting';\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 // #region Own Properties\n\n btnElement: HTMLDivElement;\n centerButtonElement: HTMLButtonElement;\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n colors: string[];\n defaultRecord = { id: null, value: null, name: null };\n hostElementStyles: CSSStyleDeclaration;\n isInChangeEvent: boolean;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hoveredId: string;\n\n @State()\n legendData: IDonutChartData[];\n\n // #endregion\n // #region Public Property API\n\n /*\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IDonutChartData[] = [];\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /* The amount which the slice will scale when hovered. /\n @Prop()\n hoverScaleSize: number = 5;\n\n /\n The inner radius of the chart slices which is represeted by a percentage of the radius.\n \n @warning\n * If you update this property to be greater than or equal to the `outerRadius`,\n * we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n innerRadius: string = '70%';\n\n /\n Determine whether the data in the center renders inside a button element.\n \n @info\n * This also enables extra keyboard controls when the button is focused.\n /\n @Prop({ reflect: true })\n isClickable: boolean;\n\n /* The minimum size of the chart slizes which is represented as a percentage of the circumferences. /\n @Prop()\n minSliceSize: string = '2.5%';\n\n /\n The outer radius of the chart slices which is represented by a percentage of the radius.\n \n @warning\n * If you update this property to be less than or equal to the `innerRadius`,\n * we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.\n /\n @Prop({ mutable: true })\n outerRadius: string = '85%';\n\n /* The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change. /\n @Prop({ mutable: true })\n selectedId: string;\n\n /* The amount which the slice will separate from the chart when selected. /\n @Prop()\n selectedOffset: number = 10;\n\n /\n Determines whether the legend is displayed.\n \n @info\n * The legend is a list of the data points in the chart and their colors.\n /\n @Prop({ reflect: true })\n showLegend: boolean = false;\n\n /* The icon that displays by default when no slices are selected. /\n @Prop({ reflect: true })\n summaryIcon: string;\n\n /\n The name that displays by default when no slices are selected.\n * @localizable\n /\n @Prop({ reflect: true })\n summaryName: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a slice is selected.\n /\n @Event()\n 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()\n click: EventEmitter<IDonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver = null;\n }\n\n componentDidLoad(): void {\n const chart = echarts.init(this.chartContainer);\n\n this.cacheComputedStyles();\n this.colors = this.getColors();\n\n this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n this.resizeObserver.observe(this.hostElement);\n\n this.updateChart(chart);\n this.setupChartEvents(chart);\n this.checkSelectedId();\n\n this.chart = chart;\n this.setLegendData();\n this.selectById(this.selectedId);\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.isClickable) return;\n this.centerButtonElement?.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clears any selected slice.\n /\n @Method()\n async clearSelection() {\n const { selectedId } = this;\n if (!selectedId) return;\n\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(selectedId),\n });\n }\n\n /\n Returns the chart instance for e2e testing.\n \n @testOnly\n /\n @Method()\n async getChartOptions(): Promise<EChartsCoreOption> {\n return this.chart.getOption();\n }\n\n /\n Selects a slice by its provided `id` in the provided `data`.\n /\n @Method()\n async selectById(id: string) {\n const dataIndex = this.getIndexById(id);\n if (dataIndex === -1) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n /\n Selects a slice by its index in the provided `data`.\n /\n @Method()\n async selectByIndex(index: number) {\n const dataIndex = this.data[index] ? index : null;\n if (!dataIndex) return;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex,\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('innerRadius')\n @Watch('outerRadius')\n @Watch('minSliceSize')\n @Watch('hoverScaleSize')\n @Watch('selectedOffset')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n @Watch('data')\n dataUpdated() {\n this.colors = this.getColors();\n this.updateChart(this.chart);\n this.setLegendData();\n }\n\n @Watch('innerRadius')\n innerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (innerRadiusInt >= outerRadiusInt) {\n this.innerRadius = `${outerRadiusInt - 15}%`;\n }\n }\n\n @Watch('outerRadius')\n outerRadiusUpdated() {\n const { innerRadius, outerRadius } = this;\n const innerRadiusInt = parseFloat(innerRadius);\n const outerRadiusInt = parseFloat(outerRadius);\n if (outerRadiusInt <= innerRadiusInt) {\n this.outerRadius = `${innerRadiusInt + 15}%`;\n }\n }\n\n /\n Function to detect and set a data range (category) as selected\n * Logic for when legends are present, and can set selectedId when ledgend category is clicked\n * Also can be used by dev to preset\n /\n @Watch('selectedId')\n checkSelectedId() {\n if (!!this.selectedId) {\n this.hoveredId = this.selectedId;\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.selectById(this.selectedId);\n }\n } else {\n // Dispatch action only to be fired when chart is rendered\n if (this.chart) {\n this.chart.dispatchAction({\n type: 'unselect',\n seriesId: 'pie',\n dataIndex: this.getIndexById(this.hoveredId),\n });\n }\n this.hoveredId = null;\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get centerData() {\n const { hoveredId, data } = this;\n const idToDisplay = hoveredId;\n const index = this.getIndexById(idToDisplay);\n\n return idToDisplay\n ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n : {\n name: loc(this.summaryName \|\| 'tecton.element.chartDonut.button.summaryName'),\n icon: this.summaryIcon,\n value: data.reduce((acc, cur) => acc + cur.value, 0),\n color: null,\n };\n }\n\n get isMobile(): boolean {\n return isMobile();\n }\n\n get legendHoveredId() {\n return this.hoveredId === this.selectedId ? null : this.hoveredId;\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n displayValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (isNaN(valueAsFloat)) return;\n\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n } else {\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n }\n\n getColors() {\n const defaultColors = [1, 3, 8, 4, 2, 10, 7, 11, 6, 9, 12, 5].map(e => `--comp-color-${e}`);\n return this.data.reduce((acc, cur, idx) => {\n let color = defaultColors[idx % defaultColors.length];\n if (cur.color) color = cur.color;\n\n acc.push(getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles) \|\| color);\n return acc;\n }, []);\n }\n\n getCSSProperty(name: string) {\n let fallback;\n if (name.startsWith('var(') && name.endsWith(')')) {\n const regExp = /var\$(.)\$/g;\n const result = regExp.exec(name);\n const split = result.length >= 2 ? result[1].split(',') : [];\n name = split[0];\n fallback = split[1];\n }\n let result = this.chartContainerStyles.getPropertyValue(name).trim();\n if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n return result \|\| fallback;\n }\n\n getDataById(id: string) {\n if (!id) return;\n return this.data.find(item => item.id === id);\n }\n\n getDataByIndex(index: number) {\n if (typeof index !== 'number') return;\n return this.data[index];\n }\n\n getDataIndexForId(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getIndexById(id: string) {\n return this.data.findIndex(item => item.id === id);\n }\n\n getMinSliceSizeAsAngle() {\n return (parseFloat(this.minSliceSize) / 100) * 360;\n }\n\n onButtonClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n const { selectedId } = this;\n const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n this.click.emit(data);\n };\n\n onButtonKeyDown = (event: KeyboardEvent) => {\n const { selectedId, data } = this;\n let selectedIndex = this.getIndexById(selectedId) \|\| 0;\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n selectedIndex--;\n if (selectedIndex < 0) selectedIndex = data.length - 1;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedIndex++;\n if (selectedIndex > data.length - 1) selectedIndex = 0;\n this.chart.dispatchAction({\n type: 'select',\n seriesId: 'pie',\n dataIndex: selectedIndex,\n });\n break;\n\n case 'Escape':\n this.clearSelection();\n break;\n\n case ' ':\n event.preventDefault();\n break;\n\n default:\n return;\n }\n };\n\n onClickElsewhere = (event: Event) => {\n event.stopPropagation();\n this.clearSelection();\n };\n\n onContainerClick = (event: Event) => {\n if (this.isInChangeEvent) return;\n if (!(event.target instanceof HTMLElement)) return;\n this.clearSelection();\n event.stopPropagation();\n };\n\n onLegendClick = event => {\n event.stopPropagation();\n if (event.detail) {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.selectedId = event.detail.id;\n this.chart.dispatchAction({\n type: 'select',\n seriesIndex: 0,\n dataIndex,\n });\n } else {\n const dataIndex = this.getDataIndexForId(this.selectedId);\n this.hoveredId = this.selectedId;\n this.selectedId = null;\n this.chart.dispatchAction({\n type: 'unselect',\n seriesIndex: 0,\n dataIndex,\n });\n }\n };\n\n onLegendMouseenter = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = event.detail.id;\n this.chart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n onLegendMouseleave = event => {\n const dataIndex = this.getDataIndexForId(event.detail.id);\n this.hoveredId = this.selectedId;\n this.chart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex,\n });\n };\n\n resizeChart() {\n this.chart.resize();\n }\n\n setLegendData() {\n const chartColors = this.chart.getOption().series[0].color;\n this.legendData = this.data.map((item, index) => {\n const newItem = { ...item };\n if (!newItem.color) newItem.color = chartColors[index];\n\n return newItem;\n });\n }\n\n // Edit with caution. Echarts does not interpret events the same on mobile.\n setupChartEvents(chart: echarts.ECharts) {\n if (!this.isMobile) {\n chart.on('mouseover', (params: any) => {\n this.hoveredId = params.data.id;\n });\n chart.on('mouseout', () => {\n this.hoveredId = this.selectedId;\n });\n }\n chart.on('click', params => {\n params.event.stop();\n });\n chart.on('selectchanged', (params: any) => {\n const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n const data =\n typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n this.selectedId = data.id;\n this.isInChangeEvent = true;\n 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 validateColor() {\n // check if there is name duplicated, then custom style using `itemStyle` object will be used.\n if (\n this.data.length >\n Object.keys(\n this.data.reduce((acc, cur) => {\n acc[cur.name] = cur.name;\n return acc;\n }, {})\n ).length\n ) {\n this.data.forEach((el, i) => {\n el.itemStyle = { ...el.itemStyle, color: el.color \|\| this.colors[i] };\n });\n }\n }\n\n updateChart(chart: echarts.ECharts) {\n this.validateColor();\n return chart.setOption<EChartsOption>({\n tooltip: {\n show: false,\n },\n legend: {\n show: false,\n },\n aria: {\n enabled: true,\n },\n series: [\n {\n name: this.chartName,\n animationType: 'scale',\n color: this.colors,\n id: 'pie',\n type: 'pie',\n selectedOffset: this.selectedOffset,\n selectedMode: 'single',\n radius: [this.innerRadius, this.outerRadius],\n label: {\n show: false,\n },\n labelLine: {\n show: false,\n },\n itemStyle: {\n borderWidth: 5,\n borderColor: getCSSProperty(\n '--comp-background-color',\n this.chartContainerStyles,\n this.hostElementStyles\n ),\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 // #endregion\n // #region Render Methods\n\n renderCenterBlock() {\n const { icon, name, value, color } = this.centerData;\n const { isClickable } = this;\n const TagName = isClickable ? 'button' : 'div';\n const displayValue = this.displayValue(value);\n\n const props = isClickable\n ? {\n onKeyDown: this.onButtonKeyDown,\n onClick: this.onButtonClick,\n ref: el => (this.centerButtonElement = el),\n 'aria-describedby': 'center-card-description',\n 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n }\n : null;\n\n return (\n <div\n class=\"center-card-container\"\n style={{ width: `calc(${this.innerRadius} - 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 {!isNaN(value) && <div class=\"value\">{displayValue}</div>}\n </TagName>\n </div>\n );\n }\n\n render() {\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <figure>\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n aria-describedby={!this.isClickable ? 'center-card-description' : undefined}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"chartContainer\"\n onClick={this.onContainerClick}\n tabIndex={!this.isClickable ? 0 : undefined}\n onKeyDown={!this.isClickable ? this.onButtonKeyDown : undefined}\n ></div>\n {this.renderCenterBlock()}\n </div>\n {this.showLegend && (\n <figcaption>\n <q2-legend\n class=\"legend\"\n data={this.legendData}\n format={this.format}\n hoveredItemId={this.legendHoveredId}\n onClick={this.onLegendClick}\n onMouseleave={this.onLegendMouseleave}\n onMouseenter={this.onLegendMouseenter}\n selectedItemId={this.selectedId}\n />\n </figcaption>\n )}\n </figure>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"]}

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

@@ -74,32 +74,6 @@ describe('q2-chart-donut', () => {
         value = await page.find('q2-chart-donut >>> .value');
         expect(value).toEqualText('0');
     });
-    describe('[A11y] guideline compliance', () => {
-        it('renders a descriptive aria-label for the chart', async () => {
-            await setupChart(page);
-            chart.setProperty('chartName', 'Recent Spending');
-            await page.waitForChanges();
-            const chartContainer = await page.find('q2-chart-donut >>> .chart-container');
-            const ariaLabelText = await chartContainer.getAttribute('aria-label');
-            // this text is provided through the built-in accessibility feature from the Apache Echarts library when 'aria: true' is set in the chart options
-            expect(ariaLabelText).toContain('This is a chart with type Pie chart named Recent Spending.The data is as follows: the data for Groceries is 1048, the data for Pets is 735, the data for Rent is 580, the data for Automobile is 484, the data for Utilities is 0, the data for Gifts is 300.');
-        });
-        it('renders a descriptive aria-describedby element for the chart', async () => {
-            await setupChart(page);
-            chart.setProperty('chartName', 'Recent Spending');
-            chart.setProperty('isClickable', true);
-            await page.waitForChanges();
-            const descriptionDiv = await page.find('q2-chart-donut >>> [id=center-card-description]');
-            expect(descriptionDiv.innerText).toEqual('Use the left and right arrow keys to navigate between slices of the chart. The escape key will reset the chart to its original state.');
-        });
-        it('Does not have accessibility violations', async () => {
-            await setupChart(page);
-            chart.setProperty('chartName', 'Recent Spending');
-            await page.waitForChanges();
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     describe('Props', () => {
         describe('showLegend', () => {
             it('when true renders the legend', async () => {
@@ -502,5 +476,37 @@ describe('q2-chart-donut', () => {
             expect(emphasisDisabled).toBe(true);
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                await setupChart(page);
+                chart.setProperty('chartName', 'Recent Spending');
+                await page.waitForChanges();
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => {
+            it('renders a descriptive aria-label for the chart', async () => {
+                await setupChart(page);
+                chart.setProperty('chartName', 'Recent Spending');
+                await page.waitForChanges();
+                const chartContainer = await page.find('q2-chart-donut >>> .chart-container');
+                const ariaLabelText = await chartContainer.getAttribute('aria-label');
+                // this text is provided through the built-in accessibility feature from the Apache Echarts library when 'aria: true' is set in the chart options
+                expect(ariaLabelText).toContain('This is a chart with type Pie chart named Recent Spending.The data is as follows: the data for Groceries is 1048, the data for Pets is 735, the data for Rent is 580, the data for Automobile is 484, the data for Utilities is 0, the data for Gifts is 300.');
+            });
+            it('renders a descriptive aria-describedby element for the chart', async () => {
+                await setupChart(page);
+                chart.setProperty('chartName', 'Recent Spending');
+                chart.setProperty('isClickable', true);
+                await page.waitForChanges();
+                const descriptionDiv = await page.find('q2-chart-donut >>> [id=center-card-description]');
+                expect(descriptionDiv.innerText).toEqual('Use the left and right arrow keys to navigate between slices of the chart. The escape key will reset the chart to its original state.');
+            });
+        });
+    });
 });
 //# sourceMappingURL=q2-chart-donut-test.e2e.js.map