cats-charts 0.0.89 → 0.0.91

package/fesm2022/cats-charts.mjs

@@ -7,7 +7,6 @@ import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, Toolb
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
-import { ChartLegendComponent as ChartLegendComponent$1 } from 'charts-lib';
 
 class RightClickCard {
     cardPosition;
@@ -1086,7 +1085,7 @@ class Charts {
           font-size: 12px;
           color: #434A51;
         ">
-          ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.toMaxDecimals(value)}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
+          ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.formatTooltipValue(value, config.tooltipCompactValue)}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
         </span>
       </div>
        ${extraTooltipDataTemplate}
@@ -1136,7 +1135,7 @@ class Charts {
           display:inline-block;
         "></span>
 
-        <span>${name}: <b style="color:#111;font-weight:600;">${this.toMaxDecimals(value)}</b></span>
+        <span>${name}: <b style="color:#111;font-weight:600;">${this.formatTooltipValue(value, config?.tooltipCompactValue)}</b></span>
       </div>
     `;
         });
@@ -1165,13 +1164,43 @@ class Charts {
         color:#434A51;
         padding-top: 0.5rem;
       ">
-        Total: <b style="color:#111;font-weight:600;">${this.toMaxDecimals(total)}</b>
+        Total: <b style="color:#111;font-weight:600;">${this.formatTooltipValue(total, config?.tooltipCompactValue)}</b>
         ${extraTooltipDataTemplate}
       </div>
 
     </div>
   `;
     }
+    compactValueFormat(value) {
+        if (!Number.isFinite(value))
+            return String(value);
+        if (Object.is(value, -0) || value === 0)
+            return '0';
+        const units = [
+            { divisor: 1_000_000_000_000_000, suffix: 'Q' },
+            { divisor: 1_000_000_000_000, suffix: 'T' },
+            { divisor: 1_000_000_000, suffix: 'B' },
+            { divisor: 1_000_000, suffix: 'M' },
+            { divisor: 1_000, suffix: 'K' },
+        ];
+        const absoluteValue = Math.abs(value);
+        let unitIndex = units.findIndex(({ divisor }) => absoluteValue >= divisor);
+        // Keep values below one thousand unchanged, including decimal values.
+        if (unitIndex === -1)
+            return String(value);
+        let scaled = Math.round((value / units[unitIndex].divisor) * 10) / 10;
+        // For example, 999_950 should display as 1M rather than 1000K after
+        // rounding to one decimal place.
+        if (Math.abs(scaled) >= 1_000 && unitIndex > 0) {
+            unitIndex -= 1;
+            scaled = Math.round((value / units[unitIndex].divisor) * 10) / 10;
+        }
+        return `${scaled}${units[unitIndex].suffix}`;
+    }
+    formatTooltipValue(value, compact = false) {
+        const roundedValue = this.toMaxDecimals(value);
+        return compact ? this.compactValueFormat(roundedValue) : roundedValue;
+    }
     formatGanttDate(value, config) {
         const date = value instanceof Date ? value : new Date(value);
         if (Number.isNaN(date.getTime()))
@@ -1226,7 +1255,7 @@ class Charts {
                 extraTooltipDataTemplate += `<div style="
         color:#434A51;
       ">
-        ${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
+        ${data[0]}: <b style="color:#111;font-weight:600;">${typeof data[1] === 'number' ? this.formatTooltipValue(data[1], config?.tooltipCompactValue) : data[1]}</b>
       </div>`;
             });
         }
@@ -1250,6 +1279,8 @@ class Charts {
     <div style="padding: 0.5rem 1rem; display: flex; flex-direction: column; gap: 6px">
       Start: ${this.formatGanttDate(data.start, config)}<br/>
       End: ${this.formatGanttDate(data.end, config)}
+      ${data.duration ? `<br/>Duration: ${typeof data.duration === 'number' ? this.formatTooltipValue(data.duration, config?.tooltipCompactValue) : data.duration}` : ''}
+
     <div>
      ${extraTooltipDataTemplate
             ? `<div style="
@@ -1429,7 +1460,12 @@ class Charts {
             const tooltipRows = tooltip && typeof tooltip === 'object'
                 ? Object.entries(tooltip)
                     .map(([key, item]) => {
-                    const value = Array.isArray(item) ? item.map(escape).join(', ') : escape(item);
+                    const displayValue = typeof item === 'number'
+                        ? this.formatTooltipValue(item, config.tooltipCompactValue)
+                        : item;
+                    const value = Array.isArray(displayValue)
+                        ? displayValue.map(escape).join(', ')
+                        : escape(displayValue);
                     return `<div style="font-size:12px;font-weight:600">${escape(formatKey(key))}: <span style="font-size:12px;font-weight:400">${value}</span></div>`;
                 })
                     .join('')
@@ -1445,7 +1481,7 @@ class Charts {
   />
   <span>${escape(target)}</span>
 </div>
-            <div style="font-size:12px;font-weight:600"">${formatKey(config?.activeMetric) || 'Value'}: <span style="font-size:12px;font-weight:400">${escape(value)}</span></div>
+            <div style="font-size:12px;font-weight:600"">${formatKey(config?.activeMetric ?? '') || 'Value'}: <span style="font-size:12px;font-weight:400">${escape(typeof value === 'number' ? this.formatTooltipValue(value, config.tooltipCompactValue) : value)}</span></div>
             ${tooltipRows}
           </div>
         `;
@@ -1457,7 +1493,7 @@ class Charts {
           border-radius: 8px;
           box-shadow: 0 4px 10px rgba(0,0,0,0.15);
         ">
-          ${params.name}: <b>${params.value}</b>
+          ${params.name}: <b>${typeof params.value === 'number' ? this.formatTooltipValue(params.value, config.tooltipCompactValue) : params.value}</b>
         </div>
       `;
     }
@@ -4481,6 +4517,7 @@ class SankeyChart {
         if (!this.chartInstance)
             return;
         this.chartInstance.off();
+        this.bindSankeyDragBounds();
         this.events.forEach((eventName) => {
             this.chartInstance.on(eventName, (params) => {
                 if (eventName === 'contextmenu' && params.event?.event) {
@@ -4493,6 +4530,40 @@ class SankeyChart {
             });
         });
     }
+    /**
+     * ECharts' Sankey drag action stores the node position without applying the
+     * series bounds. Clamp it after every drag so the complete node remains in
+     * the drawable Sankey area (including custom series left/right/top/bottom).
+     */
+    bindSankeyDragBounds() {
+        this.chartInstance.on('dragnode', (params) => {
+            const chartModel = this.chartInstance.getModel?.();
+            const series = chartModel?.getSeriesByIndex(params.seriesIndex ?? 0);
+            const node = series?.getData?.().getItemGraphicEl(params.dataIndex);
+            const bounds = series?.layoutInfo;
+            if (!node || !bounds)
+                return;
+            // Node shapes are local to ECharts' Sankey group. `layoutInfo.x/y` are
+            // applied to that parent group, so the node itself must be constrained
+            // against (0, 0), not against the page-relative layoutInfo coordinates.
+            const maxX = Math.max(0, bounds.width - node.shape.width);
+            const maxY = Math.max(0, bounds.height - node.shape.height);
+            const x = Math.min(Math.max(node.shape.x, 0), maxX);
+            const y = Math.min(Math.max(node.shape.y, 0), maxY);
+            if (x === node.shape.x && y === node.shape.y)
+                return;
+            this.chartInstance.dispatchAction({
+                type: 'dragNode',
+                seriesId: series.id,
+                dataIndex: params.dataIndex,
+                // ECharts normalizes Sankey node positions against the plot area, not
+                // the whole canvas. Using the canvas size here causes an offset when
+                // the series has left/right/top/bottom margins.
+                localX: x / bounds.width,
+                localY: y / bounds.height,
+            });
+        });
+    }
     /* ------------------ DESTROY ------------------ */
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
@@ -5219,6 +5290,7 @@ echarts.use([GaugeChart$1, GraphicComponent, TooltipComponent, TitleComponent, C
 const DEFAULT_GAUGE_CENTER = ['50%', '84%'];
 const DEFAULT_GAUGE_RADIUS = '140%';
 class GaugeChart {
+    chartService;
     config = {};
     theme;
     events = [];
@@ -5227,6 +5299,12 @@ class GaugeChart {
     chartInstance;
     chartResizeObserver;
     previousReactiveSignature = '';
+    // Keep direct construction backwards compatible for consumers that build chart
+    // options outside Angular's DI context. Angular still injects the root service
+    // when this class is created as a component.
+    constructor(chartService = new Charts()) {
+        this.chartService = chartService;
+    }
     ngOnChanges(changes) {
         if (changes['theme'] && this.chartInstance) {
             this.chartInstance.dispose();
@@ -5449,7 +5527,7 @@ class GaugeChart {
                             axisLine: {
                                 lineStyle: {
                                     width: 0,
-                                    color: [1, 'transparent'],
+                                    color: [[1, 'transparent']],
                                 },
                             },
                             pointer: {
@@ -5885,10 +5963,15 @@ class GaugeChart {
     }
     defaultTooltipFormatter(value) {
         const rows = Object.entries(this.config.tooltipFields ?? {})
-            .map(([key, fieldValue]) => `${key}: ${fieldValue ?? '-'}`)
+            .map(([key, fieldValue]) => `${key}: ${typeof fieldValue === 'number' && this.config.tooltipCompactValue
+            ? this.chartService.compactValueFormat(fieldValue)
+            : (fieldValue ?? '-')}`)
             .join('<br/>');
-        const valueRow = `${this.config.name ?? 'Value'}: ${this.formatNumber(value, this.config.style?.compactNumber !== false, this.config.style?.decimalPrecision ?? 1)}`;
-        return rows ? `${valueRow}<br/>${rows}` : valueRow;
+        const formattedValue = this.config.tooltipCompactValue
+            ? this.chartService.compactValueFormat(Number(this.formatNumber(value, false, this.config.style?.decimalPrecision ?? 1)))
+            : this.formatNumber(value, false, this.config.style?.decimalPrecision ?? 1);
+        const tooltipValueRow = `${this.config.name ?? 'Value'}: ${formattedValue}`;
+        return rows ? `${tooltipValueRow}<br/>${rows}` : tooltipValueRow;
     }
     resolveActiveColor(value, min, max) {
         const conditional = this.config.style?.conditionalFormatting;
@@ -6133,13 +6216,13 @@ class GaugeChart {
             this.chartInstance.dispose();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GaugeChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GaugeChart, deps: [{ token: Charts }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GaugeChart, isStandalone: true, selector: "lib-gauge-chart", inputs: { config: "config", theme: "theme", events: "events" }, outputs: { chartEvent: "chartEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n  echarts\n  [options]=\"chartOption\"\n  [theme]=\"theme\"\n  class=\"chart-container\"\n  (chartInit)=\"onChartInit($event)\"\n></div>\n", styles: [".chart-container{width:100%;height:100%}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GaugeChart, decorators: [{
             type: Component,
             args: [{ selector: 'lib-gauge-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], template: "<div\n  echarts\n  [options]=\"chartOption\"\n  [theme]=\"theme\"\n  class=\"chart-container\"\n  (chartInit)=\"onChartInit($event)\"\n></div>\n", styles: [".chart-container{width:100%;height:100%}\n"] }]
-        }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: Charts }], propDecorators: { config: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -6187,6 +6270,10 @@ class GanttChart {
     zoomWheelHandler;
     visibleRows = [];
     rowIndexMap = new Map();
+    constructor(chartService, cdr) {
+        this.chartService = chartService;
+        this.cdr = cdr;
+    }
     get deafultColors() {
         return this.chartService.defaultColors;
     }
@@ -6366,10 +6453,6 @@ class GanttChart {
         return (this.config?.customLegend?.position === 'left' ||
             this.config?.customLegend?.position === 'right');
     }
-    constructor(chartService, cdr) {
-        this.chartService = chartService;
-        this.cdr = cdr;
-    }
     /* ------------------ CHANGE HANDLING ------------------ */
     ngOnChanges(changes) {
         if (!this.config)
@@ -6770,12 +6853,12 @@ class GanttChart {
                     if (params.componentType === 'yAxis' &&
                         params.type === 'click' &&
                         params.targetType === 'axisLabel') {
-                        const groupId = params.value;
-                        const group = (this.config?.groups || []).find((group) => group.name === groupId);
+                        const groupName = params.value;
+                        const group = (this.config?.groups || []).find((group) => group.name === groupName);
                         if (!group) {
                             return;
                         }
-                        group.expanded = !group.expanded;
+                        group.expanded = !(group.expanded ?? true);
                         this.updateChart();
                     }
                     else {
@@ -6844,7 +6927,7 @@ class GanttChart {
             const deltaX = Number(nativeEvent?.deltaX ?? 0);
             const deltaY = Number(nativeEvent?.deltaY ?? -(event?.wheelDelta ?? 0));
             const isHorizontalGesture = !!nativeEvent?.shiftKey || Math.abs(deltaX) > Math.abs(deltaY);
-            const delta = isHorizontalGesture ? (deltaX || deltaY) : deltaY;
+            const delta = isHorizontalGesture ? deltaX || deltaY : deltaY;
             if (!Number.isFinite(delta) || delta === 0)
                 return;
             const moved = isHorizontalGesture
@@ -7015,16 +7098,15 @@ class GanttChart {
             for (const group of groups) {
                 rows.push({
                     type: 'group',
-                    id: group.id,
                     name: group.name,
-                    expanded: group.expanded,
+                    expanded: group.expanded ?? true,
                 });
-                if (group.expanded) {
+                if (group.expanded ?? true) {
                     for (const category of this.sortCategories(group.categories ?? [])) {
                         rows.push({
                             type: 'category',
                             name: category,
-                            groupId: group.id,
+                            groupName: group.name,
                         });
                     }
                 }
@@ -7063,7 +7145,11 @@ class GanttChart {
             else if (left.value === undefined || right.value === undefined) {
                 // Rows without a numeric value remain after valued rows and retain
                 // their input order relative to each other.
-                return left.value === right.value ? left.index - right.index : left.value === undefined ? 1 : -1;
+                return left.value === right.value
+                    ? left.index - right.index
+                    : left.value === undefined
+                        ? 1
+                        : -1;
             }
             else {
                 comparison = left.value - right.value;
@@ -7184,11 +7270,11 @@ class GanttChart {
         };
     }
     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 });
-    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$1, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-gantt-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent$1], 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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], theme: [{