cats-charts 0.1.1 → 0.1.2

package/fesm2022/cats-charts.mjs

@@ -475,6 +475,7 @@ class Charts {
     legendSelected = {};
     defaultColors = ['#22c55e', '#3b82f6', '#ef4444', '#6b7280'];
     defaultLegendColors = ['#3b82f6', '#FFC107', '#22c55e', '#ef4444'];
+    heatmapPivotColors = ['#dbeafe', '#93c5fd', '#3b82f6', '#1d4ed8', '#1e3a8a'];
     // buildGraphicLegend(total: number | null, config: any, chartInstance: any, chartType?: string) {
     //   const pillHeight = 28;
     //   const spacing = 14;
@@ -1236,6 +1237,44 @@ class Charts {
                 return date.toLocaleDateString('en-US', { day: '2-digit', month: 'short' });
         }
     }
+    formatHeatmapPivotDate(value, aggregation = 'day') {
+        const date = value instanceof Date ? value : new Date(value);
+        if (Number.isNaN(date.getTime()))
+            return String(value);
+        switch (aggregation) {
+            case 'year':
+                return String(date.getFullYear());
+            case 'quarter':
+                return `Q${Math.floor(date.getMonth() / 3) + 1} ${date.getFullYear()}`;
+            case 'month':
+                return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+            case 'week': {
+                const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+                const dayOfWeek = utcDate.getUTCDay() || 7;
+                utcDate.setUTCDate(utcDate.getUTCDate() + 4 - dayOfWeek);
+                const year = utcDate.getUTCFullYear();
+                const yearStart = new Date(Date.UTC(year, 0, 1));
+                const week = Math.ceil(((utcDate.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7);
+                return `W${week} ${year}`;
+            }
+            case 'hour':
+                return date.toLocaleDateString('en-US', {
+                    day: '2-digit',
+                    month: 'short',
+                    hour: '2-digit',
+                    hour12: false,
+                });
+            case 'minute':
+                return date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    hour12: false,
+                });
+            case 'day':
+            default:
+                return date.toLocaleDateString('en-US', { day: '2-digit', month: 'short' });
+        }
+    }
     getIsoWeek(date) {
         const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
         const dayOfWeek = utcDate.getUTCDay() || 7;
@@ -4937,6 +4976,719 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+echarts.use([
+    HeatmapChart,
+    GridComponent,
+    LegendComponent,
+    TitleComponent,
+    TooltipComponent,
+    VisualMapComponent,
+    CanvasRenderer,
+]);
+class HeatmapPivot {
+    chartService;
+    cdr;
+    chartContainer;
+    config = { xAxisData: [], yAxisData: [], series: [] };
+    theme;
+    events = [];
+    contextMenuOptions = [];
+    showContextMenu = false;
+    contextMenuClick = new EventEmitter();
+    chartEvent = new EventEmitter();
+    legendEvent = new EventEmitter();
+    chartOption = {};
+    chartInstance;
+    cardPosition = { x: 0, y: 0 };
+    openCard = false;
+    columnTotals = [];
+    xAxisState;
+    yAxisState;
+    yAxisLabelWidth;
+    totalLabelWidth;
+    normalizedSeriesData = [];
+    eventCleanup = [];
+    constructor(chartService, cdr) {
+        this.chartService = chartService;
+        this.cdr = cdr;
+    }
+    get deafultColors() {
+        return this.chartService.heatmapPivotColors;
+    }
+    get hasSideLegendWidth() {
+        return this.isSideLegend && !!this.config.customLegend?.maxWidth;
+    }
+    get legendShellMaxWidth() {
+        return this.isSideLegend ? (this.config.customLegend?.maxWidth ?? null) : null;
+    }
+    get isSideLegend() {
+        return (this.config.customLegend?.position === 'left' ||
+            this.config.customLegend?.position === 'right');
+    }
+    ngOnInit() {
+        this.buildOption();
+    }
+    ngOnChanges(changes) {
+        if (!this.config)
+            return;
+        this.buildOption();
+        if (changes['events'] || changes['showContextMenu']) {
+            this.bindEvents();
+        }
+        // NgxEchartsDirective recreates the chart when its theme input changes.
+    }
+    buildOption() {
+        const config = this.config;
+        this.xAxisState = this.buildAxisState('x');
+        this.yAxisState = this.buildAxisState('y');
+        const yAxisLabelWidth = this.resolveYAxisLabelWidth();
+        this.yAxisLabelWidth = yAxisLabelWidth;
+        this.totalLabelWidth = this.resolveTotalLabelWidth(yAxisLabelWidth);
+        this.columnTotals = this.xAxisState.values.map(() => 0);
+        const series = (config.series ?? []).map((item) => ({
+            ...item,
+            type: 'heatmap',
+            coordinateSystem: 'cartesian2d',
+            encode: { x: 0, y: 1, tooltip: [2] },
+            data: this.normalizeData(item.data ?? []),
+            itemStyle: {
+                borderColor: '#ffffff',
+                borderWidth: Math.max(config.cellGap ?? 6, 0),
+                borderRadius: Math.max(config.cellBorderRadius ?? 3, 0),
+                ...item['itemStyle'],
+            },
+            label: {
+                show: config.showLabel ?? true,
+                position: 'inside',
+                color: config.labelColor ?? '#252a31',
+                fontSize: 14,
+                formatter: config.labelFormatter ??
+                    ((params) => {
+                        const value = params.value?.[2];
+                        return typeof value === 'number' ? this.chartService.compactValueFormat(value) : '-';
+                    }),
+                ...item['label'],
+            },
+            emphasis: { disabled: true, ...item['emphasis'] },
+        }));
+        this.normalizedSeriesData = series.map((item) => item.data);
+        let min = Infinity;
+        let max = -Infinity;
+        for (const item of series) {
+            for (const dataItem of item.data) {
+                const point = this.pointValue(dataItem);
+                const value = point[2];
+                if (!Number.isFinite(value))
+                    continue;
+                min = Math.min(min, value);
+                max = Math.max(max, value);
+                const column = Number(point[0]);
+                if (this.columnTotals[column] !== undefined)
+                    this.columnTotals[column] += value;
+            }
+        }
+        this.chartOption = {
+            backgroundColor: config.backgroundColor ?? 'transparent',
+            color: config.colors ?? this.deafultColors,
+            title: [
+                {
+                    show: config.showTitle ?? !!config.title,
+                    text: config.title,
+                    left: config.titlePosition ?? 'center',
+                },
+                ...(config.showTotals !== false
+                    ? [
+                        {
+                            id: 'heatmap-pivot-total-label',
+                            text: config.totalLabel ?? 'Total',
+                            left: 8,
+                            bottom: 12,
+                            padding: 0,
+                            textStyle: {
+                                color: '#182230',
+                                fontFamily: 'Arial, sans-serif',
+                                fontSize: 14,
+                                fontWeight: 600,
+                                width: this.totalLabelWidth,
+                                overflow: 'truncate',
+                                ellipsis: '...',
+                            },
+                        },
+                    ]
+                    : []),
+            ],
+            tooltip: {
+                show: config.showTooltip ?? true,
+                trigger: 'item',
+                backgroundColor: '#ffffff',
+                borderWidth: 0,
+                padding: [10, 12],
+                confine: true,
+                textStyle: { color: '#434a51', fontFamily: 'Arial, sans-serif', fontSize: 12 },
+                borderRadius: 6,
+                shadowBlur: 16,
+                shadowColor: 'rgba(16,24,40,0.12)',
+                shadowOffsetY: 5,
+                formatter: (params) => config.tooltipFormatter
+                    ? config.tooltipFormatter(params, config)
+                    : this.formatTooltip(params),
+                ...config.tooltip,
+            },
+            legend: {
+                show: !config.hideLegend && !config.customLegend,
+                type: 'scroll',
+                top: (config.showTitle ?? !!config.title) ? 30 : 0,
+                icon: 'roundRect',
+                textStyle: { color: '#434a51', fontSize: 14 },
+                ...config.legend,
+                data: config.legend?.data ?? series.map((item) => item.name),
+                selected: { ...this.readLegendSelected(), ...config.legend?.selected },
+                selectedMode: config.legend?.selectedMode ??
+                    (config.customLegend?.selectionMode === 'exclusive' ? 'single' : true),
+            },
+            grid: [
+                {
+                    left: this.labelGridLeft(yAxisLabelWidth),
+                    right: 0,
+                    top: 0,
+                    bottom: config.showTotals !== false ? 41 : 0,
+                    ...config.grid,
+                },
+                ...(config.showTotals !== false
+                    ? [
+                        {
+                            left: 0,
+                            right: 0,
+                            bottom: 1,
+                            height: 40,
+                            containLabel: false,
+                        },
+                    ]
+                    : []),
+            ],
+            xAxis: [
+                {
+                    position: 'top',
+                    axisLine: { show: false },
+                    axisTick: { show: false },
+                    splitLine: { show: false },
+                    ...this.axisOptions('x'),
+                    axisLabel: {
+                        interval: 'auto',
+                        hideOverlap: true,
+                        margin: 14,
+                        color: '#434a51',
+                        fontFamily: 'Arial, sans-serif',
+                        fontSize: 14,
+                        formatter: this.xAxisState.type === 'time'
+                            ? (value) => this.formatAxisValue('x', value)
+                            : undefined,
+                        ...config.xAxis?.axisLabel,
+                    },
+                },
+                ...this.totalsAxisOptions(),
+            ],
+            yAxis: [
+                {
+                    inverse: true,
+                    axisLine: { show: false },
+                    axisTick: { show: false },
+                    splitLine: { show: false },
+                    ...this.axisOptions('y'),
+                    axisLabel: {
+                        interval: 0,
+                        margin: yAxisLabelWidth + 16,
+                        align: 'left',
+                        color: '#434a51',
+                        fontFamily: 'Arial, sans-serif',
+                        fontSize: 14,
+                        formatter: this.yAxisState.type === 'time'
+                            ? (value) => this.formatAxisValue('y', value)
+                            : undefined,
+                        ...config.yAxis?.axisLabel,
+                        width: yAxisLabelWidth,
+                        overflow: config.yAxis?.axisLabel?.overflow ?? 'truncate',
+                        ellipsis: config.yAxis?.axisLabel?.ellipsis ?? '...',
+                    },
+                },
+                ...(config.showTotals !== false
+                    ? [
+                        {
+                            gridIndex: 1,
+                            type: 'value',
+                            min: 0,
+                            max: 1,
+                            show: false,
+                        },
+                    ]
+                    : []),
+            ],
+            visualMap: this.buildVisualMaps(min, max),
+            series,
+        };
+    }
+    resolveYAxisLabelWidth() {
+        const style = this.config.yAxis?.axisLabel;
+        const chartWidth = this.chartContainer?.nativeElement.getBoundingClientRect().width
+            || (this.chartInstance && !this.chartInstance.isDisposed() ? this.chartInstance.getWidth() : 0)
+            || 360;
+        const defaultMaxWidth = Math.max(100, Math.min(240, Math.round(chartWidth * 0.22)));
+        const minWidth = Math.max(0, this.config.yAxisLabelMinWidth
+            ?? Math.min(50, this.config.yAxisLabelMaxWidth ?? defaultMaxWidth));
+        const maxWidth = Math.max(minWidth, this.config.yAxisLabelMaxWidth ?? defaultMaxWidth);
+        if (typeof style?.width === 'number' && Number.isFinite(style.width)) {
+            return Math.min(maxWidth, Math.max(minWidth, style.width));
+        }
+        const font = `${style?.fontWeight ?? 400} ${style?.fontSize ?? 14}px ${style?.fontFamily ?? 'Arial, sans-serif'}`;
+        let width = minWidth;
+        this.yAxisState.values.forEach((_value, index) => {
+            width = Math.max(width, echarts.format.getTextRect(this.formatAxisValue('y', index), font).width);
+        });
+        if (this.config.showTotals !== false) {
+            width = Math.max(width, echarts.format.getTextRect(this.config.totalLabel ?? 'Total', '600 14px Arial, sans-serif').width);
+        }
+        return Math.min(maxWidth, width);
+    }
+    labelGridLeft(width) {
+        const yAxisHidden = this.config.yAxis?.['show'] === false || this.config.yAxis?.axisLabel?.show === false;
+        return yAxisHidden && this.config.showTotals === false ? 0 : width + 16;
+    }
+    resolveTotalLabelWidth(labelWidth) {
+        const configuredLeft = this.config.grid?.left;
+        const chartWidth = this.chartContainer?.nativeElement.getBoundingClientRect().width
+            || (this.chartInstance && !this.chartInstance.isDisposed() ? this.chartInstance.getWidth() : 0)
+            || 360;
+        const defaultLeft = this.labelGridLeft(labelWidth);
+        const left = configuredLeft === undefined ? defaultLeft
+            : typeof configuredLeft === 'number' ? configuredLeft
+                : configuredLeft.endsWith('%') ? parseFloat(configuredLeft) / 100 * chartWidth
+                    : parseFloat(configuredLeft);
+        // Reserve eight pixels on each side of the heading before the total values.
+        return Math.max(0, Math.min(labelWidth, (Number.isFinite(left) ? left : defaultLeft) - 16));
+    }
+    buildVisualMaps(min, max) {
+        const config = this.config;
+        const base = {
+            show: false,
+            min: config.min ?? (Number.isFinite(min) ? min : 0),
+            max: config.max ?? (Number.isFinite(max) ? max : 100),
+            dimension: 2,
+            calculable: true,
+            orient: 'horizontal',
+            left: 'center',
+            bottom: 0,
+            inRange: { color: config.colors ?? this.deafultColors },
+        };
+        const rules = this.visualMapOptions();
+        if (rules['type'] !== 'piecewise' && !rules['pieces'] && !rules['categories']) {
+            return { ...base, ...rules };
+        }
+        return [
+            { ...base, type: 'continuous', show: false },
+            {
+                ...base,
+                ...rules,
+                type: 'piecewise',
+                inRange: {
+                    colorAlpha: 1,
+                    ...base.inRange,
+                    ...(rules['inRange'] && typeof rules['inRange'] === 'object' ? rules['inRange'] : {}),
+                },
+                // An empty mapping preserves the color assigned by the continuous map.
+                outOfRange: rules['outOfRange'] ?? {},
+            },
+        ];
+    }
+    visualMapOptions() {
+        const config = this.config.visualMap;
+        if (!config?.pieces)
+            return config ?? {};
+        return {
+            ...config,
+            type: config.type ?? 'piecewise',
+            pieces: config.pieces.flatMap((piece) => {
+                const { eq, neq, ne, opacity, ...options } = piece;
+                const native = {
+                    ...options,
+                    ...(opacity !== undefined ? {
+                        colorAlpha: Math.min(100, Math.max(0, Number.isFinite(opacity) ? opacity : 100)) / 100,
+                    } : {}),
+                };
+                if (eq !== undefined)
+                    return [{ ...native, value: eq }];
+                const excluded = neq ?? ne;
+                if (excluded === undefined)
+                    return [native];
+                if (native.value !== undefined)
+                    return native.value === excluded ? [] : [native];
+                const { gt, gte, min, lt, lte, max, ...style } = native;
+                const lower = Math.max(gt ?? -Infinity, gte ?? -Infinity, min ?? -Infinity);
+                const upper = Math.min(lt ?? Infinity, lte ?? Infinity, max ?? Infinity);
+                const lowerOpen = gt === lower;
+                const upperOpen = lt === upper;
+                const range = (start, end, startOpen, endOpen) => {
+                    if (start > end || (start === end && (startOpen || endOpen)))
+                        return [];
+                    return [
+                        {
+                            ...style,
+                            ...(Number.isFinite(start)
+                                ? startOpen && start === excluded
+                                    ? // ECharts joins touching pieces; use the next representable number
+                                        // so the excluded value cannot be reintroduced at their boundary.
+                                        { gte: this.nextNumericValue(start) }
+                                    : { [startOpen ? 'gt' : 'gte']: start }
+                                : {}),
+                            ...(Number.isFinite(end) ? { [endOpen ? 'lt' : 'lte']: end } : {}),
+                        },
+                    ];
+                };
+                return [
+                    ...range(lower, Math.min(upper, excluded), lowerOpen, excluded <= upper || upperOpen),
+                    ...range(Math.max(lower, excluded), upper, excluded >= lower || lowerOpen, upperOpen),
+                ];
+            }),
+        };
+    }
+    nextNumericValue(value) {
+        if (value === 0)
+            return Number.MIN_VALUE;
+        const buffer = new DataView(new ArrayBuffer(8));
+        buffer.setFloat64(0, value);
+        buffer.setBigUint64(0, buffer.getBigUint64(0) + (value > 0 ? 1n : -1n));
+        return buffer.getFloat64(0);
+    }
+    totalsAxisOptions() {
+        if (this.config.showTotals === false)
+            return [];
+        const options = this.axisOptions('x');
+        const axisLine = { show: true, onZero: false, lineStyle: { color: '#e4e7ec', width: 1 } };
+        const borderAxis = {
+            gridIndex: 1,
+            z: 10,
+            type: 'category',
+            data: [''],
+            boundaryGap: true,
+            axisLine,
+            axisLabel: { show: false },
+            axisTick: { show: false },
+            splitLine: { show: false },
+            axisPointer: { show: false },
+        };
+        const base = {
+            ...options,
+            show: true,
+            position: 'bottom',
+            axisLine: { show: false },
+            axisTick: { show: false },
+            splitLine: { show: false },
+            axisPointer: { show: false },
+        };
+        return [
+            {
+                ...base,
+                axisLabel: {
+                    show: true,
+                    interval: 0,
+                    margin: 13,
+                    color: '#182230',
+                    fontFamily: 'Arial, sans-serif',
+                    fontSize: 14,
+                    fontWeight: 600,
+                    formatter: (value) => {
+                        const index = this.xAxisState.values.findIndex((bucket) => String(bucket) === value);
+                        const total = this.columnTotals[index] ?? 0;
+                        return this.config.totalFormatter ? this.config.totalFormatter(total) : String(total);
+                    },
+                },
+            },
+            { ...borderAxis, position: 'top' },
+            { ...borderAxis, position: 'bottom' },
+        ];
+    }
+    pointValue(point) {
+        return Array.isArray(point) ? point : point.value;
+    }
+    normalizeData(data) {
+        return data.flatMap((point) => {
+            const [x, y, value] = this.pointValue(point);
+            const normalized = [
+                this.normalizeCoordinate('x', x),
+                this.normalizeCoordinate('y', y),
+                value,
+            ];
+            if (!normalized.every(Number.isFinite) || normalized[0] < 0 || normalized[1] < 0)
+                return [];
+            return [Array.isArray(point) ? normalized : { ...point, value: normalized }];
+        });
+    }
+    buildAxisState(axis) {
+        const options = axis === 'x' ? this.config.xAxis : this.config.yAxis;
+        const axisData = axis === 'x' ? this.config.xAxisData : this.config.yAxisData;
+        const type = options?.type ?? 'category';
+        const coordinates = (this.config.series ?? []).flatMap((series) => (series.data ?? []).map((point) => this.pointValue(point)[axis === 'x' ? 0 : 1]));
+        const resolvedCoordinates = coordinates.map((value) => typeof value === 'number' &&
+            Number.isInteger(value) &&
+            value >= 0 &&
+            value < (axisData?.length ?? 0)
+            ? axisData[value]
+            : value);
+        const axisValues = type === 'time'
+            ? [...(axisData ?? []), ...resolvedCoordinates]
+            : axisData?.length
+                ? axisData
+                : coordinates;
+        const values = [
+            ...new Set(axisValues.map((value) => (type === 'time' ? this.timestamp(value) : String(value)))),
+        ].filter((value) => type !== 'time' || Number.isFinite(value));
+        if (type === 'time')
+            values.sort((a, b) => a - b);
+        return { type, values };
+    }
+    timestamp(value) {
+        return value instanceof Date ? value.getTime() : new Date(value).getTime();
+    }
+    normalizeCoordinate(axis, value) {
+        const state = axis === 'x' ? this.xAxisState : this.yAxisState;
+        const axisData = axis === 'x' ? this.config.xAxisData : this.config.yAxisData;
+        const indexed = typeof value === 'number' &&
+            Number.isInteger(value) &&
+            value >= 0 &&
+            value < (axisData?.length ?? 0);
+        const resolved = indexed ? axisData[value] : value;
+        return state.values.indexOf(state.type === 'time' ? this.timestamp(resolved) : String(resolved));
+    }
+    axisOptions(axis) {
+        const state = axis === 'x' ? this.xAxisState : this.yAxisState;
+        const options = (axis === 'x' ? this.config.xAxis : this.config.yAxis) ?? {};
+        const { type, minInterval, min, max, ...styles } = options;
+        let bucketMin = min;
+        let bucketMax = max;
+        if (state.type === 'time') {
+            if (min !== undefined) {
+                const timestamp = this.timestamp(min);
+                bucketMin =
+                    min === 'dataMin' ? 0 : state.values.findIndex((value) => Number(value) >= timestamp);
+                if (bucketMin === -1)
+                    bucketMin = state.values.length;
+            }
+            if (max !== undefined) {
+                const timestamp = this.timestamp(max);
+                bucketMax =
+                    max === 'dataMax'
+                        ? state.values.length - 1
+                        : state.values.reduce((last, value, index) => (Number(value) <= timestamp ? index : last), -1);
+            }
+        }
+        // Native Cartesian heatmaps require category axes. Time values remain sorted
+        // buckets and use the pivot date formatter for their displayed labels.
+        return {
+            ...styles,
+            type: 'category',
+            boundaryGap: true,
+            data: state.values.map(String),
+            min: bucketMin,
+            max: bucketMax,
+        };
+    }
+    formatAxisValue(axis, value) {
+        const state = axis === 'x' ? this.xAxisState : this.yAxisState;
+        const index = typeof value === 'number'
+            ? value
+            : state.values.findIndex((bucket) => String(bucket) === value);
+        const resolved = state.values[index] ?? value;
+        if (state.type === 'time') {
+            return this.chartService.formatHeatmapPivotDate(resolved, axis === 'x' ? this.config.XAxisAggregation : this.config.YAxisAggregation);
+        }
+        return String(resolved);
+    }
+    formatTooltip(params) {
+        const [x, y] = params.value ?? [];
+        const rows = [
+            ['Row Dimension', this.formatAxisValue('x', x)],
+            ['Column Dimension', this.formatAxisValue('y', y)],
+        ];
+        const selected = this.readLegendSelected();
+        this.normalizedSeriesData.forEach((data, index) => {
+            const series = this.config.series[index];
+            if (selected[series.name] === false)
+                return;
+            const match = data.find((point) => {
+                const value = this.pointValue(point);
+                return value[0] === x && value[1] === y;
+            });
+            if (match) {
+                rows.push([
+                    series.name,
+                    String(this.chartService.formatTooltipValue(this.pointValue(match)[2], this.config.tooltipCompactValue)),
+                ]);
+            }
+        });
+        const extra = params.data?.[this.config.extraTooltipKey ?? 'tooltip'];
+        if (extra && typeof extra === 'object' && !Array.isArray(extra)) {
+            for (const [key, value] of Object.entries(extra)) {
+                rows.push([
+                    key,
+                    typeof value === 'number'
+                        ? String(this.chartService.formatTooltipValue(value, this.config.tooltipCompactValue))
+                        : String(value ?? '-'),
+                ]);
+            }
+        }
+        return `<div style="display:grid;grid-template-columns:112px 8px minmax(170px,1fr);row-gap:5px;line-height:16px">${rows
+            .map(([label, content]) => `<span style="font-weight:600">${echarts.format.encodeHTML(String(label))}</span><span>:</span><span>${echarts.format.encodeHTML(String(content ?? '-'))}</span>`)
+            .join('')}</div>`;
+    }
+    onChartInit(chart) {
+        this.unbindEvents();
+        this.chartInstance = chart;
+        // Apply the width after ngx-echarts has installed the initial chart options.
+        queueMicrotask(() => {
+            if (this.chartInstance === chart)
+                this.refreshLabelWidth();
+        });
+        this.bindEvents();
+        this.cdr.markForCheck();
+    }
+    refreshLabelWidth() {
+        const chart = this.chartInstance;
+        if (!chart || chart.isDisposed() || !this.yAxisState)
+            return;
+        const width = this.resolveYAxisLabelWidth();
+        const totalWidth = this.resolveTotalLabelWidth(width);
+        if (width === this.yAxisLabelWidth && totalWidth === this.totalLabelWidth)
+            return;
+        const update = {
+            yAxis: [{ axisLabel: {
+                        width,
+                        margin: this.config.yAxis?.axisLabel?.margin ?? width + 16,
+                    } }],
+        };
+        if (this.config.showTotals !== false) {
+            update['title'] = [{ id: 'heatmap-pivot-total-label', textStyle: { width: totalWidth } }];
+        }
+        if (this.config.grid?.left === undefined) {
+            update['grid'] = [{
+                    left: this.labelGridLeft(width),
+                }];
+        }
+        chart.setOption(update, { lazyUpdate: true, silent: true });
+        this.yAxisLabelWidth = width;
+        this.totalLabelWidth = totalWidth;
+    }
+    bindEvents() {
+        this.unbindEvents();
+        const chart = this.chartInstance;
+        if (!chart || chart.isDisposed())
+            return;
+        const eventNames = new Set(this.events);
+        if (this.showContextMenu)
+            eventNames.add('contextmenu');
+        for (const eventName of eventNames) {
+            const handler = (params) => {
+                if (eventName === 'contextmenu') {
+                    this.openContextMenu(params?.event?.event);
+                }
+                this.chartEvent.emit({ type: eventName, data: params });
+            };
+            chart.on(eventName, handler);
+            this.eventCleanup.push(() => {
+                if (!chart.isDisposed())
+                    chart.off(eventName, handler);
+            });
+            if (eventName === 'click' || eventName === 'contextmenu') {
+                const zr = chart.getZr();
+                const backgroundHandler = (event) => {
+                    if (event.target)
+                        return;
+                    if (eventName === 'contextmenu') {
+                        this.openContextMenu(event.event);
+                        this.chartEvent.emit({
+                            type: 'contextmenu',
+                            data: { ...event, isZrEvent: true },
+                        });
+                    }
+                    else {
+                        this.chartEvent.emit({ type: 'blur', data: { ...event, type: 'blur' } });
+                    }
+                };
+                zr.on(eventName, backgroundHandler);
+                this.eventCleanup.push(() => {
+                    if (!chart.isDisposed())
+                        zr.off(eventName, backgroundHandler);
+                });
+            }
+        }
+    }
+    openContextMenu(event) {
+        if (!event || !this.chartInstance || this.chartInstance.isDisposed())
+            return;
+        event.preventDefault();
+        const rect = this.chartInstance.getDom().getBoundingClientRect();
+        this.cardPosition = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+        this.openCard = this.showContextMenu || this.contextMenuOptions.length > 0;
+        this.cdr.markForCheck();
+    }
+    onMenuClick(item) {
+        this.contextMenuClick.emit(item);
+        this.closeCard();
+    }
+    closeCard() {
+        this.openCard = false;
+    }
+    onLegendEvent(event) {
+        this.legendEvent.emit(event);
+        this.chartEvent.emit({ type: `legend:${event.type}`, data: event });
+    }
+    readLegendSelected() {
+        if (!this.chartInstance || this.chartInstance.isDisposed())
+            return {};
+        const option = this.chartInstance.getOption();
+        return { ...option.legend?.[0]?.selected };
+    }
+    unbindEvents() {
+        this.eventCleanup.forEach((cleanup) => cleanup());
+        this.eventCleanup = [];
+    }
+    ngOnDestroy() {
+        this.unbindEvents();
+        if (this.chartInstance && !this.chartInstance.isDisposed()) {
+            this.chartInstance.dispose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HeatmapPivot, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HeatmapPivot, isStandalone: true, selector: "lib-heatmap-pivot", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "window:resize": "refreshLabelWidth()", "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"heatmap-pivot-chart-shell\"\n  [class.heatmap-pivot-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n  [class.heatmap-pivot-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n  [class.heatmap-pivot-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n  @if (\n    config.customLegend && !config.hideLegend &&\n    config.customLegend.position !== 'bottom' &&\n    config.customLegend.position !== 'right'\n  ) {\n    <lib-chart-legend\n      class=\"heatmap-pivot-chart-shell__legend\"\n      [class.heatmap-pivot-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--heatmap-pivot-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.customLegend && !config.hideLegend &&\n    (config.customLegend.position === 'bottom' || config.customLegend.position === 'right')\n  ) {\n    <lib-chart-legend\n      class=\"heatmap-pivot-chart-shell__legend\"\n      [class.heatmap-pivot-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--heatmap-pivot-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: [":host{display:block;height:100%;width:100%;font-family:Arial,sans-serif}.heatmap-pivot-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%;padding:10px 0 4px 10px;box-sizing:border-box;background:#fff}.heatmap-pivot-chart-shell--legend-left,.heatmap-pivot-chart-shell--legend-right{flex-direction:row}.heatmap-pivot-chart-shell--legend-bottom{flex-direction:column}.heatmap-pivot-chart-shell__legend{flex:0 0 auto;min-width:0}.heatmap-pivot-chart-shell--legend-left .heatmap-pivot-chart-shell__legend,.heatmap-pivot-chart-shell--legend-right .heatmap-pivot-chart-shell__legend{height:100%;max-width:min(var(--heatmap-pivot-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){.heatmap-pivot-chart-shell,.heatmap-pivot-chart-shell--legend-left,.heatmap-pivot-chart-shell--legend-right{flex-direction:column}.heatmap-pivot-chart-shell--legend-left .heatmap-pivot-chart-shell__legend,.heatmap-pivot-chart-shell--legend-right .heatmap-pivot-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: 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HeatmapPivot, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-heatmap-pivot', standalone: true, imports: [NgxEchartsDirective, ChartLegendComponent, RightClickCard], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"heatmap-pivot-chart-shell\"\n  [class.heatmap-pivot-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n  [class.heatmap-pivot-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n  [class.heatmap-pivot-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n  @if (\n    config.customLegend && !config.hideLegend &&\n    config.customLegend.position !== 'bottom' &&\n    config.customLegend.position !== 'right'\n  ) {\n    <lib-chart-legend\n      class=\"heatmap-pivot-chart-shell__legend\"\n      [class.heatmap-pivot-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--heatmap-pivot-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.customLegend && !config.hideLegend &&\n    (config.customLegend.position === 'bottom' || config.customLegend.position === 'right')\n  ) {\n    <lib-chart-legend\n      class=\"heatmap-pivot-chart-shell__legend\"\n      [class.heatmap-pivot-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--heatmap-pivot-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: [":host{display:block;height:100%;width:100%;font-family:Arial,sans-serif}.heatmap-pivot-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%;padding:10px 0 4px 10px;box-sizing:border-box;background:#fff}.heatmap-pivot-chart-shell--legend-left,.heatmap-pivot-chart-shell--legend-right{flex-direction:row}.heatmap-pivot-chart-shell--legend-bottom{flex-direction:column}.heatmap-pivot-chart-shell__legend{flex:0 0 auto;min-width:0}.heatmap-pivot-chart-shell--legend-left .heatmap-pivot-chart-shell__legend,.heatmap-pivot-chart-shell--legend-right .heatmap-pivot-chart-shell__legend{height:100%;max-width:min(var(--heatmap-pivot-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){.heatmap-pivot-chart-shell,.heatmap-pivot-chart-shell--legend-left,.heatmap-pivot-chart-shell--legend-right{flex-direction:column}.heatmap-pivot-chart-shell--legend-left .heatmap-pivot-chart-shell__legend,.heatmap-pivot-chart-shell--legend-right .heatmap-pivot-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { chartContainer: [{
+                type: ViewChild,
+                args: ['chartContainer']
+            }], config: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], events: [{
+                type: Input
+            }], contextMenuOptions: [{
+                type: Input
+            }], showContextMenu: [{
+                type: Input
+            }], contextMenuClick: [{
+                type: Output
+            }], chartEvent: [{
+                type: Output
+            }], legendEvent: [{
+                type: Output
+            }], refreshLabelWidth: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], closeCard: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
 echarts.use([
     ScatterChart,
     GridComponent,
@@ -7560,5 +8312,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BarChart, ChartLegendAdapter, ChartLegendComponent, Charts, CustomChartComponent, DoughnutChart, GanttChart, GaugeChart, Heatmap, LinesChart, PieChart, RightClickCard, SankeyChart, ScatterChartComp, StackedAreaChart, StatusTimelineComponent };
+export { BarChart, ChartLegendAdapter, ChartLegendComponent, Charts, CustomChartComponent, DoughnutChart, GanttChart, GaugeChart, Heatmap, HeatmapPivot, LinesChart, PieChart, RightClickCard, SankeyChart, ScatterChartComp, StackedAreaChart, StatusTimelineComponent };
 //# sourceMappingURL=cats-charts.mjs.map