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

working code with dynamic chart load

Browse Source
This commit is contained in:
Gaurav Kumar
2025-11-18 19:43:18 +05:30
parent 285aeca0f8
commit cf5461c8b0
4 changed files with 61 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,8 @@
</ul>
</nav>
<div style="width: 100%;">
<gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
<!-- Remove the (drop) event binding since it's already handled by gridster's emptyCellDropCallback -->
<gridster [options]="options" style="background-color: transparent;">
<gridster-item [item]="item" *ngFor="let item of dashboardArray">
<!-- <ng-container *ngIf="addToDashboard && item.addToDashboard"> -->
<button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)" *ngIf="!fromRunner">

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

@@ -66,18 +66,18 @@ export class EditnewdashComponent implements OnInit {
name: 'Common Filter',
identifier: 'common_filter'
},
{
name: 'Radar Chart',
identifier: 'radar_chart'
},
{
name: 'Doughnut Chart',
identifier: 'doughnut_chart'
},
{
name: 'Line Chart',
identifier: 'line_chart'
},
// {
// name: 'Radar Chart',
// identifier: 'radar_chart'
// },
// {
// name: 'Doughnut Chart',
// identifier: 'doughnut_chart'
// },
// {
// name: 'Line Chart',
// identifier: 'line_chart'
// },
// {
// name: 'Bar Chart',
// identifier: 'bar_chart'
@@ -98,22 +98,22 @@ export class EditnewdashComponent implements OnInit {
// name: 'Scatter Chart',
// identifier: 'scatter_chart'
// },
{
name: 'Dynamic Chart',
identifier: 'dynamic_chart'
},
{
name: 'Financial Chart',
identifier: 'financial_chart'
},
{
name: 'To Do',
identifier: 'to_do_chart'
},
{
name: 'Grid View',
identifier: 'grid_view'
},
// {
// name: 'Dynamic Chart',
// identifier: 'dynamic_chart'
// },
// {
// name: 'Financial Chart',
// identifier: 'financial_chart'
// },
// {
// name: 'To Do',
// identifier: 'to_do_chart'
// },
// {
// name: 'Grid View',
// identifier: 'grid_view'
// },
{
name: 'Compact Filter',
identifier: 'compact_filter'
@@ -2110,6 +2110,9 @@ export class EditnewdashComponent implements OnInit {
this.dashboardArray.push(chartItem);
console.log(`Created dynamic chart:`, chartItem);
// Update the dashboard collection and trigger refresh
this.itemChange();
},
error: (error) => {
console.error(`Error loading configuration for ${chartTypeName}:`, error);
@@ -2180,13 +2183,8 @@ export class EditnewdashComponent implements OnInit {
this.dashboardArray.push(chartItem);
console.log('Created default chart:', chartItem);
// Update the dashboard collection
this.dashboardCollection.dashboard = this.dashboardArray.slice();
// Force gridster to refresh
if (this.options && this.options.api) {
this.options.api.optionsChanged();
}
// Update the dashboard collection and trigger refresh
this.itemChange();
}
// Helper method to get display name for chart type - making it fully dynamic

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

@@ -33,7 +33,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="chartType || 'bar'"
[type]="chartType || 'bar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -46,7 +46,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'bar'"
[type]="'bar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>

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

@@ -682,30 +682,30 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
}
switch (this.chartType) {
case 'bar':
this.initializeBarChartOptions();
break;
case 'line':
this.initializeLineChartOptions();
break;
case 'pie':
this.initializePieChartOptions();
break;
case 'doughnut':
this.initializeDoughnutChartOptions();
break;
case 'bubble':
this.initializeBubbleChartOptions();
break;
case 'radar':
this.initializeRadarChartOptions();
break;
case 'polar':
this.initializePolarChartOptions();
break;
case 'scatter':
this.initializeScatterChartOptions();
break;
// case 'bar':
// this.initializeBarChartOptions();
// break;
// case 'line':
// this.initializeLineChartOptions();
// break;
// case 'pie':
// this.initializePieChartOptions();
// break;
// case 'doughnut':
// this.initializeDoughnutChartOptions();
// break;
// case 'bubble':
// this.initializeBubbleChartOptions();
// break;
// case 'radar':
// this.initializeRadarChartOptions();
// break;
// case 'polar':
// this.initializePolarChartOptions();
// break;
// case 'scatter':
// this.initializeScatterChartOptions();
// break;
default:
this.initializeDefaultChartOptions();
}