cats-charts 0.0.92 → 0.0.93

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 +60 -7
  2. package/fesm2022/cats-charts.mjs.map +1 -1
  3. package/index.d.ts +11 -2
  4. package/package.json +1 -1
package/fesm2022/cats-charts.mjs CHANGED
@@ -7,6 +7,7 @@ import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, Toolb
7
7
  import { CanvasRenderer } from 'echarts/renderers';
8
8
  import * as i2 from '@angular/common';
9
9
  import { isPlatformBrowser, CommonModule } from '@angular/common';
10
+ import { RightClickCard as RightClickCard$1 } from 'charts-lib';
10
11
 
11
12
  class RightClickCard {
12
13
  cardPosition;
@@ -3968,8 +3969,12 @@ class SankeyChart {
3968
3969
  config;
3969
3970
  theme;
3970
3971
  events = [];
3972
+ contextMenuOptions = [];
3971
3973
  chartEvent = new EventEmitter();
3972
3974
  legendEvent = new EventEmitter();
3975
+ contextMenuClick = new EventEmitter();
3976
+ cardPosition = { x: 0, y: 0 };
3977
+ openCard = false;
3973
3978
  constructor(chartService, cdr, hostElement) {
3974
3979
  this.chartService = chartService;
3975
3980
  this.cdr = cdr;
@@ -4145,6 +4150,13 @@ class SankeyChart {
4145
4150
  }
4146
4151
  this.cdr.markForCheck();
4147
4152
  }
4153
+ onMenuClick(item) {
4154
+ this.contextMenuClick.emit(item);
4155
+ this.closeCard();
4156
+ }
4157
+ closeCard() {
4158
+ this.openCard = false;
4159
+ }
4148
4160
  get showNodeToggles() {
4149
4161
  return this.config?.styling?.nodesOff?.showControls === true;
4150
4162
  }
@@ -4548,13 +4560,47 @@ class SankeyChart {
4548
4560
  this.bindSankeyDragBounds();
4549
4561
  this.events.forEach((eventName) => {
4550
4562
  this.chartInstance.on(eventName, (params) => {
4551
- if (eventName === 'contextmenu' && params.event?.event) {
4563
+ const event = params?.event?.event;
4564
+ if (eventName === 'contextmenu' && event) {
4552
4565
  params.event.event.preventDefault();
4566
+ const container = this.chartInstance.getDom();
4567
+ const rect = container.getBoundingClientRect();
4568
+ this.cardPosition = {
4569
+ x: event.clientX - rect.left,
4570
+ y: event.clientY - rect.top,
4571
+ };
4572
+ this.openCard = true;
4573
+ this.cdr.markForCheck();
4574
+ this.chartEvent.emit({
4575
+ type: eventName,
4576
+ data: params,
4577
+ });
4578
+ }
4579
+ else if (eventName === 'click') {
4580
+ this.chartInstance.on('click', (params) => {
4581
+ this.chartEvent.emit({
4582
+ type: 'click',
4583
+ data: params,
4584
+ });
4585
+ });
4586
+ const zr = this.chartInstance.getZr();
4587
+ zr.on('click', (zrEvent) => {
4588
+ if (!zrEvent.target) {
4589
+ const nativeEvent = zrEvent.event;
4590
+ nativeEvent.preventDefault();
4591
+ this.chartEvent.emit({
4592
+ type: 'blur',
4593
+ data: { ...zrEvent, type: 'blur' },
4594
+ });
4595
+ }
4596
+ });
4597
+ }
4598
+ else {
4599
+ this.chartEvent.emit({
4600
+ type: eventName,
4601
+ data: params,
4602
+ });
4553
4603
  }
4554
- this.chartEvent.emit({
4555
- type: eventName,
4556
- data: params,
4557
- });
4558
4604
  });
4559
4605
  });
4560
4606
  }
@@ -4601,21 +4647,28 @@ class SankeyChart {
4601
4647
  }
4602
4648
  }
4603
4649
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SankeyChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
4604
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SankeyChart, isStandalone: true, selector: "lib-sankey-chart", inputs: { config: "config", theme: "theme", events: "events" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4650
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SankeyChart, isStandalone: true, selector: "lib-sankey-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent", contextMenuClick: "contextMenuClick" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }, { kind: "component", type: RightClickCard$1, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4605
4651
  }
4606
4652
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SankeyChart, decorators: [{
4607
4653
  type: Component,
4608
- args: [{ selector: 'lib-sankey-chart', imports: [CommonModule, NgxEchartsDirective, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"] }]
4654
+ args: [{ selector: 'lib-sankey-chart', imports: [CommonModule, NgxEchartsDirective, ChartLegendComponent, RightClickCard$1], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"] }]
4609
4655
  }], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { config: [{
4610
4656
  type: Input
4611
4657
  }], theme: [{
4612
4658
  type: Input
4613
4659
  }], events: [{
4614
4660
  type: Input
4661
+ }], contextMenuOptions: [{
4662
+ type: Input
4615
4663
  }], chartEvent: [{
4616
4664
  type: Output
4617
4665
  }], legendEvent: [{
4618
4666
  type: Output
4667
+ }], contextMenuClick: [{
4668
+ type: Output
4669
+ }], closeCard: [{
4670
+ type: HostListener,
4671
+ args: ['document:click']
4619
4672
  }] } });
4620
4673
 
4621
4674
  echarts.use([