ng-prime-tools 1.0.13 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/esm2022/lib/models/axis-chart-config.model.mjs +2 -0
- package/esm2022/lib/models/axis-chart-data.model.mjs +2 -0
- package/esm2022/lib/models/icon-style.model.mjs +1 -1
- package/esm2022/lib/models/public-api.mjs +3 -1
- package/esm2022/lib/models/text-style.model.mjs +1 -1
- package/esm2022/lib/pt-chart/pt-chart.component.mjs +19 -9
- package/esm2022/lib/pt-line-chart/index.mjs +2 -0
- package/esm2022/lib/pt-line-chart/pt-line-chart.component.mjs +104 -0
- package/esm2022/lib/pt-line-chart/pt-line-chart.module.mjs +20 -0
- package/esm2022/lib/pt-line-chart/public-api.mjs +3 -0
- package/esm2022/lib/pt-metric-card/pt-metric-card.component.mjs +28 -4
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/ng-prime-tools.mjs +159 -11
- package/fesm2022/ng-prime-tools.mjs.map +1 -1
- package/lib/models/axis-chart-config.model.d.ts +17 -0
- package/lib/models/axis-chart-config.model.d.ts.map +1 -0
- package/lib/models/axis-chart-data.model.d.ts +5 -0
- package/lib/models/axis-chart-data.model.d.ts.map +1 -0
- package/lib/models/icon-style.model.d.ts +2 -0
- package/lib/models/icon-style.model.d.ts.map +1 -1
- package/lib/models/public-api.d.ts +2 -0
- package/lib/models/public-api.d.ts.map +1 -1
- package/lib/models/text-style.model.d.ts +1 -0
- package/lib/models/text-style.model.d.ts.map +1 -1
- package/lib/pt-chart/pt-chart.component.d.ts +3 -1
- package/lib/pt-chart/pt-chart.component.d.ts.map +1 -1
- package/lib/pt-line-chart/index.d.ts +2 -0
- package/lib/pt-line-chart/index.d.ts.map +1 -0
- package/lib/pt-line-chart/pt-line-chart.component.d.ts +15 -0
- package/lib/pt-line-chart/pt-line-chart.component.d.ts.map +1 -0
- package/lib/pt-line-chart/pt-line-chart.module.d.ts +11 -0
- package/lib/pt-line-chart/pt-line-chart.module.d.ts.map +1 -0
- package/lib/pt-line-chart/public-api.d.ts +3 -0
- package/lib/pt-line-chart/public-api.d.ts.map +1 -0
- package/lib/pt-metric-card/pt-metric-card.component.d.ts +22 -1
- package/lib/pt-metric-card/pt-metric-card.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/public-api.d.ts.map +1 -1
|
@@ -1846,9 +1846,16 @@ class PTMetricCardComponent {
|
|
|
1846
1846
|
getIconStyles() {
|
|
1847
1847
|
if (this.isIconObject()) {
|
|
1848
1848
|
const icon = this.cardData.icon;
|
|
1849
|
+
const shape = icon.shape || 'circular'; // Default to 'circular' if not specified
|
|
1850
|
+
// Determine border radius based on shape
|
|
1851
|
+
const borderRadius = shape === 'circular' ? '50%' : '8px';
|
|
1849
1852
|
return {
|
|
1850
1853
|
color: icon.color || PTMetricCardComponent.DEFAULT_ICON_COLOR,
|
|
1851
1854
|
fontSize: icon.fontSize || PTMetricCardComponent.DEFAULT_ICON_SIZE,
|
|
1855
|
+
'background-color': icon.backgroundColor || 'transparent',
|
|
1856
|
+
'border-radius': borderRadius,
|
|
1857
|
+
padding: '6px',
|
|
1858
|
+
display: 'inline-block',
|
|
1852
1859
|
};
|
|
1853
1860
|
}
|
|
1854
1861
|
return {};
|
|
@@ -1859,6 +1866,7 @@ class PTMetricCardComponent {
|
|
|
1859
1866
|
return {
|
|
1860
1867
|
color: title.color || PTMetricCardComponent.DEFAULT_TITLE_COLOR,
|
|
1861
1868
|
fontSize: title.fontSize || PTMetricCardComponent.DEFAULT_TITLE_SIZE,
|
|
1869
|
+
fontWeight: title.fontWeight || 'normal',
|
|
1862
1870
|
};
|
|
1863
1871
|
}
|
|
1864
1872
|
return {};
|
|
@@ -1869,12 +1877,14 @@ class PTMetricCardComponent {
|
|
|
1869
1877
|
return {
|
|
1870
1878
|
color: value.color || PTMetricCardComponent.DEFAULT_VALUE_COLOR,
|
|
1871
1879
|
fontSize: value.fontSize || PTMetricCardComponent.DEFAULT_VALUE_SIZE,
|
|
1880
|
+
fontWeight: value.fontWeight || 'bold',
|
|
1872
1881
|
};
|
|
1873
1882
|
}
|
|
1874
1883
|
else {
|
|
1875
1884
|
return {
|
|
1876
1885
|
color: PTMetricCardComponent.DEFAULT_VALUE_COLOR,
|
|
1877
1886
|
fontSize: PTMetricCardComponent.DEFAULT_VALUE_SIZE,
|
|
1887
|
+
fontWeight: 'bold',
|
|
1878
1888
|
};
|
|
1879
1889
|
}
|
|
1880
1890
|
}
|
|
@@ -1887,12 +1897,14 @@ class PTMetricCardComponent {
|
|
|
1887
1897
|
PTMetricCardComponent.DEFAULT_LABEL_COLOR,
|
|
1888
1898
|
fontSize: label.fontSize ||
|
|
1889
1899
|
PTMetricCardComponent.DEFAULT_LABEL_SIZE,
|
|
1900
|
+
fontWeight: label.fontWeight || 'normal',
|
|
1890
1901
|
};
|
|
1891
1902
|
}
|
|
1892
1903
|
else {
|
|
1893
1904
|
return {
|
|
1894
1905
|
color: PTMetricCardComponent.DEFAULT_LABEL_COLOR,
|
|
1895
1906
|
fontSize: PTMetricCardComponent.DEFAULT_LABEL_SIZE,
|
|
1907
|
+
fontWeight: 'normal',
|
|
1896
1908
|
};
|
|
1897
1909
|
}
|
|
1898
1910
|
}
|
|
@@ -1904,12 +1916,14 @@ class PTMetricCardComponent {
|
|
|
1904
1916
|
PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_COLOR,
|
|
1905
1917
|
fontSize: additionalInfo.fontSize ||
|
|
1906
1918
|
PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_SIZE,
|
|
1919
|
+
fontWeight: additionalInfo.fontWeight || 'normal',
|
|
1907
1920
|
};
|
|
1908
1921
|
}
|
|
1909
1922
|
else {
|
|
1910
1923
|
return {
|
|
1911
1924
|
color: PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_COLOR,
|
|
1912
1925
|
fontSize: PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_SIZE,
|
|
1926
|
+
fontWeight: 'normal',
|
|
1913
1927
|
};
|
|
1914
1928
|
}
|
|
1915
1929
|
}
|
|
@@ -1921,18 +1935,28 @@ class PTMetricCardComponent {
|
|
|
1921
1935
|
const label = this.cardData.value?.label;
|
|
1922
1936
|
return (this.isLabelObject(label) && label.position === 'right');
|
|
1923
1937
|
}
|
|
1924
|
-
|
|
1938
|
+
getMetricCardContainerStyle() {
|
|
1939
|
+
return {
|
|
1940
|
+
'min-width': this.cardData.size?.minWidth || '100%',
|
|
1941
|
+
'max-width': this.cardData.size?.maxWidth || 'calc(25% - 16px)',
|
|
1942
|
+
width: this.cardData.size?.fixedWidth || 'auto',
|
|
1943
|
+
};
|
|
1944
|
+
}
|
|
1945
|
+
getMetricCardStyle() {
|
|
1925
1946
|
return {
|
|
1926
1947
|
'background-color': this.cardData.appearance?.backgroundColor ||
|
|
1927
1948
|
PTMetricCardComponent.DEFAULT_BACKGROUND_COLOR,
|
|
1949
|
+
'min-width': this.cardData.size?.minWidth || '100%',
|
|
1950
|
+
'max-width': this.cardData.size?.maxWidth || 'calc(25% - 16px)',
|
|
1951
|
+
width: this.cardData.size?.fixedWidth || 'auto',
|
|
1928
1952
|
};
|
|
1929
1953
|
}
|
|
1930
1954
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMetricCardComponent, selector: "pt-metric-card", inputs: { cardData: "cardData" }, ngImport: i0, template: "<div
|
|
1955
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMetricCardComponent, selector: "pt-metric-card", inputs: { cardData: "cardData" }, ngImport: i0, template: "<div class=\"metric-card-container\" [ngStyle]=\"getMetricCardContainerStyle()\">\n <div\n *ngIf=\"cardData.verticalLine?.show\"\n class=\"vertical-line\"\n [ngStyle]=\"{\n 'background-color': cardData.verticalLine?.color || '#5a67d8'\n }\"\n ></div>\n\n <div class=\"metric-card\" [ngStyle]=\"getMetricCardStyle()\">\n <div class=\"metric-card-header\">\n <i\n *ngIf=\"isIconObject()\"\n [ngClass]=\"getIconText()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n <i *ngIf=\"!isIconObject()\" [ngClass]=\"cardData.icon\"></i>\n\n <span\n *ngIf=\"isTitleObject()\"\n class=\"metric-card-header-text\"\n [ngStyle]=\"getTitleStyles()\"\n >\n {{ getTitleText() }}\n </span>\n <span *ngIf=\"!isTitleObject()\" class=\"metric-card-header-text\">\n {{ cardData.title }}\n </span>\n </div>\n\n <div class=\"metric-card-content\">\n <div class=\"metric-value\" [ngStyle]=\"getValueStyles()\">\n <span\n *ngIf=\"isLabelOnLeft()\"\n class=\"value-label\"\n [ngStyle]=\"getLabelStyles('left')\"\n >\n {{ getLabelText() }}\n </span>\n\n <span [ngStyle]=\"getValueStyles()\">{{ getValueText() }}</span>\n\n <span\n *ngIf=\"isLabelOnRight()\"\n class=\"value-label\"\n [ngStyle]=\"getLabelStyles('right')\"\n >\n {{ getLabelText() }}\n </span>\n </div>\n\n <div\n *ngIf=\"cardData.divider?.show\"\n class=\"metric-divider\"\n [ngStyle]=\"{ backgroundColor: cardData.divider?.color || '#e2e8f0' }\"\n ></div>\n\n <div\n *ngIf=\"isAdditionalInfoObject()\"\n class=\"metric-additional-info\"\n [ngStyle]=\"getAdditionalInfoStyles()\"\n >\n {{ getAdditionalInfoText() }}\n </div>\n <div\n *ngIf=\"!isAdditionalInfoObject()\"\n class=\"metric-additional-info\"\n [ngStyle]=\"getAdditionalInfoStyles()\"\n >\n {{ cardData.additionalInfo }}\n </div>\n </div>\n </div>\n</div>\n", styles: [".metric-card-container{display:flex;align-items:stretch;box-sizing:border-box}.vertical-line{width:4px;border-radius:8px 0 0 8px;margin-right:-4px;z-index:2}.metric-card{background-color:#fff;border-radius:5px;box-shadow:0 1px 3px #0000001a;padding:16px;display:flex;flex-direction:column;box-sizing:border-box;margin-left:0}.metric-card-header{display:flex;align-items:center;margin-bottom:16px}.metric-card-header i.icon-text{margin-right:8px}.metric-card-content{display:flex;flex-direction:column;justify-content:space-between}.metric-number{font-weight:700}.metric-label{margin-left:8px}.metric-divider{width:100%;height:1px;margin:16px 0}.metric-additional-info{margin-top:8px}.metric-card-header-text{margin-left:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1932
1956
|
}
|
|
1933
1957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardComponent, decorators: [{
|
|
1934
1958
|
type: Component,
|
|
1935
|
-
args: [{ selector: 'pt-metric-card', template: "<div
|
|
1959
|
+
args: [{ selector: 'pt-metric-card', template: "<div class=\"metric-card-container\" [ngStyle]=\"getMetricCardContainerStyle()\">\n <div\n *ngIf=\"cardData.verticalLine?.show\"\n class=\"vertical-line\"\n [ngStyle]=\"{\n 'background-color': cardData.verticalLine?.color || '#5a67d8'\n }\"\n ></div>\n\n <div class=\"metric-card\" [ngStyle]=\"getMetricCardStyle()\">\n <div class=\"metric-card-header\">\n <i\n *ngIf=\"isIconObject()\"\n [ngClass]=\"getIconText()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n <i *ngIf=\"!isIconObject()\" [ngClass]=\"cardData.icon\"></i>\n\n <span\n *ngIf=\"isTitleObject()\"\n class=\"metric-card-header-text\"\n [ngStyle]=\"getTitleStyles()\"\n >\n {{ getTitleText() }}\n </span>\n <span *ngIf=\"!isTitleObject()\" class=\"metric-card-header-text\">\n {{ cardData.title }}\n </span>\n </div>\n\n <div class=\"metric-card-content\">\n <div class=\"metric-value\" [ngStyle]=\"getValueStyles()\">\n <span\n *ngIf=\"isLabelOnLeft()\"\n class=\"value-label\"\n [ngStyle]=\"getLabelStyles('left')\"\n >\n {{ getLabelText() }}\n </span>\n\n <span [ngStyle]=\"getValueStyles()\">{{ getValueText() }}</span>\n\n <span\n *ngIf=\"isLabelOnRight()\"\n class=\"value-label\"\n [ngStyle]=\"getLabelStyles('right')\"\n >\n {{ getLabelText() }}\n </span>\n </div>\n\n <div\n *ngIf=\"cardData.divider?.show\"\n class=\"metric-divider\"\n [ngStyle]=\"{ backgroundColor: cardData.divider?.color || '#e2e8f0' }\"\n ></div>\n\n <div\n *ngIf=\"isAdditionalInfoObject()\"\n class=\"metric-additional-info\"\n [ngStyle]=\"getAdditionalInfoStyles()\"\n >\n {{ getAdditionalInfoText() }}\n </div>\n <div\n *ngIf=\"!isAdditionalInfoObject()\"\n class=\"metric-additional-info\"\n [ngStyle]=\"getAdditionalInfoStyles()\"\n >\n {{ cardData.additionalInfo }}\n </div>\n </div>\n </div>\n</div>\n", styles: [".metric-card-container{display:flex;align-items:stretch;box-sizing:border-box}.vertical-line{width:4px;border-radius:8px 0 0 8px;margin-right:-4px;z-index:2}.metric-card{background-color:#fff;border-radius:5px;box-shadow:0 1px 3px #0000001a;padding:16px;display:flex;flex-direction:column;box-sizing:border-box;margin-left:0}.metric-card-header{display:flex;align-items:center;margin-bottom:16px}.metric-card-header i.icon-text{margin-right:8px}.metric-card-content{display:flex;flex-direction:column;justify-content:space-between}.metric-number{font-weight:700}.metric-label{margin-left:8px}.metric-divider{width:100%;height:1px;margin:16px 0}.metric-additional-info{margin-top:8px}.metric-card-header-text{margin-left:6px}\n"] }]
|
|
1936
1960
|
}], propDecorators: { cardData: [{
|
|
1937
1961
|
type: Input
|
|
1938
1962
|
}] } });
|
|
@@ -1987,12 +2011,12 @@ class PTChartComponent {
|
|
|
1987
2011
|
this.initializeChart();
|
|
1988
2012
|
}
|
|
1989
2013
|
ngOnDestroy() {
|
|
1990
|
-
|
|
1991
|
-
this.chart.destroy();
|
|
1992
|
-
}
|
|
2014
|
+
this.destroyChart();
|
|
1993
2015
|
}
|
|
1994
2016
|
initializeChart() {
|
|
1995
|
-
const canvas =
|
|
2017
|
+
const canvas = this.canvasRef.nativeElement;
|
|
2018
|
+
// Destroy the existing chart instance if it already exists
|
|
2019
|
+
this.destroyChart();
|
|
1996
2020
|
const config = {
|
|
1997
2021
|
type: this.chartConfig.type,
|
|
1998
2022
|
data: this.chartConfig.data,
|
|
@@ -2006,7 +2030,7 @@ class PTChartComponent {
|
|
|
2006
2030
|
const percentage = ((value / total) * 100).toFixed(1) + '%';
|
|
2007
2031
|
return percentage;
|
|
2008
2032
|
},
|
|
2009
|
-
color: '#000',
|
|
2033
|
+
color: '#000',
|
|
2010
2034
|
font: {
|
|
2011
2035
|
weight: 'bold',
|
|
2012
2036
|
},
|
|
@@ -2015,6 +2039,7 @@ class PTChartComponent {
|
|
|
2015
2039
|
},
|
|
2016
2040
|
},
|
|
2017
2041
|
};
|
|
2042
|
+
// Create a new Chart instance
|
|
2018
2043
|
this.chart = new Chart(canvas, config);
|
|
2019
2044
|
}
|
|
2020
2045
|
updateChart() {
|
|
@@ -2026,14 +2051,23 @@ class PTChartComponent {
|
|
|
2026
2051
|
this.chart.update();
|
|
2027
2052
|
}
|
|
2028
2053
|
}
|
|
2054
|
+
destroyChart() {
|
|
2055
|
+
if (this.chart) {
|
|
2056
|
+
this.chart.destroy();
|
|
2057
|
+
this.chart = undefined;
|
|
2058
|
+
}
|
|
2059
|
+
}
|
|
2029
2060
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2030
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTChartComponent, selector: "pt-chart", inputs: { chartConfig: "chartConfig" }, ngImport: i0, template: "<div style=\"position: relative; height: 100%; width: 100%\">\n <canvas></canvas>\n</div>\n", styles: [""] }); }
|
|
2061
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTChartComponent, selector: "pt-chart", inputs: { chartConfig: "chartConfig" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"position: relative; height: 100%; width: 100%\">\n <canvas #chartCanvas></canvas>\n</div>\n", styles: [""] }); }
|
|
2031
2062
|
}
|
|
2032
2063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTChartComponent, decorators: [{
|
|
2033
2064
|
type: Component,
|
|
2034
|
-
args: [{ selector: 'pt-chart', template: "<div style=\"position: relative; height: 100%; width: 100%\">\n <canvas></canvas>\n</div>\n" }]
|
|
2065
|
+
args: [{ selector: 'pt-chart', template: "<div style=\"position: relative; height: 100%; width: 100%\">\n <canvas #chartCanvas></canvas>\n</div>\n" }]
|
|
2035
2066
|
}], ctorParameters: () => [], propDecorators: { chartConfig: [{
|
|
2036
2067
|
type: Input
|
|
2068
|
+
}], canvasRef: [{
|
|
2069
|
+
type: ViewChild,
|
|
2070
|
+
args: ['chartCanvas', { static: true }]
|
|
2037
2071
|
}] } });
|
|
2038
2072
|
|
|
2039
2073
|
class PTChartModule {
|
|
@@ -3609,11 +3643,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
3609
3643
|
}]
|
|
3610
3644
|
}] });
|
|
3611
3645
|
|
|
3646
|
+
class PTLineChartComponent {
|
|
3647
|
+
constructor() {
|
|
3648
|
+
this.config = {
|
|
3649
|
+
yAxisTitle: 'Values',
|
|
3650
|
+
xAxisTitle: 'Labels',
|
|
3651
|
+
chartIdentifier: 'line-chart',
|
|
3652
|
+
chartMenu: [],
|
|
3653
|
+
chartWidth: '100%',
|
|
3654
|
+
cardConfig: {
|
|
3655
|
+
identifier: 'line-chart-card',
|
|
3656
|
+
title: 'Line Chart',
|
|
3657
|
+
width: '100%',
|
|
3658
|
+
menu: {
|
|
3659
|
+
menuItems: [],
|
|
3660
|
+
},
|
|
3661
|
+
},
|
|
3662
|
+
};
|
|
3663
|
+
this.lineChartConfig = this.createLineChartConfig();
|
|
3664
|
+
}
|
|
3665
|
+
ngOnChanges(changes) {
|
|
3666
|
+
if (changes['chartData'] && this.chartData && this.chartData.length > 0) {
|
|
3667
|
+
this.updateChartData();
|
|
3668
|
+
}
|
|
3669
|
+
}
|
|
3670
|
+
createLineChartConfig() {
|
|
3671
|
+
const chartTitle = typeof this.config.cardConfig?.title === 'string'
|
|
3672
|
+
? this.config.cardConfig.title
|
|
3673
|
+
: this.config.cardConfig?.title?.text || 'Line Chart';
|
|
3674
|
+
return {
|
|
3675
|
+
type: 'line',
|
|
3676
|
+
data: {
|
|
3677
|
+
labels: [],
|
|
3678
|
+
datasets: [
|
|
3679
|
+
{
|
|
3680
|
+
label: chartTitle,
|
|
3681
|
+
data: [],
|
|
3682
|
+
borderColor: '#4aa0fa',
|
|
3683
|
+
backgroundColor: 'rgba(74, 160, 250, 0.2)',
|
|
3684
|
+
borderWidth: 2,
|
|
3685
|
+
tension: 0.4,
|
|
3686
|
+
fill: true,
|
|
3687
|
+
pointRadius: 5,
|
|
3688
|
+
pointBackgroundColor: '#4aa0fa',
|
|
3689
|
+
},
|
|
3690
|
+
],
|
|
3691
|
+
},
|
|
3692
|
+
options: {
|
|
3693
|
+
responsive: true,
|
|
3694
|
+
plugins: {
|
|
3695
|
+
legend: {
|
|
3696
|
+
display: true,
|
|
3697
|
+
position: 'bottom',
|
|
3698
|
+
},
|
|
3699
|
+
tooltip: {
|
|
3700
|
+
callbacks: {
|
|
3701
|
+
label: (context) => `${context.dataset.label}: ${context.raw.toFixed(2)}`,
|
|
3702
|
+
},
|
|
3703
|
+
},
|
|
3704
|
+
datalabels: {
|
|
3705
|
+
display: false,
|
|
3706
|
+
},
|
|
3707
|
+
},
|
|
3708
|
+
scales: {
|
|
3709
|
+
y: {
|
|
3710
|
+
beginAtZero: true,
|
|
3711
|
+
title: {
|
|
3712
|
+
display: !!this.config.yAxisTitle,
|
|
3713
|
+
text: this.config.yAxisTitle,
|
|
3714
|
+
},
|
|
3715
|
+
},
|
|
3716
|
+
x: {
|
|
3717
|
+
title: {
|
|
3718
|
+
display: !!this.config.xAxisTitle,
|
|
3719
|
+
text: this.config.xAxisTitle,
|
|
3720
|
+
},
|
|
3721
|
+
},
|
|
3722
|
+
},
|
|
3723
|
+
},
|
|
3724
|
+
};
|
|
3725
|
+
}
|
|
3726
|
+
updateChartData() {
|
|
3727
|
+
const labels = this.chartData.map((item) => item.label);
|
|
3728
|
+
const data = this.chartData.map((item) => item.value);
|
|
3729
|
+
this.lineChartConfig.data.labels = labels;
|
|
3730
|
+
this.lineChartConfig.data.datasets[0].data = data;
|
|
3731
|
+
// Trigger chart update
|
|
3732
|
+
this.lineChartConfig._chart?.update();
|
|
3733
|
+
}
|
|
3734
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3735
|
+
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: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTChartComponent, selector: "pt-chart", inputs: ["chartConfig"] }] }); }
|
|
3736
|
+
}
|
|
3737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartComponent, decorators: [{
|
|
3738
|
+
type: Component,
|
|
3739
|
+
args: [{ selector: 'pt-line-chart', template: "<pt-card [config]=\"config.cardConfig!\">\n <pt-chart [chartConfig]=\"lineChartConfig\"></pt-chart>\n</pt-card>\n" }]
|
|
3740
|
+
}], ctorParameters: () => [], propDecorators: { chartData: [{
|
|
3741
|
+
type: Input
|
|
3742
|
+
}], config: [{
|
|
3743
|
+
type: Input
|
|
3744
|
+
}] } });
|
|
3745
|
+
|
|
3746
|
+
class PTLineChartModule {
|
|
3747
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3748
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartModule, declarations: [PTLineChartComponent], imports: [CommonModule, PTCardModule, PTChartModule], exports: [PTLineChartComponent] }); }
|
|
3749
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartModule, imports: [CommonModule, PTCardModule, PTChartModule] }); }
|
|
3750
|
+
}
|
|
3751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLineChartModule, decorators: [{
|
|
3752
|
+
type: NgModule,
|
|
3753
|
+
args: [{
|
|
3754
|
+
declarations: [PTLineChartComponent],
|
|
3755
|
+
imports: [CommonModule, PTCardModule, PTChartModule],
|
|
3756
|
+
exports: [PTLineChartComponent],
|
|
3757
|
+
}]
|
|
3758
|
+
}] });
|
|
3759
|
+
|
|
3612
3760
|
// Advanced table
|
|
3613
3761
|
|
|
3614
3762
|
/**
|
|
3615
3763
|
* Generated bundle index. Do not edit.
|
|
3616
3764
|
*/
|
|
3617
3765
|
|
|
3618
|
-
export { BadgeType, BadgeTypeStyles, ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
|
|
3766
|
+
export { BadgeType, BadgeTypeStyles, ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
|
|
3619
3767
|
//# sourceMappingURL=ng-prime-tools.mjs.map
|