ng-prime-tools/esm2022/lib/pt-line-chart/pt-line-chart.component.mjs

An advanced PrimeNG table for Angular

import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../pt-card/pt-card.component";
import * as i2 from "../pt-chart/pt-chart.component";
export class PTLineChartComponent {
    constructor() {
        this.config = {
            yAxisTitle: 'Values',
            xAxisTitle: 'Labels',
            chartIdentifier: 'line-chart',
            chartMenu: [],
            chartWidth: '100%',
            cardConfig: {
                identifier: 'line-chart-card',
                title: 'Line Chart',
                width: '100%',
                menu: {
                    menuItems: [],
                },
            },
        };
        this.lineChartConfig = this.createLineChartConfig();
    }
    ngOnChanges(changes) {
        if (changes['chartData'] && this.chartData && this.chartData.length > 0) {
            this.updateChartData();
        }
    }
    createLineChartConfig() {
        const chartTitle = typeof this.config.cardConfig?.title === 'string'
            ? this.config.cardConfig.title
            : this.config.cardConfig?.title?.text || 'Line Chart';
        return {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                    {
                        label: chartTitle,
                        data: [],
                        borderColor: '#4aa0fa',
                        backgroundColor: 'rgba(74, 160, 250, 0.2)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 5,
                        pointBackgroundColor: '#4aa0fa',
                    },
                ],
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: (context) => `${context.dataset.label}: ${context.raw.toFixed(2)}`,
                        },
                    },
                    datalabels: {
                        display: false,
                    },
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: !!this.config.yAxisTitle,
                            text: this.config.yAxisTitle,
                        },
                    },
                    x: {
                        title: {
                            display: !!this.config.xAxisTitle,
                            text: this.config.xAxisTitle,
                        },
                    },
                },
            },
        };
    }
    updateChartData() {
        const labels = this.chartData.map((item) => item.label);
        const data = this.chartData.map((item) => item.value);
        this.lineChartConfig.data.labels = labels;
        this.lineChartConfig.data.datasets[0].data = data;
        // Trigger chart update
        this.lineChartConfig._chart?.update();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTLineChartComponent, selector: "pt-line-chart", inputs: { chartData: "chartData", config: "config" }, usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"config.cardConfig!\">\n  <pt-chart [chartConfig]=\"lineChartConfig\"></pt-chart>\n</pt-card>\n", styles: [""], dependencies: [{ kind: "component", type: i1.PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: i2.PTChartComponent, selector: "pt-chart", inputs: ["chartConfig"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pt-line-chart', template: "<pt-card [config]=\"config.cardConfig!\">\n  <pt-chart [chartConfig]=\"lineChartConfig\"></pt-chart>\n</pt-card>\n" }]
        }], ctorParameters: () => [], propDecorators: { chartData: [{
                type: Input
            }], config: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHQtbGluZS1jaGFydC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LWxpbmUtY2hhcnQvcHQtbGluZS1jaGFydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LWxpbmUtY2hhcnQvcHQtbGluZS1jaGFydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBNEIsTUFBTSxlQUFlLENBQUM7Ozs7QUFhM0UsTUFBTSxPQUFPLG9CQUFvQjtJQW9CL0I7UUFsQlMsV0FBTSxHQUFvQjtZQUNqQyxVQUFVLEVBQUUsUUFBUTtZQUNwQixVQUFVLEVBQUUsUUFBUTtZQUNwQixlQUFlLEVBQUUsWUFBWTtZQUM3QixTQUFTLEVBQUUsRUFBRTtZQUNiLFVBQVUsRUFBRSxNQUFNO1lBQ2xCLFVBQVUsRUFBRTtnQkFDVixVQUFVLEVBQUUsaUJBQWlCO2dCQUM3QixLQUFLLEVBQUUsWUFBWTtnQkFDbkIsS0FBSyxFQUFFLE1BQU07Z0JBQ2IsSUFBSSxFQUFFO29CQUNKLFNBQVMsRUFBRSxFQUFFO2lCQUNkO2FBQ0Y7U0FDRixDQUFDO1FBS0EsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztJQUN0RCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFdBQVcsQ0FBQyxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDeEUsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3pCLENBQUM7SUFDSCxDQUFDO0lBRU8scUJBQXFCO1FBQzNCLE1BQU0sVUFBVSxHQUNkLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsS0FBSyxLQUFLLFFBQVE7WUFDL0MsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLEtBQUs7WUFDOUIsQ0FBQyxDQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUFFLEtBQW9CLEVBQUUsSUFBSSxJQUFJLFlBQVksQ0FBQztRQUUxRSxPQUFPO1lBQ0wsSUFBSSxFQUFFLE1BQU07WUFDWixJQUFJLEVBQUU7Z0JBQ0osTUFBTSxFQUFFLEVBQUU7Z0JBQ1YsUUFBUSxFQUFFO29CQUNSO3dCQUNFLEtBQUssRUFBRSxVQUFVO3dCQUNqQixJQUFJLEVBQUUsRUFBRTt3QkFDUixXQUFXLEVBQUUsU0FBUzt3QkFDdEIsZUFBZSxFQUFFLHlCQUF5Qjt3QkFDMUMsV0FBVyxFQUFFLENBQUM7d0JBQ2QsT0FBTyxFQUFFLEdBQUc7d0JBQ1osSUFBSSxFQUFFLElBQUk7d0JBQ1YsV0FBVyxFQUFFLENBQUM7d0JBQ2Qsb0JBQW9CLEVBQUUsU0FBUztxQkFDaEM7aUJBQ0Y7YUFDRjtZQUNELE9BQU8sRUFBRTtnQkFDUCxVQUFVLEVBQUUsSUFBSTtnQkFDaEIsT0FBTyxFQUFFO29CQUNQLE1BQU0sRUFBRTt3QkFDTixPQUFPLEVBQUUsSUFBSTt3QkFDYixRQUFRLEVBQUUsUUFBUTtxQkFDbkI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFNBQVMsRUFBRTs0QkFDVCxLQUFLLEVBQUUsQ0FBQyxPQUFZLEVBQUUsRUFBRSxDQUN0QixHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMsS0FBSyxLQUFLLE9BQU8sQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFO3lCQUN4RDtxQkFDRjtvQkFDRCxVQUFVLEVBQUU7d0JBQ1YsT0FBTyxFQUFFLEtBQUs7cUJBQ2Y7aUJBQ0Y7Z0JBQ0QsTUFBTSxFQUFFO29CQUNOLENBQUMsRUFBRTt3QkFDRCxXQUFXLEVBQUUsSUFBSTt3QkFDakIsS0FBSyxFQUFFOzRCQUNMLE9BQU8sRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVOzRCQUNqQyxJQUFJLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVO3lCQUM3QjtxQkFDRjtvQkFDRCxDQUFDLEVBQUU7d0JBQ0QsS0FBSyxFQUFFOzRCQUNMLE9BQU8sRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVOzRCQUNqQyxJQUFJLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVO3lCQUM3QjtxQkFDRjtpQkFDRjthQUNGO1NBQ0YsQ0FBQztJQUNKLENBQUM7SUFFTyxlQUFlO1FBQ3JCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEQsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUV0RCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQzFDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1FBRWxELHVCQUF1QjtRQUN0QixJQUFJLENBQUMsZUFBdUIsQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLENBQUM7SUFDakQsQ0FBQzsrR0FuR1Usb0JBQW9CO21HQUFwQixvQkFBb0IsZ0lDYmpDLG9IQUdBOzs0RkRVYSxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UsZUFBZTt3REFLaEIsU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEF4aXNDaGFydENvbmZpZyxcbiAgQXhpc0NoYXJ0RGF0YSxcbiAgQ2hhcnRDb25maWcsXG4gIFRpdGxlU3R5bGUsXG59IGZyb20gJy4uL21vZGVscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3B0LWxpbmUtY2hhcnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcHQtbGluZS1jaGFydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3B0LWxpbmUtY2hhcnQuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBQVExpbmVDaGFydENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGNoYXJ0RGF0YSE6IEF4aXNDaGFydERhdGFbXTtcbiAgQElucHV0KCkgY29uZmlnOiBBeGlzQ2hhcnRDb25maWcgPSB7XG4gICAgeUF4aXNUaXRsZTogJ1ZhbHVlcycsXG4gICAgeEF4aXNUaXRsZTogJ0xhYmVscycsXG4gICAgY2hhcnRJZGVudGlmaWVyOiAnbGluZS1jaGFydCcsXG4gICAgY2hhcnRNZW51OiBbXSxcbiAgICBjaGFydFdpZHRoOiAnMTAwJScsXG4gICAgY2FyZENvbmZpZzoge1xuICAgICAgaWRlbnRpZmllcjogJ2xpbmUtY2hhcnQtY2FyZCcsXG4gICAgICB0aXRsZTogJ0xpbmUgQ2hhcnQnLFxuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIG1lbnU6IHtcbiAgICAgICAgbWVudUl0ZW1zOiBbXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfTtcblxuICBsaW5lQ2hhcnRDb25maWc6IENoYXJ0Q29uZmlnO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMubGluZUNoYXJ0Q29uZmlnID0gdGhpcy5jcmVhdGVMaW5lQ2hhcnRDb25maWcoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1snY2hhcnREYXRhJ10gJiYgdGhpcy5jaGFydERhdGEgJiYgdGhpcy5jaGFydERhdGEubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy51cGRhdGVDaGFydERhdGEoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGNyZWF0ZUxpbmVDaGFydENvbmZpZygpOiBDaGFydENvbmZpZyB7XG4gICAgY29uc3QgY2hhcnRUaXRsZSA9XG4gICAgICB0eXBlb2YgdGhpcy5jb25maWcuY2FyZENvbmZpZz8udGl0bGUgPT09ICdzdHJpbmcnXG4gICAgICAgID8gdGhpcy5jb25maWcuY2FyZENvbmZpZy50aXRsZVxuICAgICAgICA6ICh0aGlzLmNvbmZpZy5jYXJkQ29uZmlnPy50aXRsZSBhcyBUaXRsZVN0eWxlKT8udGV4dCB8fCAnTGluZSBDaGFydCc7XG5cbiAgICByZXR1cm4ge1xuICAgICAgdHlwZTogJ2xpbmUnLFxuICAgICAgZGF0YToge1xuICAgICAgICBsYWJlbHM6IFtdLFxuICAgICAgICBkYXRhc2V0czogW1xuICAgICAgICAgIHtcbiAgICAgICAgICAgIGxhYmVsOiBjaGFydFRpdGxlLFxuICAgICAgICAgICAgZGF0YTogW10sXG4gICAgICAgICAgICBib3JkZXJDb2xvcjogJyM0YWEwZmEnLFxuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAncmdiYSg3NCwgMTYwLCAyNTAsIDAuMiknLFxuICAgICAgICAgICAgYm9yZGVyV2lkdGg6IDIsXG4gICAgICAgICAgICB0ZW5zaW9uOiAwLjQsXG4gICAgICAgICAgICBmaWxsOiB0cnVlLFxuICAgICAgICAgICAgcG9pbnRSYWRpdXM6IDUsXG4gICAgICAgICAgICBwb2ludEJhY2tncm91bmRDb2xvcjogJyM0YWEwZmEnLFxuICAgICAgICAgIH0sXG4gICAgICAgIF0sXG4gICAgICB9LFxuICAgICAgb3B0aW9uczoge1xuICAgICAgICByZXNwb25zaXZlOiB0cnVlLFxuICAgICAgICBwbHVnaW5zOiB7XG4gICAgICAgICAgbGVnZW5kOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiB0cnVlLFxuICAgICAgICAgICAgcG9zaXRpb246ICdib3R0b20nLFxuICAgICAgICAgIH0sXG4gICAgICAgICAgdG9vbHRpcDoge1xuICAgICAgICAgICAgY2FsbGJhY2tzOiB7XG4gICAgICAgICAgICAgIGxhYmVsOiAoY29udGV4dDogYW55KSA9PlxuICAgICAgICAgICAgICAgIGAke2NvbnRleHQuZGF0YXNldC5sYWJlbH06ICR7Y29udGV4dC5yYXcudG9GaXhlZCgyKX1gLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICB9LFxuICAgICAgICAgIGRhdGFsYWJlbHM6IHtcbiAgICAgICAgICAgIGRpc3BsYXk6IGZhbHNlLFxuICAgICAgICAgIH0sXG4gICAgICAgIH0sXG4gICAgICAgIHNjYWxlczoge1xuICAgICAgICAgIHk6IHtcbiAgICAgICAgICAgIGJlZ2luQXRaZXJvOiB0cnVlLFxuICAgICAgICAgICAgdGl0bGU6IHtcbiAgICAgICAgICAgICAgZGlzcGxheTogISF0aGlzLmNvbmZpZy55QXhpc1RpdGxlLFxuICAgICAgICAgICAgICB0ZXh0OiB0aGlzLmNvbmZpZy55QXhpc1RpdGxlLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICB9LFxuICAgICAgICAgIHg6IHtcbiAgICAgICAgICAgIHRpdGxlOiB7XG4gICAgICAgICAgICAgIGRpc3BsYXk6ICEhdGhpcy5jb25maWcueEF4aXNUaXRsZSxcbiAgICAgICAgICAgICAgdGV4dDogdGhpcy5jb25maWcueEF4aXNUaXRsZSxcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgfSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlQ2hhcnREYXRhKCk6IHZvaWQge1xuICAgIGNvbnN0IGxhYmVscyA9IHRoaXMuY2hhcnREYXRhLm1hcCgoaXRlbSkgPT4gaXRlbS5sYWJlbCk7XG4gICAgY29uc3QgZGF0YSA9IHRoaXMuY2hhcnREYXRhLm1hcCgoaXRlbSkgPT4gaXRlbS52YWx1ZSk7XG5cbiAgICB0aGlzLmxpbmVDaGFydENvbmZpZy5kYXRhLmxhYmVscyA9IGxhYmVscztcbiAgICB0aGlzLmxpbmVDaGFydENvbmZpZy5kYXRhLmRhdGFzZXRzWzBdLmRhdGEgPSBkYXRhO1xuXG4gICAgLy8gVHJpZ2dlciBjaGFydCB1cGRhdGVcbiAgICAodGhpcy5saW5lQ2hhcnRDb25maWcgYXMgYW55KS5fY2hhcnQ/LnVwZGF0ZSgpO1xuICB9XG59XG4iLCI8cHQtY2FyZCBbY29uZmlnXT1cImNvbmZpZy5jYXJkQ29uZmlnIVwiPlxuICA8cHQtY2hhcnQgW2NoYXJ0Q29uZmlnXT1cImxpbmVDaGFydENvbmZpZ1wiPjwvcHQtY2hhcnQ+XG48L3B0LWNhcmQ+XG4iXX0=