lit-litelements 2.2.4 → 2.2.6

package/dist/component/chart.lit.d.ts

@@ -20,9 +20,12 @@ interface StockData {
 }
 declare class ChartElement extends LitElement {
     stockData: StockData[];
+    zoomEnabled: boolean;
     chart: Chart | null;
     constructor();
     firstUpdated(): void;
+    _resetZoom(): void;
+    _Zoomenalbe(): void;
     willUpdate(changedProperties: {
         has: (arg0: string) => any;
     }): Promise<void>;

package/dist/component/chart.lit.js

@@ -18,11 +18,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { LitElement, html } from "lit";
 import Chart from "chart.js/auto";
+import zoomPlugin from "chartjs-plugin-zoom";
 import { customElement, property } from "lit/decorators.js";
 let ChartElement = class ChartElement extends LitElement {
     constructor() {
         super();
         this.stockData = [];
+        this.zoomEnabled = false;
         this.chart = null;
         // Define the custom plugin
         this.customLinePlugin = {
@@ -109,17 +111,6 @@ let ChartElement = class ChartElement extends LitElement {
                         ctx.fillText("Bear", x + 6, y - 6);
                         const stop = currClose * (1 + RISK_PERCENT);
                         const target = currClose - (stop - currClose) * REWARD_RATIO;
-                        const yStop = scales.yPrice.getPixelForValue(stop);
-                        const yTarget = scales.yPrice.getPixelForValue(target);
-                        // // Stop-Loss (SL) line
-                        // ctx.fillStyle = "purple";
-                        // ctx.fillRect(x, yStop, 100, 1); // 100px wide, 1px high
-                        // ctx.font = "bold 12px sans-serif";
-                        // ctx.fillText("BEAR-SL", x + 12, yStop - 4);
-                        // // Take-Profit (TP) line
-                        // ctx.fillStyle = "purple";
-                        // ctx.fillRect(x, yTarget, 100, 1); // 100px wide, 1px high
-                        // ctx.fillText("BEAR-TP", x + 12, yTarget - 4);
                     }
                     ctx.setLineDash([]);
                 }
@@ -131,6 +122,25 @@ let ChartElement = class ChartElement extends LitElement {
     firstUpdated() {
         this._createChart();
     }
+    _resetZoom() {
+        var _a;
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resetZoom();
+    }
+    _Zoomenalbe() {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.options.plugins) === null || _b === void 0 ? void 0 : _b.zoom) {
+            const zoomOptions = this.chart.options.plugins.zoom;
+            const newState = !this.zoomEnabled;
+            if ((_c = zoomOptions.zoom) === null || _c === void 0 ? void 0 : _c.wheel)
+                zoomOptions.zoom.wheel.enabled = newState;
+            if ((_d = zoomOptions.zoom) === null || _d === void 0 ? void 0 : _d.pinch)
+                zoomOptions.zoom.pinch.enabled = newState;
+            if (zoomOptions.pan)
+                zoomOptions.pan.enabled = newState;
+            this.zoomEnabled = newState;
+            this.chart.update();
+        }
+    }
     willUpdate(changedProperties) {
         return __awaiter(this, void 0, void 0, function* () {
             if (changedProperties.has("stockData")) {
@@ -200,6 +210,7 @@ let ChartElement = class ChartElement extends LitElement {
         }
         // Register the custom plugin
         Chart.register(this.customLinePlugin);
+        Chart.register(zoomPlugin);
         this.chart = new Chart(ctx, {
             type: "line",
             data: {
@@ -389,18 +400,48 @@ let ChartElement = class ChartElement extends LitElement {
                 interaction: { mode: "index", intersect: false },
                 plugins: {
                     tooltip: { mode: "index", axis: "x" },
+                    zoom: {
+                        pan: {
+                            enabled: false,
+                            mode: "xy",
+                            modifierKey: undefined, // Optional: only pan while holding Ctrl
+                        },
+                        zoom: {
+                            wheel: {
+                                enabled: false,
+                            },
+                            pinch: {
+                                enabled: false,
+                            },
+                            mode: "x",
+                        },
+                        limits: {
+                            x: { minRange: 10 }, // prevent zooming too far
+                        },
+                    },
                 },
             },
         });
     }
     render() {
-        return html `<canvas id="stockChart"></canvas>`;
+        return html `
+      <button @click="${this._Zoomenalbe}">
+        ${this.zoomEnabled ? "Disable Zoom" : "Enable Zoom"}
+      </button>
+
+      <button @click="${this._resetZoom}">Reset Zoom</button>
+      <canvas id="stockChart"></canvas>
+    `;
     }
 };
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
 ], ChartElement.prototype, "stockData", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChartElement.prototype, "zoomEnabled", void 0);
 ChartElement = __decorate([
     customElement("stock-chart-display"),
     __metadata("design:paramtypes", [])