lit-litelements 2.1.0 → 2.1.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.
Files changed (5) hide show
  1. package/dist/component/chart.lit.d.ts +43 -11
  2. package/dist/component/chart.lit.js +50 -14
  3. package/dist/main.js +1 -1
  4. package/package.json +1 -1
  5. package/readme.md +15 -15
package/dist/component/chart.lit.d.ts CHANGED
@@ -1,24 +1,56 @@
1
1
  import { LitElement } from "lit";
2
+ import Chart from "chart.js/auto";
3
+ interface StockData {
4
+ volume?: number;
5
+ open?: number;
6
+ high?: number;
7
+ low?: number;
8
+ date: string;
9
+ close: number;
10
+ MA20?: number;
11
+ MA50?: number;
12
+ MA200?: number;
13
+ MA100?: number;
14
+ RSI?: number;
15
+ MACDLine?: number;
16
+ SignalLine?: any;
17
+ MACDHistogram?: any;
18
+ }
2
19
  declare class ChartElement extends LitElement {
3
- stockData: any[];
4
- chart: any;
20
+ stockData: StockData[];
21
+ chart: Chart | null;
5
22
  constructor();
6
23
  firstUpdated(): void;
7
- willUpdate(changedProperties: any): Promise<void>;
24
+ willUpdate(changedProperties: {
25
+ has: (arg0: string) => any;
26
+ }): Promise<void>;
8
27
  customLinePlugin: {
9
28
  id: string;
10
- afterDraw: (chart: any) => void;
29
+ afterDraw: (chart: {
30
+ tooltip: {
31
+ _active: string | any[];
32
+ };
33
+ ctx: any;
34
+ scales: {
35
+ yPrice: {
36
+ top: any;
37
+ bottom: any;
38
+ };
39
+ };
40
+ }) => void;
11
41
  };
12
42
  _getChartData(): {
13
- dates: any[];
14
- closePrices: any[];
15
- ma20: any[];
16
- ma50: any[];
17
- ma200: any[];
18
- RSI: any[];
19
- MACDLine: any[];
43
+ dates: string[];
44
+ closePrices: number[];
45
+ ma20: number[];
46
+ ma50: number[];
47
+ ma100: number[];
48
+ ma200: number[];
49
+ RSI: number[];
50
+ MACDLine: number[];
20
51
  SignalLine: any[];
21
52
  MACDHistogram: any[];
53
+ volumes: number[];
22
54
  };
23
55
  _updateChart(): void;
24
56
  _createChart(): void;
package/dist/component/chart.lit.js CHANGED
@@ -68,21 +68,23 @@ let ChartElement = class ChartElement extends LitElement {
68
68
  }
69
69
  _getChartData() {
70
70
  const data = {
71
- dates: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date),
72
- closePrices: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close),
73
- ma20: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20),
74
- ma50: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50),
75
- ma200: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200),
76
- RSI: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI),
77
- MACDLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine),
78
- SignalLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine),
79
- MACDHistogram: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDHistogram),
71
+ dates: this.stockData.map((data) => data.date),
72
+ closePrices: this.stockData.map((data) => data.close),
73
+ ma20: this.stockData.map((data) => { var _a; return (_a = data.MA20) !== null && _a !== void 0 ? _a : null; }),
74
+ ma50: this.stockData.map((data) => { var _a; return (_a = data.MA50) !== null && _a !== void 0 ? _a : null; }),
75
+ ma100: this.stockData.map((data) => { var _a; return (_a = data.MA100) !== null && _a !== void 0 ? _a : null; }),
76
+ ma200: this.stockData.map((data) => { var _a; return (_a = data.MA200) !== null && _a !== void 0 ? _a : null; }),
77
+ RSI: this.stockData.map((data) => { var _a; return (_a = data.RSI) !== null && _a !== void 0 ? _a : null; }),
78
+ MACDLine: this.stockData.map((data) => { var _a; return (_a = data.MACDLine) !== null && _a !== void 0 ? _a : null; }),
79
+ SignalLine: this.stockData.map((data) => { var _a; return (_a = data.SignalLine) !== null && _a !== void 0 ? _a : null; }),
80
+ MACDHistogram: this.stockData.map((data) => { var _a; return (_a = data.MACDHistogram) !== null && _a !== void 0 ? _a : null; }),
81
+ volumes: this.stockData.map((data) => { var _a; return (_a = data.volume) !== null && _a !== void 0 ? _a : 0; }), // Volume data
80
82
  };
81
83
  return data;
82
84
  }
83
85
  _updateChart() {
84
86
  if (this.chart) {
85
- const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
87
+ const { dates, closePrices, ma20, ma50, ma100, ma200, RSI, MACDLine, SignalLine, MACDHistogram, volumes } = this._getChartData();
86
88
  // Update labels (dates)
87
89
  this.chart.data.labels = dates;
88
90
  // Update each dataset
@@ -93,16 +95,25 @@ let ChartElement = class ChartElement extends LitElement {
93
95
  this.chart.data.datasets[4].data = closePrices; // Close Price
94
96
  this.chart.data.datasets[5].data = ma20; // MA20
95
97
  this.chart.data.datasets[6].data = ma50; // MA50
96
- this.chart.data.datasets[7].data = ma200; // MA200
98
+ this.chart.data.datasets[7].data = ma100; // MA50
99
+ this.chart.data.datasets[8].data = ma200; // MA200
100
+ this.chart.data.datasets[9].data = volumes; // Volume
97
101
  // Trigger chart update
98
102
  this.chart.update();
99
103
  }
100
104
  }
101
105
  // This will handle creating the Chart.js chart
102
106
  _createChart() {
103
- const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
104
- const canvas = this.shadowRoot.getElementById("stockChart");
107
+ var _a;
108
+ const { dates, closePrices, ma20, ma50, ma100, ma200, RSI, MACDLine, SignalLine, MACDHistogram, volumes } = this._getChartData();
109
+ const canvas = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("stockChart");
110
+ if (!canvas) {
111
+ return;
112
+ }
105
113
  const ctx = canvas.getContext("2d");
114
+ if (!ctx) {
115
+ return;
116
+ }
106
117
  if (this.chart) {
107
118
  this.chart.destroy(); // Destroy existing chart if necessary
108
119
  }
@@ -179,6 +190,16 @@ let ChartElement = class ChartElement extends LitElement {
179
190
  borderWidth: 2,
180
191
  yAxisID: "yPrice",
181
192
  },
193
+ {
194
+ label: "MA100",
195
+ data: ma100,
196
+ borderColor: "rgba(153, 102, 25, 1)",
197
+ backgroundColor: "rgba(153, 102, 25, 0.2)",
198
+ fill: false,
199
+ borderWidth: 2,
200
+ yAxisID: "yPrice",
201
+ hidden: true,
202
+ },
182
203
  {
183
204
  label: "MA200",
184
205
  data: ma200,
@@ -188,6 +209,14 @@ let ChartElement = class ChartElement extends LitElement {
188
209
  borderWidth: 2,
189
210
  yAxisID: "yPrice",
190
211
  },
212
+ {
213
+ label: "Volume",
214
+ data: volumes, // Volume data
215
+ type: "bar", // Use bar chart for volume
216
+ yAxisID: "yVolume", // Assign to the volume axis
217
+ backgroundColor: "rgba(26, 43, 199, 0.5)",
218
+ borderWidth: 1,
219
+ },
191
220
  ],
192
221
  },
193
222
  options: {
@@ -213,6 +242,13 @@ let ChartElement = class ChartElement extends LitElement {
213
242
  title: { display: true, text: "MACD" },
214
243
  grid: { drawOnChartArea: false },
215
244
  },
245
+ yVolume: {
246
+ type: "linear",
247
+ position: "left",
248
+ beginAtZero: true,
249
+ title: { display: true, text: "Volume" },
250
+ grid: { drawOnChartArea: false }, // To prevent grid overlap
251
+ },
216
252
  },
217
253
  interaction: { mode: "index", intersect: false },
218
254
  plugins: {
@@ -227,7 +263,7 @@ let ChartElement = class ChartElement extends LitElement {
227
263
  };
228
264
  __decorate([
229
265
  property({ type: Array }),
230
- __metadata("design:type", Object)
266
+ __metadata("design:type", Array)
231
267
  ], ChartElement.prototype, "stockData", void 0);
232
268
  ChartElement = __decorate([
233
269
  customElement("stock-chart-display"),