integra-ng 20.1.9 → 20.1.10

package/fesm2022/integra-ng.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, ViewChild, createComponent, Directive, Optional, Self, forwardRef, HostListener, ChangeDetectionStrategy, signal, inject, EnvironmentInjector, ApplicationRef, Injectable, input, computed, ViewEncapsulation, Inject } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, ViewChild, createComponent, Directive, Optional, Self, forwardRef, HostListener, ChangeDetectionStrategy, signal, inject, EnvironmentInjector, ApplicationRef, Injectable, input, computed, ViewEncapsulation, ViewChildren, Inject } from '@angular/core';
 import * as i1 from '@angular/common';
 import { NgClass, CommonModule, NgTemplateOutlet, NgIf, NgFor, NgStyle, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { take } from 'rxjs/operators';
 import { Subject, BehaviorSubject } from 'rxjs';
+import { Chart, registerables } from 'chart.js';
 import * as i1$1 from '@angular/platform-browser';
 
 var lastId = 0;
@@ -6807,6 +6808,434 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 args: ['document:mouseup']
             }] } });
 
+// Register all Chart.js components
+Chart.register(...registerables);
+/**
+ * Chart Component
+ *
+ * A Chart.js-based chart component for displaying various chart types.
+ * Supports multiple charts in a responsive grid layout.
+ *
+ * @example
+ * ```html
+ * <i-chart
+ *   [charts]="myCharts"
+ *   height="25rem">
+ * </i-chart>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * myCharts: IChartData[] = [
+ *   {
+ *     chartId: 'sales-chart',
+ *     chartType: 'bar',
+ *     labels: ['Jan', 'Feb', 'Mar'],
+ *     dataSets: [{
+ *       label: 'Sales',
+ *       data: [100, 200, 150],
+ *       backgroundColors: ['--blue-500', '--green-500', '--orange-500']
+ *     }]
+ *   }
+ * ];
+ * ```
+ */
+class IChart {
+    /**
+     * Array of chart data objects to render
+     */
+    charts = [];
+    /**
+     * Default height for charts
+     * @default '20rem'
+     */
+    height = '20rem';
+    /**
+     * Whether charts should be responsive
+     * @default true
+     */
+    responsive = true;
+    /**
+     * Reference to all canvas elements
+     * @internal
+     */
+    canvasElements;
+    /**
+     * Array of display configurations for each chart
+     * @internal
+     */
+    chartDisplays = [];
+    /**
+     * Chart.js instances for cleanup
+     * @internal
+     */
+    chartInstances = [];
+    /**
+     * Flag to track if component has initialized
+     * @internal
+     */
+    initialized = false;
+    /**
+     * Reference to pending animation frame for cleanup
+     * @internal
+     */
+    pendingAnimationFrame = null;
+    ngAfterViewInit() {
+        this.initialized = true;
+        this.initializeCharts();
+    }
+    ngOnChanges(changes) {
+        if (changes['charts'] && this.initialized) {
+            this.destroyCharts();
+            this.initializeCharts();
+        }
+    }
+    ngOnDestroy() {
+        this.cancelPendingInitialization();
+        this.destroyCharts();
+    }
+    /**
+     * Cancel any pending chart initialization
+     * @internal
+     */
+    cancelPendingInitialization() {
+        if (this.pendingAnimationFrame !== null) {
+            cancelAnimationFrame(this.pendingAnimationFrame);
+            this.pendingAnimationFrame = null;
+        }
+    }
+    /**
+     * Initialize all charts
+     * @internal
+     */
+    initializeCharts() {
+        this.chartDisplays = this.charts.map((chart) => this.transformToChartDisplay(chart));
+        // Cancel any pending initialization
+        this.cancelPendingInitialization();
+        // Use requestAnimationFrame for proper timing after view update
+        this.pendingAnimationFrame = requestAnimationFrame(() => {
+            this.pendingAnimationFrame = null;
+            this.canvasElements.forEach((canvasRef, index) => {
+                const chartDisplay = this.chartDisplays[index];
+                if (chartDisplay && canvasRef) {
+                    const chartInstance = this.createChartInstance(canvasRef.nativeElement, chartDisplay);
+                    this.chartInstances.push(chartInstance);
+                }
+            });
+        });
+    }
+    /**
+     * Destroy all chart instances
+     * @internal
+     */
+    destroyCharts() {
+        this.chartInstances.forEach((chart) => {
+            chart.destroy();
+        });
+        this.chartInstances = [];
+        this.chartDisplays = [];
+    }
+    /**
+     * Create a Chart.js instance
+     * @internal
+     */
+    createChartInstance(canvas, display) {
+        const config = {
+            type: display.type,
+            data: display.data,
+            options: display.options,
+        };
+        return new Chart(canvas, config);
+    }
+    /**
+     * Transform IChartData to IChartDisplay
+     * @internal
+     */
+    transformToChartDisplay(chart) {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color') || '#333';
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary') || '#666';
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border') || '#ddd';
+        const chartType = this.mapChartType(chart.chartType);
+        const height = this.getChartHeight(chart.chartType);
+        const options = this.getChartOptions(chart.chartType, textColor, textColorSecondary, surfaceBorder);
+        const data = {
+            labels: chart.labels,
+            datasets: chart.dataSets.map((dataset) => this.transformDataset(dataset, documentStyle)),
+        };
+        return {
+            type: chartType,
+            data,
+            options,
+            height,
+        };
+    }
+    /**
+     * Map custom chart type strings to Chart.js types
+     * @internal
+     */
+    mapChartType(chartType) {
+        const typeMap = {
+            bar: 'bar',
+            'bar-stack': 'bar',
+            'bar-large': 'bar',
+            'bar-horizontal': 'bar',
+            pie: 'pie',
+            doughnut: 'doughnut',
+            line: 'line',
+            scatter: 'scatter',
+            bubble: 'bubble',
+            polarArea: 'polarArea',
+            radar: 'radar',
+        };
+        return typeMap[chartType] || 'bar';
+    }
+    /**
+     * Get chart height based on chart type
+     * @internal
+     */
+    getChartHeight(chartType) {
+        if (chartType === 'bar-large') {
+            return '40rem';
+        }
+        return this.height;
+    }
+    /**
+     * Get chart options based on chart type
+     * @internal
+     */
+    getChartOptions(chartType, textColor, textColorSecondary, surfaceBorder) {
+        const baseOptions = {
+            maintainAspectRatio: false,
+            responsive: this.responsive,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor,
+                    },
+                },
+            },
+        };
+        switch (chartType) {
+            case 'bar':
+                return {
+                    ...baseOptions,
+                    scales: this.getBarScales(textColorSecondary, surfaceBorder),
+                };
+            case 'bar-stack':
+                return {
+                    ...baseOptions,
+                    scales: this.getStackedBarScales(textColorSecondary, surfaceBorder),
+                };
+            case 'bar-large':
+                return {
+                    ...baseOptions,
+                    scales: this.getBarScales(textColorSecondary, surfaceBorder),
+                };
+            case 'bar-horizontal':
+                return {
+                    ...baseOptions,
+                    indexAxis: 'y',
+                    scales: this.getBarScales(textColorSecondary, surfaceBorder),
+                };
+            case 'pie':
+            case 'doughnut':
+                return {
+                    ...baseOptions,
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: textColor,
+                            },
+                            position: 'bottom',
+                        },
+                    },
+                };
+            case 'line':
+                return {
+                    ...baseOptions,
+                    scales: this.getLineScales(textColorSecondary, surfaceBorder),
+                };
+            case 'radar':
+                return {
+                    ...baseOptions,
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: textColor,
+                            },
+                        },
+                    },
+                    scales: {
+                        r: {
+                            grid: {
+                                color: surfaceBorder,
+                            },
+                            pointLabels: {
+                                color: textColorSecondary,
+                            },
+                        },
+                    },
+                };
+            case 'polarArea':
+                return {
+                    ...baseOptions,
+                    scales: {
+                        r: {
+                            grid: {
+                                color: surfaceBorder,
+                            },
+                        },
+                    },
+                };
+            default:
+                return baseOptions;
+        }
+    }
+    /**
+     * Get scales configuration for bar charts
+     * @internal
+     */
+    getBarScales(textColorSecondary, surfaceBorder) {
+        return {
+            x: {
+                ticks: {
+                    color: textColorSecondary,
+                },
+                grid: {
+                    color: surfaceBorder,
+                },
+            },
+            y: {
+                ticks: {
+                    color: textColorSecondary,
+                },
+                grid: {
+                    color: surfaceBorder,
+                },
+            },
+        };
+    }
+    /**
+     * Get scales configuration for stacked bar charts
+     * @internal
+     */
+    getStackedBarScales(textColorSecondary, surfaceBorder) {
+        return {
+            x: {
+                stacked: true,
+                ticks: {
+                    color: textColorSecondary,
+                },
+                grid: {
+                    color: surfaceBorder,
+                },
+            },
+            y: {
+                stacked: true,
+                ticks: {
+                    color: textColorSecondary,
+                },
+                grid: {
+                    color: surfaceBorder,
+                },
+            },
+        };
+    }
+    /**
+     * Get scales configuration for line charts
+     * @internal
+     */
+    getLineScales(textColorSecondary, surfaceBorder) {
+        return {
+            x: {
+                ticks: {
+                    color: textColorSecondary,
+                },
+                grid: {
+                    color: surfaceBorder,
+                },
+            },
+            y: {
+                ticks: {
+                    color: textColorSecondary,
+                },
+                grid: {
+                    color: surfaceBorder,
+                },
+            },
+        };
+    }
+    /**
+     * Transform dataset with resolved colors
+     * @internal
+     */
+    transformDataset(dataset, documentStyle) {
+        return {
+            label: dataset.label,
+            data: dataset.data,
+            backgroundColor: dataset.backgroundColors.map((color) => {
+                const resolvedColor = this.resolveColor(color, documentStyle);
+                return this.addTransparency(resolvedColor);
+            }),
+            borderColor: dataset.backgroundColors.map((color) => this.resolveColor(color, documentStyle)),
+            borderWidth: 1,
+        };
+    }
+    /**
+     * Resolve CSS variable to hex color or return as-is
+     * @internal
+     */
+    resolveColor(color, documentStyle) {
+        if (color.startsWith('--')) {
+            const resolvedColor = documentStyle.getPropertyValue(color).trim();
+            return resolvedColor || color;
+        }
+        return color;
+    }
+    /**
+     * Add transparency to a hex color
+     * @internal
+     */
+    addTransparency(color) {
+        // If it's a hex color, add transparency
+        if (color.startsWith('#')) {
+            return color + 'bf'; // ~75% opacity
+        }
+        return color;
+    }
+    /**
+     * Get the height style for a chart display
+     * @param display - The chart display configuration
+     * @returns The height CSS value
+     */
+    getChartHeightStyle(display) {
+        return display.height || this.height;
+    }
+    /**
+     * Get the number of active chart instances (for testing)
+     * @returns The count of active chart instances
+     */
+    getChartInstanceCount() {
+        return this.chartInstances.length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay) {\n    <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n      <canvas #chartCanvas></canvas>\n    </div>\n  }\n</div>\n", styles: [".i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-item{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media (max-width: 768px){.i-charts-container{flex-direction:column}.i-chart-item{width:100%}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay) {\n    <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n      <canvas #chartCanvas></canvas>\n    </div>\n  }\n</div>\n", styles: [".i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-item{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media (max-width: 768px){.i-charts-container{flex-direction:column}.i-chart-item{width:100%}}\n"] }]
+        }], propDecorators: { charts: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], canvasElements: [{
+                type: ViewChildren,
+                args: ['chartCanvas']
+            }] } });
+
 /**
  * Service for broadcasting data update events across the application.
  *
@@ -7265,5 +7694,5 @@ var zindexutils = ZIndexUtils();
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDialog, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, EmptyStateTableComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IPanel, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITreeView, IWhisper, SeoService, StructuredDataService, TooltipComponent, TooltipDirective, UniqueComponentId, WhisperService, ZIndexUtils, lastId };
+export { AbstractDialog, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, EmptyStateTableComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IPanel, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITreeView, IWhisper, SeoService, StructuredDataService, TooltipComponent, TooltipDirective, UniqueComponentId, WhisperService, ZIndexUtils, lastId };
 //# sourceMappingURL=integra-ng.mjs.map