@praxisui/charts 8.0.0-beta.80 → 8.0.0-beta.81

package/fesm2022/praxisui-charts.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1$1 from '@praxisui/core';
 import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, providePraxisI18n, SETTINGS_PANEL_DATA, ComponentMetadataRegistry, createDefaultTableConfig, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -801,6 +801,8 @@ use([
 class EChartsEngineAdapter {
     optionBuilder;
     chart;
+    clickHost;
+    domClickHandler;
     zrenderClickHandler;
     lastSeriesClickAt = 0;
     constructor(optionBuilder) {
@@ -828,6 +830,9 @@ class EChartsEngineAdapter {
         if (zrender && this.zrenderClickHandler) {
             zrender.off?.('click', this.zrenderClickHandler);
         }
+        if (this.clickHost && this.domClickHandler) {
+            this.clickHost.removeEventListener('click', this.domClickHandler, true);
+        }
         this.zrenderClickHandler = (event) => {
             window.setTimeout(() => {
                 if (Date.now() - this.lastSeriesClickAt < 80) {
@@ -837,6 +842,22 @@ class EChartsEngineAdapter {
             }, 0);
         };
         zrender?.on?.('click', this.zrenderClickHandler);
+        this.domClickHandler = (event) => {
+            window.setTimeout(() => {
+                if (Date.now() - this.lastSeriesClickAt < 80) {
+                    return;
+                }
+                const rect = host.getBoundingClientRect();
+                const offsetX = Number.isFinite(event.offsetX) ? event.offsetX : event.clientX - rect.left;
+                const offsetY = Number.isFinite(event.offsetY) ? event.offsetY : event.clientY - rect.top;
+                this.emitCategoryClickFromGrid({
+                    offsetX,
+                    offsetY,
+                }, payload);
+            }, 0);
+        };
+        host.addEventListener('click', this.domClickHandler, true);
+        this.clickHost = host;
     }
     resize() {
         this.chart?.resize();
@@ -846,6 +867,11 @@ class EChartsEngineAdapter {
         if (zrender && this.zrenderClickHandler) {
             zrender.off?.('click', this.zrenderClickHandler);
         }
+        if (this.clickHost && this.domClickHandler) {
+            this.clickHost.removeEventListener('click', this.domClickHandler, true);
+        }
+        this.clickHost = undefined;
+        this.domClickHandler = undefined;
         this.zrenderClickHandler = undefined;
         this.chart?.dispose();
         this.chart = undefined;
@@ -2040,6 +2066,7 @@ class PraxisChartComponent {
     canonicalMapper = inject(PraxisChartCanonicalContractMapperService);
     statsApi = inject(PraxisChartStatsApiService);
     i18n = inject(PraxisI18nService);
+    ngZone = inject(NgZone);
     settingsPanel = inject(SETTINGS_PANEL_BRIDGE, { optional: true });
     destroyRef = inject(DestroyRef);
     resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "resizeObserver" }] : /* istanbul ignore next */ []));
@@ -2323,7 +2350,7 @@ class PraxisChartComponent {
             this.engine.render(host, {
                 config: this.renderConfig(),
                 data: this.resolvedData(),
-                onPointClick: (event) => this.handlePointClick(event),
+                onPointClick: (event) => this.ngZone.run(() => this.handlePointClick(event)),
             });
         });
         this.destroyRef.onDestroy(() => {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "8.0.0-beta.80",
+  "version": "8.0.0-beta.81",
   "description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^8.0.0-beta.80",
+    "@praxisui/core": "^8.0.0-beta.81",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^8.0.0-beta.80",
+    "@praxisui/table": "^8.0.0-beta.81",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -464,6 +464,7 @@ declare class PraxisChartComponent {
     private readonly canonicalMapper;
     private readonly statsApi;
     private readonly i18n;
+    private readonly ngZone;
     private readonly settingsPanel;
     private readonly destroyRef;
     private readonly resizeObserver;