@acorex/charts 21.0.1-next.9 → 21.0.1-next.90

package/fesm2022/acorex-charts-heatmap-chart.mjs

@@ -0,0 +1,393 @@
+import { AXChartComponent, resolveCssColorInContext, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
+import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
+import { AXPlatform } from '@acorex/core/platform';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { map } from 'rxjs';
+
+const AXHeatmapChartDefaultConfig = {
+    margin: { top: 30, right: 30, bottom: 60, left: 60 },
+    color: 'rgb(var(--ax-sys-color-primary-500))',
+    cellPadding: 0.05,
+    borderRadius: 2,
+    showXAxis: true,
+    showYAxis: true,
+    rotateXAxisLabels: 'auto',
+    showTooltip: true,
+    animationDuration: 800,
+    animationEasing: 'cubic-out',
+    messages: {
+        noData: 'No data available',
+        noDataHelp: 'Provide X, Y, and Value data to render the heatmap',
+        noDataIcon: 'fa-light fa-grid-2',
+    },
+};
+const AX_HEATMAP_CHART_CONFIG = new InjectionToken('AX_HEATMAP_CHART_CONFIG', {
+    providedIn: 'root',
+    factory: () => AXHeatmapChartDefaultConfig,
+});
+
+class AXHeatmapChartComponent extends AXChartComponent {
+    /** Fixed `viewBox` side; chart scales with CSS `width` / `height` on the host container. */
+    static VIEW_BOX_SIZE = 400;
+    // X-axis layout (aligned with bar-chart heuristics)
+    CHAR_WIDTH_RATIO = 0.65;
+    ROTATION_TOLERANCE_SMALL_DATASET = 1.4;
+    SMALL_DATASET_THRESHOLD = 6;
+    MANY_ITEMS_THRESHOLD = 20;
+    VERY_MANY_ITEMS_THRESHOLD = 50;
+    MAX_LABEL_LENGTH = 20;
+    TICK_AREA_PADDING = 6;
+    X_AXIS_TITLE_GAP = 10;
+    MIN_FONT_SIZE_X_AXIS = 8;
+    MAX_FONT_SIZE_X_AXIS = 14;
+    // Inject config at the top level
+    defaultConfig = inject(AX_HEATMAP_CHART_CONFIG);
+    // Inputs
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    // Outputs
+    /** Emitted when a heatmap cell is clicked */
+    cellClick = output();
+    // View Child
+    containerRef = viewChild.required('chartContainer');
+    // Internal State
+    svg;
+    d3;
+    _d3Ready = signal(false, ...(ngDevMode ? [{ debugName: "_d3Ready" }] : []));
+    platformService = inject(AXPlatform);
+    isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
+    directionSub;
+    // Tooltip State
+    tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "tooltipVisible" }] : []));
+    tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
+    tooltipData = signal({ title: '', value: '' }, ...(ngDevMode ? [{ debugName: "tooltipData" }] : []));
+    _tooltipRafId = null;
+    // Computed options (referencing the already injected defaultConfig)
+    effectiveOptions = computed(() => ({
+        ...this.defaultConfig,
+        ...this.options(),
+    }), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    constructor() {
+        super();
+        afterNextRender(() => {
+            this.init();
+            this.directionSub = this.platformService.directionChange.pipe(map((i) => i.data === 'rtl')).subscribe((isRtl) => {
+                this.isRtl.set(isRtl);
+                if (this._d3Ready()) {
+                    this.renderChart();
+                }
+            });
+        });
+        // Reactive render when data, options, or D3 readiness change
+        effect(() => {
+            this.data();
+            this.effectiveOptions();
+            if (this._d3Ready()) {
+                this.renderChart();
+            }
+        });
+    }
+    async init() {
+        try {
+            this.d3 = await import('d3');
+            this._d3Ready.set(true);
+        }
+        catch (err) {
+            console.error('Heatmap: Initialization failed', err);
+        }
+    }
+    updateChart() {
+        this.renderChart();
+    }
+    renderChart() {
+        const container = this.containerRef().nativeElement;
+        const data = this.data() || [];
+        // Clear SVG if data is empty
+        if (data.length === 0) {
+            if (this.svg)
+                this.svg.remove();
+            this.svg = null;
+            return;
+        }
+        const options = this.effectiveOptions();
+        const width = AXHeatmapChartComponent.VIEW_BOX_SIZE;
+        const height = AXHeatmapChartComponent.VIEW_BOX_SIZE;
+        const isRtl = this.isRtl();
+        const baseMargin = options.margin || { top: 20, right: 20, bottom: 40, left: 40 };
+        // When rendering RTL, the Y axis is on the right; swap side margins so tick labels
+        // have the same breathing room they get on the left in LTR.
+        let margin = isRtl
+            ? { top: baseMargin.top, right: baseMargin.left, bottom: baseMargin.bottom, left: baseMargin.right }
+            : { ...baseMargin };
+        const xKeys = Array.from(new Set(data.map((d) => d.x.toString())));
+        const yKeys = Array.from(new Set(data.map((d) => d.y.toString())));
+        let innerWidth = width - margin.left - margin.right;
+        const cellPad = options.cellPadding ?? 0;
+        const xScaleProbe = this.d3
+            .scaleBand()
+            .domain(xKeys)
+            .range(isRtl ? [innerWidth, 0] : [0, innerWidth])
+            .padding(cellPad);
+        const xTickFontSize = this.getHeatmapXTickFontSize(innerWidth, xKeys.length);
+        const { tickXKeys, formatXTick } = this.getHeatmapXTickPlan(xKeys);
+        const longestXLabel = xKeys.reduce((acc, k) => {
+            const t = formatXTick(k);
+            return t.length > acc.length ? t : acc;
+        }, '');
+        const estimatedLabelWidth = longestXLabel.length * xTickFontSize * this.CHAR_WIDTH_RATIO;
+        const step = xScaleProbe.step();
+        const rotateX = this.shouldRotateHeatmapXLabels(options.rotateXAxisLabels, estimatedLabelWidth, step, xKeys.length);
+        const tickAreaHeight = rotateX
+            ? estimatedLabelWidth * Math.SQRT1_2 + xTickFontSize * Math.SQRT1_2 + this.TICK_AREA_PADDING
+            : xTickFontSize + this.TICK_AREA_PADDING + 2;
+        const xAxisTitleReserve = options.xAxisLabel?.trim() ? this.X_AXIS_TITLE_GAP + 16 : 0;
+        margin = { ...margin, bottom: Math.max(margin.bottom, tickAreaHeight + xAxisTitleReserve) };
+        innerWidth = width - margin.left - margin.right;
+        const innerHeight = Math.max(1, height - margin.top - margin.bottom);
+        // Create/Select SVG root
+        if (!this.svg) {
+            this.svg = this.d3
+                .select(container)
+                .append('svg')
+                .attr('width', '100%')
+                .attr('height', '100%')
+                .attr('preserveAspectRatio', 'xMidYMid meet')
+                .style('display', 'block');
+            this.svg.append('g').attr('class', 'chart-group');
+        }
+        this.svg.attr('viewBox', `0 0 ${width} ${height}`);
+        const g = this.svg.select('.chart-group').attr('transform', `translate(${margin.left},${margin.top})`);
+        // --- Scales ---
+        const xScale = this.d3
+            .scaleBand()
+            .domain(xKeys)
+            .range(isRtl ? [innerWidth, 0] : [0, innerWidth])
+            .padding(cellPad);
+        const yScale = this.d3.scaleBand().domain(yKeys).range([innerHeight, 0]).padding(cellPad);
+        const valueExtent = this.d3.extent(data, (d) => d.value);
+        const minValue = Number.isFinite(valueExtent[0]) ? valueExtent[0] : 0;
+        const maxValue = Number.isFinite(valueExtent[1]) ? valueExtent[1] : minValue + 1;
+        const palette = options.colors?.filter(Boolean) ?? [];
+        const baseColor = options.color ?? 'rgb(99, 102, 241)';
+        const rangeMin = options.valueRange?.min ?? minValue;
+        const rangeMax = options.valueRange?.max ?? maxValue;
+        const resolvedColorCache = new Map();
+        const resolvePaletteColor = (c) => {
+            const hit = resolvedColorCache.get(c);
+            if (hit !== undefined)
+                return hit;
+            const out = resolveCssColorInContext(container, c);
+            resolvedColorCache.set(c, out);
+            return out;
+        };
+        const resolvedBase = resolvePaletteColor(baseColor);
+        const getCellColor = (d) => {
+            // If a palette is provided, choose a stable "random" color per cell.
+            if (palette.length > 0) {
+                const key = `${d.x}-${d.y}`;
+                const idx = this.hashStringToUint32(key) % palette.length;
+                return resolvePaletteColor(palette[idx] ?? baseColor);
+            }
+            const span = rangeMax - rangeMin;
+            const t = span === 0 ? 1 : (d.value - rangeMin) / span;
+            const clamped = Math.max(0, Math.min(1, t));
+            return this.applyIntensityToResolvedRgb(resolvedBase, clamped);
+        };
+        // --- Axes ---
+        const xAxisBuilder = this.d3
+            .axisBottom(xScale)
+            .tickSize(0)
+            .tickFormat((d) => formatXTick(String(d)));
+        if (tickXKeys.length < xKeys.length) {
+            xAxisBuilder.tickValues(tickXKeys);
+        }
+        this.drawAxis(g, 'x-axis', xAxisBuilder, 0, innerHeight, options.showXAxis, isRtl);
+        g.select('.x-axis').attr('direction', 'ltr');
+        this.styleHeatmapXAxisTicks(g, xTickFontSize, rotateX);
+        if (isRtl) {
+            this.drawAxis(g, 'y-axis', this.d3.axisRight(yScale).tickSize(0), innerWidth, 0, options.showYAxis, isRtl);
+        }
+        else {
+            this.drawAxis(g, 'y-axis', this.d3.axisLeft(yScale).tickSize(0), 0, 0, options.showYAxis, isRtl);
+        }
+        this.drawAxisLabels(g, innerWidth, innerHeight, options, isRtl, tickAreaHeight);
+        // --- Cells with Data Join ---
+        const easing = getEasingFunction(this.d3, options.animationEasing);
+        g.selectAll('.cell')
+            .data(data, (d) => `${d.x}-${d.y}`)
+            .join((enter) => enter.append('rect').attr('class', 'cell').attr('opacity', 0).attr('fill', resolvedBase), (update) => update, (exit) => exit.transition().duration(200).attr('opacity', 0).remove())
+            .on('mouseenter', (event, d) => this.showTooltip(event, d, getCellColor(d)))
+            .on('mousemove', (event) => this.updateTooltipPos(event))
+            .on('click', (_event, d) => this.cellClick.emit(d))
+            .on('mouseleave', () => this.hideTooltip())
+            .transition()
+            .duration(options.animationDuration)
+            .ease(easing)
+            .attr('x', (d) => xScale(d.x.toString()))
+            .attr('y', (d) => yScale(d.y.toString()))
+            .attr('width', xScale.bandwidth())
+            .attr('height', yScale.bandwidth())
+            .attr('rx', options.borderRadius)
+            .attr('ry', options.borderRadius)
+            .attr('opacity', 1)
+            .style('fill', (d) => getCellColor(d));
+    }
+    hashStringToUint32(input) {
+        // Simple, fast, deterministic hash (djb2 variant)
+        let hash = 5381;
+        for (let i = 0; i < input.length; i++) {
+            hash = (hash * 33) ^ input.charCodeAt(i);
+        }
+        return hash >>> 0;
+    }
+    /** `resolvedRgb` must be a computed `rgb()` / `rgba()` string (e.g. from {@link resolveCssColorInContext}). */
+    applyIntensityToResolvedRgb(resolvedRgb, t) {
+        const clamped = Math.max(0, Math.min(1, t));
+        const parsed = this.d3.color(resolvedRgb);
+        if (!parsed)
+            return resolvedRgb;
+        const rgb = this.d3.rgb(parsed);
+        const minOpacity = 0.12;
+        const opacity = minOpacity + clamped * (1 - minOpacity);
+        return `rgba(${Math.round(rgb.r)},${Math.round(rgb.g)},${Math.round(rgb.b)},${opacity})`;
+    }
+    drawAxis(g, className, axisFn, x, y, visible = true, isRtl = false) {
+        let axisG = g.select(`.${className}`);
+        if (axisG.empty())
+            axisG = g.append('g').attr('class', className);
+        axisG
+            .attr('transform', `translate(${x},${y})`)
+            .style('display', visible ? 'block' : 'none')
+            .call(axisFn)
+            .call((g) => g.select('.domain').remove());
+        // Ensure tick labels don't overlap the plot in RTL.
+        // `text-anchor` is logical (depends on `direction`), so we set both explicitly.
+        axisG.attr('direction', isRtl ? 'rtl' : 'ltr');
+        if (className === 'y-axis') {
+            axisG.selectAll('.tick text').attr('text-anchor', 'end');
+        }
+    }
+    showTooltip(event, item, color) {
+        if (!this.effectiveOptions().showTooltip)
+            return;
+        this.tooltipData.set({
+            title: `${item.x} / ${item.y}`,
+            value: item.label || item.value.toLocaleString(),
+            color: color,
+        });
+        this.tooltipVisible.set(true);
+        this.updateTooltipPos(event);
+    }
+    updateTooltipPos(event) {
+        if (this._tooltipRafId)
+            cancelAnimationFrame(this._tooltipRafId);
+        this._tooltipRafId = requestAnimationFrame(() => {
+            const containerEl = this.containerRef().nativeElement;
+            const rect = containerEl.getBoundingClientRect();
+            const tooltipEl = containerEl.querySelector('.chart-tooltip');
+            const tooltipRect = tooltipEl?.getBoundingClientRect() ?? null;
+            const pos = computeTooltipPosition(rect, tooltipRect, event.clientX + 10, event.clientY - 10, 10);
+            this.tooltipPosition.set(pos);
+        });
+    }
+    hideTooltip() {
+        this.tooltipVisible.set(false);
+    }
+    ngOnDestroy() {
+        this.directionSub?.unsubscribe();
+        this.svg?.remove();
+        if (this._tooltipRafId)
+            cancelAnimationFrame(this._tooltipRafId);
+    }
+    drawAxisLabels(g, innerWidth, innerHeight, options, isRtl, xTickAreaHeight) {
+        const xText = options.xAxisLabel?.trim();
+        const yText = options.yAxisLabel?.trim();
+        const labels = g.selectAll('.axis-labels').data([0]).join('g').attr('class', 'axis-labels');
+        labels
+            .selectAll('.axis-label-x')
+            .data(xText ? [xText] : [])
+            .join((enter) => enter.append('text').attr('class', 'axis-label axis-label-x'), (update) => update, (exit) => exit.remove())
+            .attr('x', innerWidth / 2)
+            .attr('y', innerHeight + xTickAreaHeight + (xText ? this.X_AXIS_TITLE_GAP : 0))
+            .attr('text-anchor', 'middle')
+            .text((d) => d);
+        const yX = isRtl ? innerWidth + 46 : -46;
+        labels
+            .selectAll('.axis-label-y')
+            .data(yText ? [yText] : [])
+            .join((enter) => enter.append('text').attr('class', 'axis-label axis-label-y'), (update) => update, (exit) => exit.remove())
+            .attr('transform', `translate(${yX}, ${innerHeight / 2}) rotate(-90)`)
+            .attr('text-anchor', 'middle')
+            .text((d) => d);
+    }
+    getHeatmapXTickFontSize(innerWidth, itemCount) {
+        const baseSize = Math.round(innerWidth / 50);
+        let adjustedSize = baseSize;
+        if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {
+            adjustedSize = Math.round(baseSize * 0.7);
+        }
+        else if (itemCount > this.MANY_ITEMS_THRESHOLD) {
+            adjustedSize = Math.round(baseSize * 0.85);
+        }
+        return Math.max(this.MIN_FONT_SIZE_X_AXIS, Math.min(this.MAX_FONT_SIZE_X_AXIS, adjustedSize));
+    }
+    getHeatmapXTickPlan(xKeys) {
+        const n = xKeys.length;
+        const maxLabelLength = n > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;
+        let tickXKeys = xKeys;
+        if (n > this.VERY_MANY_ITEMS_THRESHOLD) {
+            tickXKeys = xKeys.filter((_, i) => i % 5 === 0);
+        }
+        else if (n > this.MANY_ITEMS_THRESHOLD) {
+            tickXKeys = xKeys.filter((_, i) => i % 2 === 0);
+        }
+        const formatXTick = (d) => this.truncateHeatmapLabel(d, maxLabelLength);
+        return { tickXKeys, formatXTick };
+    }
+    truncateHeatmapLabel(label, maxLength) {
+        if (label.length <= maxLength)
+            return label;
+        if (maxLength <= 1)
+            return '…';
+        return `${label.substring(0, maxLength - 1)}…`;
+    }
+    shouldRotateHeatmapXLabels(rotateOption, estimatedLabelWidth, step, domainCount) {
+        if (rotateOption === true)
+            return true;
+        if (rotateOption === false)
+            return false;
+        if (domainCount === 0)
+            return false;
+        if (domainCount <= this.SMALL_DATASET_THRESHOLD) {
+            return estimatedLabelWidth > step * this.ROTATION_TOLERANCE_SMALL_DATASET;
+        }
+        return estimatedLabelWidth > step;
+    }
+    styleHeatmapXAxisTicks(g, fontSize, rotated) {
+        const texts = g
+            .select('.x-axis')
+            .selectAll('.tick text')
+            .style('font-size', `${fontSize}px`)
+            .style('font-weight', '400');
+        if (rotated) {
+            texts.attr('transform', 'rotate(-45)').style('text-anchor', 'end').attr('dx', '-0.8em').attr('dy', '0.15em');
+        }
+        else {
+            texts.attr('transform', null).style('text-anchor', 'middle').attr('dx', null).attr('dy', '0.71em');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXHeatmapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXHeatmapChartComponent, isStandalone: true, selector: "ax-heatmap-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-heatmap-chart-container\" role=\"img\" #chartContainer>\n  @if (data()?.length === 0) {\n    <div class=\"ax-heatmap-no-data\">\n      <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n      <p class=\"ax-heatmap-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n    </div>\n  }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n", styles: ["ax-heatmap-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-heatmap-chart-bg-color: transparent;--ax-comp-heatmap-chart-text-color: var(--ax-sys-color-on-surface-variant, 28, 27, 31);--ax-comp-heatmap-chart-axis-color: var(--ax-sys-color-outline-variant, 202, 196, 208)}ax-heatmap-chart .ax-heatmap-chart-container{position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;padding:1rem;overflow:hidden;background-color:var(--ax-comp-heatmap-chart-bg-color)}ax-heatmap-chart .ax-heatmap-chart-container svg{display:block;width:100%;height:100%;overflow:visible}ax-heatmap-chart .ax-heatmap-chart-container svg .cell{transition:stroke .15s ease}ax-heatmap-chart .ax-heatmap-chart-container svg .cell:hover{stroke:rgba(var(--ax-comp-heatmap-chart-text-color),.6);stroke-width:2px}ax-heatmap-chart .ax-heatmap-chart-container svg .axis-label{font-size:12px;font-weight:600;fill:rgb(var(--ax-comp-heatmap-chart-text-color))}ax-heatmap-chart .ax-heatmap-chart-container svg .tick text{font-size:11px;fill:rgba(var(--ax-comp-heatmap-chart-text-color),.7)}ax-heatmap-chart .ax-heatmap-chart-container svg line,ax-heatmap-chart .ax-heatmap-chart-container svg .domain{stroke:rgba(var(--ax-comp-heatmap-chart-axis-color),.5)}ax-heatmap-chart .ax-heatmap-no-data{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:rgba(var(--ax-comp-heatmap-chart-text-color),.6)}ax-heatmap-chart .ax-heatmap-no-data i{font-size:2rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXHeatmapChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-heatmap-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-heatmap-chart-container\" role=\"img\" #chartContainer>\n  @if (data()?.length === 0) {\n    <div class=\"ax-heatmap-no-data\">\n      <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n      <p class=\"ax-heatmap-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n    </div>\n  }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n", styles: ["ax-heatmap-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-heatmap-chart-bg-color: transparent;--ax-comp-heatmap-chart-text-color: var(--ax-sys-color-on-surface-variant, 28, 27, 31);--ax-comp-heatmap-chart-axis-color: var(--ax-sys-color-outline-variant, 202, 196, 208)}ax-heatmap-chart .ax-heatmap-chart-container{position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;padding:1rem;overflow:hidden;background-color:var(--ax-comp-heatmap-chart-bg-color)}ax-heatmap-chart .ax-heatmap-chart-container svg{display:block;width:100%;height:100%;overflow:visible}ax-heatmap-chart .ax-heatmap-chart-container svg .cell{transition:stroke .15s ease}ax-heatmap-chart .ax-heatmap-chart-container svg .cell:hover{stroke:rgba(var(--ax-comp-heatmap-chart-text-color),.6);stroke-width:2px}ax-heatmap-chart .ax-heatmap-chart-container svg .axis-label{font-size:12px;font-weight:600;fill:rgb(var(--ax-comp-heatmap-chart-text-color))}ax-heatmap-chart .ax-heatmap-chart-container svg .tick text{font-size:11px;fill:rgba(var(--ax-comp-heatmap-chart-text-color),.7)}ax-heatmap-chart .ax-heatmap-chart-container svg line,ax-heatmap-chart .ax-heatmap-chart-container svg .domain{stroke:rgba(var(--ax-comp-heatmap-chart-axis-color),.5)}ax-heatmap-chart .ax-heatmap-no-data{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:rgba(var(--ax-comp-heatmap-chart-text-color),.6)}ax-heatmap-chart .ax-heatmap-no-data i{font-size:2rem;margin-bottom:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], containerRef: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXHeatmapChartComponent, AXHeatmapChartDefaultConfig, AX_HEATMAP_CHART_CONFIG };
+//# sourceMappingURL=acorex-charts-heatmap-chart.mjs.map

package/fesm2022/acorex-charts-heatmap-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-charts-heatmap-chart.mjs","sources":["../../../../packages/charts/heatmap-chart/src/lib/heatmap-chart.config.ts","../../../../packages/charts/heatmap-chart/src/lib/heatmap-chart.component.ts","../../../../packages/charts/heatmap-chart/src/lib/heatmap-chart.component.html","../../../../packages/charts/heatmap-chart/src/acorex-charts-heatmap-chart.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { AXHeatmapChartOption } from './heatmap-chart.type';\n\nexport const AXHeatmapChartDefaultConfig: AXHeatmapChartOption = {\n  margin: { top: 30, right: 30, bottom: 60, left: 60 },\n  color: 'rgb(var(--ax-sys-color-primary-500))',\n  cellPadding: 0.05,\n  borderRadius: 2,\n  showXAxis: true,\n  showYAxis: true,\n  rotateXAxisLabels: 'auto',\n  showTooltip: true,\n  animationDuration: 800,\n  animationEasing: 'cubic-out',\n  messages: {\n    noData: 'No data available',\n    noDataHelp: 'Provide X, Y, and Value data to render the heatmap',\n    noDataIcon: 'fa-light fa-grid-2',\n  },\n};\n\nexport const AX_HEATMAP_CHART_CONFIG = new InjectionToken<AXHeatmapChartOption>('AX_HEATMAP_CHART_CONFIG', {\n  providedIn: 'root',\n  factory: () => AXHeatmapChartDefaultConfig,\n});\n","import { AXChartComponent, computeTooltipPosition, getEasingFunction, resolveCssColorInContext } from '@acorex/charts';\nimport { AXChartTooltipComponent, AXChartTooltipData } from '@acorex/charts/chart-tooltip';\nimport { AXPlatform } from '@acorex/core/platform';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { map, Subscription } from 'rxjs';\nimport { AX_HEATMAP_CHART_CONFIG } from './heatmap-chart.config';\nimport { AXHeatmapChartOption, AXHeatmapData } from './heatmap-chart.type';\n\n@Component({\n  selector: 'ax-heatmap-chart',\n  templateUrl: './heatmap-chart.component.html',\n  styleUrls: ['./heatmap-chart.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  imports: [AXChartTooltipComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXHeatmapChartComponent extends AXChartComponent implements OnDestroy {\n  /** Fixed `viewBox` side; chart scales with CSS `width` / `height` on the host container. */\n  private static readonly VIEW_BOX_SIZE = 400;\n\n  // X-axis layout (aligned with bar-chart heuristics)\n  private readonly CHAR_WIDTH_RATIO = 0.65;\n  private readonly ROTATION_TOLERANCE_SMALL_DATASET = 1.4;\n  private readonly SMALL_DATASET_THRESHOLD = 6;\n  private readonly MANY_ITEMS_THRESHOLD = 20;\n  private readonly VERY_MANY_ITEMS_THRESHOLD = 50;\n  private readonly MAX_LABEL_LENGTH = 20;\n  private readonly TICK_AREA_PADDING = 6;\n  private readonly X_AXIS_TITLE_GAP = 10;\n  private readonly MIN_FONT_SIZE_X_AXIS = 8;\n  private readonly MAX_FONT_SIZE_X_AXIS = 14;\n\n  // Inject config at the top level\n  private readonly defaultConfig = inject(AX_HEATMAP_CHART_CONFIG);\n\n  // Inputs\n  data = input<AXHeatmapData[]>([]);\n  options = input<AXHeatmapChartOption>({});\n\n  // Outputs\n  /** Emitted when a heatmap cell is clicked */\n  cellClick = output<AXHeatmapData>();\n\n  // View Child\n  private readonly containerRef = viewChild.required<ElementRef<HTMLDivElement>>('chartContainer');\n\n  // Internal State\n  private svg: any;\n  protected d3: any;\n  private _d3Ready = signal(false);\n  private platformService = inject(AXPlatform);\n  protected isRtl = signal(this.platformService.isRtl());\n  private directionSub?: Subscription;\n\n  // Tooltip State\n  protected tooltipVisible = signal(false);\n  protected tooltipPosition = signal({ x: 0, y: 0 });\n  protected tooltipData = signal<AXChartTooltipData>({ title: '', value: '' });\n  private _tooltipRafId: number | null = null;\n\n  // Computed options (referencing the already injected defaultConfig)\n  protected effectiveOptions = computed(() => ({\n    ...this.defaultConfig,\n    ...this.options(),\n  }));\n\n  constructor() {\n    super();\n\n    afterNextRender(() => {\n      this.init();\n      this.directionSub = this.platformService.directionChange.pipe(map((i) => i.data === 'rtl')).subscribe((isRtl) => {\n        this.isRtl.set(isRtl);\n        if (this._d3Ready()) {\n          this.renderChart();\n        }\n      });\n    });\n\n    // Reactive render when data, options, or D3 readiness change\n    effect(() => {\n      this.data();\n      this.effectiveOptions();\n      if (this._d3Ready()) {\n        this.renderChart();\n      }\n    });\n  }\n\n  private async init() {\n    try {\n      this.d3 = await import('d3');\n\n      this._d3Ready.set(true);\n    } catch (err) {\n      console.error('Heatmap: Initialization failed', err);\n    }\n  }\n\n  public updateChart(): void {\n    this.renderChart();\n  }\n\n  private renderChart() {\n    const container = this.containerRef().nativeElement;\n    const data = this.data() || [];\n\n    // Clear SVG if data is empty\n    if (data.length === 0) {\n      if (this.svg) this.svg.remove();\n      this.svg = null;\n      return;\n    }\n\n    const options = this.effectiveOptions();\n    const width = AXHeatmapChartComponent.VIEW_BOX_SIZE;\n    const height = AXHeatmapChartComponent.VIEW_BOX_SIZE;\n    const isRtl = this.isRtl();\n    const baseMargin = options.margin || { top: 20, right: 20, bottom: 40, left: 40 };\n    // When rendering RTL, the Y axis is on the right; swap side margins so tick labels\n    // have the same breathing room they get on the left in LTR.\n    let margin = isRtl\n      ? { top: baseMargin.top, right: baseMargin.left, bottom: baseMargin.bottom, left: baseMargin.right }\n      : { ...baseMargin };\n\n    const xKeys = Array.from(new Set(data.map((d) => d.x.toString())));\n    const yKeys = Array.from(new Set(data.map((d) => d.y.toString())));\n\n    let innerWidth = width - margin.left - margin.right;\n    const cellPad = options.cellPadding ?? 0;\n    const xScaleProbe = this.d3\n      .scaleBand()\n      .domain(xKeys)\n      .range(isRtl ? [innerWidth, 0] : [0, innerWidth])\n      .padding(cellPad);\n\n    const xTickFontSize = this.getHeatmapXTickFontSize(innerWidth, xKeys.length);\n    const { tickXKeys, formatXTick } = this.getHeatmapXTickPlan(xKeys);\n    const longestXLabel = xKeys.reduce((acc, k) => {\n      const t = formatXTick(k);\n      return t.length > acc.length ? t : acc;\n    }, '');\n    const estimatedLabelWidth = longestXLabel.length * xTickFontSize * this.CHAR_WIDTH_RATIO;\n    const step = xScaleProbe.step();\n    const rotateX = this.shouldRotateHeatmapXLabels(options.rotateXAxisLabels, estimatedLabelWidth, step, xKeys.length);\n\n    const tickAreaHeight = rotateX\n      ? estimatedLabelWidth * Math.SQRT1_2 + xTickFontSize * Math.SQRT1_2 + this.TICK_AREA_PADDING\n      : xTickFontSize + this.TICK_AREA_PADDING + 2;\n\n    const xAxisTitleReserve = options.xAxisLabel?.trim() ? this.X_AXIS_TITLE_GAP + 16 : 0;\n    margin = { ...margin, bottom: Math.max(margin.bottom, tickAreaHeight + xAxisTitleReserve) };\n\n    innerWidth = width - margin.left - margin.right;\n    const innerHeight = Math.max(1, height - margin.top - margin.bottom);\n\n    // Create/Select SVG root\n    if (!this.svg) {\n      this.svg = this.d3\n        .select(container)\n        .append('svg')\n        .attr('width', '100%')\n        .attr('height', '100%')\n        .attr('preserveAspectRatio', 'xMidYMid meet')\n        .style('display', 'block');\n      this.svg.append('g').attr('class', 'chart-group');\n    }\n\n    this.svg.attr('viewBox', `0 0 ${width} ${height}`);\n    const g = this.svg.select('.chart-group').attr('transform', `translate(${margin.left},${margin.top})`);\n\n    // --- Scales ---\n    const xScale = this.d3\n      .scaleBand()\n      .domain(xKeys)\n      .range(isRtl ? [innerWidth, 0] : [0, innerWidth])\n      .padding(cellPad);\n    const yScale = this.d3.scaleBand().domain(yKeys).range([innerHeight, 0]).padding(cellPad);\n\n    const valueExtent = this.d3.extent(data, (d: any) => d.value) as [number, number];\n    const minValue = Number.isFinite(valueExtent[0]) ? valueExtent[0] : 0;\n    const maxValue = Number.isFinite(valueExtent[1]) ? valueExtent[1] : minValue + 1;\n    const palette = options.colors?.filter(Boolean) ?? [];\n    const baseColor = options.color ?? 'rgb(99, 102, 241)';\n    const rangeMin = options.valueRange?.min ?? minValue;\n    const rangeMax = options.valueRange?.max ?? maxValue;\n\n    const resolvedColorCache = new Map<string, string>();\n    const resolvePaletteColor = (c: string): string => {\n      const hit = resolvedColorCache.get(c);\n      if (hit !== undefined) return hit;\n      const out = resolveCssColorInContext(container, c);\n      resolvedColorCache.set(c, out);\n      return out;\n    };\n    const resolvedBase = resolvePaletteColor(baseColor);\n\n    const getCellColor = (d: AXHeatmapData): string => {\n      // If a palette is provided, choose a stable \"random\" color per cell.\n      if (palette.length > 0) {\n        const key = `${d.x}-${d.y}`;\n        const idx = this.hashStringToUint32(key) % palette.length;\n        return resolvePaletteColor(palette[idx] ?? baseColor);\n      }\n\n      const span = rangeMax - rangeMin;\n      const t = span === 0 ? 1 : (d.value - rangeMin) / span;\n      const clamped = Math.max(0, Math.min(1, t));\n      return this.applyIntensityToResolvedRgb(resolvedBase, clamped);\n    };\n\n    // --- Axes ---\n    const xAxisBuilder = this.d3\n      .axisBottom(xScale)\n      .tickSize(0)\n      .tickFormat((d: string | number) => formatXTick(String(d)));\n    if (tickXKeys.length < xKeys.length) {\n      xAxisBuilder.tickValues(tickXKeys);\n    }\n\n    this.drawAxis(g, 'x-axis', xAxisBuilder, 0, innerHeight, options.showXAxis, isRtl);\n    g.select('.x-axis').attr('direction', 'ltr');\n    this.styleHeatmapXAxisTicks(g, xTickFontSize, rotateX);\n\n    if (isRtl) {\n      this.drawAxis(g, 'y-axis', this.d3.axisRight(yScale).tickSize(0), innerWidth, 0, options.showYAxis, isRtl);\n    } else {\n      this.drawAxis(g, 'y-axis', this.d3.axisLeft(yScale).tickSize(0), 0, 0, options.showYAxis, isRtl);\n    }\n    this.drawAxisLabels(g, innerWidth, innerHeight, options, isRtl, tickAreaHeight);\n\n    // --- Cells with Data Join ---\n    const easing = getEasingFunction(this.d3, options.animationEasing);\n\n    g.selectAll('.cell')\n      .data(data, (d: any) => `${d.x}-${d.y}`)\n      .join(\n        (enter: any) => enter.append('rect').attr('class', 'cell').attr('opacity', 0).attr('fill', resolvedBase),\n        (update: any) => update,\n        (exit: any) => exit.transition().duration(200).attr('opacity', 0).remove(),\n      )\n      .on('mouseenter', (event: any, d: AXHeatmapData) => this.showTooltip(event, d, getCellColor(d)))\n      .on('mousemove', (event: any) => this.updateTooltipPos(event))\n      .on('click', (_event: any, d: AXHeatmapData) => this.cellClick.emit(d))\n      .on('mouseleave', () => this.hideTooltip())\n      .transition()\n      .duration(options.animationDuration)\n      .ease(easing)\n      .attr('x', (d: any) => xScale(d.x.toString()))\n      .attr('y', (d: any) => yScale(d.y.toString()))\n      .attr('width', xScale.bandwidth())\n      .attr('height', yScale.bandwidth())\n      .attr('rx', options.borderRadius)\n      .attr('ry', options.borderRadius)\n      .attr('opacity', 1)\n      .style('fill', (d: AXHeatmapData) => getCellColor(d));\n  }\n\n  private hashStringToUint32(input: string): number {\n    // Simple, fast, deterministic hash (djb2 variant)\n    let hash = 5381;\n    for (let i = 0; i < input.length; i++) {\n      hash = (hash * 33) ^ input.charCodeAt(i);\n    }\n    return hash >>> 0;\n  }\n\n  /** `resolvedRgb` must be a computed `rgb()` / `rgba()` string (e.g. from {@link resolveCssColorInContext}). */\n  private applyIntensityToResolvedRgb(resolvedRgb: string, t: number): string {\n    const clamped = Math.max(0, Math.min(1, t));\n    const parsed = this.d3.color(resolvedRgb);\n    if (!parsed) return resolvedRgb;\n    const rgb = this.d3.rgb(parsed);\n    const minOpacity = 0.12;\n    const opacity = minOpacity + clamped * (1 - minOpacity);\n    return `rgba(${Math.round(rgb.r)},${Math.round(rgb.g)},${Math.round(rgb.b)},${opacity})`;\n  }\n\n  private drawAxis(g: any, className: string, axisFn: any, x: number, y: number, visible = true, isRtl = false) {\n    let axisG = g.select(`.${className}`);\n    if (axisG.empty()) axisG = g.append('g').attr('class', className);\n\n    axisG\n      .attr('transform', `translate(${x},${y})`)\n      .style('display', visible ? 'block' : 'none')\n      .call(axisFn)\n      .call((g: any) => g.select('.domain').remove());\n\n    // Ensure tick labels don't overlap the plot in RTL.\n    // `text-anchor` is logical (depends on `direction`), so we set both explicitly.\n    axisG.attr('direction', isRtl ? 'rtl' : 'ltr');\n    if (className === 'y-axis') {\n      axisG.selectAll('.tick text').attr('text-anchor', 'end');\n    }\n  }\n\n  private showTooltip(event: MouseEvent, item: AXHeatmapData, color: string) {\n    if (!this.effectiveOptions().showTooltip) return;\n    this.tooltipData.set({\n      title: `${item.x} / ${item.y}`,\n      value: item.label || item.value.toLocaleString(),\n      color: color,\n    });\n    this.tooltipVisible.set(true);\n    this.updateTooltipPos(event);\n  }\n\n  private updateTooltipPos(event: MouseEvent) {\n    if (this._tooltipRafId) cancelAnimationFrame(this._tooltipRafId);\n    this._tooltipRafId = requestAnimationFrame(() => {\n      const containerEl = this.containerRef().nativeElement;\n      const rect = containerEl.getBoundingClientRect();\n      const tooltipEl = containerEl.querySelector('.chart-tooltip') as HTMLElement;\n      const tooltipRect = tooltipEl?.getBoundingClientRect() ?? null;\n      const pos = computeTooltipPosition(rect, tooltipRect, event.clientX + 10, event.clientY - 10, 10);\n      this.tooltipPosition.set(pos);\n    });\n  }\n\n  private hideTooltip() {\n    this.tooltipVisible.set(false);\n  }\n\n  ngOnDestroy(): void {\n    this.directionSub?.unsubscribe();\n    this.svg?.remove();\n    if (this._tooltipRafId) cancelAnimationFrame(this._tooltipRafId);\n  }\n\n  private drawAxisLabels(\n    g: any,\n    innerWidth: number,\n    innerHeight: number,\n    options: AXHeatmapChartOption,\n    isRtl: boolean,\n    xTickAreaHeight: number,\n  ) {\n    const xText = options.xAxisLabel?.trim();\n    const yText = options.yAxisLabel?.trim();\n\n    const labels = g.selectAll('.axis-labels').data([0]).join('g').attr('class', 'axis-labels');\n\n    labels\n      .selectAll('.axis-label-x')\n      .data(xText ? [xText] : [])\n      .join(\n        (enter: any) => enter.append('text').attr('class', 'axis-label axis-label-x'),\n        (update: any) => update,\n        (exit: any) => exit.remove(),\n      )\n      .attr('x', innerWidth / 2)\n      .attr('y', innerHeight + xTickAreaHeight + (xText ? this.X_AXIS_TITLE_GAP : 0))\n      .attr('text-anchor', 'middle')\n      .text((d: string) => d);\n\n    const yX = isRtl ? innerWidth + 46 : -46;\n    labels\n      .selectAll('.axis-label-y')\n      .data(yText ? [yText] : [])\n      .join(\n        (enter: any) => enter.append('text').attr('class', 'axis-label axis-label-y'),\n        (update: any) => update,\n        (exit: any) => exit.remove(),\n      )\n      .attr('transform', `translate(${yX}, ${innerHeight / 2}) rotate(-90)`)\n      .attr('text-anchor', 'middle')\n      .text((d: string) => d);\n  }\n\n  private getHeatmapXTickFontSize(innerWidth: number, itemCount: number): number {\n    const baseSize = Math.round(innerWidth / 50);\n    let adjustedSize = baseSize;\n    if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {\n      adjustedSize = Math.round(baseSize * 0.7);\n    } else if (itemCount > this.MANY_ITEMS_THRESHOLD) {\n      adjustedSize = Math.round(baseSize * 0.85);\n    }\n    return Math.max(this.MIN_FONT_SIZE_X_AXIS, Math.min(this.MAX_FONT_SIZE_X_AXIS, adjustedSize));\n  }\n\n  private getHeatmapXTickPlan(xKeys: string[]): { tickXKeys: string[]; formatXTick: (d: string) => string } {\n    const n = xKeys.length;\n    const maxLabelLength = n > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;\n    let tickXKeys = xKeys;\n    if (n > this.VERY_MANY_ITEMS_THRESHOLD) {\n      tickXKeys = xKeys.filter((_, i) => i % 5 === 0);\n    } else if (n > this.MANY_ITEMS_THRESHOLD) {\n      tickXKeys = xKeys.filter((_, i) => i % 2 === 0);\n    }\n    const formatXTick = (d: string) => this.truncateHeatmapLabel(d, maxLabelLength);\n    return { tickXKeys, formatXTick };\n  }\n\n  private truncateHeatmapLabel(label: string, maxLength: number): string {\n    if (label.length <= maxLength) return label;\n    if (maxLength <= 1) return '…';\n    return `${label.substring(0, maxLength - 1)}…`;\n  }\n\n  private shouldRotateHeatmapXLabels(\n    rotateOption: boolean | 'auto' | undefined,\n    estimatedLabelWidth: number,\n    step: number,\n    domainCount: number,\n  ): boolean {\n    if (rotateOption === true) return true;\n    if (rotateOption === false) return false;\n    if (domainCount === 0) return false;\n    if (domainCount <= this.SMALL_DATASET_THRESHOLD) {\n      return estimatedLabelWidth > step * this.ROTATION_TOLERANCE_SMALL_DATASET;\n    }\n    return estimatedLabelWidth > step;\n  }\n\n  private styleHeatmapXAxisTicks(g: any, fontSize: number, rotated: boolean): void {\n    const texts = g\n      .select('.x-axis')\n      .selectAll('.tick text')\n      .style('font-size', `${fontSize}px`)\n      .style('font-weight', '400');\n\n    if (rotated) {\n      texts.attr('transform', 'rotate(-45)').style('text-anchor', 'end').attr('dx', '-0.8em').attr('dy', '0.15em');\n    } else {\n      texts.attr('transform', null).style('text-anchor', 'middle').attr('dx', null).attr('dy', '0.71em');\n    }\n  }\n\n  // RTL is tracked via AXPlatform.directionChange\n}\n","<div class=\"ax-heatmap-chart-container\" role=\"img\" #chartContainer>\n  @if (data()?.length === 0) {\n    <div class=\"ax-heatmap-no-data\">\n      <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n      <p class=\"ax-heatmap-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n    </div>\n  }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-charts-hierarchy-chart.mjs

@@ -277,8 +277,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
             // Apply zoom behavior to SVG
             svg.call(zoom);
             // Set initial transform to match the centering
-            const initialTransform = this.d3.zoomIdentity
-                .translate(isHorizontal ? margin.left : width / 2, isHorizontal ? height / 2 - centerX : margin.top);
+            const initialTransform = this.d3.zoomIdentity.translate(isHorizontal ? margin.left : width / 2, isHorizontal ? height / 2 - centerX : margin.top);
             svg.call(zoom.transform, initialTransform);
             // Draw links between nodes
             const links = g
@@ -710,10 +709,10 @@ class AXHierarchyChartComponent extends AXChartComponent {
             .style('opacity', '0.6')
             .text(this.effectiveMessages().noDataHelp);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXHierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: AXHierarchyChartComponent, isStandalone: true, selector: "ax-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", nodeToggle: "nodeToggle" }, queries: [{ propertyName: "customNodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXHierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXHierarchyChartComponent, isStandalone: true, selector: "ax-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", nodeToggle: "nodeToggle" }, queries: [{ propertyName: "customNodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXHierarchyChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXHierarchyChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-hierarchy-chart', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chartContainer: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }], customNodeTemplate: [{ type: i0.ContentChild, args: ['nodeTemplate', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }] } });