cats-charts 0.0.94 → 0.0.96
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.
- package/fesm2022/cats-charts.mjs +83 -9
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +17 -1
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -6,8 +6,7 @@ import { LineChart, BarChart as BarChart$1, PieChart as PieChart$1, CustomChart,
|
|
|
6
6
|
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, ToolboxComponent, DataZoomInsideComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, DatasetComponent, VisualMapComponent, GraphicComponent } from 'echarts/components';
|
|
7
7
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
8
8
|
import * as i2 from '@angular/common';
|
|
9
|
-
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
10
|
-
import { RightClickCard as RightClickCard$1 } from 'charts-lib';
|
|
9
|
+
import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
|
|
11
10
|
|
|
12
11
|
class RightClickCard {
|
|
13
12
|
cardPosition;
|
|
@@ -1695,7 +1694,7 @@ class LinesChart {
|
|
|
1695
1694
|
confine: true,
|
|
1696
1695
|
formatter: (params) => this.config?.tooltipFormatter
|
|
1697
1696
|
? this.config?.tooltipFormatter(params)
|
|
1698
|
-
: this.chartService.barLineTooltipFormatter(params, 'line'),
|
|
1697
|
+
: this.chartService.barLineTooltipFormatter(params, 'line', this.config),
|
|
1699
1698
|
},
|
|
1700
1699
|
legend: {
|
|
1701
1700
|
show: false,
|
|
@@ -2389,7 +2388,7 @@ class BarChart {
|
|
|
2389
2388
|
confine: true,
|
|
2390
2389
|
formatter: (params) => this.config.tooltipFormatter
|
|
2391
2390
|
? this.config.tooltipFormatter(params)
|
|
2392
|
-
: this.chartService.barLineTooltipFormatter(params),
|
|
2391
|
+
: this.chartService.barLineTooltipFormatter(params, 'bar', this.config),
|
|
2393
2392
|
},
|
|
2394
2393
|
legend: {
|
|
2395
2394
|
show: false,
|
|
@@ -4647,11 +4646,11 @@ class SankeyChart {
|
|
|
4647
4646
|
}
|
|
4648
4647
|
}
|
|
4649
4648
|
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 });
|
|
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
|
|
4649
|
+
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, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4651
4650
|
}
|
|
4652
4651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SankeyChart, decorators: [{
|
|
4653
4652
|
type: Component,
|
|
4654
|
-
args: [{ selector: 'lib-sankey-chart', imports: [CommonModule, NgxEchartsDirective, ChartLegendComponent, RightClickCard
|
|
4653
|
+
args: [{ selector: 'lib-sankey-chart', imports: [CommonModule, NgxEchartsDirective, ChartLegendComponent, RightClickCard], 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"] }]
|
|
4655
4654
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { config: [{
|
|
4656
4655
|
type: Input
|
|
4657
4656
|
}], theme: [{
|
|
@@ -6331,6 +6330,7 @@ const COLLAPSED_GROUP_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org
|
|
|
6331
6330
|
class GanttChart {
|
|
6332
6331
|
chartService;
|
|
6333
6332
|
cdr;
|
|
6333
|
+
document;
|
|
6334
6334
|
config = { series: [], groups: [] };
|
|
6335
6335
|
theme;
|
|
6336
6336
|
events = [];
|
|
@@ -6349,11 +6349,18 @@ class GanttChart {
|
|
|
6349
6349
|
horizontalZoomLayoutFrame;
|
|
6350
6350
|
isApplyingHorizontalZoomLayout = false;
|
|
6351
6351
|
zoomWheelHandler;
|
|
6352
|
+
dataZoomPointerDownHandler;
|
|
6353
|
+
nativeDragStartHandler;
|
|
6354
|
+
nativePointerEndHandler;
|
|
6355
|
+
dataZoomGestureActive = false;
|
|
6356
|
+
isBrowser;
|
|
6352
6357
|
visibleRows = [];
|
|
6353
6358
|
rowIndexMap = new Map();
|
|
6354
|
-
constructor(chartService, cdr) {
|
|
6359
|
+
constructor(chartService, cdr, document, platformId) {
|
|
6355
6360
|
this.chartService = chartService;
|
|
6356
6361
|
this.cdr = cdr;
|
|
6362
|
+
this.document = document;
|
|
6363
|
+
this.isBrowser = isPlatformBrowser(platformId);
|
|
6357
6364
|
}
|
|
6358
6365
|
get deafultColors() {
|
|
6359
6366
|
return this.chartService.defaultColors;
|
|
@@ -6551,6 +6558,7 @@ class GanttChart {
|
|
|
6551
6558
|
if (this.horizontalZoomLayoutFrame) {
|
|
6552
6559
|
cancelAnimationFrame(this.horizontalZoomLayoutFrame);
|
|
6553
6560
|
}
|
|
6561
|
+
this.unbindDataZoomDragIsolation();
|
|
6554
6562
|
// ngx-echarts can dispose the ECharts instance before this component's
|
|
6555
6563
|
// destroy hook runs. A disposed instance no longer has a ZRender surface,
|
|
6556
6564
|
// so do not try to remove the wheel listener from it.
|
|
@@ -6987,6 +6995,7 @@ class GanttChart {
|
|
|
6987
6995
|
this.buildOption();
|
|
6988
6996
|
this.bindEvents();
|
|
6989
6997
|
this.bindZoomWheel();
|
|
6998
|
+
this.bindDataZoomDragIsolation();
|
|
6990
6999
|
this.chartInstance.on('finished', () => {
|
|
6991
7000
|
this.scheduleVerticalZoomLayout();
|
|
6992
7001
|
this.scheduleHorizontalZoomLayout();
|
|
@@ -7025,6 +7034,65 @@ class GanttChart {
|
|
|
7025
7034
|
};
|
|
7026
7035
|
zr.on('mousewheel', this.zoomWheelHandler);
|
|
7027
7036
|
}
|
|
7037
|
+
/**
|
|
7038
|
+
* A native draggable ancestor starts its drag after the slider's mousedown
|
|
7039
|
+
* event. Since the native `dragstart` targets that ancestor rather than the
|
|
7040
|
+
* canvas, suppress it at document capture phase while a data-zoom gesture is
|
|
7041
|
+
* active. This keeps the fix inside the chart library and leaves parent drag
|
|
7042
|
+
* behaviour unchanged everywhere else.
|
|
7043
|
+
*/
|
|
7044
|
+
bindDataZoomDragIsolation() {
|
|
7045
|
+
if (!this.chartInstance || !this.isBrowser)
|
|
7046
|
+
return;
|
|
7047
|
+
const zr = this.chartInstance.getZr();
|
|
7048
|
+
if (this.dataZoomPointerDownHandler) {
|
|
7049
|
+
zr.off('mousedown', this.dataZoomPointerDownHandler);
|
|
7050
|
+
}
|
|
7051
|
+
this.dataZoomPointerDownHandler = (event) => {
|
|
7052
|
+
this.dataZoomGestureActive = this.isDataZoomTarget(event?.target);
|
|
7053
|
+
};
|
|
7054
|
+
zr.on('mousedown', this.dataZoomPointerDownHandler);
|
|
7055
|
+
if (!this.nativeDragStartHandler) {
|
|
7056
|
+
this.nativeDragStartHandler = (event) => {
|
|
7057
|
+
if (!this.dataZoomGestureActive)
|
|
7058
|
+
return;
|
|
7059
|
+
event.preventDefault();
|
|
7060
|
+
event.stopPropagation();
|
|
7061
|
+
this.dataZoomGestureActive = false;
|
|
7062
|
+
};
|
|
7063
|
+
this.document.addEventListener('dragstart', this.nativeDragStartHandler, true);
|
|
7064
|
+
}
|
|
7065
|
+
if (!this.nativePointerEndHandler) {
|
|
7066
|
+
this.nativePointerEndHandler = () => {
|
|
7067
|
+
this.dataZoomGestureActive = false;
|
|
7068
|
+
};
|
|
7069
|
+
this.document.addEventListener('pointerup', this.nativePointerEndHandler, true);
|
|
7070
|
+
this.document.addEventListener('pointercancel', this.nativePointerEndHandler, true);
|
|
7071
|
+
}
|
|
7072
|
+
}
|
|
7073
|
+
unbindDataZoomDragIsolation() {
|
|
7074
|
+
if (this.chartInstance && !this.chartInstance.isDisposed() && this.dataZoomPointerDownHandler) {
|
|
7075
|
+
this.chartInstance.getZr()?.off('mousedown', this.dataZoomPointerDownHandler);
|
|
7076
|
+
}
|
|
7077
|
+
if (this.nativeDragStartHandler) {
|
|
7078
|
+
this.document.removeEventListener('dragstart', this.nativeDragStartHandler, true);
|
|
7079
|
+
}
|
|
7080
|
+
if (this.nativePointerEndHandler) {
|
|
7081
|
+
this.document.removeEventListener('pointerup', this.nativePointerEndHandler, true);
|
|
7082
|
+
this.document.removeEventListener('pointercancel', this.nativePointerEndHandler, true);
|
|
7083
|
+
}
|
|
7084
|
+
this.dataZoomPointerDownHandler = undefined;
|
|
7085
|
+
this.nativeDragStartHandler = undefined;
|
|
7086
|
+
this.nativePointerEndHandler = undefined;
|
|
7087
|
+
this.dataZoomGestureActive = false;
|
|
7088
|
+
}
|
|
7089
|
+
isDataZoomTarget(target) {
|
|
7090
|
+
for (let element = target; element; element = element.parent) {
|
|
7091
|
+
if (element.__ecComponentInfo?.mainType === 'dataZoom')
|
|
7092
|
+
return true;
|
|
7093
|
+
}
|
|
7094
|
+
return false;
|
|
7095
|
+
}
|
|
7028
7096
|
moveDataZoomWindow(sliderId, insideId, delta) {
|
|
7029
7097
|
const option = this.chartInstance.getOption();
|
|
7030
7098
|
const slider = option.dataZoom?.find((zoom) => zoom['id'] === sliderId);
|
|
@@ -7353,13 +7421,19 @@ class GanttChart {
|
|
|
7353
7421
|
...(customStyle || {}),
|
|
7354
7422
|
};
|
|
7355
7423
|
}
|
|
7356
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7424
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
7357
7425
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GanttChart, isStandalone: true, selector: "lib-gantt-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()", "window:resize": "refreshAxisNameSpace()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"gantt-chart-shell\"\n [class.gantt-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.gantt-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.gantt-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\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: [".gantt-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:row}.gantt-chart-shell--legend-bottom{flex-direction:column}.gantt-chart-shell__legend{flex:0 0 auto;min-width:0}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{height:100%;max-width:min(var(--gantt-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.gantt-chart-shell,.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:column}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"], dependencies: [{ 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: RightClickCard, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7358
7426
|
}
|
|
7359
7427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, decorators: [{
|
|
7360
7428
|
type: Component,
|
|
7361
7429
|
args: [{ selector: 'lib-gantt-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"gantt-chart-shell\"\n [class.gantt-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.gantt-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.gantt-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\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: [".gantt-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:row}.gantt-chart-shell--legend-bottom{flex-direction:column}.gantt-chart-shell__legend{flex:0 0 auto;min-width:0}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{height:100%;max-width:min(var(--gantt-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.gantt-chart-shell,.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:column}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"] }]
|
|
7362
|
-
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }
|
|
7430
|
+
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
7431
|
+
type: Inject,
|
|
7432
|
+
args: [DOCUMENT]
|
|
7433
|
+
}] }, { type: undefined, decorators: [{
|
|
7434
|
+
type: Inject,
|
|
7435
|
+
args: [PLATFORM_ID]
|
|
7436
|
+
}] }], propDecorators: { config: [{
|
|
7363
7437
|
type: Input
|
|
7364
7438
|
}], theme: [{
|
|
7365
7439
|
type: Input
|