lit-litelements 2.0.3 → 2.0.5

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 +14 -0
  2. package/dist/component/chart.lit.js +101 -66
  3. package/dist/main.js +1 -1
  4. package/package.json +2 -2
package/dist/component/chart.lit.d.ts CHANGED
@@ -1,12 +1,26 @@
1
1
  import { LitElement } from "lit";
2
2
  declare class ChartElement extends LitElement {
3
3
  stockData: any[];
4
+ chart: any;
4
5
  constructor();
5
6
  firstUpdated(): void;
7
+ willUpdate(changedProperties: any): void;
6
8
  customLinePlugin: {
7
9
  id: string;
8
10
  afterDraw: (chart: any) => void;
9
11
  };
12
+ _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[];
22
+ };
23
+ _updateChart(): void;
10
24
  _createChart(): void;
11
25
  render(): import("lit-html").TemplateResult<1>;
12
26
  }
package/dist/component/chart.lit.js CHANGED
@@ -14,12 +14,15 @@ let ChartElement = class ChartElement extends LitElement {
14
14
  constructor() {
15
15
  super();
16
16
  this.stockData = [];
17
+ this.chart = null;
17
18
  // Define the custom plugin
18
19
  this.customLinePlugin = {
19
- id: 'customLinePlugin',
20
+ id: "customLinePlugin",
20
21
  afterDraw: function (chart) {
21
22
  // Check if tooltip is defined and active
22
- if (chart.tooltip && chart.tooltip._active && chart.tooltip._active.length) {
23
+ if (chart.tooltip &&
24
+ chart.tooltip._active &&
25
+ chart.tooltip._active.length) {
23
26
  const ctx = chart.ctx;
24
27
  const activePoint = chart.tooltip._active[0];
25
28
  const x = activePoint.element.x;
@@ -34,84 +37,116 @@ let ChartElement = class ChartElement extends LitElement {
34
37
  ctx.stroke();
35
38
  ctx.restore();
36
39
  }
37
- }
40
+ },
38
41
  };
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
42
+ this.stockData = [
43
+ {
44
+ date: "2024-10-24T00:00:00.000Z",
45
+ open: 244.68,
46
+ high: 262.12,
47
+ low: 242.65,
48
+ close: 260.48,
49
+ volume: 200843843,
50
+ MA20: 235.77,
51
+ MA50: 229.47,
52
+ MA200: 201.4,
53
+ RSI: 50.203705292049065,
54
+ MACDLine: -13.113717948717948,
55
+ SignalLine: -0.5884189962918955,
56
+ MACDHistogram: -12.525298952426052,
53
57
  },
54
58
  {
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
59
+ date: "2024-10-23T00:00:00.000Z",
60
+ open: 217.13,
61
+ high: 218.72,
62
+ low: 212.11,
63
+ close: 213.65,
64
+ volume: 80938900,
65
+ MA20: 235.46,
66
+ MA50: 228.29,
67
+ MA200: 201.27,
68
+ RSI: 54.792815942211284,
69
+ MACDLine: -9.373233618233627,
70
+ SignalLine: 2.7094568654765374,
71
+ MACDHistogram: -12.082690483710165,
68
72
  },
69
73
  {
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
74
+ date: "2024-10-22T00:00:00.000Z",
75
+ open: 217.31,
76
+ high: 218.22,
77
+ low: 215.26,
78
+ close: 217.97,
79
+ volume: 43268741,
80
+ MA20: 237.63,
81
+ MA50: 228.17,
82
+ MA200: 201.4,
83
+ RSI: 50.357395263543246,
84
+ MACDLine: -6.752931266791677,
85
+ SignalLine: 5.664828109287326,
86
+ MACDHistogram: -12.417759376079003,
83
87
  },
84
88
  {
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
- },];
89
+ date: "2024-10-21T00:00:00.000Z",
90
+ open: 218.9,
91
+ high: 220.48,
92
+ low: 215.73,
93
+ close: 218.85,
94
+ volume: 47329000,
95
+ MA20: 239.44,
96
+ MA50: 227.76,
97
+ MA200: 201.5,
98
+ RSI: 46.03685770793461,
99
+ MACDLine: -2.9715213758694574,
100
+ SignalLine: 8.37367596470999,
101
+ MACDHistogram: -11.345197340579448,
102
+ },
103
+ ];
99
104
  }
100
105
  // First updated is called after the element has been rendered into the DOM
101
106
  firstUpdated() {
102
107
  this._createChart();
103
108
  }
109
+ // Called when properties (like stockData) are about to be updated
110
+ willUpdate(changedProperties) {
111
+ if (changedProperties.has("stockData") && this.chart) {
112
+ // If stockData has changed and the chart exists, update it
113
+ this._updateChart();
114
+ }
115
+ }
116
+ _getChartData() {
117
+ return {
118
+ dates: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date),
119
+ closePrices: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close),
120
+ ma20: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20),
121
+ ma50: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50),
122
+ ma200: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200),
123
+ RSI: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI),
124
+ MACDLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine),
125
+ SignalLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine),
126
+ MACDHistogram: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDHistogram),
127
+ };
128
+ }
129
+ _updateChart() {
130
+ if (this.chart) {
131
+ const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
132
+ // Update labels (dates)
133
+ this.chart.data.labels = dates;
134
+ // Update each dataset
135
+ this.chart.data.datasets[0].data = RSI; // RSI
136
+ this.chart.data.datasets[1].data = MACDHistogram; // MACDHistogram
137
+ this.chart.data.datasets[2].data = SignalLine; // SignalLine
138
+ this.chart.data.datasets[3].data = MACDLine; // MACDLine
139
+ this.chart.data.datasets[4].data = closePrices; // Close Price
140
+ this.chart.data.datasets[5].data = ma20; // MA20
141
+ this.chart.data.datasets[6].data = ma50; // MA50
142
+ this.chart.data.datasets[7].data = ma200; // MA200
143
+ // Trigger chart update
144
+ this.chart.update();
145
+ }
146
+ }
104
147
  // This will handle creating the Chart.js chart
105
148
  _createChart() {
106
- const dates = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date);
107
- const closePrices = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close);
108
- const ma20 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20);
109
- const ma50 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50);
110
- const ma200 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200);
111
- const RSI = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI);
112
- const MACDLine = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine);
113
- const SignalLine = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine);
114
- const MACDHistogram = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDHistogram);
149
+ const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
115
150
  const canvas = this.shadowRoot.getElementById("stockChart");
116
151
  const ctx = canvas.getContext("2d");
117
152
  // Register the custom plugin