lit-litelements 2.0.3 → 2.0.4

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 +100 -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
+ updated(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,115 @@ 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
+ // Recreate the chart whenever stockData changes
110
+ updated(changedProperties) {
111
+ if (changedProperties.has("stockData")) {
112
+ this._updateChart();
113
+ }
114
+ }
115
+ _getChartData() {
116
+ return {
117
+ dates: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date),
118
+ closePrices: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close),
119
+ ma20: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20),
120
+ ma50: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50),
121
+ ma200: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200),
122
+ RSI: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI),
123
+ MACDLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine),
124
+ SignalLine: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine),
125
+ MACDHistogram: this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDHistogram),
126
+ };
127
+ }
128
+ _updateChart() {
129
+ if (this.chart) {
130
+ const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
131
+ // Update labels (dates)
132
+ this.chart.data.labels = dates;
133
+ // Update each dataset
134
+ this.chart.data.datasets[0].data = RSI; // RSI
135
+ this.chart.data.datasets[1].data = MACDHistogram; // MACDHistogram
136
+ this.chart.data.datasets[2].data = SignalLine; // SignalLine
137
+ this.chart.data.datasets[3].data = MACDLine; // MACDLine
138
+ this.chart.data.datasets[4].data = closePrices; // Close Price
139
+ this.chart.data.datasets[5].data = ma20; // MA20
140
+ this.chart.data.datasets[6].data = ma50; // MA50
141
+ this.chart.data.datasets[7].data = ma200; // MA200
142
+ // Trigger chart update
143
+ this.chart.update();
144
+ }
145
+ }
104
146
  // This will handle creating the Chart.js chart
105
147
  _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);
148
+ const { dates, closePrices, ma20, ma50, ma200, RSI, MACDLine, SignalLine, MACDHistogram, } = this._getChartData();
115
149
  const canvas = this.shadowRoot.getElementById("stockChart");
116
150
  const ctx = canvas.getContext("2d");
117
151
  // Register the custom plugin