@acorex/charts 0.0.1

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

@@ -0,0 +1,700 @@
+import { NXComponent } from '@acorex/cdk/common';
+import { AXPanViewDirective } from '@acorex/cdk/pan-view';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, viewChild, contentChild, NgZone, ViewContainerRef, signal, input, output, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
+import { set } from 'lodash-es';
+
+const AXHierarchyChartDefaultConfig = {
+    direction: 'vertical',
+    margin: { top: 40, right: 120, bottom: 40, left: 120 },
+    nodeRadius: 30,
+    nodeStrokeWidth: 1.5,
+    linkWidth: 1.5,
+    linkStyle: 'curved',
+    nodeWidth: 120,
+    nodeHeight: 60,
+    nodeSpacingX: 80,
+    nodeSpacingY: 120,
+    showTooltip: true,
+    collapsible: true,
+    expandAll: false,
+    animationDuration: 100,
+    animationEasing: 'cubic-out',
+};
+const AX_HIERARCHY_CHART_CONFIG = new InjectionToken('AX_HIERARCHY_CHART_CONFIG', {
+    providedIn: 'root',
+    factory: () => {
+        const global = inject(AX_GLOBAL_CONFIG);
+        set(global, 'chart.hierarchyChart', AXHierarchyChartDefaultConfig);
+        return AXHierarchyChartDefaultConfig;
+    },
+});
+function hierarchyChartConfig(config = {}) {
+    const result = {
+        ...AXHierarchyChartDefaultConfig,
+        ...config,
+    };
+    return result;
+}
+
+/**
+ * A highly customizable hierarchical visualization component that can be used for:
+ * - Organization charts
+ * - Tree diagrams
+ * - Dependency visualizations
+ * - Process flows
+ *
+ * Supports both default node styling and custom node templates.
+ */
+class AXHierarchyChartComponent extends NXComponent {
+    // Chart container reference
+    chartContainer = viewChild.required('chartContainer');
+    // Custom node template provided by the user
+    customNodeTemplate = contentChild('nodeTemplate');
+    // Services
+    ngZone = inject(NgZone);
+    viewContainerRef = inject(ViewContainerRef);
+    configToken = inject(AX_HIERARCHY_CHART_CONFIG);
+    // D3 instance
+    d3;
+    // Internal state signals
+    _expandedNodes = signal(new Map());
+    _initialized = signal(false);
+    _rendered = signal(false);
+    _dimensions = signal({ width: 0, height: 0 });
+    _nodeElements = signal(new Map()); // Store references to node elements
+    _chartData = signal(null); // Store the current chart data and layout
+    // Inputs
+    data = input([]);
+    options = input({});
+    nodeTemplate = input(null);
+    // Outputs
+    itemClick = output();
+    nodeToggle = output();
+    // Computed values
+    processedData = computed(() => {
+        const data = this.data();
+        // Handle both single node and array formats
+        return Array.isArray(data) ? { id: 'root', children: data } : data;
+    });
+    // Check if custom template is available
+    hasCustomTemplate = computed(() => {
+        return Boolean(this.customNodeTemplate() || this.nodeTemplate());
+    });
+    effectiveOptions = computed(() => {
+        return {
+            ...this.configToken,
+            ...this.options(),
+        };
+    });
+    constructor() {
+        super();
+        // Dynamically load D3 and initialize the chart when the component is ready
+        afterNextRender(() => {
+            this._initialized.set(true);
+            this.loadD3();
+            this.initializeExpandedState();
+        });
+        // Watch for changes to redraw the chart
+        effect(() => {
+            // Access these to track them
+            this.processedData();
+            this.nodeTemplate();
+            this.customNodeTemplate();
+            this.effectiveOptions();
+            this._expandedNodes();
+            if (this._initialized() && this.d3 && this._rendered()) {
+                this.createChart();
+            }
+        });
+    }
+    /**
+     * Initialize the expanded state for all nodes
+     */
+    initializeExpandedState() {
+        const newExpandedNodes = new Map();
+        const data = this.processedData();
+        const expandAll = this.effectiveOptions().expandAll;
+        // Helper function to recursively process nodes
+        const processNode = (node) => {
+            if (node.children && node.children.length > 0) {
+                // Set initial expansion state based on node property or global option
+                newExpandedNodes.set(node.id, node.isExpanded !== undefined ? node.isExpanded : expandAll);
+                // Process children
+                node.children.forEach((child) => processNode(child));
+            }
+        };
+        // Start processing
+        if (data.children) {
+            data.children.forEach((node) => processNode(node));
+        }
+        else if (data.id) {
+            processNode(data);
+        }
+        this._expandedNodes.set(newExpandedNodes);
+    }
+    /**
+     * Dynamically load D3.js to reduce initial bundle size
+     */
+    async loadD3() {
+        try {
+            this.d3 = await import('d3');
+            if (this._initialized() && this.chartContainer()) {
+                this.updateDimensions();
+                this.createChart();
+                this._rendered.set(true);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load D3.js:', error);
+        }
+    }
+    /**
+     * Update dimensions based on container size
+     */
+    updateDimensions() {
+        const container = this.chartContainer().nativeElement;
+        const options = this.effectiveOptions();
+        const containerRect = container.getBoundingClientRect();
+        const width = options.width || Math.max(containerRect.width, 300);
+        const height = options.height || Math.max(containerRect.height, 400);
+        this._dimensions.set({ width, height });
+    }
+    /**
+     * Create and render the hierarchy chart
+     */
+    createChart() {
+        if (!this.d3) {
+            return;
+        }
+        // Clear any existing chart
+        this.clearChart();
+        const container = this.chartContainer().nativeElement;
+        const data = this.processedData();
+        // Check for null/undefined data or empty children
+        if (!data || !data.children || data.children.length === 0) {
+            this.showNoDataMessage(container);
+            return;
+        }
+        const options = this.effectiveOptions();
+        const dimensions = this._dimensions();
+        const expandedNodes = this._expandedNodes();
+        this.ngZone.runOutsideAngular(() => {
+            // Get dimensions and options
+            const { width, height } = dimensions;
+            const margin = options.margin || { top: 40, right: 120, bottom: 40, left: 120 };
+            const nodeWidth = options.nodeWidth || 120;
+            const nodeHeight = options.nodeHeight || 60;
+            const nodeSpacingX = options.nodeSpacingX || 80;
+            const nodeSpacingY = options.nodeSpacingY || 120;
+            const isHorizontal = options.direction === 'horizontal';
+            // Create SVG container with viewBox for responsiveness
+            const svg = this.d3
+                .select(container)
+                .append('svg')
+                .attr('width', '100%')
+                .attr('height', '100%')
+                .attr('viewBox', `0 0 ${width} ${height}`)
+                .attr('preserveAspectRatio', 'xMidYMid meet')
+                .style('overflow', 'visible')
+                .classed(options.className || '', !!options.className);
+            // Create hierarchy layout from data
+            const rootData = this.processedData();
+            const root = this.d3.hierarchy(rootData);
+            // Apply expansion state to nodes
+            root.descendants().forEach((node) => {
+                if (node.data.id !== 'root' && node.children) {
+                    if (expandedNodes.has(node.data.id) && !expandedNodes.get(node.data.id)) {
+                        node._children = node.children; // Store children
+                        node.children = null; // Collapse node
+                    }
+                }
+            });
+            // Set up the tree layout based on direction option
+            const treeLayout = this.d3
+                .tree()
+                .nodeSize([
+                isHorizontal ? nodeHeight + nodeSpacingY : nodeWidth + nodeSpacingX,
+                isHorizontal ? nodeWidth + nodeSpacingX : nodeHeight + nodeSpacingY,
+            ])
+                .separation((a, b) => {
+                return a.parent === b.parent ? 1.2 : 1.5;
+            });
+            treeLayout(root);
+            // Store the current tree layout data for future updates
+            this._chartData.set({
+                root,
+                treeLayout,
+                isHorizontal,
+                nodeWidth,
+                nodeHeight,
+            });
+            // Adjust root position based on direction
+            const rootX = isHorizontal ? margin.top : width / 2;
+            const rootY = isHorizontal ? margin.left : margin.top;
+            // Calculate bounds of the tree after layout
+            let minX = Infinity;
+            let maxX = -Infinity;
+            let minY = Infinity;
+            let maxY = -Infinity;
+            root.descendants().forEach((d) => {
+                if (d.data.id === 'root')
+                    return;
+                const x = isHorizontal ? d.x : d.x;
+                const y = isHorizontal ? d.y : d.y;
+                minX = Math.min(minX, x);
+                maxX = Math.max(maxX, x);
+                minY = Math.min(minY, y);
+                maxY = Math.max(maxY, y);
+            });
+            // Calculate the center of the tree
+            const centerX = (minX + maxX) / 2;
+            const centerY = (minY + maxY) / 2;
+            // Create a group for the chart content with proper centering
+            const g = svg
+                .append('g')
+                .attr('transform', isHorizontal
+                ? `translate(${margin.left}, ${height / 2 - centerX})`
+                : `translate(${width / 2}, ${margin.top})`);
+            // Draw links between nodes
+            const links = g
+                .selectAll('.link')
+                .data(root.links().filter((d) => d.source.data.id !== 'root'))
+                .enter()
+                .append('path')
+                .attr('class', 'ax-hierarchy-chart-link')
+                .attr('d', (d) => {
+                // Get the link style from options
+                const linkStyle = options.linkStyle || 'curved';
+                // Source and target coordinates based on direction
+                const sourceX = isHorizontal ? d.source.y : d.source.x;
+                const sourceY = isHorizontal ? d.source.x : d.source.y;
+                const targetX = isHorizontal ? d.target.y : d.target.x;
+                const targetY = isHorizontal ? d.target.x : d.target.y;
+                // Variables for rounded corners
+                let xDistance, yDistance, cornerRadius, midX, midY;
+                switch (linkStyle) {
+                    case 'straight':
+                        // Direct straight line
+                        return `M${sourceX},${sourceY}L${targetX},${targetY}`;
+                    case 'rounded':
+                        // Curved line with rounded corners
+                        xDistance = Math.abs(targetX - sourceX);
+                        yDistance = Math.abs(targetY - sourceY);
+                        cornerRadius = Math.min(xDistance, yDistance) * 0.2; // Reduced radius for better appearance
+                        if (isHorizontal) {
+                            // For horizontal layout
+                            const halfDistance = (targetX - sourceX) / 2;
+                            const xMid = sourceX + halfDistance;
+                            return `
+                  M${sourceX},${sourceY}
+                  H${xMid - cornerRadius}
+                  Q${xMid},${sourceY} ${xMid},${sourceY + Math.sign(targetY - sourceY) * cornerRadius}
+                  V${targetY - Math.sign(targetY - sourceY) * cornerRadius}
+                  Q${xMid},${targetY} ${xMid + cornerRadius},${targetY}
+                  H${targetX}
+                `;
+                        }
+                        else {
+                            // For vertical layout
+                            const halfDistance = (targetY - sourceY) / 2;
+                            const yMid = sourceY + halfDistance;
+                            return `
+                  M${sourceX},${sourceY}
+                  V${yMid - cornerRadius}
+                  Q${sourceX},${yMid} ${sourceX + Math.sign(targetX - sourceX) * cornerRadius},${yMid}
+                  H${targetX - Math.sign(targetX - sourceX) * cornerRadius}
+                  Q${targetX},${yMid} ${targetX},${yMid + cornerRadius}
+                  V${targetY}
+                `;
+                        }
+                    case 'step':
+                        // L-shaped stepped line
+                        if (isHorizontal) {
+                            return `M${sourceX},${sourceY}H${(sourceX + targetX) / 2}V${targetY}H${targetX}`;
+                        }
+                        else {
+                            return `M${sourceX},${sourceY}V${(sourceY + targetY) / 2}H${targetX}V${targetY}`;
+                        }
+                    case 'curved':
+                    default:
+                        // Default curved line using D3's built-in link generator
+                        if (isHorizontal) {
+                            return this.d3
+                                .linkHorizontal()
+                                .x((d) => d.y)
+                                .y((d) => d.x)(d);
+                        }
+                        else {
+                            return this.d3
+                                .linkVertical()
+                                .x((d) => d.x)
+                                .y((d) => d.y)(d);
+                        }
+                }
+            })
+                .attr('stroke', `rgb(var(--ax-comp-hierarchy-chart-link-color))`)
+                .attr('stroke-width', options.linkWidth)
+                .attr('fill', 'none')
+                .attr('opacity', 1);
+            // Determine which template to use for rendering nodes
+            const useCustomTemplate = this.hasCustomTemplate();
+            const templateToUse = this.nodeTemplate() || this.customNodeTemplate();
+            // Create a map to store node elements for future updates
+            const nodeElementsMap = new Map();
+            // Create node groups
+            const nodeGroups = g
+                .selectAll('.node-group')
+                .data(root.descendants().filter((d) => d.data.id !== 'root'))
+                .enter()
+                .append('g')
+                .attr('class', 'ax-hierarchy-chart-node-group')
+                .attr('data-node-id', (d) => d.data.id) // Add a data attribute for easier selection
+                .attr('transform', (d) => {
+                const x = isHorizontal ? d.y : d.x;
+                const y = isHorizontal ? d.x : d.y;
+                return `translate(${x},${y})`;
+            })
+                .attr('opacity', 1); // Display nodes immediately with full opacity
+            // Store node elements in the map
+            nodeGroups.each(function (d) {
+                nodeElementsMap.set(d.data.id, this);
+            });
+            // Update the node elements signal
+            this._nodeElements.set(nodeElementsMap);
+            if (useCustomTemplate && templateToUse) {
+                // Render custom node templates
+                nodeGroups.each((d, i, nodes) => {
+                    const node = d.data;
+                    const element = nodes[i];
+                    const hasChildren = !!(node.children && node.children.length > 0);
+                    const isExpanded = hasChildren && this._expandedNodes().has(node.id) && this._expandedNodes().get(node.id);
+                    // Enhance the node with expanded state and toggle function
+                    node.expanded = isExpanded || false;
+                    node.toggleExpanded = () => this.toggleNode(node.id);
+                    // Create a foreignObject for the template
+                    const foreignObject = this.d3
+                        .select(element)
+                        .append('foreignObject')
+                        .attr('x', -nodeWidth / 2)
+                        .attr('y', -nodeHeight / 2)
+                        .attr('width', nodeWidth)
+                        .attr('height', nodeHeight)
+                        .attr('class', 'ax-hierarchy-chart-node-container')
+                        .on('click', (event) => {
+                        // Don't propagate the event if it's coming from an interactive element
+                        // like a button inside the template
+                        const target = event.target;
+                        const isInteractive = target.tagName === 'BUTTON' || target.tagName === 'A' || target.closest('button, a, [role="button"]');
+                        if (!isInteractive) {
+                            this.handleNodeClick(event, d);
+                        }
+                    });
+                    // Create a div to hold the template
+                    const div = foreignObject
+                        .append('xhtml:div')
+                        .attr('class', 'ax-hierarchy-chart-node-content')
+                        .style('width', '100%')
+                        .style('height', '100%');
+                    // Render the template into the div
+                    this.ngZone.run(() => {
+                        // Create context with enhanced node as the implicit value
+                        const context = {
+                            $implicit: node,
+                        };
+                        const viewRef = this.viewContainerRef.createEmbeddedView(templateToUse, context);
+                        viewRef.detectChanges();
+                        // Append template contents to the div
+                        const nodes = viewRef.rootNodes;
+                        for (const node of nodes) {
+                            div.node().appendChild(node);
+                        }
+                    });
+                });
+            }
+            else {
+                // Render enhanced default nodes (rectangles with text and icons)
+                nodeGroups.each((d, i, nodes) => {
+                    const group = this.d3.select(nodes[i]);
+                    const node = d.data;
+                    const hasChildren = !!(node.children && node.children.length > 0);
+                    // Node background rect with rounded corners
+                    group
+                        .append('rect')
+                        .attr('x', -nodeWidth / 2)
+                        .attr('y', -nodeHeight / 2)
+                        .attr('width', nodeWidth)
+                        .attr('height', nodeHeight)
+                        .attr('rx', 6)
+                        .attr('ry', 6)
+                        .attr('fill', node.color || `rgb(var(--ax-comp-hierarchy-chart-node-color))`)
+                        .attr('stroke', `rgb(var(--ax-comp-hierarchy-chart-node-stroke-color))`)
+                        .attr('stroke-width', options.nodeStrokeWidth)
+                        .attr('class', 'ax-hierarchy-chart-node');
+                    // Main title/name
+                    group
+                        .append('text')
+                        .attr('y', -10)
+                        .attr('text-anchor', 'middle')
+                        .attr('class', 'ax-hierarchy-chart-node-title')
+                        .attr('fill', 'white')
+                        .attr('font-weight', 'bold')
+                        .text(node.name || node.label || '');
+                    // Subtitle if provided
+                    if (node.subtitle) {
+                        group
+                            .append('text')
+                            .attr('y', 10)
+                            .attr('text-anchor', 'middle')
+                            .attr('class', 'ax-hierarchy-chart-node-subtitle')
+                            .attr('fill', 'rgba(255, 255, 255, 0.8)')
+                            .attr('font-size', '0.8em')
+                            .text(node.subtitle);
+                    }
+                    // Type label if provided
+                    if (node.type) {
+                        group
+                            .append('text')
+                            .attr('y', 25)
+                            .attr('text-anchor', 'middle')
+                            .attr('class', 'ax-hierarchy-chart-node-type')
+                            .attr('fill', 'rgba(255, 255, 255, 0.7)')
+                            .attr('font-size', '0.7em')
+                            .text(node.type);
+                    }
+                    // Add expand/collapse indicator if node has children
+                    if (hasChildren && options.collapsible) {
+                        const isExpanded = this._expandedNodes().has(node.id) && this._expandedNodes().get(node.id);
+                        // Toggle button with better styling
+                        group
+                            .append('circle')
+                            .attr('r', 10)
+                            .attr('cx', nodeWidth / 2 - 12)
+                            .attr('cy', -nodeHeight / 2 + 12)
+                            .attr('fill', 'white')
+                            .attr('stroke', `rgb(var(--ax-comp-hierarchy-chart-node-stroke-color))`)
+                            .attr('stroke-width', 1)
+                            .attr('class', 'ax-hierarchy-chart-toggle-indicator')
+                            .style('cursor', 'pointer')
+                            .on('click', (event) => {
+                            event.stopPropagation();
+                            this.toggleNode(node.id);
+                        });
+                        // Toggle icon
+                        group
+                            .append('text')
+                            .attr('x', nodeWidth / 2 - 12)
+                            .attr('y', -nodeHeight / 2 + 12)
+                            .attr('dy', '0.32em')
+                            .attr('text-anchor', 'middle')
+                            .attr('class', 'ax-hierarchy-chart-toggle-icon')
+                            .attr('fill', node.color || `rgb(var(--ax-comp-hierarchy-chart-node-color))`)
+                            .attr('font-weight', 'bold')
+                            .style('cursor', 'pointer')
+                            .text(isExpanded ? '−' : '+')
+                            .on('click', (event) => {
+                            event.stopPropagation();
+                            this.toggleNode(node.id);
+                        });
+                    }
+                    // Icon if provided
+                    if (node.icon) {
+                        group
+                            .append('text')
+                            .attr('x', -nodeWidth / 2 + 15)
+                            .attr('y', 0)
+                            .attr('dy', '0.32em')
+                            .attr('class', 'ax-hierarchy-chart-node-icon')
+                            .attr('fill', 'white')
+                            .attr('class', node.icon);
+                    }
+                    // Add click handler to the whole node
+                    group.on('click', (event) => {
+                        this.handleNodeClick(event, d);
+                    });
+                    // Add tooltip if enabled
+                    if (options.showTooltip && (node.tooltip || node.description)) {
+                        group.append('title').text(node.tooltip || node.description || '');
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * Toggle node expansion state
+     */
+    toggleNode(nodeId) {
+        const expandedNodes = new Map(this._expandedNodes());
+        const currentState = expandedNodes.get(nodeId);
+        const newState = currentState === undefined ? false : !currentState;
+        expandedNodes.set(nodeId, newState);
+        this._expandedNodes.set(expandedNodes);
+        // Emit toggle event
+        this.findNodeById(this.processedData(), nodeId).then((node) => {
+            if (node) {
+                this.nodeToggle.emit({
+                    node: node,
+                    expanded: newState,
+                });
+            }
+        });
+        // Update toggle indicator immediately for better UX
+        this.updateToggleIndicator(nodeId, newState);
+    }
+    /**
+     * Update just the toggle indicator without redrawing the chart
+     */
+    updateToggleIndicator(nodeId, expanded) {
+        if (!this.d3 || !this.chartContainer())
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            const container = this.chartContainer().nativeElement;
+            const svg = container.querySelector('svg');
+            if (!svg)
+                return;
+            // Find and update the toggle indicator for the specific node
+            const nodeGroup = this.d3.select(svg).select(`[data-node-id="${nodeId}"]`);
+            if (nodeGroup.empty())
+                return;
+            // Update the toggle icon (if it exists)
+            const toggleIcon = nodeGroup.select('.ax-hierarchy-chart-toggle-icon');
+            if (!toggleIcon.empty()) {
+                toggleIcon.text(expanded ? '−' : '+');
+            }
+        });
+        // Force effect to run that will update the chart
+        // This leverages Angular's reactivity rather than a direct method call
+        // which is more consistent with Angular's reactive approach
+        const expandedNodes = new Map(this._expandedNodes());
+        this._expandedNodes.set(expandedNodes);
+    }
+    /**
+     * Find a node by ID
+     */
+    async findNodeById(data, id) {
+        if (data.id === id) {
+            return data;
+        }
+        if (data.children) {
+            for (const child of data.children) {
+                const found = await this.findNodeById(child, id);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Handle node click events
+     */
+    handleNodeClick(event, d) {
+        const node = d.data;
+        // Emit click event
+        this.itemClick.emit({
+            event: { nativeEvent: event, sender: this },
+            item: node,
+            element: event.currentTarget,
+        });
+    }
+    /**
+     * Clear existing chart
+     */
+    clearChart() {
+        const container = this.chartContainer()?.nativeElement;
+        if (!container)
+            return;
+        // Remove existing SVG
+        const svg = container.querySelector('svg');
+        if (svg) {
+            svg.remove();
+        }
+    }
+    /**
+     * Get D3 easing function from string name
+     */
+    getEasingFunction(easing) {
+        if (!easing)
+            return this.d3.easeCubicInOut;
+        switch (easing) {
+            case 'linear':
+                return this.d3.easeLinear;
+            case 'ease':
+                return this.d3.easePolyInOut;
+            case 'ease-in':
+                return this.d3.easePolyIn;
+            case 'ease-out':
+                return this.d3.easePolyOut;
+            case 'ease-in-out':
+                return this.d3.easePolyInOut;
+            case 'cubic':
+                return this.d3.easeCubic;
+            case 'cubic-in':
+                return this.d3.easeCubicIn;
+            case 'cubic-out':
+                return this.d3.easeCubicOut;
+            case 'cubic-in-out':
+                return this.d3.easeCubicInOut;
+            default:
+                return this.d3.easeCubicInOut;
+        }
+    }
+    /**
+     * Shows a message when no data is available
+     */
+    showNoDataMessage(containerElement) {
+        // Clear existing contents first
+        this.d3.select(containerElement).selectAll('*').remove();
+        const messageContainer = this.d3
+            .select(containerElement)
+            .append('div')
+            .attr('class', 'ax-hierarchy-chart-no-data-message')
+            .style('position', 'absolute')
+            .style('left', '50%')
+            .style('top', '50%')
+            .style('transform', 'translate(-50%, -50%)')
+            .style('text-align', 'center')
+            .style('background-color', 'rgb(var(--ax-comp-hierarchy-chart-bg-color))')
+            .style('padding', '1.5rem')
+            .style('border-radius', '0.5rem')
+            .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')
+            .style('width', '80%')
+            .style('max-width', '300px');
+        // Add an icon
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-hierarchy-chart-no-data-icon')
+            .style('opacity', '0.6')
+            .style('margin-bottom', '0.75rem')
+            .html('<i class="fa-light fa-sitemap fa-2x"></i>');
+        // Add text message
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-hierarchy-chart-no-data-text')
+            .style('font-size', '1rem')
+            .style('font-weight', '600')
+            .style('margin-bottom', '0.5rem')
+            .text('No data available');
+        // Add help text
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-hierarchy-chart-no-data-help')
+            .style('font-size', '0.8rem')
+            .style('opacity', '0.6')
+            .text('Please provide data to display the chart');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXHierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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 axPanView class=\"ax-hierarchy-chart\" #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: var(--ax-sys-color-lightest-surface);color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:visible}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-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;box-shadow:0 2px 12px #00000014;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"], dependencies: [{ kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["zoomStep", "minZoom", "maxZoom", "freeMode", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXHierarchyChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-hierarchy-chart', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPanViewDirective], template: "<div axPanView class=\"ax-hierarchy-chart\" #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: var(--ax-sys-color-lightest-surface);color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:visible}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-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;box-shadow:0 2px 12px #00000014;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: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXHierarchyChartComponent, AXHierarchyChartDefaultConfig, AX_HIERARCHY_CHART_CONFIG, hierarchyChartConfig };
+//# sourceMappingURL=acorex-charts-hierarchy-chart.mjs.map