lit-litelements 2.2.4 → 2.2.5

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

@@ -23,6 +23,7 @@ declare class ChartElement extends LitElement {
     chart: Chart | null;
     constructor();
     firstUpdated(): void;
+    _resetZoom(): void;
     willUpdate(changedProperties: {
         has: (arg0: string) => any;
     }): Promise<void>;

package/dist/component/chart.lit.js

@@ -18,6 +18,7 @@ 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() {
@@ -131,6 +132,10 @@ let ChartElement = class ChartElement extends LitElement {
     firstUpdated() {
         this._createChart();
     }
+    _resetZoom() {
+        var _a;
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resetZoom();
+    }
     willUpdate(changedProperties) {
         return __awaiter(this, void 0, void 0, function* () {
             if (changedProperties.has("stockData")) {
@@ -200,6 +205,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,12 +395,34 @@ let ChartElement = class ChartElement extends LitElement {
                 interaction: { mode: "index", intersect: false },
                 plugins: {
                     tooltip: { mode: "index", axis: "x" },
+                    zoom: {
+                        pan: {
+                            enabled: true,
+                            mode: "xy",
+                            modifierKey: undefined, // Optional: only pan while holding Ctrl
+                        },
+                        zoom: {
+                            wheel: {
+                                enabled: true,
+                            },
+                            pinch: {
+                                enabled: true,
+                            },
+                            mode: "x",
+                        },
+                        limits: {
+                            x: { minRange: 10 }, // prevent zooming too far
+                        },
+                    },
                 },
             },
         });
     }
     render() {
-        return html `<canvas id="stockChart"></canvas>`;
+        return html `
+      <button @click="${this._resetZoom}">Reset Zoom</button>
+      <canvas id="stockChart"></canvas>
+    `;
     }
 };
 __decorate([