lit-litelements 2.1.1 → 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 +7 -4
  2. package/dist/component/chart.lit.js +33 -50
  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
@@ -10,10 +10,11 @@ interface StockData {
10
10
  MA20?: number;
11
11
  MA50?: number;
12
12
  MA200?: number;
13
+ MA100?: number;
13
14
  RSI?: number;
14
15
  MACDLine?: number;
15
- SignalLine?: number;
16
- MACDHistogram?: number;
16
+ SignalLine?: any;
17
+ MACDHistogram?: any;
17
18
  }
18
19
  declare class ChartElement extends LitElement {
19
20
  stockData: StockData[];
@@ -43,11 +44,13 @@ declare class ChartElement extends LitElement {
43
44
  closePrices: number[];
44
45
  ma20: number[];
45
46
  ma50: number[];
47
+ ma100: number[];
46
48
  ma200: number[];
47
49
  RSI: number[];
48
50
  MACDLine: number[];
49
- SignalLine: number[];
50
- MACDHistogram: number[];
51
+ SignalLine: any[];
52
+ MACDHistogram: any[];
53
+ volumes: number[];
51
54
  };
52
55
  _updateChart(): void;
53
56
  _createChart(): void;
package/dist/component/chart.lit.js CHANGED
@@ -48,53 +48,7 @@ let ChartElement = class ChartElement extends LitElement {
48
48
  }
49
49
  },
50
50
  };
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
- ];
51
+ this.stockData = [];
98
52
  }
99
53
  // First updated is called after the element has been rendered into the DOM
100
54
  firstUpdated() {
@@ -118,17 +72,19 @@ let ChartElement = class ChartElement extends LitElement {
118
72
  closePrices: this.stockData.map((data) => data.close),
119
73
  ma20: this.stockData.map((data) => { var _a; return (_a = data.MA20) !== null && _a !== void 0 ? _a : null; }),
120
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; }),
121
76
  ma200: this.stockData.map((data) => { var _a; return (_a = data.MA200) !== null && _a !== void 0 ? _a : null; }),
122
77
  RSI: this.stockData.map((data) => { var _a; return (_a = data.RSI) !== null && _a !== void 0 ? _a : null; }),
123
78
  MACDLine: this.stockData.map((data) => { var _a; return (_a = data.MACDLine) !== null && _a !== void 0 ? _a : null; }),
124
79
  SignalLine: this.stockData.map((data) => { var _a; return (_a = data.SignalLine) !== null && _a !== void 0 ? _a : null; }),
125
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
126
82
  };
127
83
  return data;
128
84
  }
129
85
  _updateChart() {
130
86
  if (this.chart) {
131
- 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();
132
88
  // Update labels (dates)
133
89
  this.chart.data.labels = dates;
134
90
  // Update each dataset
@@ -139,7 +95,9 @@ let ChartElement = class ChartElement extends LitElement {
139
95
  this.chart.data.datasets[4].data = closePrices; // Close Price
140
96
  this.chart.data.datasets[5].data = ma20; // MA20
141
97
  this.chart.data.datasets[6].data = ma50; // MA50
142
- 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
143
101
  // Trigger chart update
144
102
  this.chart.update();
145
103
  }
@@ -147,7 +105,7 @@ let ChartElement = class ChartElement extends LitElement {
147
105
  // This will handle creating the Chart.js chart
148
106
  _createChart() {
149
107
  var _a;
150
- const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
108
+ const { dates, closePrices, ma20, ma50, ma100, ma200, RSI, MACDLine, SignalLine, MACDHistogram, volumes } = this._getChartData();
151
109
  const canvas = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("stockChart");
152
110
  if (!canvas) {
153
111
  return;
@@ -232,6 +190,16 @@ let ChartElement = class ChartElement extends LitElement {
232
190
  borderWidth: 2,
233
191
  yAxisID: "yPrice",
234
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
+ },
235
203
  {
236
204
  label: "MA200",
237
205
  data: ma200,
@@ -241,6 +209,14 @@ let ChartElement = class ChartElement extends LitElement {
241
209
  borderWidth: 2,
242
210
  yAxisID: "yPrice",
243
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
+ },
244
220
  ],
245
221
  },
246
222
  options: {
@@ -266,6 +242,13 @@ let ChartElement = class ChartElement extends LitElement {
266
242
  title: { display: true, text: "MACD" },
267
243
  grid: { drawOnChartArea: false },
268
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
+ },
269
252
  },
270
253
  interaction: { mode: "index", intersect: false },
271
254
  plugins: {