lit-litelements 2.0.10 → 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 -20
  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,25 +48,65 @@ 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() {
55
- console.log("firstUpdated called");
56
101
  this._createChart();
57
102
  }
58
103
  willUpdate(changedProperties) {
59
104
  return __awaiter(this, void 0, void 0, function* () {
60
- console.log("willUpdate called");
61
- console.log("Updated stockData:1", this.stockData);
62
105
  if (changedProperties.has("stockData")) {
63
- console.log("Updated stockData:2", this.stockData);
64
106
  if (!this.chart) {
65
- console.log("Chart is undefined, creating chart now.");
66
107
  this._createChart(); // Ensure the chart is created
67
108
  }
68
109
  else {
69
- console.log("Updated stockData:3", this.stockData);
70
110
  this._updateChart(); // Update the chart if it exists
71
111
  }
72
112
  }
@@ -74,21 +114,19 @@ let ChartElement = class ChartElement extends LitElement {
74
114
  }
75
115
  _getChartData() {
76
116
  const data = {
77
- dates: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date),
78
- closePrices: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close),
79
- ma20: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20),
80
- ma50: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50),
81
- ma200: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200),
82
- RSI: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI),
83
- MACDLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine),
84
- SignalLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine),
85
- 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; }),
86
126
  };
87
- console.log("Chart data:", data);
88
127
  return data;
89
128
  }
90
129
  _updateChart() {
91
- console.log("_updateChart");
92
130
  if (this.chart) {
93
131
  const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
94
132
  // Update labels (dates)
@@ -108,9 +146,16 @@ let ChartElement = class ChartElement extends LitElement {
108
146
  }
109
147
  // This will handle creating the Chart.js chart
110
148
  _createChart() {
149
+ var _a;
111
150
  const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
112
- 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
+ }
113
155
  const ctx = canvas.getContext("2d");
156
+ if (!ctx) {
157
+ return;
158
+ }
114
159
  if (this.chart) {
115
160
  this.chart.destroy(); // Destroy existing chart if necessary
116
161
  }
@@ -235,7 +280,7 @@ let ChartElement = class ChartElement extends LitElement {
235
280
  };
236
281
  __decorate([
237
282
  property({ type: Array }),
238
- __metadata("design:type", Object)
283
+ __metadata("design:type", Array)
239
284
  ], ChartElement.prototype, "stockData", void 0);
240
285
  ChartElement = __decorate([
241
286
  customElement("stock-chart-display"),