cats-charts 0.0.70 → 0.0.72

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 (4) hide show
  1. package/fesm2022/cats-charts.mjs +153 -102
  2. package/fesm2022/cats-charts.mjs.map +1 -1
  3. package/index.d.ts +6 -2
  4. package/package.json +1 -1
package/fesm2022/cats-charts.mjs CHANGED
@@ -1033,12 +1033,30 @@ class Charts {
1033
1033
  const name = params.name;
1034
1034
  const value = params.value;
1035
1035
  const percent = params.percent;
1036
+ let extraTooltipData = [];
1037
+ if (typeof params?.data === 'object') {
1038
+ extraTooltipData = Object.entries(params.data?.[config?.extraTooltipKey || 'tooltip'] || {});
1039
+ }
1040
+ let extraTooltipDataTemplate = '';
1041
+ if (extraTooltipData.length) {
1042
+ extraTooltipData.forEach((data) => {
1043
+ extraTooltipDataTemplate += `<div style="
1044
+ font-size:13px;
1045
+ color:#434A51;
1046
+ padding-top: 0.5rem;
1047
+ ">
1048
+ ${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
1049
+ </div>`;
1050
+ });
1051
+ }
1036
1052
  return `<div style="
1037
1053
  position: relative;
1038
1054
  background-color: #fff;
1039
1055
  padding: 8px 16px;
1040
1056
  border-radius: 8px;
1041
1057
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
1058
+ ">
1059
+ <div style="
1042
1060
  display: flex;
1043
1061
  align-items: center;
1044
1062
  gap: 10px;
@@ -1069,14 +1087,32 @@ class Charts {
1069
1087
  ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : value}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
1070
1088
  </span>
1071
1089
  </div>
1090
+ ${extraTooltipDataTemplate}
1091
+ </div>
1072
1092
  `;
1073
1093
  }
1074
- barLineTooltipFormatter(params, chartType) {
1094
+ barLineTooltipFormatter(params, chartType, config) {
1075
1095
  if (!params || !params.length)
1076
1096
  return '';
1077
1097
  const date = params[0].axisValueLabel || params[0].name;
1078
1098
  let total = 0;
1079
1099
  let rows = '';
1100
+ let extraTooltipData = [];
1101
+ if (typeof params?.[0]?.data === 'object') {
1102
+ extraTooltipData = Object.entries(params[0].data?.[config?.extraTooltipKey || 'tooltip'] || {});
1103
+ }
1104
+ let extraTooltipDataTemplate = '';
1105
+ if (extraTooltipData.length) {
1106
+ extraTooltipData.forEach((data) => {
1107
+ extraTooltipDataTemplate += `<div style="
1108
+ font-size:13px;
1109
+ color:#434A51;
1110
+ padding-top: 0.5rem;
1111
+ ">
1112
+ ${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
1113
+ </div>`;
1114
+ });
1115
+ }
1080
1116
  params?.forEach((item) => {
1081
1117
  const color = item.color;
1082
1118
  const name = item.seriesName;
@@ -1128,6 +1164,7 @@ class Charts {
1128
1164
  padding-top: 0.5rem;
1129
1165
  ">
1130
1166
  Total: <b style="color:#111;font-weight:600;">${total}</b>
1167
+ ${extraTooltipDataTemplate}
1131
1168
  </div>
1132
1169
 
1133
1170
  </div>
@@ -1762,58 +1799,50 @@ class LinesChart {
1762
1799
  this.bindEvents();
1763
1800
  }
1764
1801
  /* ------------------ 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
1802
  bindEvents() {
1789
1803
  if (!this.chartInstance)
1790
1804
  return;
1791
1805
  this.chartInstance.off();
1792
- /* ---- existing chart events ---- */
1806
+ // Existing chart events
1793
1807
  this.events.forEach((eventName) => {
1794
1808
  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();
1809
+ this.chartInstance.on('contextmenu', (params) => {
1810
+ const event = params?.event?.event;
1811
+ if (event) {
1812
+ event.preventDefault();
1813
+ const container = this.chartInstance.getDom();
1814
+ const rect = container.getBoundingClientRect();
1815
+ this.cardPosition = {
1816
+ x: event.clientX - rect.left,
1817
+ y: event.clientY - rect.top,
1818
+ };
1819
+ this.openCard = true;
1820
+ this.cdr.markForCheck();
1821
+ }
1812
1822
  this.chartEvent.emit({
1813
1823
  type: 'contextmenu',
1814
- data: event,
1824
+ data: params,
1815
1825
  });
1816
1826
  });
1827
+ const zr = this.chartInstance.getZr();
1828
+ zr.on('contextmenu', (zrEvent) => {
1829
+ if (!zrEvent.target) {
1830
+ const nativeEvent = zrEvent.event;
1831
+ nativeEvent.preventDefault();
1832
+ const container = this.chartInstance.getDom();
1833
+ const rect = container.getBoundingClientRect();
1834
+ this.cardPosition = {
1835
+ x: nativeEvent.clientX - rect.left,
1836
+ y: nativeEvent.clientY - rect.top,
1837
+ };
1838
+ this.openCard = true;
1839
+ this.cdr.markForCheck();
1840
+ this.chartEvent.emit({
1841
+ type: 'contextmenu',
1842
+ data: { ...zrEvent, isZrEvent: true },
1843
+ });
1844
+ }
1845
+ });
1817
1846
  }
1818
1847
  else {
1819
1848
  this.chartInstance.on(eventName, (params) => {
@@ -2333,58 +2362,50 @@ class BarChart {
2333
2362
  this.bindEvents();
2334
2363
  }
2335
2364
  /* ------------------ 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
2365
  bindEvents() {
2360
2366
  if (!this.chartInstance)
2361
2367
  return;
2362
2368
  this.chartInstance.off();
2363
- /* ---- existing chart events ---- */
2369
+ // Existing chart events
2364
2370
  this.events.forEach((eventName) => {
2365
2371
  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();
2372
+ this.chartInstance.on('contextmenu', (params) => {
2373
+ const event = params?.event?.event;
2374
+ if (event) {
2375
+ event.preventDefault();
2376
+ const container = this.chartInstance.getDom();
2377
+ const rect = container.getBoundingClientRect();
2378
+ this.cardPosition = {
2379
+ x: event.clientX - rect.left,
2380
+ y: event.clientY - rect.top,
2381
+ };
2382
+ this.openCard = true;
2383
+ this.cdr.markForCheck();
2384
+ }
2383
2385
  this.chartEvent.emit({
2384
2386
  type: 'contextmenu',
2385
- data: event,
2387
+ data: params,
2386
2388
  });
2387
2389
  });
2390
+ const zr = this.chartInstance.getZr();
2391
+ zr.on('contextmenu', (zrEvent) => {
2392
+ if (!zrEvent.target) {
2393
+ const nativeEvent = zrEvent.event;
2394
+ nativeEvent.preventDefault();
2395
+ const container = this.chartInstance.getDom();
2396
+ const rect = container.getBoundingClientRect();
2397
+ this.cardPosition = {
2398
+ x: nativeEvent.clientX - rect.left,
2399
+ y: nativeEvent.clientY - rect.top,
2400
+ };
2401
+ this.openCard = true;
2402
+ this.cdr.markForCheck();
2403
+ this.chartEvent.emit({
2404
+ type: 'contextmenu',
2405
+ data: { ...zrEvent, isZrEvent: true },
2406
+ });
2407
+ }
2408
+ });
2388
2409
  }
2389
2410
  else {
2390
2411
  this.chartInstance.on(eventName, (params) => {
@@ -2799,25 +2820,55 @@ class DoughnutChart {
2799
2820
  if (!this.chartInstance)
2800
2821
  return;
2801
2822
  this.chartInstance.off();
2823
+ // Existing chart events
2802
2824
  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,
2825
+ if (eventName === 'contextmenu') {
2826
+ this.chartInstance.on('contextmenu', (params) => {
2827
+ const event = params?.event?.event;
2828
+ if (event) {
2829
+ event.preventDefault();
2830
+ const container = this.chartInstance.getDom();
2831
+ const rect = container.getBoundingClientRect();
2832
+ this.cardPosition = {
2833
+ x: event.clientX - rect.left,
2834
+ y: event.clientY - rect.top,
2835
+ };
2836
+ this.openCard = true;
2837
+ this.cdr.markForCheck();
2838
+ }
2839
+ this.chartEvent.emit({
2840
+ type: 'contextmenu',
2841
+ data: params,
2842
+ });
2819
2843
  });
2820
- });
2844
+ const zr = this.chartInstance.getZr();
2845
+ zr.on('contextmenu', (zrEvent) => {
2846
+ if (!zrEvent.target) {
2847
+ const nativeEvent = zrEvent.event;
2848
+ nativeEvent.preventDefault();
2849
+ const container = this.chartInstance.getDom();
2850
+ const rect = container.getBoundingClientRect();
2851
+ this.cardPosition = {
2852
+ x: nativeEvent.clientX - rect.left,
2853
+ y: nativeEvent.clientY - rect.top,
2854
+ };
2855
+ this.openCard = true;
2856
+ this.cdr.markForCheck();
2857
+ this.chartEvent.emit({
2858
+ type: 'contextmenu',
2859
+ data: { ...zrEvent, isZrEvent: true },
2860
+ });
2861
+ }
2862
+ });
2863
+ }
2864
+ else {
2865
+ this.chartInstance.on(eventName, (params) => {
2866
+ this.chartEvent.emit({
2867
+ type: eventName,
2868
+ data: params,
2869
+ });
2870
+ });
2871
+ }
2821
2872
  });
2822
2873
  }
2823
2874
  /* ------------------ DESTROY ------------------ */