@triptease/tt-bar-chart 0.3.2 → 0.4.1
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 +4 -7
- package/dist/src/TtBarChart.js +53 -11
- package/dist/src/TtBarChart.js.map +1 -1
- package/dist/src/types.d.ts +16 -27
- package/dist/src/types.js.map +1 -1
- package/dist/src/utils.d.ts +0 -1
- package/dist/src/utils.js +0 -1
- package/dist/src/utils.js.map +1 -1
- package/package.json +3 -1
package/dist/src/TtBarChart.d.ts
CHANGED
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import * as echarts from 'echarts';
|
|
3
|
-
import { ChartDirection
|
|
3
|
+
import { ChartDirection } from './types.js';
|
|
4
4
|
export declare class TtBarChart extends LitElement {
|
|
5
|
-
datasets: Dataset[];
|
|
6
5
|
direction: ChartDirection;
|
|
7
6
|
xAxisTitle?: string;
|
|
8
7
|
yAxisTitle?: string;
|
|
9
8
|
stacked: boolean;
|
|
10
9
|
loading: boolean;
|
|
10
|
+
width: string;
|
|
11
|
+
height: string;
|
|
11
12
|
chart: echarts.ECharts | null;
|
|
13
|
+
private defaultSlot;
|
|
12
14
|
private loadingPulseTimer;
|
|
13
15
|
render(): import("lit-html").TemplateResult<1>;
|
|
14
16
|
protected firstUpdated(): void;
|
|
15
17
|
protected updated(): void;
|
|
16
18
|
}
|
|
17
|
-
declare global {
|
|
18
|
-
interface HTMLElementTagNameMap {
|
|
19
|
-
'tt-bar-chart': TtBarChart;
|
|
20
|
-
}
|
|
21
|
-
}
|
package/dist/src/TtBarChart.js
CHANGED
|
@@ -7,22 +7,57 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
8
|
// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
|
|
9
9
|
import * as echarts from 'echarts';
|
|
10
|
-
import { property, state } from 'lit/decorators.js';
|
|
11
|
-
import { axesFormatter,
|
|
10
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
11
|
+
import { axesFormatter, loadingAnimation } from './utils.js';
|
|
12
12
|
// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
|
|
13
13
|
import { AriaComponent } from 'echarts/components';
|
|
14
14
|
import { defaultColorPalette } from './colors.js';
|
|
15
|
+
import { isTtDataset } from '@triptease/tt-dataset';
|
|
16
|
+
import { isTtDataPoint } from '@triptease/tt-data-point';
|
|
17
|
+
const constructChartData = (ttDatasetElements) => {
|
|
18
|
+
if (!ttDatasetElements.every(isTtDataset)) {
|
|
19
|
+
throw new Error("Children of element 'tt-bar-chart' must be 'tt-dataset' elements.");
|
|
20
|
+
}
|
|
21
|
+
const datasets = ttDatasetElements.map((ttDataset) => {
|
|
22
|
+
const datasetLabel = ttDataset.getAttribute('label');
|
|
23
|
+
if (!datasetLabel)
|
|
24
|
+
throw new Error("Attribute 'label' on element 'tt-dataset' is required");
|
|
25
|
+
const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));
|
|
26
|
+
if (!ttDataPoints.every(isTtDataPoint)) {
|
|
27
|
+
throw new Error("Children of element 'tt-dataset' must be 'tt-data-point' elements");
|
|
28
|
+
}
|
|
29
|
+
const data = ttDataPoints.map((ttDataPoint) => {
|
|
30
|
+
const dataPointLabel = ttDataPoint.getAttribute('label');
|
|
31
|
+
if (!dataPointLabel)
|
|
32
|
+
throw new Error("Attribute 'label' on element 'tt-data-point' is required");
|
|
33
|
+
const valueRaw = ttDataPoint.getAttribute('value');
|
|
34
|
+
const value = valueRaw ? Number(valueRaw) : undefined;
|
|
35
|
+
if (value !== undefined && Number.isNaN(value)) {
|
|
36
|
+
throw new Error("Attribute 'value' on element 'tt-data-point' is not a valid number");
|
|
37
|
+
}
|
|
38
|
+
return { label: dataPointLabel, value };
|
|
39
|
+
});
|
|
40
|
+
return { label: datasetLabel, data };
|
|
41
|
+
});
|
|
42
|
+
return datasets;
|
|
43
|
+
};
|
|
15
44
|
export class TtBarChart extends LitElement {
|
|
16
45
|
constructor() {
|
|
17
46
|
super(...arguments);
|
|
18
|
-
this.datasets = [];
|
|
19
47
|
this.direction = 'horizontal';
|
|
20
48
|
this.stacked = false;
|
|
21
49
|
this.loading = false;
|
|
50
|
+
this.width = '100%';
|
|
51
|
+
this.height = '100%';
|
|
22
52
|
this.chart = null;
|
|
23
53
|
}
|
|
24
54
|
render() {
|
|
25
|
-
return html `
|
|
55
|
+
return html `
|
|
56
|
+
<div style="width: ${this.width}; height:${this.height};">
|
|
57
|
+
<div id=${this.id} style="width:${this.width}; height:${this.height};"></div>
|
|
58
|
+
<slot></slot>
|
|
59
|
+
</div>
|
|
60
|
+
`;
|
|
26
61
|
}
|
|
27
62
|
firstUpdated() {
|
|
28
63
|
if (this.chart === null) {
|
|
@@ -45,9 +80,10 @@ export class TtBarChart extends LitElement {
|
|
|
45
80
|
}
|
|
46
81
|
else {
|
|
47
82
|
this.removeAttribute('aria-busy');
|
|
48
|
-
const
|
|
83
|
+
const datasets = constructChartData(this.defaultSlot.assignedElements());
|
|
84
|
+
const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));
|
|
49
85
|
const labels = [...new Set(labelsRaw)];
|
|
50
|
-
const series =
|
|
86
|
+
const series = datasets.map((dataset, i) => ({
|
|
51
87
|
name: dataset.label,
|
|
52
88
|
type: 'bar',
|
|
53
89
|
data: labels.map((label) => {
|
|
@@ -63,7 +99,7 @@ export class TtBarChart extends LitElement {
|
|
|
63
99
|
show: true,
|
|
64
100
|
},
|
|
65
101
|
legend: {
|
|
66
|
-
show:
|
|
102
|
+
show: datasets.length > 1,
|
|
67
103
|
textStyle: {
|
|
68
104
|
color: '#3b353b', //--text-400
|
|
69
105
|
},
|
|
@@ -102,7 +138,7 @@ export class TtBarChart extends LitElement {
|
|
|
102
138
|
left: 0,
|
|
103
139
|
right: 0,
|
|
104
140
|
top: 0,
|
|
105
|
-
...(
|
|
141
|
+
...(datasets.length > 1 ? {} : { bottom: 0 }),
|
|
106
142
|
},
|
|
107
143
|
tooltip: {
|
|
108
144
|
trigger: 'axis',
|
|
@@ -116,9 +152,6 @@ export class TtBarChart extends LitElement {
|
|
|
116
152
|
}
|
|
117
153
|
}
|
|
118
154
|
}
|
|
119
|
-
__decorate([
|
|
120
|
-
property({ type: Array, converter: jsonConvertor })
|
|
121
|
-
], TtBarChart.prototype, "datasets", void 0);
|
|
122
155
|
__decorate([
|
|
123
156
|
property({ type: String })
|
|
124
157
|
], TtBarChart.prototype, "direction", void 0);
|
|
@@ -134,7 +167,16 @@ __decorate([
|
|
|
134
167
|
__decorate([
|
|
135
168
|
property({ type: Boolean, attribute: 'loading' })
|
|
136
169
|
], TtBarChart.prototype, "loading", void 0);
|
|
170
|
+
__decorate([
|
|
171
|
+
property({ type: String, attribute: 'width' })
|
|
172
|
+
], TtBarChart.prototype, "width", void 0);
|
|
173
|
+
__decorate([
|
|
174
|
+
property({ type: String, attribute: 'height' })
|
|
175
|
+
], TtBarChart.prototype, "height", void 0);
|
|
137
176
|
__decorate([
|
|
138
177
|
state()
|
|
139
178
|
], TtBarChart.prototype, "chart", void 0);
|
|
179
|
+
__decorate([
|
|
180
|
+
query('slot')
|
|
181
|
+
], TtBarChart.prototype, "defaultSlot", void 0);
|
|
140
182
|
//# sourceMappingURL=TtBarChart.js.map
|
|
@@ -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, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { axesFormatter, jsonConvertor, 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';\n\nexport class TtBarChart extends LitElement {\n @property({ type: Array, converter: jsonConvertor })\n datasets: Dataset[] = [];\n\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 @state()\n chart: echarts.ECharts | null = null;\n\n private loadingPulseTimer: number | undefined;\n\n render() {\n return html` <div id=${this.id} style=\"width: 100%; height:100%;\"></div> `;\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 labelsRaw = this.datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n const labels = [...new Set(labelsRaw)];\n\n const series: echarts.SeriesOption[] = this.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: this.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 ...(this.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\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-bar-chart': TtBarChart;\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\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></slot>\n </div>\n `;\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/dist/src/types.d.ts
CHANGED
|
@@ -1,41 +1,30 @@
|
|
|
1
|
-
import
|
|
2
|
-
interface DataPoint {
|
|
1
|
+
import { TtBarChart } from './TtBarChart.js';
|
|
2
|
+
export interface DataPoint {
|
|
3
3
|
label: string;
|
|
4
|
-
value: number;
|
|
4
|
+
value: number | undefined;
|
|
5
5
|
}
|
|
6
6
|
export interface Dataset {
|
|
7
7
|
label: string;
|
|
8
8
|
data: DataPoint[];
|
|
9
9
|
}
|
|
10
10
|
export type ChartDirection = 'horizontal' | 'vertical';
|
|
11
|
-
interface TTBarChartAttributes {
|
|
12
|
-
id?: string;
|
|
13
|
-
style?: React.CSSProperties;
|
|
14
|
-
[key: `data-${string}`]: string | undefined;
|
|
15
|
-
datasets?: string;
|
|
16
|
-
direction?: ChartDirection;
|
|
17
|
-
'x-axis-title'?: string;
|
|
18
|
-
'y-axis-title'?: string;
|
|
19
|
-
stacked?: boolean;
|
|
20
|
-
loading?: boolean;
|
|
21
|
-
}
|
|
22
11
|
declare global {
|
|
12
|
+
interface HTMLElementTagNameMap {
|
|
13
|
+
'tt-bar-chart': TtBarChart;
|
|
14
|
+
}
|
|
23
15
|
namespace JSX {
|
|
24
16
|
interface IntrinsicElements {
|
|
25
|
-
'tt-bar-chart':
|
|
26
|
-
|
|
17
|
+
'tt-bar-chart': {
|
|
18
|
+
id: string;
|
|
19
|
+
width?: string;
|
|
20
|
+
height?: string;
|
|
21
|
+
children?: Element | Element[];
|
|
22
|
+
direction?: ChartDirection;
|
|
23
|
+
'x-axis-title'?: string;
|
|
24
|
+
'y-axis-title'?: string;
|
|
25
|
+
stacked?: boolean;
|
|
26
|
+
loading?: boolean;
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
namespace React {
|
|
31
|
-
namespace JSX {
|
|
32
|
-
interface IntrinsicElements {
|
|
33
|
-
'tt-bar-chart': TTBarChartAttributes & {
|
|
34
|
-
className?: string;
|
|
35
|
-
ref?: React.Ref<unknown>;
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
30
|
}
|
|
41
|
-
export {};
|
package/dist/src/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nexport interface DataPoint {\n label: string;\n value: number | undefined;\n}\n\nexport interface Dataset {\n label: string;\n data: DataPoint[];\n}\n\nexport type ChartDirection = 'horizontal' | 'vertical';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-bar-chart': TtBarChart;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart': {\n id: string;\n width?: string;\n height?: string;\n children?: Element | Element[];\n direction?: ChartDirection;\n 'x-axis-title'?: string;\n 'y-axis-title'?: string;\n stacked?: boolean;\n loading?: boolean;\n };\n }\n }\n}\n"]}
|
package/dist/src/utils.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as echarts from 'echarts';
|
|
2
2
|
import { ChartDirection } from './types.js';
|
|
3
|
-
export declare const jsonConvertor: (value: string | null) => any;
|
|
4
3
|
export declare const axesFormatter: (value: number | string) => string;
|
|
5
4
|
export declare const loadingAnimation: (chart: echarts.ECharts, direction: ChartDirection) => number;
|
package/dist/src/utils.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export const jsonConvertor = (value) => (value ? JSON.parse(value) : undefined);
|
|
2
1
|
const numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 2 });
|
|
3
2
|
export const axesFormatter = (value) => {
|
|
4
3
|
if (typeof value === 'number') {
|
package/dist/src/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAGA,MAAM,sBAAsB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,CAAC;AAEnH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAsB,EAAE,EAAE;IACtD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,sBAAsB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,MAAM,cAAc,GAAG,IAAI,CAAC;AAE5B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAsB,EAAE,SAAyB,EAAE,EAAE;IACpF,MAAM,YAAY,GAAG,SAAS,KAAK,YAAY,CAAC;IAEhD,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IAE7G,MAAM,QAAQ,GAAG;QACf,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACzB,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACzB,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;KAC3B,CAAC;IAEF,KAAK,CAAC,SAAS,CACb;QACE,SAAS,EAAE,IAAI;QACf,iBAAiB,EAAE,GAAG;QACtB,eAAe,EAAE,YAAY;QAE7B,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,GAAG,EAAE,CAAC;YACN,MAAM,EAAE,CAAC;YACT,YAAY,EAAE,KAAK;SACpB;QAED,KAAK,EAAE,YAAY;YACjB,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE;YAChC,CAAC,CAAC;gBACE,GAAG,QAAQ;gBACX,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;aACvD;QAEL,KAAK,EAAE,YAAY;YACjB,CAAC,CAAC;gBACE,GAAG,QAAQ;gBACX,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;aACvD;YACH,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE;QAElC,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE,YAAY,EAAE;gBACpB,MAAM,EAAE,IAAI;gBACZ,uBAAuB,EAAE,GAAG;gBAC5B,SAAS,EAAE;oBACT,KAAK,EAAE,SAAS;iBACjB;gBACD,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;aAC7B;SACF;KACF,EACD,IAAI,CACL,CAAC;IAEF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,KAAK,CAAC,SAAS,CAAC;YACd,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC;SACnC,CAAC,CAAC;IACL,CAAC,EAAE,cAAc,CAAC,CAAC;IAEnB,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC","sourcesContent":["// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { ChartDirection } from './types.js';\nconst numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 2 });\n\nexport const axesFormatter = (value: number | string) => {\n if (typeof value === 'number') {\n return numericalAxesFormatter.format(value);\n }\n\n return value;\n};\n\nconst SKELETON_ITEMS = 4;\nconst PULSE_INTERVAL = 1500;\n\nexport const loadingAnimation = (chart: echarts.ECharts, direction: ChartDirection) => {\n const isHorizontal = direction === 'horizontal';\n\n const generateData = () => Array.from({ length: SKELETON_ITEMS }, () => Math.round(30 + Math.random() * 50));\n\n const baseAxis = {\n axisLabel: { show: false },\n axisTick: { show: false },\n axisLine: { show: false },\n splitLine: { show: false },\n };\n\n chart.setOption(\n {\n animation: true,\n animationDuration: 800,\n animationEasing: 'cubicInOut',\n\n grid: {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n containLabel: false,\n },\n\n xAxis: isHorizontal\n ? { ...baseAxis, type: 'value' }\n : {\n ...baseAxis,\n type: 'category',\n data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n },\n\n yAxis: isHorizontal\n ? {\n ...baseAxis,\n type: 'category',\n data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n }\n : { ...baseAxis, type: 'value' },\n\n series: [\n {\n type: 'bar',\n data: generateData(),\n silent: true,\n animationDurationUpdate: 800,\n itemStyle: {\n color: '#e5e7eb',\n },\n emphasis: { disabled: true },\n },\n ],\n },\n true\n );\n\n const pulseTimer = window.setInterval(() => {\n chart.setOption({\n series: [{ data: generateData() }],\n });\n }, PULSE_INTERVAL);\n\n return pulseTimer;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent tt-bar-chart following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "tt-bar-chart",
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.4.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/src/index.js",
|
|
9
9
|
"module": "dist/src/index.js",
|
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
"test:watch": "vitest --config=./vitest.browser.config.mjs"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
+
"@triptease/tt-data-point": "0.0.2",
|
|
36
|
+
"@triptease/tt-dataset": "0.0.2",
|
|
35
37
|
"echarts": "^6.0.0",
|
|
36
38
|
"lit": "^3.1.4"
|
|
37
39
|
},
|