chart
This commit is contained in:
@@ -22,7 +22,7 @@ export class DynamicChartLoaderService {
|
|||||||
*/
|
*/
|
||||||
loadAllChartConfigurations(): Observable<any> {
|
loadAllChartConfigurations(): Observable<any> {
|
||||||
console.log('Loading all chart configurations dynamically');
|
console.log('Loading all chart configurations dynamically');
|
||||||
|
|
||||||
// Load all chart types first
|
// Load all chart types first
|
||||||
return this.apiRequest.get(this.chartTypesUrl).pipe(
|
return this.apiRequest.get(this.chartTypesUrl).pipe(
|
||||||
map(chartTypes => {
|
map(chartTypes => {
|
||||||
@@ -43,7 +43,7 @@ export class DynamicChartLoaderService {
|
|||||||
dynamicFields: DynamicField[]
|
dynamicFields: DynamicField[]
|
||||||
}> {
|
}> {
|
||||||
console.log(`Loading complete configuration for chart type ${chartTypeId}`);
|
console.log(`Loading complete configuration for chart type ${chartTypeId}`);
|
||||||
|
|
||||||
// Load all related data in parallel
|
// Load all related data in parallel
|
||||||
return forkJoin({
|
return forkJoin({
|
||||||
chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
|
chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
|
||||||
@@ -89,17 +89,25 @@ export class DynamicChartLoaderService {
|
|||||||
* Get chart type by name
|
* Get chart type by name
|
||||||
* This is useful for finding a chart type by its name rather than ID
|
* This is useful for finding a chart type by its name rather than ID
|
||||||
*/
|
*/
|
||||||
getChartTypeByName(name: string): Observable<ChartType | null> {
|
// getChartTypeByName(name: string): Observable<ChartType | null> {
|
||||||
|
// console.log(`Finding chart type by name: ${name}`);
|
||||||
|
// return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
|
||||||
|
// map((chartTypes: ChartType[]) => {
|
||||||
|
// console.log('Available chart types:', chartTypes);
|
||||||
|
// const chartType = chartTypes.find(ct => ct.name === name);
|
||||||
|
// console.log(`Found chart type for name ${name}:`, chartType);
|
||||||
|
// return chartType || null;
|
||||||
|
// })
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
|
getChartTypeByName(name: string): Observable<any> {
|
||||||
console.log(`Finding chart type by name: ${name}`);
|
console.log(`Finding chart type by name: ${name}`);
|
||||||
return this.apiRequest.get(`${this.chartTypesUrl}`).pipe(
|
return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
|
||||||
map((chartTypes: ChartType[]) => {
|
|
||||||
const chartType = chartTypes.find(ct => ct.name === name);
|
|
||||||
console.log(`Found chart type for name ${name}:`, chartType);
|
|
||||||
return chartType || null;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Load all active chart types
|
* Load all active chart types
|
||||||
* This is used to populate the chart selection in the dashboard editor
|
* This is used to populate the chart selection in the dashboard editor
|
||||||
|
|||||||
@@ -43,7 +43,7 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<!-- Line Chart -->
|
<!-- Line Chart -->
|
||||||
<div *ngIf="chartType === 'line'" class="chart-canvas-container">
|
<!-- <div *ngIf="chartType === 'line'" class="chart-canvas-container">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="chartData"
|
[datasets]="chartData"
|
||||||
[labels]="chartLabels"
|
[labels]="chartLabels"
|
||||||
@@ -53,10 +53,10 @@
|
|||||||
(chartClick)="chartClicked($event)"
|
(chartClick)="chartClicked($event)"
|
||||||
(chartHover)="chartHovered($event)">
|
(chartHover)="chartHovered($event)">
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Pie Chart -->
|
<!-- Pie Chart -->
|
||||||
<div *ngIf="chartType === 'pie'" class="chart-canvas-container">
|
<!-- <div *ngIf="chartType === 'pie'" class="chart-canvas-container">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="chartData"
|
[datasets]="chartData"
|
||||||
[labels]="chartLabels"
|
[labels]="chartLabels"
|
||||||
@@ -66,10 +66,10 @@
|
|||||||
(chartClick)="chartClicked($event)"
|
(chartClick)="chartClicked($event)"
|
||||||
(chartHover)="chartHovered($event)">
|
(chartHover)="chartHovered($event)">
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Doughnut Chart -->
|
<!-- Doughnut Chart -->
|
||||||
<div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
|
<!-- <div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="chartData"
|
[datasets]="chartData"
|
||||||
[labels]="chartLabels"
|
[labels]="chartLabels"
|
||||||
@@ -79,10 +79,10 @@
|
|||||||
(chartClick)="chartClicked($event)"
|
(chartClick)="chartClicked($event)"
|
||||||
(chartHover)="chartHovered($event)">
|
(chartHover)="chartHovered($event)">
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Bubble Chart -->
|
<!-- Bubble Chart -->
|
||||||
<div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
|
<!-- <div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="bubbleChartData"
|
[datasets]="bubbleChartData"
|
||||||
[options]="chartOptions"
|
[options]="chartOptions"
|
||||||
@@ -91,10 +91,10 @@
|
|||||||
(chartClick)="chartClicked($event)"
|
(chartClick)="chartClicked($event)"
|
||||||
(chartHover)="chartHovered($event)">
|
(chartHover)="chartHovered($event)">
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Radar Chart -->
|
<!-- Radar Chart -->
|
||||||
<div *ngIf="chartType === 'radar'" class="chart-canvas-container">
|
<!-- <div *ngIf="chartType === 'radar'" class="chart-canvas-container">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="chartData"
|
[datasets]="chartData"
|
||||||
[labels]="chartLabels"
|
[labels]="chartLabels"
|
||||||
@@ -104,10 +104,10 @@
|
|||||||
(chartClick)="chartClicked($event)"
|
(chartClick)="chartClicked($event)"
|
||||||
(chartHover)="chartHovered($event)">
|
(chartHover)="chartHovered($event)">
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Polar Area Chart -->
|
<!-- Polar Area Chart -->
|
||||||
<div *ngIf="chartType === 'polar'" class="chart-canvas-container">
|
<!-- <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="chartData"
|
[datasets]="chartData"
|
||||||
[labels]="chartLabels"
|
[labels]="chartLabels"
|
||||||
@@ -117,10 +117,10 @@
|
|||||||
(chartClick)="chartClicked($event)"
|
(chartClick)="chartClicked($event)"
|
||||||
(chartHover)="chartHovered($event)">
|
(chartHover)="chartHovered($event)">
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Scatter Chart -->
|
<!-- Scatter Chart -->
|
||||||
<div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
|
<!-- <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="chartData"
|
[datasets]="chartData"
|
||||||
[options]="chartOptions"
|
[options]="chartOptions"
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
(chartClick)="chartClicked($event)"
|
(chartClick)="chartClicked($event)"
|
||||||
(chartHover)="chartHovered($event)">
|
(chartHover)="chartHovered($event)">
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Default/Unknown Chart Type -->
|
<!-- Default/Unknown Chart Type -->
|
||||||
<div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
|
<div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user