ca-components 0.0.86 → 0.0.87

package/fesm2022/ca-components.mjs

@@ -32,6 +32,7 @@ import { moveItemInArray, transferArrayItem, DragDropModule, CdkDragPlaceholder,
 import * as i8 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { ImageCropperComponent } from 'ngx-image-cropper';
+import { Chart } from 'chart.js/auto';
 
 class NameInitialsPipe {
     constructor() { }
@@ -21303,6 +21304,245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+var ChartTypesStringEnum;
+(function (ChartTypesStringEnum) {
+    ChartTypesStringEnum["LINE"] = "line";
+    ChartTypesStringEnum["BAR"] = "bar";
+    ChartTypesStringEnum["DOUGHNUT"] = "doughnut";
+})(ChartTypesStringEnum || (ChartTypesStringEnum = {}));
+
+var CubicInterpolationStringEnum;
+(function (CubicInterpolationStringEnum) {
+    CubicInterpolationStringEnum["DEFAULT"] = "default";
+    CubicInterpolationStringEnum["MONOTONE"] = "monotone";
+})(CubicInterpolationStringEnum || (CubicInterpolationStringEnum = {}));
+
+var ChartColorsStringEnum;
+(function (ChartColorsStringEnum) {
+    ChartColorsStringEnum["WHITE"] = "#FFFFFF";
+})(ChartColorsStringEnum || (ChartColorsStringEnum = {}));
+
+class ChartHelper {
+    static hexToRgba(colorHex, opacity = 1) {
+        colorHex = colorHex.replace(/^#/, '');
+        if (colorHex.length === 3) {
+            colorHex
+                .split('')
+                .map((char) => char + char)
+                .join('');
+        }
+        const bigint = parseInt(colorHex, 16);
+        const r = (bigint >> 16) & 255;
+        const g = (bigint >> 8) & 255;
+        const b = bigint & 255;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+    static rgbToRgba(rgb = 'rgb(0, 0, 0)', opacity) {
+        const rgbValues = rgb.match(/\d+/g);
+        if (rgbValues && rgbValues.length === 3) {
+            const r = rgbValues[0];
+            const g = rgbValues[1];
+            const b = rgbValues[2];
+            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+        }
+        else
+            return rgb;
+    }
+    static calculateMinValue(data) {
+        return Math.min(...data);
+    }
+    static calculateMaxValue(data) {
+        return Math.max(...data);
+    }
+    static createGradient(chartContext, chartCanvas, color1, color2) {
+        const gradient = chartContext.createLinearGradient(0, 0, 0, chartCanvas.nativeElement.height);
+        const opacity = 0.4;
+        const fillColorTop = this.hexToRgba(color1, opacity);
+        const fillColorBottom = this.hexToRgba(color2, 0);
+        gradient.addColorStop(0, fillColorTop);
+        gradient.addColorStop(0.8, fillColorBottom);
+        return gradient;
+    }
+}
+
+class ChartTypeGuard {
+    static isLineDataset(dataset) {
+        const isLineDataset = dataset.type === ChartTypesStringEnum.LINE;
+        return isLineDataset;
+    }
+}
+
+class CaBaseChartDatasetConfig {
+    static getBaseChartDatasetConfig() {
+        return {
+            type: ChartTypesStringEnum.LINE,
+            label: '',
+            data: []
+        };
+    }
+}
+
+class CaChartComponent {
+    set chartType(value) {
+        this._chartType = value;
+        if (this.chart) {
+            this.chart.destroy();
+            this.createChart();
+        }
+    }
+    set chartData(value) {
+        this._chartData = value;
+        if (this.chart) {
+            this.chart.data = this._chartData;
+            this.chart.update();
+        }
+    }
+    set chartOptions(value) {
+        this._chartOptions = value;
+        if (this.chart) {
+            this.chart.options = this.chartOptions;
+            this.chart.update();
+        }
+    }
+    //for testing hover state on dataset
+    set isDatasetHovered(value) {
+        this._isDatasetHovered = value;
+        if (this.chart) {
+            this.updateDatasetBackgroundOnHover('Sales', '#6692F1', this._isDatasetHovered);
+        }
+    }
+    constructor() {
+        this.chartHeight = 500;
+        this.originalChartDataset = CaBaseChartDatasetConfig.getBaseChartDatasetConfig();
+    }
+    ngAfterViewInit() {
+        this.createChart();
+    }
+    updateDatasetBackgroundOnHover(dataSetLabel, color, isDatasetHovered) {
+        if (isDatasetHovered) {
+            this.originalChartDataset = JSON.parse(JSON.stringify(this._chartData.datasets));
+            const gradient = ChartHelper.createGradient(this.chartContext, this.chartCanvas, color, color);
+            this._chartData.datasets = this._chartData.datasets.map((dataset) => {
+                if (dataset.label === dataSetLabel) {
+                    return {
+                        ...dataset,
+                        fill: true,
+                        backgroundColor: gradient,
+                        borderColor: color,
+                    };
+                }
+                else {
+                    const borderColorWithOpacity = ChartHelper.rgbToRgba(dataset.borderColor, 0.2);
+                    return {
+                        ...dataset,
+                        fill: false,
+                        borderColor: borderColorWithOpacity,
+                    };
+                }
+            });
+        }
+        else
+            this._chartData.datasets = JSON.parse(JSON.stringify(this.originalChartDataset));
+        this.chart.update();
+    }
+    createChart() {
+        this.chartContext = this.chartCanvas.nativeElement.getContext('2d');
+        this.setChartOptionsProperties();
+        this.setChartDataProperties();
+        this.chart = new Chart(this.chartContext, {
+            type: this._chartType,
+            data: this._chartData,
+            options: this._chartOptions,
+        });
+    }
+    setChartOptionsProperties() {
+        this._chartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            clip: false,
+            plugins: {
+                legend: {
+                    display: false,
+                },
+            },
+            scales: {
+                x: {
+                    display: false,
+                    beginAtZero: true,
+                },
+                y: {
+                    display: false,
+                    beginAtZero: true,
+                    min: 0,
+                    max: 1,
+                },
+            },
+        };
+    }
+    setChartDataProperties() {
+        if ((this._chartType = ChartTypesStringEnum.LINE)) {
+            this._chartData.datasets.forEach((dataset) => {
+                if (ChartTypeGuard.isLineDataset(dataset)) {
+                    dataset.tension = dataset.tension ?? 0.5;
+                    dataset.cubicInterpolationMode =
+                        dataset.cubicInterpolationMode ??
+                            CubicInterpolationStringEnum.MONOTONE;
+                    dataset.pointRadius = dataset.pointRadius ?? 0;
+                    dataset.pointRadius = dataset.pointRadius ?? 0;
+                    dataset.spanGaps = dataset.spanGaps ?? false;
+                    dataset.showLine = dataset.showLine ?? true;
+                }
+            });
+            this.setMultipleYAxis(this._chartData);
+        }
+    }
+    setMultipleYAxis(chartData) {
+        chartData.datasets.forEach((dataset, index) => {
+            if (dataset.type == ChartTypesStringEnum.LINE ||
+                dataset.type == ChartTypesStringEnum.BAR) {
+                const yAxisID = `y-axis-${index}`;
+                chartData.datasets[index] = {
+                    ...dataset,
+                    yAxisID,
+                };
+                const minValue = ChartHelper.calculateMinValue(dataset.data);
+                const maxValue = ChartHelper.calculateMaxValue(dataset.data);
+                const padding = maxValue * 0.03;
+                const minValueAjusted = padding == 0 ? minValue + 0.1 : 0;
+                const maxValueAjusted = maxValue + padding;
+                this._chartOptions.scales = {
+                    ...this._chartOptions.scales,
+                    [yAxisID]: {
+                        display: false,
+                        beginAtZero: true,
+                        min: minValueAjusted,
+                        max: maxValueAjusted,
+                    },
+                };
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaChartComponent, isStandalone: true, selector: "app-ca-chart", inputs: { chartHeight: "chartHeight", chartType: "chartType", chartData: "chartData", chartOptions: "chartOptions", isDatasetHovered: "isDatasetHovered" }, viewQueries: [{ propertyName: "chartCanvas", first: true, predicate: ["chartCanvas"], descendants: true }], ngImport: i0, template: "\t<div [ngStyle]=\"{'height': chartHeight + 'px', 'width': '100%'}\">\n    <canvas \n        #chartCanvas\n        style=\"width: 100%; height: 100%;\">\n    </canvas>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ca-chart', standalone: true, imports: [CommonModule], template: "\t<div [ngStyle]=\"{'height': chartHeight + 'px', 'width': '100%'}\">\n    <canvas \n        #chartCanvas\n        style=\"width: 100%; height: 100%;\">\n    </canvas>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { chartCanvas: [{
+                type: ViewChild,
+                args: ['chartCanvas']
+            }], chartHeight: [{
+                type: Input
+            }], chartType: [{
+                type: Input
+            }], chartData: [{
+                type: Input
+            }], chartOptions: [{
+                type: Input
+            }], isDatasetHovered: [{
+                type: Input
+            }] } });
+
 class CaComponentsLibModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, imports: [CommonModule,
@@ -21334,7 +21574,8 @@ class CaComponentsLibModule {
             CaActivityLogListComponent,
             CaRightSidePanelMenuComponent,
             CaRightSidePanelTopBarComponent,
-            CaRightSidePanelComponent], exports: [CaProfileImageComponent,
+            CaRightSidePanelComponent,
+            CaChartComponent], exports: [CaProfileImageComponent,
             CaAppTooltipV2Component,
             CaDetailsDropdownComponent,
             CaRatingReviewComponent,
@@ -21360,7 +21601,8 @@ class CaComponentsLibModule {
             CaActivityLogListComponent,
             CaRightSidePanelMenuComponent,
             CaRightSidePanelTopBarComponent,
-            CaRightSidePanelComponent] }); }
+            CaRightSidePanelComponent,
+            CaChartComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, providers: [CaSearchMultipleStatesService], imports: [CommonModule,
             CaProfileImageComponent,
             CaRatingReviewComponent,
@@ -21390,7 +21632,8 @@ class CaComponentsLibModule {
             CaActivityLogListComponent,
             CaRightSidePanelMenuComponent,
             CaRightSidePanelTopBarComponent,
-            CaRightSidePanelComponent] }); }
+            CaRightSidePanelComponent,
+            CaChartComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, decorators: [{
             type: NgModule,
@@ -21427,6 +21670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CaRightSidePanelMenuComponent,
                         CaRightSidePanelTopBarComponent,
                         CaRightSidePanelComponent,
+                        CaChartComponent
                     ],
                     providers: [CaSearchMultipleStatesService],
                     exports: [
@@ -21457,6 +21701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CaRightSidePanelMenuComponent,
                         CaRightSidePanelTopBarComponent,
                         CaRightSidePanelComponent,
+                        CaChartComponent
                     ],
                 }]
         }] });
@@ -21521,5 +21766,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CaActivityLogListComponent, CaAppTooltipV2Component, CaComponentsLibModule, CaDetailsDropdownComponent, CaDropdownComponent, CaFilterComponent, CaInputComponent, CaInputDropdownComponent, CaInputNoteComponent, CaInputRadiobuttonsComponent, CaMainTableComponent, CaMapComponent, CaMapDropdownComponent, CaModalComponent, CaNoteComponent, CaNoteContainerComponent, CaPayrollListSummaryOverviewComponent, CaPayrollListSummaryOverviewTableComponent, CaPeriodContentComponent, CaProfileImageComponent, CaProgressExpirationComponent, CaRatingReviewComponent, CaRightSidePanelComponent, CaRightSidePanelMenuComponent, CaRightSidePanelTopBarComponent, CaSearchMultipleStatesComponent, CaSearchMultipleStatesService, CaSpinnerComponent, CaTodoComponent, CaTruckTrailerProgresBarComponent, CaUploadFilesComponent, PickupDeliveryBlockComponent, ProgressBarComponent };
+export { CaActivityLogListComponent, CaAppTooltipV2Component, CaChartComponent, CaComponentsLibModule, CaDetailsDropdownComponent, CaDropdownComponent, CaFilterComponent, CaInputComponent, CaInputDropdownComponent, CaInputNoteComponent, CaInputRadiobuttonsComponent, CaMainTableComponent, CaMapComponent, CaMapDropdownComponent, CaModalComponent, CaNoteComponent, CaNoteContainerComponent, CaPayrollListSummaryOverviewComponent, CaPayrollListSummaryOverviewTableComponent, CaPeriodContentComponent, CaProfileImageComponent, CaProgressExpirationComponent, CaRatingReviewComponent, CaRightSidePanelComponent, CaRightSidePanelMenuComponent, CaRightSidePanelTopBarComponent, CaSearchMultipleStatesComponent, CaSearchMultipleStatesService, CaSpinnerComponent, CaTodoComponent, CaTruckTrailerProgresBarComponent, CaUploadFilesComponent, PickupDeliveryBlockComponent, ProgressBarComponent };
 //# sourceMappingURL=ca-components.mjs.map