@triptease/tt-bar-chart 0.3.1 → 0.3.2
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.js +13 -0
- package/dist/src/TtBarChart.js.map +1 -1
- package/package.json +1 -1
package/dist/src/TtBarChart.js
CHANGED
|
@@ -64,24 +64,37 @@ export class TtBarChart extends LitElement {
|
|
|
64
64
|
},
|
|
65
65
|
legend: {
|
|
66
66
|
show: this.datasets.length > 1,
|
|
67
|
+
textStyle: {
|
|
68
|
+
color: '#3b353b', //--text-400
|
|
69
|
+
},
|
|
67
70
|
},
|
|
68
71
|
xAxis: {
|
|
69
72
|
name: this.xAxisTitle,
|
|
73
|
+
nameTextStyle: {
|
|
74
|
+
lineHeight: 40,
|
|
75
|
+
color: '#575157', //--text-300
|
|
76
|
+
},
|
|
70
77
|
nameLocation: 'center',
|
|
71
78
|
type: this.direction === 'horizontal' ? 'value' : 'category',
|
|
72
79
|
data: this.direction === 'horizontal' ? undefined : labels,
|
|
73
80
|
axisLabel: {
|
|
74
81
|
formatter: axesFormatter,
|
|
82
|
+
color: '#3b353b', //--text-400
|
|
75
83
|
},
|
|
76
84
|
splitLine: { show: this.direction === 'horizontal' },
|
|
77
85
|
},
|
|
78
86
|
yAxis: {
|
|
79
87
|
name: this.yAxisTitle,
|
|
88
|
+
nameTextStyle: {
|
|
89
|
+
lineHeight: 40,
|
|
90
|
+
color: '#575157', //--text-300
|
|
91
|
+
},
|
|
80
92
|
nameLocation: 'center',
|
|
81
93
|
type: this.direction === 'horizontal' ? 'category' : 'value',
|
|
82
94
|
data: this.direction === 'horizontal' ? labels : undefined,
|
|
83
95
|
axisLabel: {
|
|
84
96
|
formatter: axesFormatter,
|
|
97
|
+
color: '#3b353b', //--text-400
|
|
85
98
|
},
|
|
86
99
|
splitLine: { show: this.direction === 'vertical' },
|
|
87
100
|
},
|
|
@@ -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,aAAa,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC5E,gFAAgF;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAEE,aAAQ,GAAc,EAAE,CAAC;QAGzB,cAAS,GAAmB,YAAY,CAAC;QASzC,YAAO,GAAY,KAAK,CAAC;QAGzB,YAAO,GAAY,KAAK,CAAC;QAGzB,UAAK,GAA2B,IAAI,CAAC;
|
|
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"]}
|
package/package.json
CHANGED