lit-litelements 2.2.2 → 2.2.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 (5) hide show
  1. package/dist/component/chart.lit.d.ts +1 -12
  2. package/dist/component/chart.lit.js +100 -23
  3. package/dist/main.js +5 -5
  4. package/package.json +2 -1
  5. package/readme.md +159 -62
package/dist/component/chart.lit.d.ts CHANGED
@@ -28,18 +28,7 @@ declare class ChartElement extends LitElement {
28
28
  }): Promise<void>;
29
29
  customLinePlugin: {
30
30
  id: string;
31
- afterDraw: (chart: {
32
- tooltip: {
33
- _active: string | any[];
34
- };
35
- ctx: any;
36
- scales: {
37
- yPrice: {
38
- top: any;
39
- bottom: any;
40
- };
41
- };
42
- }) => void;
31
+ afterDraw: (chart: any) => void;
43
32
  };
44
33
  _getChartData(): {
45
34
  dates: string[];
package/dist/component/chart.lit.js CHANGED
@@ -27,24 +27,101 @@ let ChartElement = class ChartElement extends LitElement {
27
27
  // Define the custom plugin
28
28
  this.customLinePlugin = {
29
29
  id: "customLinePlugin",
30
- afterDraw: function (chart) {
31
- // Check if tooltip is defined and active
32
- if (chart.tooltip &&
33
- chart.tooltip._active &&
34
- chart.tooltip._active.length) {
35
- const ctx = chart.ctx;
36
- const activePoint = chart.tooltip._active[0];
37
- const x = activePoint.element.x;
38
- const topY = chart.scales.yPrice.top;
39
- const bottomY = chart.scales.yPrice.bottom;
40
- ctx.save();
41
- ctx.beginPath();
42
- ctx.moveTo(x, topY);
43
- ctx.lineTo(x, bottomY);
44
- ctx.lineWidth = 1;
45
- ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
46
- ctx.stroke();
47
- ctx.restore();
30
+ afterDraw: (chart) => {
31
+ const ctx = chart.ctx;
32
+ const { chartArea, scales, data } = chart;
33
+ const rsiDataset = chart.data.datasets.find((ds) => ds.label === "RSI");
34
+ const closeDataset = data.datasets.find((ds) => ds.label === "Close Price");
35
+ const ma200Dataset = data.datasets.find((ds) => ds.label === "MA200");
36
+ if (!rsiDataset || !closeDataset || !ma200Dataset)
37
+ return;
38
+ const rsiData = rsiDataset.data;
39
+ const closeData = closeDataset.data;
40
+ const ma200Data = ma200Dataset.data;
41
+ const RISK_PERCENT = 0.01;
42
+ const REWARD_RATIO = 2;
43
+ for (let i = 1; i < closeData.length; i++) {
44
+ //base on rsi
45
+ const rsiValue = rsiData[i];
46
+ if (rsiValue !== null && rsiValue < 30) {
47
+ const x = scales.x.getPixelForValue(i);
48
+ const y = scales.yRSI.getPixelForValue(rsiValue);
49
+ ctx.beginPath();
50
+ ctx.arc(x, y, 4, 0, 2 * Math.PI);
51
+ ctx.fillStyle = "green";
52
+ ctx.fill();
53
+ ctx.fillStyle = "green";
54
+ ctx.font = "bold 12px sans-serif";
55
+ ctx.fillText("Buy", x + 6, y - 6);
56
+ }
57
+ else if (rsiValue !== null && rsiValue > 70) {
58
+ const x = scales.x.getPixelForValue(i);
59
+ const y = scales.yRSI.getPixelForValue(rsiValue);
60
+ ctx.beginPath();
61
+ ctx.arc(x, y, 4, 0, 2 * Math.PI);
62
+ ctx.fillStyle = "red";
63
+ ctx.fill();
64
+ ctx.fillStyle = "red";
65
+ ctx.font = "bold 12px sans-serif";
66
+ ctx.fillText("Sell", x + 6, y - 6);
67
+ }
68
+ // Add MA200 bullish/bearish crossover signals
69
+ const prevClose = closeData[i - 1];
70
+ const prevMA200 = ma200Data[i - 1];
71
+ const currClose = closeData[i];
72
+ const currMA200 = ma200Data[i];
73
+ if (prevClose == null ||
74
+ prevMA200 == null ||
75
+ currClose == null ||
76
+ currMA200 == null)
77
+ continue;
78
+ const x = scales.x.getPixelForValue(i);
79
+ const y = scales.yPrice.getPixelForValue(currClose);
80
+ if (currClose > currMA200 && prevClose < prevMA200) {
81
+ ctx.beginPath();
82
+ ctx.arc(x, y, 4, 0, 2 * Math.PI);
83
+ ctx.fillStyle = "green";
84
+ ctx.fill();
85
+ ctx.fillStyle = "green";
86
+ ctx.font = "bold 12px sans-serif";
87
+ ctx.fillText("Bull", x + 6, y - 6);
88
+ const stop = currClose * (1 - RISK_PERCENT);
89
+ const target = currClose + (currClose - stop) * REWARD_RATIO;
90
+ const yStop = scales.yPrice.getPixelForValue(stop);
91
+ const yTarget = scales.yPrice.getPixelForValue(target);
92
+ // Stop-Loss (SL) line
93
+ ctx.fillStyle = "red";
94
+ ctx.fillRect(x, yStop, 100, 1); // 100px wide, 1px high
95
+ ctx.font = "bold 12px sans-serif";
96
+ ctx.fillText("SL " + stop.toFixed(2), x + 12, yStop - 4);
97
+ // Take-Profit (TP) line
98
+ ctx.fillStyle = "green";
99
+ ctx.fillRect(x, yTarget, 100, 1); // 100px wide, 1px high
100
+ ctx.fillText("TP " + target.toFixed(2), x + 12, yTarget - 4);
101
+ }
102
+ else if (currClose < currMA200 && prevClose > prevMA200) {
103
+ ctx.beginPath();
104
+ ctx.arc(x, y, 4, 0, 2 * Math.PI);
105
+ ctx.fillStyle = "purple";
106
+ ctx.fill();
107
+ ctx.fillStyle = "purple";
108
+ ctx.font = "bold 12px sans-serif";
109
+ ctx.fillText("Bear", x + 6, y - 6);
110
+ const stop = currClose * (1 + RISK_PERCENT);
111
+ const target = currClose - (stop - currClose) * REWARD_RATIO;
112
+ const yStop = scales.yPrice.getPixelForValue(stop);
113
+ const yTarget = scales.yPrice.getPixelForValue(target);
114
+ // // Stop-Loss (SL) line
115
+ // ctx.fillStyle = "purple";
116
+ // ctx.fillRect(x, yStop, 100, 1); // 100px wide, 1px high
117
+ // ctx.font = "bold 12px sans-serif";
118
+ // ctx.fillText("BEAR-SL", x + 12, yStop - 4);
119
+ // // Take-Profit (TP) line
120
+ // ctx.fillStyle = "purple";
121
+ // ctx.fillRect(x, yTarget, 100, 1); // 100px wide, 1px high
122
+ // ctx.fillText("BEAR-TP", x + 12, yTarget - 4);
123
+ }
124
+ ctx.setLineDash([]);
48
125
  }
49
126
  },
50
127
  };
@@ -86,7 +163,7 @@ let ChartElement = class ChartElement extends LitElement {
86
163
  }
87
164
  _updateChart() {
88
165
  if (this.chart) {
89
- const { dates, closePrices, ma5, ma10, ma20, ma50, ma100, ma200, RSI, MACDLine, SignalLine, MACDHistogram, volumes } = this._getChartData();
166
+ const { dates, closePrices, ma5, ma10, ma20, ma50, ma100, ma200, RSI, MACDLine, SignalLine, MACDHistogram, volumes, } = this._getChartData();
90
167
  // Update labels (dates)
91
168
  this.chart.data.labels = dates;
92
169
  // Update each dataset
@@ -109,7 +186,7 @@ let ChartElement = class ChartElement extends LitElement {
109
186
  // This will handle creating the Chart.js chart
110
187
  _createChart() {
111
188
  var _a;
112
- const { dates, closePrices, ma5, ma10, ma20, ma50, ma100, ma200, RSI, MACDLine, SignalLine, MACDHistogram, volumes } = this._getChartData();
189
+ const { dates, closePrices, ma5, ma10, ma20, ma50, ma100, ma200, RSI, MACDLine, SignalLine, MACDHistogram, volumes, } = this._getChartData();
113
190
  const canvas = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("stockChart");
114
191
  if (!canvas) {
115
192
  return;
@@ -272,14 +349,14 @@ let ChartElement = class ChartElement extends LitElement {
272
349
  ticks: {
273
350
  color: (ctx) => {
274
351
  const label = ctx.tick.label;
275
- if (typeof label === 'string') {
352
+ if (typeof label === "string") {
276
353
  const labelDate = new Date(label).toISOString().split("T")[0];
277
354
  const todayStr = new Date().toISOString().split("T")[0];
278
355
  return labelDate === todayStr ? "Salmon" : "black";
279
356
  }
280
357
  return "black"; // default fallback
281
- }
282
- }
358
+ },
359
+ },
283
360
  },
284
361
  yPrice: {
285
362
  type: "linear",