@triptease/tt-bar-chart 1.0.3 → 1.0.4
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.
package/dist/src/TtBarChart.d.ts
CHANGED
|
@@ -12,8 +12,10 @@ export declare class TtBarChart extends LitElement {
|
|
|
12
12
|
chart: echarts.ECharts | null;
|
|
13
13
|
private defaultSlot;
|
|
14
14
|
private loadingPulseTimer;
|
|
15
|
+
private slotObserver;
|
|
15
16
|
render(): import("lit-html").TemplateResult<1>;
|
|
16
17
|
protected handleSlotChange(): void;
|
|
18
|
+
disconnectedCallback(): void;
|
|
17
19
|
protected firstUpdated(): void;
|
|
18
20
|
protected updated(): void;
|
|
19
21
|
}
|
package/dist/src/TtBarChart.js
CHANGED
|
@@ -50,6 +50,7 @@ export class TtBarChart extends LitElement {
|
|
|
50
50
|
this.width = '100%';
|
|
51
51
|
this.height = '100%';
|
|
52
52
|
this.chart = null;
|
|
53
|
+
this.slotObserver = null;
|
|
53
54
|
}
|
|
54
55
|
render() {
|
|
55
56
|
return html `
|
|
@@ -60,8 +61,17 @@ export class TtBarChart extends LitElement {
|
|
|
60
61
|
`;
|
|
61
62
|
}
|
|
62
63
|
handleSlotChange() {
|
|
64
|
+
this.slotObserver?.disconnect();
|
|
65
|
+
this.slotObserver = new MutationObserver(() => this.requestUpdate());
|
|
66
|
+
this.defaultSlot.assignedElements().forEach((el) => {
|
|
67
|
+
this.slotObserver.observe(el, { childList: true, attributes: true, subtree: true });
|
|
68
|
+
});
|
|
63
69
|
this.requestUpdate();
|
|
64
70
|
}
|
|
71
|
+
disconnectedCallback() {
|
|
72
|
+
super.disconnectedCallback();
|
|
73
|
+
this.slotObserver?.disconnect();
|
|
74
|
+
}
|
|
65
75
|
firstUpdated() {
|
|
66
76
|
if (this.chart === null) {
|
|
67
77
|
echarts.use([AriaComponent]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../src/TtBarChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { axesFormatter, loadingAnimation } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\nimport { defaultColorPalette } from './colors.js';\nimport { isTtDataset } from '@triptease/tt-dataset';\nimport { isTtDataPoint } from '@triptease/tt-data-point';\n\nconst constructChartData = (ttDatasetElements: Element[]) => {\n if (!ttDatasetElements.every(isTtDataset)) {\n throw new Error(\"Children of element 'tt-bar-chart' must be 'tt-dataset' elements.\");\n }\n\n const datasets: Dataset[] = ttDatasetElements.map((ttDataset) => {\n const datasetLabel = ttDataset.getAttribute('label');\n if (!datasetLabel) throw new Error(\"Attribute 'label' on element 'tt-dataset' is required\");\n\n const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));\n if (!ttDataPoints.every(isTtDataPoint)) {\n throw new Error(\"Children of element 'tt-dataset' must be 'tt-data-point' elements\");\n }\n\n const data = ttDataPoints.map((ttDataPoint) => {\n const dataPointLabel = ttDataPoint.getAttribute('label');\n if (!dataPointLabel) throw new Error(\"Attribute 'label' on element 'tt-data-point' is required\");\n\n const valueRaw = ttDataPoint.getAttribute('value');\n const value = valueRaw ? Number(valueRaw) : undefined;\n if (value !== undefined && Number.isNaN(value)) {\n throw new Error(\"Attribute 'value' on element 'tt-data-point' is not a valid number\");\n }\n\n return { label: dataPointLabel, value };\n });\n\n return { label: datasetLabel, data };\n });\n\n return datasets;\n};\n\nexport class TtBarChart extends LitElement {\n @property({ type: String })\n direction: ChartDirection = 'horizontal';\n\n @property({ type: String, attribute: 'x-axis-title' })\n xAxisTitle?: string;\n\n @property({ type: String, attribute: 'y-axis-title' })\n yAxisTitle?: string;\n\n @property({ type: Boolean, attribute: 'stacked' })\n stacked: boolean = false;\n\n @property({ type: Boolean, attribute: 'loading' })\n loading: boolean = false;\n\n @property({ type: String, attribute: 'width' })\n width: string = '100%';\n\n @property({ type: String, attribute: 'height' })\n height: string = '100%';\n\n @state()\n chart: echarts.ECharts | null = null;\n\n @query('slot')\n private defaultSlot!: HTMLSlotElement;\n\n private loadingPulseTimer: number | undefined;\n\n render() {\n return html`\n <div style=\"width: ${this.width}; height:${this.height};\">\n <div id=${this.id} style=\"width:${this.width}; height:${this.height};\"></div>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n\n protected handleSlotChange() {\n this.requestUpdate();\n }\n\n protected firstUpdated() {\n if (this.chart === null) {\n echarts.use([AriaComponent]);\n const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n if (!divElement) {\n throw new Error('No div element');\n }\n\n this.chart = echarts.init(divElement);\n }\n }\n\n protected updated() {\n if (this.loadingPulseTimer) {\n window.clearInterval(this.loadingPulseTimer);\n }\n\n if (this.loading && this.chart) {\n this.setAttribute('aria-busy', 'true');\n const pulseTimer = loadingAnimation(this.chart, this.direction);\n this.loadingPulseTimer = pulseTimer;\n } else {\n this.removeAttribute('aria-busy');\n\n const datasets = constructChartData(this.defaultSlot.assignedElements());\n\n const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n const labels = [...new Set(labelsRaw)];\n\n const series: echarts.SeriesOption[] = datasets.map((dataset, i) => ({\n name: dataset.label,\n type: 'bar',\n data: labels.map((label) => {\n const point = dataset.data.find((dp) => dp.label === label);\n return point?.value ?? null;\n }),\n stack: this.stacked ? 'A' : undefined,\n color: defaultColorPalette[i],\n cursor: 'default',\n }));\n\n const option: echarts.EChartsOption = {\n aria: {\n show: true,\n },\n legend: {\n show: datasets.length > 1,\n textStyle: {\n color: '#3b353b', //--text-400\n },\n },\n xAxis: {\n name: this.xAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'value' : 'category',\n data: this.direction === 'horizontal' ? undefined : labels,\n axisLabel: {\n formatter: axesFormatter,\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'horizontal' },\n },\n yAxis: {\n name: this.yAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'category' : 'value',\n data: this.direction === 'horizontal' ? labels : undefined,\n axisLabel: {\n formatter: axesFormatter,\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'vertical' },\n },\n grid: {\n left: 0,\n right: 0,\n top: 0,\n ...(datasets.length > 1 ? {} : { bottom: 0 }),\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow',\n },\n },\n series,\n };\n\n this.chart.setOption(option, { notMerge: true });\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../src/TtBarChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { axesFormatter, loadingAnimation } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\nimport { defaultColorPalette } from './colors.js';\nimport { isTtDataset } from '@triptease/tt-dataset';\nimport { isTtDataPoint } from '@triptease/tt-data-point';\n\nconst constructChartData = (ttDatasetElements: Element[]) => {\n if (!ttDatasetElements.every(isTtDataset)) {\n throw new Error(\"Children of element 'tt-bar-chart' must be 'tt-dataset' elements.\");\n }\n\n const datasets: Dataset[] = ttDatasetElements.map((ttDataset) => {\n const datasetLabel = ttDataset.getAttribute('label');\n if (!datasetLabel) throw new Error(\"Attribute 'label' on element 'tt-dataset' is required\");\n\n const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));\n if (!ttDataPoints.every(isTtDataPoint)) {\n throw new Error(\"Children of element 'tt-dataset' must be 'tt-data-point' elements\");\n }\n\n const data = ttDataPoints.map((ttDataPoint) => {\n const dataPointLabel = ttDataPoint.getAttribute('label');\n if (!dataPointLabel) throw new Error(\"Attribute 'label' on element 'tt-data-point' is required\");\n\n const valueRaw = ttDataPoint.getAttribute('value');\n const value = valueRaw ? Number(valueRaw) : undefined;\n if (value !== undefined && Number.isNaN(value)) {\n throw new Error(\"Attribute 'value' on element 'tt-data-point' is not a valid number\");\n }\n\n return { label: dataPointLabel, value };\n });\n\n return { label: datasetLabel, data };\n });\n\n return datasets;\n};\n\nexport class TtBarChart extends LitElement {\n @property({ type: String })\n direction: ChartDirection = 'horizontal';\n\n @property({ type: String, attribute: 'x-axis-title' })\n xAxisTitle?: string;\n\n @property({ type: String, attribute: 'y-axis-title' })\n yAxisTitle?: string;\n\n @property({ type: Boolean, attribute: 'stacked' })\n stacked: boolean = false;\n\n @property({ type: Boolean, attribute: 'loading' })\n loading: boolean = false;\n\n @property({ type: String, attribute: 'width' })\n width: string = '100%';\n\n @property({ type: String, attribute: 'height' })\n height: string = '100%';\n\n @state()\n chart: echarts.ECharts | null = null;\n\n @query('slot')\n private defaultSlot!: HTMLSlotElement;\n\n private loadingPulseTimer: number | undefined;\n private slotObserver: MutationObserver | null = null;\n\n render() {\n return html`\n <div style=\"width: ${this.width}; height:${this.height};\">\n <div id=${this.id} style=\"width:${this.width}; height:${this.height};\"></div>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n\n protected handleSlotChange() {\n this.slotObserver?.disconnect();\n this.slotObserver = new MutationObserver(() => this.requestUpdate());\n this.defaultSlot.assignedElements().forEach((el) => {\n this.slotObserver!.observe(el, { childList: true, attributes: true, subtree: true });\n });\n this.requestUpdate();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.slotObserver?.disconnect();\n }\n\n protected firstUpdated() {\n if (this.chart === null) {\n echarts.use([AriaComponent]);\n const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n if (!divElement) {\n throw new Error('No div element');\n }\n\n this.chart = echarts.init(divElement);\n }\n }\n\n protected updated() {\n if (this.loadingPulseTimer) {\n window.clearInterval(this.loadingPulseTimer);\n }\n\n if (this.loading && this.chart) {\n this.setAttribute('aria-busy', 'true');\n const pulseTimer = loadingAnimation(this.chart, this.direction);\n this.loadingPulseTimer = pulseTimer;\n } else {\n this.removeAttribute('aria-busy');\n\n const datasets = constructChartData(this.defaultSlot.assignedElements());\n\n const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n const labels = [...new Set(labelsRaw)];\n\n const series: echarts.SeriesOption[] = datasets.map((dataset, i) => ({\n name: dataset.label,\n type: 'bar',\n data: labels.map((label) => {\n const point = dataset.data.find((dp) => dp.label === label);\n return point?.value ?? null;\n }),\n stack: this.stacked ? 'A' : undefined,\n color: defaultColorPalette[i],\n cursor: 'default',\n }));\n\n const option: echarts.EChartsOption = {\n aria: {\n show: true,\n },\n legend: {\n show: datasets.length > 1,\n textStyle: {\n color: '#3b353b', //--text-400\n },\n },\n xAxis: {\n name: this.xAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'value' : 'category',\n data: this.direction === 'horizontal' ? undefined : labels,\n axisLabel: {\n formatter: axesFormatter,\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'horizontal' },\n },\n yAxis: {\n name: this.yAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'category' : 'value',\n data: this.direction === 'horizontal' ? labels : undefined,\n axisLabel: {\n formatter: axesFormatter,\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'vertical' },\n },\n grid: {\n left: 0,\n right: 0,\n top: 0,\n ...(datasets.length > 1 ? {} : { bottom: 0 }),\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow',\n },\n },\n series,\n };\n\n this.chart.setOption(option, { notMerge: true });\n }\n }\n}\n"]}
|
package/package.json
CHANGED