lit-litelements 2.1.0 → 2.1.1

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 +42 -13
  2. package/dist/component/chart.lit.js +65 -12
  3. package/dist/main.js +1 -1
  4. package/package.json +1 -1
package/dist/component/chart.lit.d.ts CHANGED
@@ -1,24 +1,53 @@
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
+ RSI?: number;
14
+ MACDLine?: number;
15
+ SignalLine?: number;
16
+ MACDHistogram?: number;
17
+ }
2
18
  declare class ChartElement extends LitElement {
3
- stockData: any[];
4
- chart: any;
19
+ stockData: StockData[];
20
+ chart: Chart | null;
5
21
  constructor();
6
22
  firstUpdated(): void;
7
- willUpdate(changedProperties: any): Promise<void>;
23
+ willUpdate(changedProperties: {
24
+ has: (arg0: string) => any;
25
+ }): Promise<void>;
8
26
  customLinePlugin: {
9
27
  id: string;
10
- afterDraw: (chart: any) => void;
28
+ afterDraw: (chart: {
29
+ tooltip: {
30
+ _active: string | any[];
31
+ };
32
+ ctx: any;
33
+ scales: {
34
+ yPrice: {
35
+ top: any;
36
+ bottom: any;
37
+ };
38
+ };
39
+ }) => void;
11
40
  };
12
41
  _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[];
42
+ dates: string[];
43
+ closePrices: number[];
44
+ ma20: number[];
45
+ ma50: number[];
46
+ ma200: number[];
47
+ RSI: number[];
48
+ MACDLine: number[];
49
+ SignalLine: number[];
50
+ MACDHistogram: number[];
22
51
  };
23
52
  _updateChart(): void;
24
53
  _createChart(): void;
package/dist/component/chart.lit.js CHANGED
@@ -48,7 +48,53 @@ let ChartElement = class ChartElement extends LitElement {
48
48
  }
49
49
  },
50
50
  };
51
- this.stockData = [];
51
+ this.stockData = [
52
+ {
53
+ volume: 2431872,
54
+ open: 10.15,
55
+ close: 9.52,
56
+ high: 10.44,
57
+ low: 9.32,
58
+ date: "2024-10-23T04:00:00.000Z",
59
+ MA20: 10.06,
60
+ MA50: 10.29,
61
+ MA200: 18.62,
62
+ RSI: 63.85793018983466,
63
+ MACDLine: 0.024551282051284318,
64
+ SignalLine: -0.2835965963696013,
65
+ MACDHistogram: 0.3081478784208856,
66
+ },
67
+ {
68
+ volume: 1352463,
69
+ open: 10.33,
70
+ close: 10.16,
71
+ high: 10.45,
72
+ low: 10.06,
73
+ date: "2024-10-22T04:00:00.000Z",
74
+ MA20: 10.08,
75
+ MA50: 10.3,
76
+ MA200: 18.7,
77
+ RSI: 63.15818898444852,
78
+ MACDLine: 0.0857051282051291,
79
+ SignalLine: -0.31890134926570063,
80
+ MACDHistogram: 0.40460647747082973,
81
+ },
82
+ {
83
+ volume: 2280338,
84
+ open: 10.94,
85
+ close: 10.41,
86
+ high: 11.2459,
87
+ low: 10.32,
88
+ date: "2024-10-21T04:00:00.000Z",
89
+ MA20: 10.1,
90
+ MA50: 10.28,
91
+ MA200: 18.77,
92
+ RSI: 63.587877053378456,
93
+ MACDLine: 0.06529056176492176,
94
+ SignalLine: -0.320348451353853,
95
+ MACDHistogram: 0.38563901311877474,
96
+ },
97
+ ];
52
98
  }
53
99
  // First updated is called after the element has been rendered into the DOM
54
100
  firstUpdated() {
@@ -68,15 +114,15 @@ let ChartElement = class ChartElement extends LitElement {
68
114
  }
69
115
  _getChartData() {
70
116
  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),
117
+ dates: this.stockData.map((data) => data.date),
118
+ closePrices: this.stockData.map((data) => data.close),
119
+ ma20: this.stockData.map((data) => { var _a; return (_a = data.MA20) !== null && _a !== void 0 ? _a : null; }),
120
+ ma50: this.stockData.map((data) => { var _a; return (_a = data.MA50) !== null && _a !== void 0 ? _a : null; }),
121
+ ma200: this.stockData.map((data) => { var _a; return (_a = data.MA200) !== null && _a !== void 0 ? _a : null; }),
122
+ RSI: this.stockData.map((data) => { var _a; return (_a = data.RSI) !== null && _a !== void 0 ? _a : null; }),
123
+ MACDLine: this.stockData.map((data) => { var _a; return (_a = data.MACDLine) !== null && _a !== void 0 ? _a : null; }),
124
+ SignalLine: this.stockData.map((data) => { var _a; return (_a = data.SignalLine) !== null && _a !== void 0 ? _a : null; }),
125
+ MACDHistogram: this.stockData.map((data) => { var _a; return (_a = data.MACDHistogram) !== null && _a !== void 0 ? _a : null; }),
80
126
  };
81
127
  return data;
82
128
  }
@@ -100,9 +146,16 @@ let ChartElement = class ChartElement extends LitElement {
100
146
  }
101
147
  // This will handle creating the Chart.js chart
102
148
  _createChart() {
149
+ var _a;
103
150
  const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
104
- const canvas = this.shadowRoot.getElementById("stockChart");
151
+ const canvas = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("stockChart");
152
+ if (!canvas) {
153
+ return;
154
+ }
105
155
  const ctx = canvas.getContext("2d");
156
+ if (!ctx) {
157
+ return;
158
+ }
106
159
  if (this.chart) {
107
160
  this.chart.destroy(); // Destroy existing chart if necessary
108
161
  }
@@ -227,7 +280,7 @@ let ChartElement = class ChartElement extends LitElement {
227
280
  };
228
281
  __decorate([
229
282
  property({ type: Array }),
230
- __metadata("design:type", Object)
283
+ __metadata("design:type", Array)
231
284
  ], ChartElement.prototype, "stockData", void 0);
232
285
  ChartElement = __decorate([
233
286
  customElement("stock-chart-display"),