@triptease/tt-bar-chart 0.2.3 → 0.3.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 +0 -6
- package/dist/src/TtBarChart.js +14 -47
- package/dist/src/TtBarChart.js.map +1 -1
- package/dist/src/colors.d.ts +1 -0
- package/dist/src/colors.js +2 -0
- package/dist/src/colors.js.map +1 -0
- package/dist/src/types.d.ts +0 -7
- 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 +7 -9
package/dist/src/TtBarChart.d.ts
CHANGED
|
@@ -6,16 +6,10 @@ export declare class TtBarChart extends LitElement {
|
|
|
6
6
|
direction: ChartDirection;
|
|
7
7
|
xAxisTitle?: string;
|
|
8
8
|
yAxisTitle?: string;
|
|
9
|
-
showHorizontalGrid: boolean;
|
|
10
|
-
showVerticalGrid: boolean;
|
|
11
|
-
showLegend: boolean;
|
|
12
|
-
showDataLabels: boolean;
|
|
13
|
-
showTooltip: boolean;
|
|
14
9
|
stacked: boolean;
|
|
15
10
|
loading: boolean;
|
|
16
11
|
chart: echarts.ECharts | null;
|
|
17
12
|
private loadingPulseTimer;
|
|
18
|
-
private getSeriesColor;
|
|
19
13
|
render(): import("lit-html").TemplateResult<1>;
|
|
20
14
|
protected firstUpdated(): void;
|
|
21
15
|
protected updated(): void;
|
package/dist/src/TtBarChart.js
CHANGED
|
@@ -8,29 +8,18 @@ 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
10
|
import { property, state } from 'lit/decorators.js';
|
|
11
|
-
import { axesFormatter,
|
|
11
|
+
import { axesFormatter, jsonConvertor, 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
|
+
import { defaultColorPalette } from './colors.js';
|
|
14
15
|
export class TtBarChart extends LitElement {
|
|
15
16
|
constructor() {
|
|
16
17
|
super(...arguments);
|
|
17
18
|
this.datasets = [];
|
|
18
19
|
this.direction = 'horizontal';
|
|
19
|
-
this.showHorizontalGrid = false;
|
|
20
|
-
this.showVerticalGrid = false;
|
|
21
|
-
this.showLegend = false;
|
|
22
|
-
this.showDataLabels = false;
|
|
23
|
-
this.showTooltip = false;
|
|
24
20
|
this.stacked = false;
|
|
25
21
|
this.loading = false;
|
|
26
22
|
this.chart = null;
|
|
27
|
-
this.getSeriesColor = (dataset) => {
|
|
28
|
-
if (this.datasets && this.datasets.length > 1)
|
|
29
|
-
return undefined;
|
|
30
|
-
if (dataset.color)
|
|
31
|
-
return dataset.color;
|
|
32
|
-
return '#4d35a1';
|
|
33
|
-
};
|
|
34
23
|
}
|
|
35
24
|
render() {
|
|
36
25
|
return html ` <div id=${this.id} style="width: 100%; height:100%;"></div> `;
|
|
@@ -58,7 +47,7 @@ export class TtBarChart extends LitElement {
|
|
|
58
47
|
this.removeAttribute('aria-busy');
|
|
59
48
|
const labelsRaw = this.datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));
|
|
60
49
|
const labels = [...new Set(labelsRaw)];
|
|
61
|
-
const series = this.datasets.map((dataset) => ({
|
|
50
|
+
const series = this.datasets.map((dataset, i) => ({
|
|
62
51
|
name: dataset.label,
|
|
63
52
|
type: 'bar',
|
|
64
53
|
data: labels.map((label) => {
|
|
@@ -66,12 +55,7 @@ export class TtBarChart extends LitElement {
|
|
|
66
55
|
return point?.value ?? null;
|
|
67
56
|
}),
|
|
68
57
|
stack: this.stacked ? 'A' : undefined,
|
|
69
|
-
color:
|
|
70
|
-
label: {
|
|
71
|
-
show: this.showDataLabels,
|
|
72
|
-
position: 'right',
|
|
73
|
-
formatter: ({ value }) => dataLabelsFormatter.format(value),
|
|
74
|
-
},
|
|
58
|
+
color: defaultColorPalette[i],
|
|
75
59
|
cursor: 'default',
|
|
76
60
|
}));
|
|
77
61
|
const option = {
|
|
@@ -79,7 +63,7 @@ export class TtBarChart extends LitElement {
|
|
|
79
63
|
show: true,
|
|
80
64
|
},
|
|
81
65
|
legend: {
|
|
82
|
-
show: this.
|
|
66
|
+
show: this.datasets.length > 1,
|
|
83
67
|
},
|
|
84
68
|
xAxis: {
|
|
85
69
|
name: this.xAxisTitle,
|
|
@@ -89,7 +73,7 @@ export class TtBarChart extends LitElement {
|
|
|
89
73
|
axisLabel: {
|
|
90
74
|
formatter: axesFormatter,
|
|
91
75
|
},
|
|
92
|
-
splitLine: { show: this.
|
|
76
|
+
splitLine: { show: this.direction === 'horizontal' },
|
|
93
77
|
},
|
|
94
78
|
yAxis: {
|
|
95
79
|
name: this.yAxisTitle,
|
|
@@ -99,25 +83,23 @@ export class TtBarChart extends LitElement {
|
|
|
99
83
|
axisLabel: {
|
|
100
84
|
formatter: axesFormatter,
|
|
101
85
|
},
|
|
102
|
-
splitLine: { show: this.
|
|
86
|
+
splitLine: { show: this.direction === 'vertical' },
|
|
103
87
|
},
|
|
104
88
|
grid: {
|
|
105
89
|
left: 0,
|
|
106
90
|
right: 0,
|
|
107
91
|
top: 0,
|
|
108
|
-
...(this.
|
|
92
|
+
...(this.datasets.length > 1 ? {} : { bottom: 0 }),
|
|
109
93
|
},
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
type: 'shadow',
|
|
115
|
-
},
|
|
94
|
+
tooltip: {
|
|
95
|
+
trigger: 'axis',
|
|
96
|
+
axisPointer: {
|
|
97
|
+
type: 'shadow',
|
|
116
98
|
},
|
|
117
|
-
}
|
|
99
|
+
},
|
|
118
100
|
series,
|
|
119
101
|
};
|
|
120
|
-
this.chart.setOption(option);
|
|
102
|
+
this.chart.setOption(option, { notMerge: true });
|
|
121
103
|
}
|
|
122
104
|
}
|
|
123
105
|
}
|
|
@@ -133,21 +115,6 @@ __decorate([
|
|
|
133
115
|
__decorate([
|
|
134
116
|
property({ type: String, attribute: 'y-axis-title' })
|
|
135
117
|
], TtBarChart.prototype, "yAxisTitle", void 0);
|
|
136
|
-
__decorate([
|
|
137
|
-
property({ type: Boolean, attribute: 'show-horizontal-grid' })
|
|
138
|
-
], TtBarChart.prototype, "showHorizontalGrid", void 0);
|
|
139
|
-
__decorate([
|
|
140
|
-
property({ type: Boolean, attribute: 'show-vertical-grid' })
|
|
141
|
-
], TtBarChart.prototype, "showVerticalGrid", void 0);
|
|
142
|
-
__decorate([
|
|
143
|
-
property({ type: Boolean, attribute: 'show-legend' })
|
|
144
|
-
], TtBarChart.prototype, "showLegend", void 0);
|
|
145
|
-
__decorate([
|
|
146
|
-
property({ type: Boolean, attribute: 'show-data-labels' })
|
|
147
|
-
], TtBarChart.prototype, "showDataLabels", void 0);
|
|
148
|
-
__decorate([
|
|
149
|
-
property({ type: Boolean, attribute: 'show-tooltip' })
|
|
150
|
-
], TtBarChart.prototype, "showTooltip", void 0);
|
|
151
118
|
__decorate([
|
|
152
119
|
property({ type: Boolean, attribute: 'stacked' })
|
|
153
120
|
], TtBarChart.prototype, "stacked", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../src/TtBarChart.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,gFAAgF;AAChF,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,
|
|
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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const defaultColorPalette: string[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC","sourcesContent":["export const defaultColorPalette = ['#ED6E2E', '#1967D3', '#119EAE', '#283492', '#596B7A', '#4d35a1'];\n"]}
|
package/dist/src/types.d.ts
CHANGED
|
@@ -6,7 +6,6 @@ interface DataPoint {
|
|
|
6
6
|
export interface Dataset {
|
|
7
7
|
label: string;
|
|
8
8
|
data: DataPoint[];
|
|
9
|
-
color?: string;
|
|
10
9
|
}
|
|
11
10
|
export type ChartDirection = 'horizontal' | 'vertical';
|
|
12
11
|
interface TTBarChartAttributes {
|
|
@@ -17,12 +16,6 @@ interface TTBarChartAttributes {
|
|
|
17
16
|
direction?: ChartDirection;
|
|
18
17
|
'x-axis-title'?: string;
|
|
19
18
|
'y-axis-title'?: string;
|
|
20
|
-
color?: string;
|
|
21
|
-
'show-horizontal-grid'?: boolean;
|
|
22
|
-
'show-vertical-grid'?: boolean;
|
|
23
|
-
'show-legend'?: boolean;
|
|
24
|
-
'show-data-labels'?: boolean;
|
|
25
|
-
'show-tooltip'?: boolean;
|
|
26
19
|
stacked?: boolean;
|
|
27
20
|
loading?: boolean;
|
|
28
21
|
}
|
package/dist/src/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import React from 'react';\n\ninterface DataPoint {\n label: string;\n value: number;\n}\n\nexport interface Dataset {\n label: string;\n data: DataPoint[];\n
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import React from 'react';\n\ninterface DataPoint {\n label: string;\n value: number;\n}\n\nexport interface Dataset {\n label: string;\n data: DataPoint[];\n}\n\nexport type ChartDirection = 'horizontal' | 'vertical';\n\ninterface TTBarChartAttributes {\n id?: string;\n style?: React.CSSProperties;\n [key: `data-${string}`]: string | undefined;\n datasets?: string;\n direction?: ChartDirection;\n 'x-axis-title'?: string;\n 'y-axis-title'?: string;\n stacked?: boolean;\n loading?: boolean;\n}\n\ndeclare global {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart': TTBarChartAttributes & { class?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart': TTBarChartAttributes & { className?: string; ref?: React.Ref<unknown> };\n }\n }\n }\n}\n"]}
|
package/dist/src/utils.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as echarts from 'echarts';
|
|
2
2
|
import { ChartDirection } from './types.js';
|
|
3
3
|
export declare const jsonConvertor: (value: string | null) => any;
|
|
4
|
-
export declare const dataLabelsFormatter: Intl.NumberFormat;
|
|
5
4
|
export declare const axesFormatter: (value: number | string) => string;
|
|
6
5
|
export declare const loadingAnimation: (chart: echarts.ECharts, direction: ChartDirection) => number;
|
package/dist/src/utils.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export const jsonConvertor = (value) => (value ? JSON.parse(value) : undefined);
|
|
2
|
-
export const dataLabelsFormatter = new Intl.NumberFormat(undefined);
|
|
3
2
|
const numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 2 });
|
|
4
3
|
export const axesFormatter = (value) => {
|
|
5
4
|
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":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { ChartDirection } from './types.js';\n\nexport const jsonConvertor = (value: string | null) => (value ? JSON.parse(value) : undefined);\n\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.3.0",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/src/index.js",
|
|
9
9
|
"module": "dist/src/index.js",
|
|
@@ -28,23 +28,21 @@
|
|
|
28
28
|
"build:node:watch": "tsc --watch",
|
|
29
29
|
"build:web": "node ../../scripts/esbuild.mjs",
|
|
30
30
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
31
|
-
"test": "
|
|
32
|
-
"test:watch": "
|
|
31
|
+
"test": "yarn playwright install && vitest run --config=./vitest.browser.config.mjs",
|
|
32
|
+
"test:watch": "vitest --config=./vitest.browser.config.mjs"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@triptease/html-jsx": "^0.2.6",
|
|
36
35
|
"echarts": "^6.0.0",
|
|
37
36
|
"lit": "^3.1.4"
|
|
38
37
|
},
|
|
39
38
|
"devDependencies": {
|
|
40
39
|
"@custom-elements-manifest/analyzer": "^0.10.3",
|
|
41
|
-
"@
|
|
42
|
-
"@types/mocha": "^10.0.7",
|
|
43
|
-
"@web/dev-server": "^0.4.6",
|
|
44
|
-
"@web/test-runner": "^0.18.2",
|
|
40
|
+
"@vitest/browser-playwright": "^4.0.15",
|
|
45
41
|
"concurrently": "^8.2.2",
|
|
42
|
+
"playwright": "^1.57.0",
|
|
46
43
|
"tslib": "^2.6.3",
|
|
47
|
-
"typescript": "^5.5.3"
|
|
44
|
+
"typescript": "^5.5.3",
|
|
45
|
+
"vitest-browser-lit": "^1.0.1"
|
|
48
46
|
},
|
|
49
47
|
"customElements": "custom-elements.json",
|
|
50
48
|
"publishConfig": {
|