@triptease/tt-bar-chart 0.3.1 → 0.4.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.
- package/dist/src/TtBarChart.d.ts +4 -7
- package/dist/src/TtBarChart.js +66 -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,25 +99,38 @@ export class TtBarChart extends LitElement {
|
|
|
63
99
|
show: true,
|
|
64
100
|
},
|
|
65
101
|
legend: {
|
|
66
|
-
show:
|
|
102
|
+
show: datasets.length > 1,
|
|
103
|
+
textStyle: {
|
|
104
|
+
color: '#3b353b', //--text-400
|
|
105
|
+
},
|
|
67
106
|
},
|
|
68
107
|
xAxis: {
|
|
69
108
|
name: this.xAxisTitle,
|
|
109
|
+
nameTextStyle: {
|
|
110
|
+
lineHeight: 40,
|
|
111
|
+
color: '#575157', //--text-300
|
|
112
|
+
},
|
|
70
113
|
nameLocation: 'center',
|
|
71
114
|
type: this.direction === 'horizontal' ? 'value' : 'category',
|
|
72
115
|
data: this.direction === 'horizontal' ? undefined : labels,
|
|
73
116
|
axisLabel: {
|
|
74
117
|
formatter: axesFormatter,
|
|
118
|
+
color: '#3b353b', //--text-400
|
|
75
119
|
},
|
|
76
120
|
splitLine: { show: this.direction === 'horizontal' },
|
|
77
121
|
},
|
|
78
122
|
yAxis: {
|
|
79
123
|
name: this.yAxisTitle,
|
|
124
|
+
nameTextStyle: {
|
|
125
|
+
lineHeight: 40,
|
|
126
|
+
color: '#575157', //--text-300
|
|
127
|
+
},
|
|
80
128
|
nameLocation: 'center',
|
|
81
129
|
type: this.direction === 'horizontal' ? 'category' : 'value',
|
|
82
130
|
data: this.direction === 'horizontal' ? labels : undefined,
|
|
83
131
|
axisLabel: {
|
|
84
132
|
formatter: axesFormatter,
|
|
133
|
+
color: '#3b353b', //--text-400
|
|
85
134
|
},
|
|
86
135
|
splitLine: { show: this.direction === 'vertical' },
|
|
87
136
|
},
|
|
@@ -89,7 +138,7 @@ export class TtBarChart extends LitElement {
|
|
|
89
138
|
left: 0,
|
|
90
139
|
right: 0,
|
|
91
140
|
top: 0,
|
|
92
|
-
...(
|
|
141
|
+
...(datasets.length > 1 ? {} : { bottom: 0 }),
|
|
93
142
|
},
|
|
94
143
|
tooltip: {
|
|
95
144
|
trigger: 'axis',
|
|
@@ -103,9 +152,6 @@ export class TtBarChart extends LitElement {
|
|
|
103
152
|
}
|
|
104
153
|
}
|
|
105
154
|
}
|
|
106
|
-
__decorate([
|
|
107
|
-
property({ type: Array, converter: jsonConvertor })
|
|
108
|
-
], TtBarChart.prototype, "datasets", void 0);
|
|
109
155
|
__decorate([
|
|
110
156
|
property({ type: String })
|
|
111
157
|
], TtBarChart.prototype, "direction", void 0);
|
|
@@ -121,7 +167,16 @@ __decorate([
|
|
|
121
167
|
__decorate([
|
|
122
168
|
property({ type: Boolean, attribute: 'loading' })
|
|
123
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);
|
|
124
176
|
__decorate([
|
|
125
177
|
state()
|
|
126
178
|
], TtBarChart.prototype, "chart", void 0);
|
|
179
|
+
__decorate([
|
|
180
|
+
query('slot')
|
|
181
|
+
], TtBarChart.prototype, "defaultSlot", void 0);
|
|
127
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 },\n xAxis: {\n name: this.xAxisTitle,\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'value' : 'category',\n data: this.direction === 'horizontal' ? undefined : labels,\n axisLabel: {\n formatter: axesFormatter,\n },\n splitLine: { show: this.direction === 'horizontal' },\n },\n yAxis: {\n name: this.yAxisTitle,\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'category' : 'value',\n data: this.direction === 'horizontal' ? labels : undefined,\n axisLabel: {\n formatter: axesFormatter,\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.0",
|
|
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.1",
|
|
36
|
+
"@triptease/tt-dataset": "0.0.1",
|
|
35
37
|
"echarts": "^6.0.0",
|
|
36
38
|
"lit": "^3.1.4"
|
|
37
39
|
},
|