cats-charts 0.0.70 → 0.0.71

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 (3) hide show
  1. package/fesm2022/cats-charts.mjs +115 -101
  2. package/fesm2022/cats-charts.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/cats-charts.mjs CHANGED
@@ -1762,58 +1762,50 @@ class LinesChart {
1762
1762
  this.bindEvents();
1763
1763
  }
1764
1764
  /* ------------------ EVENTS ------------------ */
1765
- // private bindEvents() {
1766
- // if (!this.chartInstance) return;
1767
- // this.chartInstance.off();
1768
- // this.events.forEach((eventName) => {
1769
- // this.chartInstance.on(eventName, (params: any) => {
1770
- // if (eventName === 'contextmenu' && params.event?.event) {
1771
- // params.event.event.preventDefault();
1772
- // const container = this.chartInstance.getDom();
1773
- // const rect = container.getBoundingClientRect();
1774
- // this.cardPosition = {
1775
- // x: params.event.event.clientX - rect.left,
1776
- // y: params.event.event.clientY - rect.top,
1777
- // };
1778
- // this.openCard = true;
1779
- // this.cdr.markForCheck();
1780
- // }
1781
- // this.chartEvent.emit({
1782
- // type: eventName,
1783
- // data: params,
1784
- // });
1785
- // });
1786
- // });
1787
- // }
1788
1765
  bindEvents() {
1789
1766
  if (!this.chartInstance)
1790
1767
  return;
1791
1768
  this.chartInstance.off();
1792
- /* ---- existing chart events ---- */
1769
+ // Existing chart events
1793
1770
  this.events.forEach((eventName) => {
1794
1771
  if (eventName === 'contextmenu') {
1795
- /* ---- RIGHT CLICK ANYWHERE IN GRID ---- */
1796
- const zr = this.chartInstance.getZr();
1797
- zr.off('contextmenu');
1798
- zr.on('contextmenu', (event) => {
1799
- event.event.preventDefault();
1800
- const point = [event.offsetX, event.offsetY];
1801
- // check if click is inside grid
1802
- if (!this.chartInstance.containPixel({ gridIndex: 0 }, point))
1803
- return;
1804
- const container = this.chartInstance.getDom();
1805
- const rect = container.getBoundingClientRect();
1806
- this.cardPosition = {
1807
- x: event.event.clientX - rect.left,
1808
- y: event.event.clientY - rect.top,
1809
- };
1810
- this.openCard = true;
1811
- this.cdr.markForCheck();
1772
+ this.chartInstance.on('contextmenu', (params) => {
1773
+ const event = params?.event?.event;
1774
+ if (event) {
1775
+ event.preventDefault();
1776
+ const container = this.chartInstance.getDom();
1777
+ const rect = container.getBoundingClientRect();
1778
+ this.cardPosition = {
1779
+ x: event.clientX - rect.left,
1780
+ y: event.clientY - rect.top,
1781
+ };
1782
+ this.openCard = true;
1783
+ this.cdr.markForCheck();
1784
+ }
1812
1785
  this.chartEvent.emit({
1813
1786
  type: 'contextmenu',
1814
- data: event,
1787
+ data: params,
1815
1788
  });
1816
1789
  });
1790
+ const zr = this.chartInstance.getZr();
1791
+ zr.on('contextmenu', (zrEvent) => {
1792
+ if (!zrEvent.target) {
1793
+ const nativeEvent = zrEvent.event;
1794
+ nativeEvent.preventDefault();
1795
+ const container = this.chartInstance.getDom();
1796
+ const rect = container.getBoundingClientRect();
1797
+ this.cardPosition = {
1798
+ x: nativeEvent.clientX - rect.left,
1799
+ y: nativeEvent.clientY - rect.top,
1800
+ };
1801
+ this.openCard = true;
1802
+ this.cdr.markForCheck();
1803
+ this.chartEvent.emit({
1804
+ type: 'contextmenu',
1805
+ data: { ...zrEvent, isZrEvent: true },
1806
+ });
1807
+ }
1808
+ });
1817
1809
  }
1818
1810
  else {
1819
1811
  this.chartInstance.on(eventName, (params) => {
@@ -2333,58 +2325,50 @@ class BarChart {
2333
2325
  this.bindEvents();
2334
2326
  }
2335
2327
  /* ------------------ EVENTS ------------------ */
2336
- // private bindEvents() {
2337
- // if (!this.chartInstance) return;
2338
- // this.chartInstance.off();
2339
- // this.events.forEach((eventName) => {
2340
- // this.chartInstance.on(eventName, (params: any) => {
2341
- // if (eventName === 'contextmenu' && params.event?.event) {
2342
- // params.event.event.preventDefault();
2343
- // const container = this.chartInstance.getDom();
2344
- // const rect = container.getBoundingClientRect();
2345
- // this.cardPosition = {
2346
- // x: params.event.event.clientX - rect.left,
2347
- // y: params.event.event.clientY - rect.top,
2348
- // };
2349
- // this.openCard = true;
2350
- // this.cdr.markForCheck();
2351
- // }
2352
- // this.chartEvent.emit({
2353
- // type: eventName,
2354
- // data: params,
2355
- // });
2356
- // });
2357
- // });
2358
- // }
2359
2328
  bindEvents() {
2360
2329
  if (!this.chartInstance)
2361
2330
  return;
2362
2331
  this.chartInstance.off();
2363
- /* ---- existing chart events ---- */
2332
+ // Existing chart events
2364
2333
  this.events.forEach((eventName) => {
2365
2334
  if (eventName === 'contextmenu') {
2366
- /* ---- RIGHT CLICK ANYWHERE IN GRID ---- */
2367
- const zr = this.chartInstance.getZr();
2368
- zr.off('contextmenu');
2369
- zr.on('contextmenu', (event) => {
2370
- event.event.preventDefault();
2371
- const point = [event.offsetX, event.offsetY];
2372
- // check if click is inside grid
2373
- if (!this.chartInstance.containPixel({ gridIndex: 0 }, point))
2374
- return;
2375
- const container = this.chartInstance.getDom();
2376
- const rect = container.getBoundingClientRect();
2377
- this.cardPosition = {
2378
- x: event.event.clientX - rect.left,
2379
- y: event.event.clientY - rect.top,
2380
- };
2381
- this.openCard = true;
2382
- this.cdr.markForCheck();
2335
+ this.chartInstance.on('contextmenu', (params) => {
2336
+ const event = params?.event?.event;
2337
+ if (event) {
2338
+ event.preventDefault();
2339
+ const container = this.chartInstance.getDom();
2340
+ const rect = container.getBoundingClientRect();
2341
+ this.cardPosition = {
2342
+ x: event.clientX - rect.left,
2343
+ y: event.clientY - rect.top,
2344
+ };
2345
+ this.openCard = true;
2346
+ this.cdr.markForCheck();
2347
+ }
2383
2348
  this.chartEvent.emit({
2384
2349
  type: 'contextmenu',
2385
- data: event,
2350
+ data: params,
2386
2351
  });
2387
2352
  });
2353
+ const zr = this.chartInstance.getZr();
2354
+ zr.on('contextmenu', (zrEvent) => {
2355
+ if (!zrEvent.target) {
2356
+ const nativeEvent = zrEvent.event;
2357
+ nativeEvent.preventDefault();
2358
+ const container = this.chartInstance.getDom();
2359
+ const rect = container.getBoundingClientRect();
2360
+ this.cardPosition = {
2361
+ x: nativeEvent.clientX - rect.left,
2362
+ y: nativeEvent.clientY - rect.top,
2363
+ };
2364
+ this.openCard = true;
2365
+ this.cdr.markForCheck();
2366
+ this.chartEvent.emit({
2367
+ type: 'contextmenu',
2368
+ data: { ...zrEvent, isZrEvent: true },
2369
+ });
2370
+ }
2371
+ });
2388
2372
  }
2389
2373
  else {
2390
2374
  this.chartInstance.on(eventName, (params) => {
@@ -2799,25 +2783,55 @@ class DoughnutChart {
2799
2783
  if (!this.chartInstance)
2800
2784
  return;
2801
2785
  this.chartInstance.off();
2786
+ // Existing chart events
2802
2787
  this.events.forEach((eventName) => {
2803
- this.chartInstance.on(eventName, (params) => {
2804
- // Prevent browser context menu
2805
- if (eventName === 'contextmenu' && params.event?.event) {
2806
- params.event.event.preventDefault();
2807
- const container = this.chartInstance.getDom();
2808
- const rect = container.getBoundingClientRect();
2809
- this.cardPosition = {
2810
- x: params.event?.event.clientX - rect.left,
2811
- y: params.event?.event.clientY - rect.top,
2812
- };
2813
- this.openCard = true;
2814
- this.cdr.markForCheck();
2815
- }
2816
- this.chartEvent.emit({
2817
- type: eventName,
2818
- data: params,
2788
+ if (eventName === 'contextmenu') {
2789
+ this.chartInstance.on('contextmenu', (params) => {
2790
+ const event = params?.event?.event;
2791
+ if (event) {
2792
+ event.preventDefault();
2793
+ const container = this.chartInstance.getDom();
2794
+ const rect = container.getBoundingClientRect();
2795
+ this.cardPosition = {
2796
+ x: event.clientX - rect.left,
2797
+ y: event.clientY - rect.top,
2798
+ };
2799
+ this.openCard = true;
2800
+ this.cdr.markForCheck();
2801
+ }
2802
+ this.chartEvent.emit({
2803
+ type: 'contextmenu',
2804
+ data: params,
2805
+ });
2819
2806
  });
2820
- });
2807
+ const zr = this.chartInstance.getZr();
2808
+ zr.on('contextmenu', (zrEvent) => {
2809
+ if (!zrEvent.target) {
2810
+ const nativeEvent = zrEvent.event;
2811
+ nativeEvent.preventDefault();
2812
+ const container = this.chartInstance.getDom();
2813
+ const rect = container.getBoundingClientRect();
2814
+ this.cardPosition = {
2815
+ x: nativeEvent.clientX - rect.left,
2816
+ y: nativeEvent.clientY - rect.top,
2817
+ };
2818
+ this.openCard = true;
2819
+ this.cdr.markForCheck();
2820
+ this.chartEvent.emit({
2821
+ type: 'contextmenu',
2822
+ data: { ...zrEvent, isZrEvent: true },
2823
+ });
2824
+ }
2825
+ });
2826
+ }
2827
+ else {
2828
+ this.chartInstance.on(eventName, (params) => {
2829
+ this.chartEvent.emit({
2830
+ type: eventName,
2831
+ data: params,
2832
+ });
2833
+ });
2834
+ }
2821
2835
  });
2822
2836
  }
2823
2837
  /* ------------------ DESTROY ------------------ */