risadmin_prod/authsec_angular_clarity_modern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working unified chart with different type chart

Browse Source
This commit is contained in:
Gaurav Kumar
2025-11-18 19:12:02 +05:30
parent 807058e40d
commit 3cff84c448
3 changed files with 107 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
View File

@@ -393,6 +393,19 @@ export class EditnewdashComponent implements OnInit {
}
});
// Handle charts that use UnifiedChartComponent but have different names
// After serialization, these charts have component = "Unified Chart" but their name is still "Line Chart", "Pie Chart", etc.
const unifiedChartNames = [
'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart',
'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
'Dynamic Chart', 'Financial Chart'
];
if (dashboard.component === "Unified Chart" && unifiedChartNames.includes(dashboard.name)) {
// Restore the actual UnifiedChartComponent reference
dashboard.component = UnifiedChartComponent;
}
// Map chart names to unified chart types
const chartTypeMap = {
'Radar Chart': 'radar',
@@ -460,6 +473,14 @@ export class EditnewdashComponent implements OnInit {
// The name is already correct, no need to change it
dashboard.component = "Unified Chart";
}
// Handle charts that use UnifiedChartComponent but have different names
else if (dashboard.component === UnifiedChartComponent && dashboard.chartType) {
// Preserve the chartType property for UnifiedChartComponent
// The name should already be correct (e.g., "Line Chart", "Pie Chart", etc.)
// Instead of changing the component reference, we preserve it and only change the component name for serialization
// But we need to ensure the component name is set correctly for proper deserialization
dashboard.component = "Unified Chart";
}
// Ensure compact filter configuration properties are preserved
if (dashboard.name === 'Compact Filter') {
@@ -1055,7 +1076,14 @@ export class EditnewdashComponent implements OnInit {
}
// For unified chart, preserve chart configuration properties
if (item.name === 'Unified Chart') {
// Check if this item uses UnifiedChartComponent
const unifiedChartNames = [
'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart',
'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
'Dynamic Chart', 'Financial Chart', 'Unified Chart'
];
if (unifiedChartNames.includes(item.name)) {
xyz.chartType = this.gadgetsEditdata.chartType || 'bar';
}
@@ -1348,6 +1376,18 @@ export class EditnewdashComponent implements OnInit {
this.gadgetsEditdata.filterOptions = updatedItem.filterOptions;
}
// For unified chart, preserve chart configuration properties
// Check if this item uses UnifiedChartComponent
const unifiedChartNames = [
'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart',
'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
'Dynamic Chart', 'Financial Chart', 'Unified Chart'
];
if (unifiedChartNames.includes(item.name)) {
updatedItem.chartType = this.gadgetsEditdata.chartType || 'bar';
}
console.log('Updated item:', updatedItem);
return updatedItem;
}

27
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html
View File

@@ -35,7 +35,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'bar'"
[type]="'bar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -48,7 +48,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'line'"
[type]="'line'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -61,7 +61,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'pie'"
[type]="'pie'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -74,7 +74,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'doughnut'"
[type]="'doughnut'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -86,7 +86,7 @@
[datasets]="bubbleChartData"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'bubble'"
[type]="'bubble'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -99,7 +99,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'radar'"
[type]="'radar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -107,12 +107,15 @@
<!-- Polar Area Chart -->
<div *ngIf="chartType === 'polar'" class="chart-canvas-container">
<div style="position: absolute; top: 0; left: 0; background: magenta; color: white; padding: 5px; z-index: 1000; font-size: 12px;">
POLAR CHART RENDERED (chartType: {{chartType}})
</div>
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'polarArea'"
[type]="'polarArea'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -120,11 +123,14 @@
<!-- Scatter Chart -->
<div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
<div style="position: absolute; top: 0; left: 0; background: brown; color: white; padding: 5px; z-index: 1000; font-size: 12px;">
SCATTER CHART RENDERED (chartType: {{chartType}})
</div>
<canvas baseChart
[datasets]="chartData"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'scatter'"
[type]="'scatter'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -132,12 +138,15 @@
<!-- Default/Unknown Chart Type -->
<div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
<div style="position: absolute; top: 0; left: 0; background: gray; color: white; padding: 5px; z-index: 1000; font-size: 12px;">
DEFAULT CHART RENDERED (chartType: {{chartType}})
</div>
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'bar'"
[type]="'bar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>

46
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts
View File

@@ -11,7 +11,7 @@ import { ChartConfiguration, ChartDataset } from 'chart.js';
styleUrls: ['./unified-chart.component.scss']
})
export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
@Input() chartType: string;
@Input() chartType: string = 'bar';
@Input() xAxis: string;
@Input() yAxis: string | string[];
@Input() table: string;
@@ -94,9 +94,10 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
this.filtersInitialized = true;
}
// Initialize chart options with default structure
this.initializeChartOptions();
this.fetchChartData();
// Don't initialize chart options here since inputs might not be set yet
// Chart options will be initialized in ngOnChanges when inputs are available
// this.initializeChartOptions();
// this.fetchChartData();
}
ngOnChanges(changes: SimpleChanges): void {
@@ -113,6 +114,11 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
drilldownLayers: this.drilldownLayers
});
// Special logging for chartType changes
if (changes.chartType) {
console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
}
// Initialize filter values if they haven't been initialized yet
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
this.initializeFilterValues();
@@ -366,6 +372,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
}
private initializeBarChartOptions(): void {
console.log('Initializing bar chart options');
this.chartOptions = {
responsive: true,
maintainAspectRatio: false,
@@ -448,6 +455,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
}
private initializeLineChartOptions(): void {
console.log('Initializing line chart options');
this.chartOptions = {
responsive: true,
maintainAspectRatio: false,
@@ -694,6 +702,14 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
console.log('Starting fetchChartData for chart type:', this.chartType);
// Log current state for debugging
console.log('Current component state:', {
chartType: this.chartType,
chartData: this.chartData,
chartLabels: this.chartLabels,
chartOptions: this.chartOptions
});
// If we're in drilldown mode, fetch the appropriate drilldown data
if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
console.log('Fetching drilldown data');
@@ -778,13 +794,23 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
this.xAxis,
yAxisString,
this.connection,
'',
'',
filterParams
).subscribe(
(data: any) => {
console.log('Received chart data:', data);
// Log data structure for debugging
console.log('Data structure analysis:', {
hasChartLabels: !!(data && data.chartLabels),
hasChartData: !!(data && data.chartData),
hasLabels: !!(data && data.labels),
hasDatasets: !!(data && data.datasets),
chartLabelsLength: data && data.chartLabels ? data.chartLabels.length : 0,
chartDataLength: data && data.chartData ? data.chartData.length : 0,
labelsLength: data && data.labels ? data.labels.length : 0,
datasetsLength: data && data.datasets ? data.datasets.length : 0
});
if (data === null || data === undefined) {
console.warn('Chart API returned null/undefined data.');
this.noDataAvailable = true;
@@ -815,6 +841,14 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
this.noDataAvailable = true;
}
// Log final data state
console.log('Final data state:', {
chartLabels: this.chartLabels,
chartData: this.chartData,
bubbleChartData: this.bubbleChartData,
noDataAvailable: this.noDataAvailable
});
// Reset flags after fetching
this.isFetchingData = false;
this.isLoading = false;