lit-litelements 2.0.2 → 2.0.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.
Files changed (4) hide show
  1. package/dist/component/chart.lit.d.ts +15 -0
  2. package/dist/component/chart.lit.js +112 -14
  3. package/dist/main.js +5 -5
  4. package/package.json +2 -2
package/dist/component/chart.lit.d.ts CHANGED
@@ -1,11 +1,26 @@
1
1
  import { LitElement } from "lit";
2
2
  declare class ChartElement extends LitElement {
3
3
  stockData: any[];
4
+ chart: any;
5
+ constructor();
4
6
  firstUpdated(): void;
7
+ updated(changedProperties: any): void;
5
8
  customLinePlugin: {
6
9
  id: string;
7
10
  afterDraw: (chart: any) => void;
8
11
  };
12
+ _getChartData(): {
13
+ dates: any[];
14
+ closePrices: any[];
15
+ ma20: any[];
16
+ ma50: any[];
17
+ ma200: any[];
18
+ RSI: any[];
19
+ MACDLine: any[];
20
+ SignalLine: any[];
21
+ MACDHistogram: any[];
22
+ };
23
+ _updateChart(): void;
9
24
  _createChart(): void;
10
25
  render(): import("lit-html").TemplateResult<1>;
11
26
  }
package/dist/component/chart.lit.js CHANGED
@@ -12,14 +12,17 @@ import Chart from "chart.js/auto";
12
12
  import { customElement, property } from "lit/decorators.js";
13
13
  let ChartElement = class ChartElement extends LitElement {
14
14
  constructor() {
15
- super(...arguments);
15
+ super();
16
16
  this.stockData = [];
17
+ this.chart = null;
17
18
  // Define the custom plugin
18
19
  this.customLinePlugin = {
19
- id: 'customLinePlugin',
20
+ id: "customLinePlugin",
20
21
  afterDraw: function (chart) {
21
22
  // Check if tooltip is defined and active
22
- if (chart.tooltip && chart.tooltip._active && chart.tooltip._active.length) {
23
+ if (chart.tooltip &&
24
+ chart.tooltip._active &&
25
+ chart.tooltip._active.length) {
23
26
  const ctx = chart.ctx;
24
27
  const activePoint = chart.tooltip._active[0];
25
28
  const x = activePoint.element.x;
@@ -34,24 +37,115 @@ let ChartElement = class ChartElement extends LitElement {
34
37
  ctx.stroke();
35
38
  ctx.restore();
36
39
  }
37
- }
40
+ },
38
41
  };
42
+ this.stockData = [
43
+ {
44
+ date: "2024-10-24T00:00:00.000Z",
45
+ open: 244.68,
46
+ high: 262.12,
47
+ low: 242.65,
48
+ close: 260.48,
49
+ volume: 200843843,
50
+ MA20: 235.77,
51
+ MA50: 229.47,
52
+ MA200: 201.4,
53
+ RSI: 50.203705292049065,
54
+ MACDLine: -13.113717948717948,
55
+ SignalLine: -0.5884189962918955,
56
+ MACDHistogram: -12.525298952426052,
57
+ },
58
+ {
59
+ date: "2024-10-23T00:00:00.000Z",
60
+ open: 217.13,
61
+ high: 218.72,
62
+ low: 212.11,
63
+ close: 213.65,
64
+ volume: 80938900,
65
+ MA20: 235.46,
66
+ MA50: 228.29,
67
+ MA200: 201.27,
68
+ RSI: 54.792815942211284,
69
+ MACDLine: -9.373233618233627,
70
+ SignalLine: 2.7094568654765374,
71
+ MACDHistogram: -12.082690483710165,
72
+ },
73
+ {
74
+ date: "2024-10-22T00:00:00.000Z",
75
+ open: 217.31,
76
+ high: 218.22,
77
+ low: 215.26,
78
+ close: 217.97,
79
+ volume: 43268741,
80
+ MA20: 237.63,
81
+ MA50: 228.17,
82
+ MA200: 201.4,
83
+ RSI: 50.357395263543246,
84
+ MACDLine: -6.752931266791677,
85
+ SignalLine: 5.664828109287326,
86
+ MACDHistogram: -12.417759376079003,
87
+ },
88
+ {
89
+ date: "2024-10-21T00:00:00.000Z",
90
+ open: 218.9,
91
+ high: 220.48,
92
+ low: 215.73,
93
+ close: 218.85,
94
+ volume: 47329000,
95
+ MA20: 239.44,
96
+ MA50: 227.76,
97
+ MA200: 201.5,
98
+ RSI: 46.03685770793461,
99
+ MACDLine: -2.9715213758694574,
100
+ SignalLine: 8.37367596470999,
101
+ MACDHistogram: -11.345197340579448,
102
+ },
103
+ ];
39
104
  }
40
105
  // First updated is called after the element has been rendered into the DOM
41
106
  firstUpdated() {
42
107
  this._createChart();
43
108
  }
109
+ // Recreate the chart whenever stockData changes
110
+ updated(changedProperties) {
111
+ if (changedProperties.has("stockData")) {
112
+ this._updateChart();
113
+ }
114
+ }
115
+ _getChartData() {
116
+ return {
117
+ dates: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date),
118
+ closePrices: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close),
119
+ ma20: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20),
120
+ ma50: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50),
121
+ ma200: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200),
122
+ RSI: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI),
123
+ MACDLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine),
124
+ SignalLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine),
125
+ MACDHistogram: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDHistogram),
126
+ };
127
+ }
128
+ _updateChart() {
129
+ if (this.chart) {
130
+ const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
131
+ // Update labels (dates)
132
+ this.chart.data.labels = dates;
133
+ // Update each dataset
134
+ this.chart.data.datasets[0].data = RSI; // RSI
135
+ this.chart.data.datasets[1].data = MACDHistogram; // MACDHistogram
136
+ this.chart.data.datasets[2].data = SignalLine; // SignalLine
137
+ this.chart.data.datasets[3].data = MACDLine; // MACDLine
138
+ this.chart.data.datasets[4].data = closePrices; // Close Price
139
+ this.chart.data.datasets[5].data = ma20; // MA20
140
+ this.chart.data.datasets[6].data = ma50; // MA50
141
+ this.chart.data.datasets[7].data = ma200; // MA200
142
+ // Trigger chart update
143
+ this.chart.update();
144
+ }
145
+ }
44
146
  // This will handle creating the Chart.js chart
45
147
  _createChart() {
46
- const dates = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date);
47
- const closePrices = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close);
48
- const ma20 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20);
49
- const ma50 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50);
50
- const ma200 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200);
51
- const RSI = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI);
52
- const MACDLine = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine);
53
- const SignalLine = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine);
54
- const MACDHistogram = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDHistogram);
148
+ const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
55
149
  const canvas = this.shadowRoot.getElementById("stockChart");
56
150
  const ctx = canvas.getContext("2d");
57
151
  // Register the custom plugin
@@ -78,6 +172,7 @@ let ChartElement = class ChartElement extends LitElement {
78
172
  fill: false,
79
173
  borderWidth: 2,
80
174
  yAxisID: "yMACD",
175
+ hidden: true,
81
176
  },
82
177
  {
83
178
  label: "SignalLine",
@@ -87,6 +182,7 @@ let ChartElement = class ChartElement extends LitElement {
87
182
  fill: false,
88
183
  borderWidth: 1,
89
184
  yAxisID: "yMACD",
185
+ hidden: true,
90
186
  },
91
187
  {
92
188
  label: "MACDLine",
@@ -96,6 +192,7 @@ let ChartElement = class ChartElement extends LitElement {
96
192
  fill: false,
97
193
  borderWidth: 1,
98
194
  yAxisID: "yMACD",
195
+ hidden: true,
99
196
  },
100
197
  {
101
198
  label: "Close Price",
@@ -175,5 +272,6 @@ __decorate([
175
272
  __metadata("design:type", Object)
176
273
  ], ChartElement.prototype, "stockData", void 0);
177
274
  ChartElement = __decorate([
178
- customElement("stock-chart-display")
275
+ customElement("stock-chart-display"),
276
+ __metadata("design:paramtypes", [])
179
277
  ], ChartElement);