lit-litelements 2.0.1 → 2.0.3

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 (3) hide show
  1. package/dist/component/chart.lit.js +159 -15
  2. package/dist/main.js +5 -5
  3. package/package.json +2 -2
package/dist/component/chart.lit.js CHANGED
@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
10
  import { LitElement, html } from "lit";
11
- import Chart from 'chart.js/auto';
11
+ 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() {
@@ -16,9 +16,10 @@ let ChartElement = class ChartElement extends LitElement {
16
16
  this.stockData = [];
17
17
  // Define the custom plugin
18
18
  this.customLinePlugin = {
19
- id: 'customLinePlugin', // Ensure you give it an id
19
+ id: 'customLinePlugin',
20
20
  afterDraw: function (chart) {
21
- if (chart.tooltip._active && chart.tooltip._active.length) {
21
+ // Check if tooltip is defined and active
22
+ if (chart.tooltip && chart.tooltip._active && chart.tooltip._active.length) {
22
23
  const ctx = chart.ctx;
23
24
  const activePoint = chart.tooltip._active[0];
24
25
  const x = activePoint.element.x;
@@ -35,7 +36,66 @@ let ChartElement = class ChartElement extends LitElement {
35
36
  }
36
37
  }
37
38
  };
38
- this.stockData = [];
39
+ this.stockData = [{
40
+ "date": "2024-10-24T00:00:00.000Z",
41
+ "open": 244.68,
42
+ "high": 262.12,
43
+ "low": 242.65,
44
+ "close": 260.48,
45
+ "volume": 200843843,
46
+ "MA20": 235.77,
47
+ "MA50": 229.47,
48
+ "MA200": 201.4,
49
+ "RSI": 50.203705292049065,
50
+ "MACDLine": -13.113717948717948,
51
+ "SignalLine": -0.5884189962918955,
52
+ "MACDHistogram": -12.525298952426052
53
+ },
54
+ {
55
+ "date": "2024-10-23T00:00:00.000Z",
56
+ "open": 217.13,
57
+ "high": 218.72,
58
+ "low": 212.11,
59
+ "close": 213.65,
60
+ "volume": 80938900,
61
+ "MA20": 235.46,
62
+ "MA50": 228.29,
63
+ "MA200": 201.27,
64
+ "RSI": 54.792815942211284,
65
+ "MACDLine": -9.373233618233627,
66
+ "SignalLine": 2.7094568654765374,
67
+ "MACDHistogram": -12.082690483710165
68
+ },
69
+ {
70
+ "date": "2024-10-22T00:00:00.000Z",
71
+ "open": 217.31,
72
+ "high": 218.22,
73
+ "low": 215.26,
74
+ "close": 217.97,
75
+ "volume": 43268741,
76
+ "MA20": 237.63,
77
+ "MA50": 228.17,
78
+ "MA200": 201.4,
79
+ "RSI": 50.357395263543246,
80
+ "MACDLine": -6.752931266791677,
81
+ "SignalLine": 5.664828109287326,
82
+ "MACDHistogram": -12.417759376079003
83
+ },
84
+ {
85
+ "date": "2024-10-21T00:00:00.000Z",
86
+ "open": 218.9,
87
+ "high": 220.48,
88
+ "low": 215.73,
89
+ "close": 218.85,
90
+ "volume": 47329000,
91
+ "MA20": 239.44,
92
+ "MA50": 227.76,
93
+ "MA200": 201.5,
94
+ "RSI": 46.03685770793461,
95
+ "MACDLine": -2.9715213758694574,
96
+ "SignalLine": 8.37367596470999,
97
+ "MACDHistogram": -11.345197340579448
98
+ },];
39
99
  }
40
100
  // First updated is called after the element has been rendered into the DOM
41
101
  firstUpdated() {
@@ -61,22 +121,106 @@ let ChartElement = class ChartElement extends LitElement {
61
121
  data: {
62
122
  labels: dates,
63
123
  datasets: [
64
- { label: "RSI", data: RSI, borderColor: "rgba(15, 92, 92, 1)", backgroundColor: "rgba(15, 92, 92, 0.2)", fill: false, borderWidth: 2, yAxisID: "yRSI" },
65
- { label: "MACDHistogram", data: MACDHistogram, borderColor: "rgba(175, 92, 92, 1)", backgroundColor: "rgba(175, 92, 92, 0.2)", fill: false, borderWidth: 2, yAxisID: "yMACD" },
66
- { label: "SignalLine", data: SignalLine, borderColor: "rgba(75, 92, 192, 1)", backgroundColor: "rgba(75, 92, 192, 0.2)", fill: false, borderWidth: 1, yAxisID: "yMACD" },
67
- { label: "MACDLine", data: MACDLine, borderColor: "rgba(175, 192, 192, 1)", backgroundColor: "rgba(175, 192, 192, 0.2)", fill: false, borderWidth: 1, yAxisID: "yMACD" },
68
- { label: "Close Price", data: closePrices, borderColor: "rgba(75, 192, 192, 1)", backgroundColor: "rgba(75, 192, 192, 0.2)", fill: true, borderWidth: 1, yAxisID: "yPrice" },
69
- { label: "MA20", data: ma20, borderColor: "rgba(255, 99, 132, 1)", backgroundColor: "rgba(255, 99, 132, 0.2)", fill: false, borderWidth: 2, yAxisID: "yPrice" },
70
- { label: "MA50", data: ma50, borderColor: "rgba(255, 206, 86, 1)", backgroundColor: "rgba(255, 206, 86, 0.2)", fill: false, borderWidth: 2, yAxisID: "yPrice" },
71
- { label: "MA200", data: ma200, borderColor: "rgba(153, 102, 255, 1)", backgroundColor: "rgba(153, 102, 255, 0.2)", fill: false, borderWidth: 2, yAxisID: "yPrice" },
124
+ {
125
+ label: "RSI",
126
+ data: RSI,
127
+ borderColor: "rgba(15, 92, 92, 1)",
128
+ backgroundColor: "rgba(15, 92, 92, 0.2)",
129
+ fill: false,
130
+ borderWidth: 2,
131
+ yAxisID: "yRSI",
132
+ },
133
+ {
134
+ label: "MACDHistogram",
135
+ data: MACDHistogram,
136
+ borderColor: "rgba(175, 92, 92, 1)",
137
+ backgroundColor: "rgba(175, 92, 92, 0.2)",
138
+ fill: false,
139
+ borderWidth: 2,
140
+ yAxisID: "yMACD",
141
+ hidden: true,
142
+ },
143
+ {
144
+ label: "SignalLine",
145
+ data: SignalLine,
146
+ borderColor: "rgba(75, 92, 192, 1)",
147
+ backgroundColor: "rgba(75, 92, 192, 0.2)",
148
+ fill: false,
149
+ borderWidth: 1,
150
+ yAxisID: "yMACD",
151
+ hidden: true,
152
+ },
153
+ {
154
+ label: "MACDLine",
155
+ data: MACDLine,
156
+ borderColor: "rgba(175, 192, 192, 1)",
157
+ backgroundColor: "rgba(175, 192, 192, 0.2)",
158
+ fill: false,
159
+ borderWidth: 1,
160
+ yAxisID: "yMACD",
161
+ hidden: true,
162
+ },
163
+ {
164
+ label: "Close Price",
165
+ data: closePrices,
166
+ borderColor: "rgba(75, 192, 192, 1)",
167
+ backgroundColor: "rgba(75, 192, 192, 0.2)",
168
+ fill: true,
169
+ borderWidth: 1,
170
+ yAxisID: "yPrice",
171
+ },
172
+ {
173
+ label: "MA20",
174
+ data: ma20,
175
+ borderColor: "rgba(255, 99, 132, 1)",
176
+ backgroundColor: "rgba(255, 99, 132, 0.2)",
177
+ fill: false,
178
+ borderWidth: 2,
179
+ yAxisID: "yPrice",
180
+ },
181
+ {
182
+ label: "MA50",
183
+ data: ma50,
184
+ borderColor: "rgba(255, 206, 86, 1)",
185
+ backgroundColor: "rgba(255, 206, 86, 0.2)",
186
+ fill: false,
187
+ borderWidth: 2,
188
+ yAxisID: "yPrice",
189
+ },
190
+ {
191
+ label: "MA200",
192
+ data: ma200,
193
+ borderColor: "rgba(153, 102, 255, 1)",
194
+ backgroundColor: "rgba(153, 102, 255, 0.2)",
195
+ fill: false,
196
+ borderWidth: 2,
197
+ yAxisID: "yPrice",
198
+ },
72
199
  ],
73
200
  },
74
201
  options: {
75
202
  responsive: true,
76
203
  scales: {
77
- yPrice: { type: "linear", position: "left", beginAtZero: false, title: { display: true, text: "Price" } },
78
- yRSI: { type: "linear", position: "right", beginAtZero: true, title: { display: true, text: "RSI" }, grid: { drawOnChartArea: false } },
79
- yMACD: { type: "linear", position: "right", beginAtZero: true, title: { display: true, text: "MACD" }, grid: { drawOnChartArea: false } },
204
+ yPrice: {
205
+ type: "linear",
206
+ position: "left",
207
+ beginAtZero: false,
208
+ title: { display: true, text: "Price" },
209
+ },
210
+ yRSI: {
211
+ type: "linear",
212
+ position: "right",
213
+ beginAtZero: true,
214
+ title: { display: true, text: "RSI" },
215
+ grid: { drawOnChartArea: false },
216
+ },
217
+ yMACD: {
218
+ type: "linear",
219
+ position: "right",
220
+ beginAtZero: true,
221
+ title: { display: true, text: "MACD" },
222
+ grid: { drawOnChartArea: false },
223
+ },
80
224
  },
81
225
  interaction: { mode: "index", intersect: false },
82
226
  plugins: {