invensys-ng 21.3.5 → 21.3.6

package/fesm2022/invensys-ng.mjs

@@ -8993,36 +8993,6 @@ const CHART_COLOR_PALETTE = {
         950: '#020617',
     },
 };
-/**
- * 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
@@ -9053,6 +9023,11 @@ class IChart {
      * @internal
      */
     chartInstances = [];
+    /**
+     * Legend items generated from Chart.js for each chart instance.
+     * @internal
+     */
+    chartLegendItems = [];
     /**
      * Flag to track if component has initialized
      * @internal
@@ -9123,6 +9098,7 @@ class IChart {
             if (chartDisplay && canvasRef?.nativeElement) {
                 const chartInstance = this.createChartInstance(canvasRef.nativeElement, chartDisplay);
                 this.chartInstances.push(chartInstance);
+                this.updateLegendItems(index);
             }
         });
     }
@@ -9136,6 +9112,7 @@ class IChart {
         });
         this.chartInstances = [];
         this.chartDisplays = [];
+        this.chartLegendItems = [];
     }
     /**
      * Create a Chart.js instance
@@ -9221,6 +9198,7 @@ class IChart {
             responsive: this.responsive,
             plugins: {
                 legend: {
+                    display: false,
                     labels: {
                         color: textColor,
                     },
@@ -9255,6 +9233,7 @@ class IChart {
                     ...baseOptions,
                     plugins: {
                         legend: {
+                            display: false,
                             labels: {
                                 color: textColor,
                             },
@@ -9272,6 +9251,7 @@ class IChart {
                     ...baseOptions,
                     plugins: {
                         legend: {
+                            display: false,
                             labels: {
                                 color: textColor,
                             },
@@ -9447,6 +9427,51 @@ class IChart {
         // If it's already rgba, leave as-is (user specified their own alpha)
         return color;
     }
+    /**
+     * Get legend items for a chart display.
+     * @param chartIndex - The index of the chart display
+     * @returns Legend items generated by Chart.js
+     */
+    getLegendItems(chartIndex) {
+        return this.chartLegendItems[chartIndex] ?? [];
+    }
+    /**
+     * Toggle a chart legend item using the same Chart.js behavior as the built-in legend.
+     * @param chartIndex - The index of the chart display
+     * @param item - The legend item to toggle
+     */
+    toggleLegendItem(chartIndex, item) {
+        const chart = this.chartInstances[chartIndex];
+        if (!chart) {
+            return;
+        }
+        if (item.datasetIndex !== undefined) {
+            chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+        }
+        else if (item.index !== undefined) {
+            chart.toggleDataVisibility(item.index);
+        }
+        chart.update();
+        this.updateLegendItems(chartIndex);
+    }
+    /**
+     * Refresh the custom legend items for a chart instance.
+     * @internal
+     */
+    updateLegendItems(chartIndex) {
+        const chart = this.chartInstances[chartIndex];
+        const generateLabels = chart?.options.plugins?.legend?.labels?.generateLabels;
+        if (!chart || !generateLabels) {
+            this.chartLegendItems[chartIndex] = [];
+            return;
+        }
+        this.chartLegendItems[chartIndex] = generateLabels(chart).map((item) => ({
+            ...item,
+            fillStyleText: String(item.fillStyle ?? 'transparent'),
+            strokeStyleText: String(item.strokeStyle ?? item.fillStyle ?? 'transparent'),
+        }));
+        this.cdr.detectChanges();
+    }
     /**
      * Get the height style for a chart display
      * @param display - The chart display configuration
@@ -9463,11 +9488,11 @@ class IChart {
         return this.chartInstances.length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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.id) {\n    <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n      <canvas #chartCanvas></canvas>\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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.id; let chartIndex = $index) {\n    <div class=\"i-chart-panel\">\n      <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", 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.id) {\n    <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n      <canvas #chartCanvas></canvas>\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.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"] }]
+            args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay.id; let chartIndex = $index) {\n    <div class=\"i-chart-panel\">\n      <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] }]
         }], propDecorators: { charts: [{
                 type: Input
             }], height: [{