-
Notifications
You must be signed in to change notification settings - Fork 39
/
esp-entity-chart.ts
83 lines (76 loc) · 1.81 KB
/
esp-entity-chart.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { html, css, LitElement, TemplateResult, nothing } from "lit";
import { customElement, state, property } from "lit/decorators.js";
import {
Chart,
Colors,
LineController,
CategoryScale,
LinearScale,
PointElement,
LineElement,
} from "chart.js";
Chart.register(
Colors,
LineController,
CategoryScale,
LinearScale,
PointElement,
LineElement
);
@customElement("esp-entity-chart")
export class ChartElement extends LitElement {
@property({ type: Array }) chartdata = [];
private chartSubComponent: Chart;
constructor() {
super();
}
updated(changedProperties: Map<string, unknown>) {
super.updated(changedProperties);
if (changedProperties.has("chartdata")) {
this.chartSubComponent.data.datasets[0].data = this.chartdata;
this.chartSubComponent.data.labels = this.chartdata;
this.chartSubComponent?.update();
}
}
firstUpdated() {
const ctx = this.renderRoot.querySelector("canvas").getContext("2d");
this.chartSubComponent = new Chart(ctx, {
type: "line",
data: {
labels: this.chartdata,
datasets: [
{
data: this.chartdata,
borderWidth: 1,
tension: 0.3,
},
],
},
options: {
plugins: { legend: { display: false } },
scales: { x: { display: false }, y: { position: "right" } },
responsive: true,
maintainAspectRatio: false,
},
});
}
static get styles() {
return css`
:host {
position: absolute;
left: 24px;
height: 42px !important;
width: calc(100% - 42px);
z-index: -100;
opacity: 0.1;
}
:host-context(.expanded) {
height: 240px !important;
opacity: 0.5;
}
`;
}
render() {
return html`<canvas></canvas>`;
}
}