@triptease/tt-bar-chart 0.1.2 → 0.1.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 +5 -4
- package/dist/src/TtBarChart.js +31 -16
- package/dist/src/TtBarChart.js.map +1 -1
- package/dist/src/types.d.ts +13 -6
- package/dist/src/types.js.map +1 -1
- package/package.json +1 -2
package/dist/src/TtBarChart.d.ts
CHANGED
|
@@ -4,11 +4,12 @@ export declare class TtBarChart extends LitElement {
|
|
|
4
4
|
labels: string[];
|
|
5
5
|
datasets: Dataset[];
|
|
6
6
|
direction: 'horizontal' | 'vertical';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
xAxisTitle?: string;
|
|
8
|
+
yAxisTitle?: string;
|
|
9
|
+
showHorizontalGrid: boolean;
|
|
10
|
+
showVerticalGrid: boolean;
|
|
10
11
|
showLegend: boolean;
|
|
11
|
-
|
|
12
|
+
showDataLabels: boolean;
|
|
12
13
|
showTooltip: boolean;
|
|
13
14
|
private getSeriesColor;
|
|
14
15
|
render(): import("lit-html").TemplateResult<1>;
|
package/dist/src/TtBarChart.js
CHANGED
|
@@ -1,18 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
2
7
|
import { html, LitElement } from 'lit';
|
|
3
8
|
// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
|
|
4
9
|
import * as echarts from 'echarts';
|
|
5
10
|
import { customElement, property } from 'lit/decorators.js';
|
|
6
11
|
import { formatter, jsonConvertor } from './utils.js';
|
|
12
|
+
// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
|
|
13
|
+
import { AriaComponent } from 'echarts/components';
|
|
7
14
|
let TtBarChart = class TtBarChart extends LitElement {
|
|
8
15
|
constructor() {
|
|
9
16
|
super(...arguments);
|
|
10
17
|
this.labels = [];
|
|
11
18
|
this.datasets = [];
|
|
12
19
|
this.direction = 'horizontal';
|
|
13
|
-
this.
|
|
20
|
+
this.showHorizontalGrid = false;
|
|
21
|
+
this.showVerticalGrid = false;
|
|
14
22
|
this.showLegend = false;
|
|
15
|
-
this.
|
|
23
|
+
this.showDataLabels = false;
|
|
16
24
|
this.showTooltip = false;
|
|
17
25
|
this.getSeriesColor = (dataset) => {
|
|
18
26
|
if (this.datasets && this.datasets.length > 1)
|
|
@@ -31,35 +39,39 @@ let TtBarChart = class TtBarChart extends LitElement {
|
|
|
31
39
|
throw new Error('No div element');
|
|
32
40
|
}
|
|
33
41
|
const chart = echarts.init(divElement);
|
|
42
|
+
echarts.use([AriaComponent]);
|
|
34
43
|
const series = this.datasets.map((dataset) => ({
|
|
35
44
|
name: dataset.label,
|
|
36
45
|
type: 'bar',
|
|
37
46
|
data: dataset.data,
|
|
38
47
|
color: this.getSeriesColor(dataset),
|
|
39
48
|
label: {
|
|
40
|
-
show: this.
|
|
49
|
+
show: this.showDataLabels,
|
|
41
50
|
position: 'right',
|
|
42
51
|
formatter: ({ value }) => formatter.format(value),
|
|
43
52
|
},
|
|
44
53
|
cursor: "default"
|
|
45
54
|
}));
|
|
46
55
|
const option = {
|
|
56
|
+
aria: {
|
|
57
|
+
show: true
|
|
58
|
+
},
|
|
47
59
|
legend: {
|
|
48
60
|
show: this.showLegend,
|
|
49
61
|
},
|
|
50
62
|
xAxis: {
|
|
51
|
-
name: this.
|
|
63
|
+
name: this.xAxisTitle,
|
|
52
64
|
nameLocation: "center",
|
|
53
65
|
type: this.direction === 'horizontal' ? 'value' : 'category',
|
|
54
66
|
data: this.direction === 'horizontal' ? undefined : this.labels,
|
|
55
|
-
splitLine: { show: this.
|
|
67
|
+
splitLine: { show: this.showHorizontalGrid },
|
|
56
68
|
},
|
|
57
69
|
yAxis: {
|
|
58
|
-
name: this.
|
|
70
|
+
name: this.yAxisTitle,
|
|
59
71
|
nameLocation: "center",
|
|
60
72
|
type: this.direction === 'horizontal' ? 'category' : 'value',
|
|
61
73
|
data: this.direction === 'horizontal' ? this.labels : undefined,
|
|
62
|
-
splitLine: { show: this.
|
|
74
|
+
splitLine: { show: this.showVerticalGrid },
|
|
63
75
|
},
|
|
64
76
|
...(this.showTooltip && {
|
|
65
77
|
tooltip: {
|
|
@@ -84,20 +96,23 @@ __decorate([
|
|
|
84
96
|
property({ type: String })
|
|
85
97
|
], TtBarChart.prototype, "direction", void 0);
|
|
86
98
|
__decorate([
|
|
87
|
-
property({ type: String, attribute: 'x-axis-
|
|
88
|
-
], TtBarChart.prototype, "
|
|
99
|
+
property({ type: String, attribute: 'x-axis-title' })
|
|
100
|
+
], TtBarChart.prototype, "xAxisTitle", void 0);
|
|
101
|
+
__decorate([
|
|
102
|
+
property({ type: String, attribute: 'y-axis-title' })
|
|
103
|
+
], TtBarChart.prototype, "yAxisTitle", void 0);
|
|
89
104
|
__decorate([
|
|
90
|
-
property({ type:
|
|
91
|
-
], TtBarChart.prototype, "
|
|
105
|
+
property({ type: Boolean, attribute: 'show-horizontal-grid' })
|
|
106
|
+
], TtBarChart.prototype, "showHorizontalGrid", void 0);
|
|
92
107
|
__decorate([
|
|
93
|
-
property({ type: Boolean, attribute: 'show-grid' })
|
|
94
|
-
], TtBarChart.prototype, "
|
|
108
|
+
property({ type: Boolean, attribute: 'show-vertical-grid' })
|
|
109
|
+
], TtBarChart.prototype, "showVerticalGrid", void 0);
|
|
95
110
|
__decorate([
|
|
96
111
|
property({ type: Boolean, attribute: 'show-legend' })
|
|
97
112
|
], TtBarChart.prototype, "showLegend", void 0);
|
|
98
113
|
__decorate([
|
|
99
|
-
property({ type: Boolean, attribute: 'show-
|
|
100
|
-
], TtBarChart.prototype, "
|
|
114
|
+
property({ type: Boolean, attribute: 'show-data-labels' })
|
|
115
|
+
], TtBarChart.prototype, "showDataLabels", void 0);
|
|
101
116
|
__decorate([
|
|
102
117
|
property({ type: Boolean, attribute: 'show-tooltip' })
|
|
103
118
|
], TtBarChart.prototype, "showTooltip", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../src/TtBarChart.ts"],"names":[],"mappings":"
|
|
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 { customElement, property } from 'lit/decorators.js';\nimport { Dataset } from './types.js';\nimport { formatter, jsonConvertor } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\n\n@customElement('tt-bar-chart')\nexport class TtBarChart extends LitElement {\n @property({ type: Array, converter: jsonConvertor, attribute: 'categories' })\n labels: string[] = [];\n\n @property({ type: Array, converter: jsonConvertor })\n datasets: Dataset[] = [];\n\n @property({ type: String })\n direction: 'horizontal' | 'vertical' = '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: 'show-horizontal-grid' })\n showHorizontalGrid: boolean = false;\n\n @property({ type: Boolean, attribute: 'show-vertical-grid' })\n showVerticalGrid: boolean = false;\n\n @property({ type: Boolean, attribute: 'show-legend' })\n showLegend: boolean = false;\n\n @property({ type: Boolean, attribute: 'show-data-labels' })\n showDataLabels: boolean = false;\n\n @property({ type: Boolean, attribute: 'show-tooltip' })\n showTooltip: boolean = false;\n\n private getSeriesColor = (dataset: Dataset) => {\n if (this.datasets && this.datasets.length > 1) return undefined;\n if (dataset.color) return dataset.color;\n\n return '#4d35a1';\n };\n\n render() {\n return html` <div id=${this.id} style=\"width: 100%; height:100%;\"></div> `;\n }\n\n protected firstUpdated() {\n const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n if (!divElement) {\n throw new Error('No div element');\n }\n\n const chart = echarts.init(divElement);\n echarts.use([AriaComponent])\n\n const series: echarts.SeriesOption[] = this.datasets.map((dataset) => ({\n name: dataset.label,\n type: 'bar',\n data: dataset.data,\n color: this.getSeriesColor(dataset),\n label: {\n show: this.showDataLabels,\n position: 'right',\n formatter: ({ value }: { value: number }) => formatter.format(value),\n },\n cursor: \"default\"\n }));\n\n const option: echarts.EChartsOption = {\n aria: {\n show: true\n },\n legend: {\n show: this.showLegend,\n },\n xAxis: {\n name: this.xAxisTitle,\n nameLocation: \"center\",\n type: this.direction === 'horizontal' ? 'value' : 'category',\n data: this.direction === 'horizontal' ? undefined : this.labels,\n splitLine: { show: this.showHorizontalGrid },\n },\n yAxis: {\n name: this.yAxisTitle,\n nameLocation: \"center\",\n type: this.direction === 'horizontal' ? 'category' : 'value',\n data: this.direction === 'horizontal' ? this.labels : undefined,\n splitLine: { show: this.showVerticalGrid },\n },\n ...(this.showTooltip && {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow',\n },\n },\n }),\n series,\n };\n\n chart.setOption(option);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-bar-chart': TtBarChart;\n }\n}\n"]}
|
package/dist/src/types.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
interface TTBarChartAttributes {
|
|
3
2
|
id: string;
|
|
4
3
|
categories?: string;
|
|
5
4
|
datasets?: string;
|
|
6
5
|
direction?: 'horizontal' | 'vertical';
|
|
7
|
-
'x-axis-
|
|
8
|
-
'y-axis-
|
|
6
|
+
'x-axis-title'?: string;
|
|
7
|
+
'y-axis-title'?: string;
|
|
9
8
|
color?: string;
|
|
10
|
-
'show-grid'?: boolean;
|
|
9
|
+
'show-horizontal-grid'?: boolean;
|
|
10
|
+
'show-vertical-grid'?: boolean;
|
|
11
11
|
'show-legend'?: boolean;
|
|
12
|
-
'show-
|
|
12
|
+
'show-data-labels'?: boolean;
|
|
13
13
|
'show-tooltip'?: boolean;
|
|
14
14
|
}
|
|
15
15
|
export interface Dataset {
|
|
@@ -20,7 +20,14 @@ export interface Dataset {
|
|
|
20
20
|
declare global {
|
|
21
21
|
namespace JSX {
|
|
22
22
|
interface IntrinsicElements {
|
|
23
|
-
'tt-bar-chart':
|
|
23
|
+
'tt-bar-chart': TTBarChartAttributes;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
namespace React {
|
|
27
|
+
namespace JSX {
|
|
28
|
+
interface IntrinsicElements {
|
|
29
|
+
'tt-bar-chart': TTBarChartAttributes;
|
|
30
|
+
}
|
|
24
31
|
}
|
|
25
32
|
}
|
|
26
33
|
}
|
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'
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars\n\ninterface TTBarChartAttributes {\n id: string;\n categories?: string;\n datasets?: string;\n direction?: 'horizontal' | 'vertical';\n 'x-axis-title'?: string;\n 'y-axis-title'?: string;\n color?: string;\n 'show-horizontal-grid'?: boolean;\n 'show-vertical-grid'?: boolean;\n 'show-legend'?: boolean;\n 'show-data-labels'?: boolean;\n 'show-tooltip'?: boolean;\n}\n\nexport interface Dataset {\n label: string;\n data: number[];\n color?: string;\n}\n\ndeclare global {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart': TTBarChartAttributes;\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart': TTBarChartAttributes;\n }\n }\n }\n}\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.1.
|
|
6
|
+
"version": "0.1.4",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/src/index.js",
|
|
9
9
|
"module": "dist/src/index.js",
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"chart.js": "^4.5.1",
|
|
36
35
|
"echarts": "^6.0.0",
|
|
37
36
|
"lit": "^3.1.4"
|
|
38
37
|
},
|