@acorex/charts 20.6.32 → 20.6.33

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

@@ -12,6 +12,7 @@ const AXHeatmapChartDefaultConfig = {
     borderRadius: 2,
     showXAxis: true,
     showYAxis: true,
+    rotateXAxisLabels: 'auto',
     showTooltip: true,
     animationDuration: 800,
     animationEasing: 'cubic-out',
@@ -27,6 +28,19 @@ const AX_HEATMAP_CHART_CONFIG = new InjectionToken('AX_HEATMAP_CHART_CONFIG', {
 });
 
 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
@@ -56,20 +70,19 @@ class AXHeatmapChartComponent extends AXChartComponent {
     }), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
     constructor() {
         super();
-        // Initialize D3 and ResizeObserver
         afterNextRender(() => {
             this.init();
-            this.directionSub = this.platformService.directionChange
-                .pipe(map((i) => i.data === 'rtl'))
-                .subscribe((isRtl) => {
+            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 or D3 is ready
+        // Reactive render when data, options, or D3 readiness change
         effect(() => {
+            this.data();
+            this.effectiveOptions();
             if (this._d3Ready()) {
                 this.renderChart();
             }
@@ -84,11 +97,12 @@ class AXHeatmapChartComponent extends AXChartComponent {
             console.error('Heatmap: Initialization failed', err);
         }
     }
+    updateChart() {
+        this.renderChart();
+    }
     renderChart() {
         const container = this.containerRef().nativeElement;
         const data = this.data() || [];
-        if (!container || container.clientWidth === 0 || container.clientHeight === 0)
-            return;
         // Clear SVG if data is empty
         if (data.length === 0) {
             if (this.svg)
@@ -97,33 +111,60 @@ class AXHeatmapChartComponent extends AXChartComponent {
             return;
         }
         const options = this.effectiveOptions();
-        const width = container.clientWidth;
-        const height = container.clientHeight;
+        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.
-        const margin = isRtl
+        let margin = isRtl
             ? { top: baseMargin.top, right: baseMargin.left, bottom: baseMargin.bottom, left: baseMargin.right }
-            : baseMargin;
-        const innerWidth = width - margin.left - margin.right;
-        const innerHeight = height - margin.top - margin.bottom;
+            : { ...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('style', 'width: 100%; height: 100%; display: block;');
+            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 xKeys = Array.from(new Set(data.map((d) => d.x.toString())));
-        const yKeys = Array.from(new Set(data.map((d) => d.y.toString())));
         const xScale = this.d3
             .scaleBand()
             .domain(xKeys)
             .range(isRtl ? [innerWidth, 0] : [0, innerWidth])
-            .padding(options.cellPadding);
-        const yScale = this.d3.scaleBand().domain(yKeys).range([innerHeight, 0]).padding(options.cellPadding);
+            .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;
@@ -154,14 +195,23 @@ class AXHeatmapChartComponent extends AXChartComponent {
             return this.applyIntensityToResolvedRgb(resolvedBase, clamped);
         };
         // --- Axes ---
-        this.drawAxis(g, 'x-axis', this.d3.axisBottom(xScale).tickSize(0), 0, innerHeight, options.showXAxis, isRtl);
+        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);
+        this.drawAxisLabels(g, innerWidth, innerHeight, options, isRtl, tickAreaHeight);
         // --- Cells with Data Join ---
         const easing = getEasingFunction(this.d3, options.animationEasing);
         g.selectAll('.cell')
@@ -250,7 +300,7 @@ class AXHeatmapChartComponent extends AXChartComponent {
         if (this._tooltipRafId)
             cancelAnimationFrame(this._tooltipRafId);
     }
-    drawAxisLabels(g, innerWidth, innerHeight, options, isRtl) {
+    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');
@@ -259,7 +309,7 @@ class AXHeatmapChartComponent extends AXChartComponent {
             .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 + 44)
+            .attr('y', innerHeight + xTickAreaHeight + (xText ? this.X_AXIS_TITLE_GAP : 0))
             .attr('text-anchor', 'middle')
             .text((d) => d);
         const yX = isRtl ? innerWidth + 46 : -46;
@@ -271,12 +321,68 @@ class AXHeatmapChartComponent extends AXChartComponent {
             .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: "20.3.3", ngImport: i0, type: AXHeatmapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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:300px;--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%;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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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: "20.3.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:300px;--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%;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"] }]
+            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: () => [] });
 
 /**