@testgorilla/tgo-ui 4.2.4 → 5.0.0

package/fesm2022/testgorilla-tgo-ui-components-spider-chart.mjs

@@ -0,0 +1,490 @@
+import * as i0 from '@angular/core';
+import { ViewChildren, ViewChild, Input, Component, NgModule } from '@angular/core';
+import * as i5 from '@testgorilla/tgo-ui/components/core';
+import { Color, UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';
+import * as i2 from 'ng2-charts';
+import { BaseChartDirective, NgChartsModule } from 'ng2-charts';
+import * as i1 from '@angular/common';
+import { NgClass, CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i4 from '@testgorilla/tgo-ui/components/spinner';
+import { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';
+import { Chart, registerables } from 'chart.js';
+
+// These are the sizes of the canvas, not the chart itself. It includes 40px of padding on all sides.
+const SmallSpiderChartSize = 200;
+const LargeSpiderChartSize = 280;
+
+class SpiderChartComponent {
+    constructor() {
+        /**
+         * The size of the spider chart.
+         * @type {SpiderChartSize}
+         * @memberof SpiderChartComponent
+         */
+        this.size = 'large';
+        /**
+         * The step size for the spider chart.
+         * @type {number}
+         * @memberof SpiderChartComponent
+         */
+        this.stepSize = 20;
+        /**
+         * The aria label for the spider chart.
+         * @type {string}
+         * @memberof SpiderChartComponent
+         */
+        this.ariaLabel = 'Radar chart. Press tab to navigate through the chart.';
+        /**
+         * Whether the spider chart is loading.
+         * @type {boolean}
+         * @memberof SpiderChartComponent
+         */
+        this.loading = false;
+        /**
+         *
+         * Defines the application theme
+         *
+         * @type {ApplicationTheme}
+         * @memberof SpinnerComponent
+         */
+        this.applicationTheme = 'light';
+        this.radarChartData = {
+            labels: [],
+            datasets: [],
+        };
+        this.labelPositions = {};
+        this.labelPositionsVisible = false;
+        this.focusedLabelIndex = 0;
+        this.focusedFakeDataPointIndex = 0;
+        this.loadingChartData = {
+            labels: [1, 2, 3, 4, 5, 6],
+            datasets: [],
+        };
+        this.loadingChartOptions = {
+            responsive: true,
+            layout: {
+                padding: {
+                    left: 40,
+                    right: 40,
+                    top: 40,
+                    bottom: 40,
+                },
+            },
+            scales: {
+                r: {
+                    angleLines: {
+                        display: true,
+                        color: Color.GRAYSCALE_30,
+                    },
+                    grid: {
+                        color: () => Color.GRAYSCALE_30,
+                    },
+                    pointLabels: {
+                        display: false,
+                    },
+                    suggestedMin: 0,
+                    suggestedMax: 100,
+                    ticks: {
+                        stepSize: this.stepSize,
+                        display: false,
+                    },
+                },
+            },
+        };
+        this.translationContext = 'CHARTS.SPIDER.';
+    }
+    ngOnInit() {
+        if (!this.loading) {
+            this.handleInputErrors();
+            this.setChartData();
+            this.setChartOptions();
+        }
+    }
+    handleInputErrors() {
+        if (!this.spiderChartData.labels || this.spiderChartData.labels.length === 0) {
+            throw new Error('The "labels" input is required and cannot be empty.');
+        }
+        if (!this.spiderChartData.labelDescription || this.spiderChartData.labelDescription.length === 0) {
+            throw new Error('The "labelDescription" input is required and cannot be empty.');
+        }
+        if (this.spiderChartData.labelDescription &&
+            this.spiderChartData.labelDescription.length !== this.spiderChartData.labels.length) {
+            throw new Error('The "labelDescription" input must have the same length as "labels".');
+        }
+        if (!this.spiderChartData.plotData[0].databaseLabel) {
+            throw new Error('The "plotData.databaseLabel" input is required.');
+        }
+        if (!this.spiderChartData.plotData[0].data || this.spiderChartData.plotData[0].data.length === 0) {
+            throw new Error('The "plotData.data" input is required and cannot be empty.');
+        }
+        if (this.spiderChartData.plotData[0].data.length !== this.spiderChartData.labels.length) {
+            throw new Error('The "plotData.data" input must have the same length as "labels".');
+        }
+        if (this.spiderChartData.plotData.length === 2 &&
+            this.spiderChartData.labels.length > 0 &&
+            this.spiderChartData.plotData[1].data &&
+            this.spiderChartData.plotData[1].data.length !== this.spiderChartData.labels.length) {
+            throw new Error('The "plotData.data" input must have the same length as "labels".');
+        }
+    }
+    setChartData() {
+        const datasets = [];
+        datasets.push({
+            label: this.spiderChartData.plotData[0].databaseLabel,
+            data: this.spiderChartData.plotData[0].data,
+            fill: true,
+            backgroundColor: 'rgba(212, 16, 170, 0.2)',
+            borderColor: Color.BRAND_50,
+            pointBackgroundColor: Color.BRAND_50,
+            pointBorderColor: Color.TGO_WHITE,
+            pointHoverBackgroundColor: Color.TGO_WHITE,
+            pointHoverBorderColor: Color.BRAND_50,
+        });
+        if (this.spiderChartData.plotData.length === 2) {
+            datasets.push({
+                label: this.spiderChartData.plotData[1].databaseLabel,
+                data: this.spiderChartData.plotData[1].data,
+                fill: false,
+                borderColor: Color.BLACK,
+                borderDash: [5, 5],
+                borderWidth: 1,
+                pointBackgroundColor: Color.BLACK,
+                pointBorderColor: Color.TGO_WHITE,
+                pointHoverBackgroundColor: Color.TGO_WHITE,
+                pointHoverBorderColor: Color.BLACK,
+            });
+        }
+        this.radarChartData = {
+            labels: this.spiderChartData.labels,
+            datasets: datasets,
+        };
+    }
+    setChartOptions() {
+        this.radarChartOptions = {
+            responsive: true,
+            elements: {
+                line: {
+                    borderWidth: 3,
+                },
+            },
+            layout: {
+                padding: {
+                    left: 40,
+                    right: 40,
+                    top: 40,
+                    bottom: 40,
+                },
+            },
+            scales: {
+                r: {
+                    angleLines: {
+                        display: true,
+                        color: Color.BLACK,
+                    },
+                    grid: {
+                        color: context => {
+                            if (context.tick.value === 100) {
+                                return Color.BLACK;
+                            }
+                            return Color.GRAYSCALE_30;
+                        },
+                    },
+                    pointLabels: {
+                        color: 'black',
+                        font: {
+                            family: 'Arial',
+                            size: 14,
+                        },
+                        display: false,
+                    },
+                    suggestedMin: 0,
+                    suggestedMax: 100,
+                    ticks: {
+                        stepSize: this.stepSize,
+                        display: false,
+                    },
+                },
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+            },
+        };
+    }
+    ngAfterViewInit() {
+        if (this.chart?.chart && !this.loading) {
+            this.logCornerCoordinates(this.chart.chart);
+        }
+    }
+    logCornerCoordinates(chart) {
+        const scale = chart.scales['r'];
+        const canvasWidth = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;
+        const canvasHeight = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;
+        // Loop through the labels and calculate the percentage coordinates
+        this.spiderChartData.labels.forEach((label, index) => {
+            const position = scale.getPointPositionForValue(index, scale.max);
+            // Calculate percentage values relative to the canvas size
+            const xPercent = (position.x / canvasWidth) * 100;
+            const yPercent = ((canvasHeight - position.y) / canvasHeight) * 100; // Inverting the Y-axis
+            this.labelPositions[label] = { x: Number(xPercent.toFixed(2)), y: Number(yPercent.toFixed(2)) };
+        });
+        this.labelPositionsVisible = true;
+    }
+    getCenteredLabelBottomPosition(label, height) {
+        const position = this.labelPositions[label];
+        const padding = 7;
+        if (position.x > 50 || position.x < 50) {
+            return `calc(${position.y}% - ${height / 2}px)`;
+        }
+        else if (position.y < 50) {
+            return `calc(${position.y}% - ${height}px - ${padding}px)`;
+        }
+        else {
+            return `calc(${position.y}% + ${padding}px)`;
+        }
+    }
+    getCenteredLabelLeftPosition(label, width) {
+        const position = this.labelPositions[label];
+        const padding = 15;
+        if (position.x === 50) {
+            return `calc(${position.x}% - ${width / 2}px)`;
+        }
+        else if (position.x < 50) {
+            return `calc(${position.x}% - ${width}px - ${padding}px)`;
+        }
+        else {
+            return `calc(${position.x}% + ${padding}px)`;
+        }
+    }
+    onLabelKeyDown(event, index) {
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            this.focusNextLabel(index);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            this.focusPreviousLabel(index);
+        }
+    }
+    focusNextLabel(index) {
+        const nextIndex = index + 1;
+        if (nextIndex < this.labelContainers.length) {
+            this.labelContainers.get(nextIndex)?.nativeElement.focus();
+        }
+        else {
+            this.labelContainers.first?.nativeElement.focus();
+        }
+        this.focusedLabelIndex = nextIndex;
+    }
+    focusPreviousLabel(index) {
+        const previousIndex = index - 1;
+        if (previousIndex >= 0) {
+            this.labelContainers.get(previousIndex)?.nativeElement.focus();
+        }
+        else {
+            this.labelContainers.last?.nativeElement.focus();
+        }
+        this.focusedLabelIndex = previousIndex;
+    }
+    onLegendItemKeyDown(event, index) {
+        if (event.key === 'Enter') {
+            this.toggleDatasetVisibility(index);
+        }
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            this.focusNextLegendItem(index);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            this.focusPreviousLegendItem(index);
+        }
+    }
+    focusNextLegendItem(index) {
+        const nextIndex = index + 1;
+        if (nextIndex < this.legendItems.length) {
+            this.legendItems.get(nextIndex)?.nativeElement.focus();
+        }
+        else {
+            this.legendItems.first?.nativeElement.focus();
+        }
+    }
+    focusPreviousLegendItem(index) {
+        const previousIndex = index - 1;
+        if (previousIndex >= 0) {
+            this.legendItems.get(previousIndex)?.nativeElement.focus();
+        }
+        else {
+            this.legendItems.last?.nativeElement.focus();
+        }
+    }
+    onFakeDataPointsKeyDown(event, index, isSecondary = false) {
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            this.focusNextFakeDataPoint(index, isSecondary);
+            this.showTooltipForDataPoint(index + 1 > this.spiderChartData.labels.length ? 0 : index + 1, isSecondary);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            this.focusPreviousFakeDataPoint(index, isSecondary);
+            this.showTooltipForDataPoint(index - 1 < 0 ? this.spiderChartData.labels.length - 1 : index - 1, isSecondary);
+        }
+        else if (event.key === 'Tab') {
+            this.resetActiveElement();
+        }
+    }
+    focusNextFakeDataPoint(index, isSecondary = false) {
+        const nextIndex = index + 1;
+        if (nextIndex < this.fakeDataPoints.length) {
+            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+            fakeDataPoints.get(nextIndex)?.nativeElement.focus();
+        }
+        else {
+            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+            fakeDataPoints.first?.nativeElement.focus();
+        }
+        if (!isSecondary) {
+            this.focusedFakeDataPointIndex = nextIndex;
+        }
+    }
+    focusPreviousFakeDataPoint(index, isSecondary = false) {
+        const previousIndex = index - 1;
+        if (previousIndex >= 0) {
+            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+            fakeDataPoints.get(previousIndex)?.nativeElement.focus();
+        }
+        else {
+            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+            fakeDataPoints.last?.nativeElement.focus();
+        }
+        if (!isSecondary) {
+            this.focusedFakeDataPointIndex = previousIndex;
+        }
+    }
+    showTooltipForDataPoint(index, isSecondary = false) {
+        const chartInstance = this.chart?.chart;
+        if (!chartInstance)
+            return;
+        const activeElement = [{ datasetIndex: isSecondary ? 1 : 0, index }];
+        const meta = chartInstance.getDatasetMeta(isSecondary ? 1 : 0);
+        const dataPoint = meta.data[index];
+        const eventPosition = {
+            x: dataPoint.x,
+            y: dataPoint.y,
+        };
+        if (!isSecondary) {
+            this.focusedFakeDataPointIndex = index;
+        }
+        chartInstance.tooltip?.setActiveElements(activeElement, eventPosition);
+        chartInstance.update();
+    }
+    resetActiveElement() {
+        const chartInstance = this.chart?.chart;
+        if (!chartInstance)
+            return;
+        // Clear the active elements to hide the tooltip
+        chartInstance.tooltip?.setActiveElements([], { x: 0, y: 0 });
+        chartInstance.update();
+    }
+    toggleDatasetVisibility(datasetIndex) {
+        const chartInstance = this.chart?.chart;
+        if (!chartInstance)
+            return;
+        const dataset = chartInstance.data.datasets[datasetIndex];
+        dataset.hidden = !dataset.hidden;
+        chartInstance.update();
+    }
+    isDatasetVisible(datasetIndex) {
+        const chartInstance = this.chart?.chart;
+        if (!chartInstance)
+            return;
+        return !chartInstance.data.datasets[datasetIndex].hidden;
+    }
+    getFirstLine(label) {
+        const words = label.split(' ');
+        let firstLine = '';
+        for (const word of words) {
+            if ((firstLine + word).length <= 20) {
+                firstLine += (firstLine ? ' ' : '') + word;
+            }
+            else {
+                break;
+            }
+        }
+        return firstLine;
+    }
+    getSecondLine(label) {
+        const firstLine = this.getFirstLine(label);
+        return label.substring(firstLine.length).trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SpiderChartComponent, isStandalone: false, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\">\n  <div class=\"spacing-container\"\n    [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n    <div class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\">\n      @if (!loading) {\n        <canvas\n          baseChart\n          [data]=\"radarChartData\"\n          [options]=\"radarChartOptions\"\n          type=\"radar\"\n          class=\"chart\"\n        >\n        </canvas>\n      } @else {\n        <canvas\n          baseChart\n          [data]=\"loadingChartData\"\n          [options]=\"loadingChartOptions\"\n          type=\"radar\"\n          class=\"chart\"\n        >\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n      <div class=\"overlay-container\">\n          @for (label of spiderChartData.labels; track label) {\n            <div class=\"label-container\" #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n              [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span class=\"fake-data-points\" #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"isDatasetVisible($index) ?\n          ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n          ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem>\n          <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "pipe", type: i5.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i5.MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpiderChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-spider-chart', standalone: false, template: "<div class=\"spider-chart-container\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\">\n  <div class=\"spacing-container\"\n    [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n    <div class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\">\n      @if (!loading) {\n        <canvas\n          baseChart\n          [data]=\"radarChartData\"\n          [options]=\"radarChartOptions\"\n          type=\"radar\"\n          class=\"chart\"\n        >\n        </canvas>\n      } @else {\n        <canvas\n          baseChart\n          [data]=\"loadingChartData\"\n          [options]=\"loadingChartOptions\"\n          type=\"radar\"\n          class=\"chart\"\n        >\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n      <div class=\"overlay-container\">\n          @for (label of spiderChartData.labels; track label) {\n            <div class=\"label-container\" #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n              [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span class=\"fake-data-points\" #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"isDatasetVisible($index) ?\n          ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n          ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem>\n          <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], spiderChartData: [{
+                type: Input
+            }], stepSize: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], applicationTheme: [{
+                type: Input
+            }], chart: [{
+                type: ViewChild,
+                args: [BaseChartDirective]
+            }], labelContainers: [{
+                type: ViewChildren,
+                args: ['labelContainer']
+            }], fakeDataPoints: [{
+                type: ViewChildren,
+                args: ['fakeDataPoints']
+            }], fakeDataPointsSecondary: [{
+                type: ViewChildren,
+                args: ['fakeDataPointsSecondary']
+            }], legendItems: [{
+                type: ViewChildren,
+                args: ['legendItem']
+            }] } });
+
+Chart.register(...registerables);
+class SpiderChartComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpiderChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: SpiderChartComponentModule, declarations: [SpiderChartComponent], imports: [NgClass,
+            UiTranslatePipe,
+            NgChartsModule,
+            MatTooltipModule,
+            UiTranslatePipe,
+            MemoizeFuncPipe,
+            SpinnerComponentModule,
+            CommonModule], exports: [SpiderChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpiderChartComponentModule, imports: [NgChartsModule,
+            MatTooltipModule,
+            SpinnerComponentModule,
+            CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpiderChartComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpiderChartComponent],
+                    exports: [SpiderChartComponent],
+                    imports: [
+                        NgClass,
+                        UiTranslatePipe,
+                        NgChartsModule,
+                        MatTooltipModule,
+                        UiTranslatePipe,
+                        MemoizeFuncPipe,
+                        SpinnerComponentModule,
+                        CommonModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LargeSpiderChartSize, SmallSpiderChartSize, SpiderChartComponent, SpiderChartComponentModule };
+//# sourceMappingURL=testgorilla-tgo-ui-components-spider-chart.mjs.map

package/fesm2022/testgorilla-tgo-ui-components-spider-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-spider-chart.mjs","sources":["../../../components/spider-chart/spider-chart.model.ts","../../../components/spider-chart/spider-chart.component.ts","../../../components/spider-chart/spider-chart.component.html","../../../components/spider-chart/spider-chart.module.ts","../../../components/spider-chart/testgorilla-tgo-ui-components-spider-chart.ts"],"sourcesContent":["export type SpiderChartSize = 'large' | 'small';\n// These are the sizes of the canvas, not the chart itself. It includes 40px of padding on all sides.\nexport const SmallSpiderChartSize: number = 200;\nexport const LargeSpiderChartSize: number = 280;\nexport type SpiderChartData = {\n  labels: string[];\n  labelDescription: string[];\n  plotData: [PlotData, PlotData] | [PlotData]; // Current implementation supports max 2 datasets.\n};\nexport type PlotData = {\n  databaseLabel: string;\n  data: number[];\n};\n","import { Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';\nimport { LargeSpiderChartSize, SmallSpiderChartSize, SpiderChartData, SpiderChartSize } from './spider-chart.model';\nimport { ApplicationTheme, Color } from '@testgorilla/tgo-ui/components/core';\nimport { Chart, ChartData, ChartOptions } from 'chart.js';\nimport { BaseChartDirective } from 'ng2-charts';\n\n@Component({\n    selector: 'ui-spider-chart',\n    templateUrl: './spider-chart.component.html',\n    styleUrls: ['./spider-chart.component.scss'],\n    standalone: false\n})\nexport class SpiderChartComponent implements OnInit {\n  /**\n   * The size of the spider chart.\n   * @type {SpiderChartSize}\n   * @memberof SpiderChartComponent\n   */\n  @Input() size: SpiderChartSize = 'large';\n\n  /**\n   * The data to be used for the spider chart.\n   * @type {SpiderChartData}\n   * @memberof SpiderChartComponent\n   */\n  @Input() spiderChartData: SpiderChartData;\n\n  /**\n   * The step size for the spider chart.\n   * @type {number}\n   * @memberof SpiderChartComponent\n   */\n  @Input() stepSize: number = 20;\n\n  /**\n   * The aria label for the spider chart.\n   * @type {string}\n   * @memberof SpiderChartComponent\n   */\n  @Input() ariaLabel: string = 'Radar chart. Press tab to navigate through the chart.';\n\n  /**\n   * Whether the spider chart is loading.\n   * @type {boolean}\n   * @memberof SpiderChartComponent\n   */\n  @Input() loading: boolean = false;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SpinnerComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  @ViewChild(BaseChartDirective) chart: BaseChartDirective;\n  @ViewChildren('labelContainer') labelContainers: QueryList<ElementRef>;\n  @ViewChildren('fakeDataPoints') fakeDataPoints: QueryList<ElementRef>;\n  @ViewChildren('fakeDataPointsSecondary') fakeDataPointsSecondary: QueryList<ElementRef>;\n  @ViewChildren('legendItem') legendItems: QueryList<ElementRef>;\n\n  radarChartData: ChartData<'radar'> = {\n    labels: [],\n    datasets: [],\n  };\n  radarChartOptions: ChartOptions<'radar'>;\n  labelPositions: { [key: string]: { x: number; y: number } } = {};\n  labelPositionsVisible: boolean = false;\n  focusedLabelIndex: number = 0;\n  focusedFakeDataPointIndex: number = 0;\n  loadingChartData: ChartData<'radar'> = {\n    labels: [1, 2, 3, 4, 5, 6],\n    datasets: [],\n  };\n  loadingChartOptions: ChartOptions<'radar'> = {\n    responsive: true,\n    layout: {\n      padding: {\n        left: 40,\n        right: 40,\n        top: 40,\n        bottom: 40,\n      },\n    },\n    scales: {\n      r: {\n        angleLines: {\n          display: true,\n          color: Color.GRAYSCALE_30,\n        },\n        grid: {\n          color: () => Color.GRAYSCALE_30,\n        },\n        pointLabels: {\n          display: false,\n        },\n        suggestedMin: 0,\n        suggestedMax: 100,\n        ticks: {\n          stepSize: this.stepSize,\n          display: false,\n        },\n      },\n    },\n  };\n  protected readonly translationContext = 'CHARTS.SPIDER.';\n\n  ngOnInit(): void {\n    if (!this.loading) {\n      this.handleInputErrors();\n      this.setChartData();\n      this.setChartOptions();\n    }\n  }\n\n  private handleInputErrors() {\n    if (!this.spiderChartData.labels || this.spiderChartData.labels.length === 0) {\n      throw new Error('The \"labels\" input is required and cannot be empty.');\n    }\n    if (!this.spiderChartData.labelDescription || this.spiderChartData.labelDescription.length === 0) {\n      throw new Error('The \"labelDescription\" input is required and cannot be empty.');\n    }\n    if (\n      this.spiderChartData.labelDescription &&\n      this.spiderChartData.labelDescription.length !== this.spiderChartData.labels.length\n    ) {\n      throw new Error('The \"labelDescription\" input must have the same length as \"labels\".');\n    }\n    if (!this.spiderChartData.plotData[0].databaseLabel) {\n      throw new Error('The \"plotData.databaseLabel\" input is required.');\n    }\n    if (!this.spiderChartData.plotData[0].data || this.spiderChartData.plotData[0].data.length === 0) {\n      throw new Error('The \"plotData.data\" input is required and cannot be empty.');\n    }\n    if (this.spiderChartData.plotData[0].data.length !== this.spiderChartData.labels.length) {\n      throw new Error('The \"plotData.data\" input must have the same length as \"labels\".');\n    }\n    if (\n      this.spiderChartData.plotData.length === 2 &&\n      this.spiderChartData.labels.length > 0 &&\n      this.spiderChartData.plotData[1].data &&\n      this.spiderChartData.plotData[1].data.length !== this.spiderChartData.labels.length\n    ) {\n      throw new Error('The \"plotData.data\" input must have the same length as \"labels\".');\n    }\n  }\n\n  private setChartData() {\n    const datasets = [];\n    datasets.push({\n      label: this.spiderChartData.plotData[0].databaseLabel,\n      data: this.spiderChartData.plotData[0].data,\n      fill: true,\n      backgroundColor: 'rgba(212, 16, 170, 0.2)',\n      borderColor: Color.BRAND_50,\n      pointBackgroundColor: Color.BRAND_50,\n      pointBorderColor: Color.TGO_WHITE,\n      pointHoverBackgroundColor: Color.TGO_WHITE,\n      pointHoverBorderColor: Color.BRAND_50,\n    });\n    if (this.spiderChartData.plotData.length === 2) {\n      datasets.push({\n        label: this.spiderChartData.plotData[1].databaseLabel,\n        data: this.spiderChartData.plotData[1].data,\n        fill: false,\n        borderColor: Color.BLACK,\n        borderDash: [5, 5],\n        borderWidth: 1,\n        pointBackgroundColor: Color.BLACK,\n        pointBorderColor: Color.TGO_WHITE,\n        pointHoverBackgroundColor: Color.TGO_WHITE,\n        pointHoverBorderColor: Color.BLACK,\n      });\n    }\n    this.radarChartData = {\n      labels: this.spiderChartData.labels,\n      datasets: datasets,\n    };\n  }\n\n  private setChartOptions() {\n    this.radarChartOptions = {\n      responsive: true,\n      elements: {\n        line: {\n          borderWidth: 3,\n        },\n      },\n      layout: {\n        padding: {\n          left: 40,\n          right: 40,\n          top: 40,\n          bottom: 40,\n        },\n      },\n      scales: {\n        r: {\n          angleLines: {\n            display: true,\n            color: Color.BLACK,\n          },\n          grid: {\n            color: context => {\n              if (context.tick.value === 100) {\n                return Color.BLACK;\n              }\n              return Color.GRAYSCALE_30;\n            },\n          },\n          pointLabels: {\n            color: 'black',\n            font: {\n              family: 'Arial',\n              size: 14,\n            },\n            display: false,\n          },\n          suggestedMin: 0,\n          suggestedMax: 100,\n          ticks: {\n            stepSize: this.stepSize,\n            display: false,\n          },\n        },\n      },\n      plugins: {\n        legend: {\n          display: false,\n        },\n      },\n    };\n  }\n\n  ngAfterViewInit(): void {\n    if (this.chart?.chart && !this.loading) {\n      this.logCornerCoordinates(this.chart.chart);\n    }\n  }\n\n  private logCornerCoordinates(chart: Chart) {\n    const scale = chart.scales['r'] as any;\n    const canvasWidth = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;\n    const canvasHeight = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;\n\n    // Loop through the labels and calculate the percentage coordinates\n    this.spiderChartData.labels.forEach((label, index) => {\n      const position = scale.getPointPositionForValue(index, scale.max);\n\n      // Calculate percentage values relative to the canvas size\n      const xPercent = (position.x / canvasWidth) * 100;\n      const yPercent = ((canvasHeight - position.y) / canvasHeight) * 100; // Inverting the Y-axis\n\n      this.labelPositions[label] = { x: Number(xPercent.toFixed(2)), y: Number(yPercent.toFixed(2)) };\n    });\n    this.labelPositionsVisible = true;\n  }\n\n  getCenteredLabelBottomPosition(label: string, height: number) {\n    const position = this.labelPositions[label];\n    const padding = 7;\n    if (position.x > 50 || position.x < 50) {\n      return `calc(${position.y}% - ${height / 2}px)`;\n    } else if (position.y < 50) {\n      return `calc(${position.y}% - ${height}px - ${padding}px)`;\n    } else {\n      return `calc(${position.y}% + ${padding}px)`;\n    }\n  }\n\n  getCenteredLabelLeftPosition(label: string, width: number) {\n    const position = this.labelPositions[label];\n    const padding = 15;\n    if (position.x === 50) {\n      return `calc(${position.x}% - ${width / 2}px)`;\n    } else if (position.x < 50) {\n      return `calc(${position.x}% - ${width}px - ${padding}px)`;\n    } else {\n      return `calc(${position.x}% + ${padding}px)`;\n    }\n  }\n\n  onLabelKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      this.focusNextLabel(index);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      this.focusPreviousLabel(index);\n    }\n  }\n\n  private focusNextLabel(index: number) {\n    const nextIndex = index + 1;\n    if (nextIndex < this.labelContainers.length) {\n      this.labelContainers.get(nextIndex)?.nativeElement.focus();\n    } else {\n      this.labelContainers.first?.nativeElement.focus();\n    }\n    this.focusedLabelIndex = nextIndex;\n  }\n\n  private focusPreviousLabel(index: number) {\n    const previousIndex = index - 1;\n    if (previousIndex >= 0) {\n      this.labelContainers.get(previousIndex)?.nativeElement.focus();\n    } else {\n      this.labelContainers.last?.nativeElement.focus();\n    }\n    this.focusedLabelIndex = previousIndex;\n  }\n\n  onLegendItemKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === 'Enter') {\n      this.toggleDatasetVisibility(index);\n    } else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      this.focusNextLegendItem(index);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      this.focusPreviousLegendItem(index);\n    }\n  }\n\n  private focusNextLegendItem(index: number) {\n    const nextIndex = index + 1;\n    if (nextIndex < this.legendItems.length) {\n      this.legendItems.get(nextIndex)?.nativeElement.focus();\n    } else {\n      this.legendItems.first?.nativeElement.focus();\n    }\n  }\n\n  private focusPreviousLegendItem(index: number) {\n    const previousIndex = index - 1;\n    if (previousIndex >= 0) {\n      this.legendItems.get(previousIndex)?.nativeElement.focus();\n    } else {\n      this.legendItems.last?.nativeElement.focus();\n    }\n  }\n\n  onFakeDataPointsKeyDown(event: KeyboardEvent, index: number, isSecondary: boolean = false) {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      this.focusNextFakeDataPoint(index, isSecondary);\n      this.showTooltipForDataPoint(index + 1 > this.spiderChartData.labels.length ? 0 : index + 1, isSecondary);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      this.focusPreviousFakeDataPoint(index, isSecondary);\n      this.showTooltipForDataPoint(index - 1 < 0 ? this.spiderChartData.labels.length - 1 : index - 1, isSecondary);\n    } else if (event.key === 'Tab') {\n      this.resetActiveElement();\n    }\n  }\n\n  private focusNextFakeDataPoint(index: number, isSecondary: boolean = false) {\n    const nextIndex = index + 1;\n    if (nextIndex < this.fakeDataPoints.length) {\n      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;\n      fakeDataPoints.get(nextIndex)?.nativeElement.focus();\n    } else {\n      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;\n      fakeDataPoints.first?.nativeElement.focus();\n    }\n    if (!isSecondary) {\n      this.focusedFakeDataPointIndex = nextIndex;\n    }\n  }\n\n  private focusPreviousFakeDataPoint(index: number, isSecondary: boolean = false) {\n    const previousIndex = index - 1;\n    if (previousIndex >= 0) {\n      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;\n      fakeDataPoints.get(previousIndex)?.nativeElement.focus();\n    } else {\n      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;\n      fakeDataPoints.last?.nativeElement.focus();\n    }\n    if (!isSecondary) {\n      this.focusedFakeDataPointIndex = previousIndex;\n    }\n  }\n\n  showTooltipForDataPoint(index: number, isSecondary: boolean = false) {\n    const chartInstance = this.chart?.chart;\n    if (!chartInstance) return;\n    const activeElement = [{ datasetIndex: isSecondary ? 1 : 0, index }];\n    const meta = chartInstance.getDatasetMeta(isSecondary ? 1 : 0);\n    const dataPoint = meta.data[index];\n    const eventPosition = {\n      x: dataPoint.x,\n      y: dataPoint.y,\n    };\n    if (!isSecondary) {\n      this.focusedFakeDataPointIndex = index;\n    }\n\n    chartInstance.tooltip?.setActiveElements(activeElement, eventPosition);\n\n    chartInstance.update();\n  }\n\n  private resetActiveElement() {\n    const chartInstance = this.chart?.chart;\n    if (!chartInstance) return;\n\n    // Clear the active elements to hide the tooltip\n    chartInstance.tooltip?.setActiveElements([], { x: 0, y: 0 });\n\n    chartInstance.update();\n  }\n\n  toggleDatasetVisibility(datasetIndex: number) {\n    const chartInstance = this.chart?.chart;\n    if (!chartInstance) return;\n\n    const dataset = chartInstance.data.datasets[datasetIndex];\n    dataset.hidden = !dataset.hidden;\n    chartInstance.update();\n  }\n\n  isDatasetVisible(datasetIndex: number) {\n    const chartInstance = this.chart?.chart;\n    if (!chartInstance) return;\n    return !chartInstance.data.datasets[datasetIndex].hidden;\n  }\n\n  getFirstLine(label: string): string {\n    const words = label.split(' ');\n    let firstLine = '';\n    for (const word of words) {\n      if ((firstLine + word).length <= 20) {\n        firstLine += (firstLine ? ' ' : '') + word;\n      } else {\n        break;\n      }\n    }\n    return firstLine;\n  }\n\n  getSecondLine(label: string): string {\n    const firstLine = this.getFirstLine(label);\n    return label.substring(firstLine.length).trim();\n  }\n}\n","<div class=\"spider-chart-container\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\">\n  <div class=\"spacing-container\"\n    [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n    <div class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\">\n      @if (!loading) {\n        <canvas\n          baseChart\n          [data]=\"radarChartData\"\n          [options]=\"radarChartOptions\"\n          type=\"radar\"\n          class=\"chart\"\n        >\n        </canvas>\n      } @else {\n        <canvas\n          baseChart\n          [data]=\"loadingChartData\"\n          [options]=\"loadingChartOptions\"\n          type=\"radar\"\n          class=\"chart\"\n        >\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n      <div class=\"overlay-container\">\n          @for (label of spiderChartData.labels; track label) {\n            <div class=\"label-container\" #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n              [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span class=\"fake-data-points\" #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"isDatasetVisible($index) ?\n          ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n          ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem>\n          <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n","import { NgModule } from '@angular/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { SpiderChartComponent } from './spider-chart.component';\nimport { NgChartsModule } from 'ng2-charts';\nimport { Chart, registerables } from 'chart.js';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { CommonModule, NgClass } from '@angular/common';\nimport { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';\nimport { MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';\n\nChart.register(...registerables);\n\n@NgModule({\n  declarations: [SpiderChartComponent],\n  exports: [SpiderChartComponent],\n  imports: [\n    NgClass,\n    UiTranslatePipe,\n    NgChartsModule,\n    MatTooltipModule,\n    UiTranslatePipe,\n    MemoizeFuncPipe,\n    SpinnerComponentModule,\n    CommonModule,\n  ],\n})\nexport class SpiderChartComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}