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

Compare commits

merge into: risadmin_prod:build5
Branches Tags
risadmin_prod:main risadmin_prod:build9.4 risadmin_prod:build8.1 risadmin_prod:main1.2 risadmin_prod:build9.3 risadmin_prod:build9.2 risadmin_prod:build9.1 risadmin_prod:build9 risadmin_prod:build8 risadmin_prod:build7 risadmin_prod:build6 risadmin_prod:build5 risadmin_prod:build4 risadmin_prod:build3 risadmin_prod:build2
...
pull from: risadmin_prod:build6
Branches Tags
risadmin_prod:main risadmin_prod:build9.4 risadmin_prod:build8.1 risadmin_prod:main1.2 risadmin_prod:build9.3 risadmin_prod:build9.2 risadmin_prod:build9.1 risadmin_prod:build9 risadmin_prod:build8 risadmin_prod:build7 risadmin_prod:build6 risadmin_prod:build5 risadmin_prod:build4 risadmin_prod:build3 risadmin_prod:build2

14 Commits
build5 ... build6

Author SHA1 Message Date
Gaurav Kumar
7c1a487114 dashboard 2025-10-31 10:47:43 +05:30
Gaurav Kumar
47e9fb92e3 Update compact-filter.component.ts 2025-10-30 12:46:39 +05:30
Gaurav Kumar
7f735dcada Update editnewdash.component.ts 2025-10-30 12:29:22 +05:30
Gaurav Kumar
bd315f42a3 compact 2025-10-29 17:55:05 +05:30
Gaurav Kumar
e8c1f46430 Update editnewdash.component.html 2025-10-29 17:30:13 +05:30
Gaurav Kumar
fa96ca81bd runner 2025-10-29 17:18:26 +05:30
Gaurav Kumar
c384f44c0c doughnut 2025-10-29 17:01:50 +05:30
Gaurav Kumar
50df914ca9 pie 2025-10-29 16:52:45 +05:30
Gaurav Kumar
e0bd888c45 polr 2025-10-29 16:14:45 +05:30
Gaurav Kumar
02b82fcaf8 Update polar-chart.component.ts 2025-10-29 16:07:59 +05:30
Gaurav Kumar
557afc348f bubble 2025-10-29 15:55:01 +05:30
Gaurav Kumar
1dec787062 Update bubble-chart.component.ts 2025-10-29 15:50:08 +05:30
Gaurav Kumar
8853cf75cf Update bubble-chart.component.ts 2025-10-29 15:42:21 +05:30
Gaurav Kumar
ad57f11f8a bubble 2025-10-29 15:34:10 +05:30
20 changed files with 2181 additions and 806 deletions
Expand all files Collapse all files

20
frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/test.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>gaurav</title>
</head>
<body>
<h1>this is h1</h1>
<h2>this is h1</h2>
<h3>this is h1</h3>
<h4>this is h1</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa fuga, asperiores mollitia iste vitae repellendus adipisci atque eum corrupti ad placeat unde voluptatum quia perferendis neque expedita, sequi iure quo. Ut error adipisci ex cum sint, suscipit, voluptatem repellat nemo dolorum unde dolores quasi aut. A earum quo mollitia voluptatibus!</p>
</body>
</html>

7
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
View File

@@ -79,7 +79,12 @@
<!-- Multi-Select Filter --> <!-- Multi-Select Filter -->
<div class="filter-control" *ngIf="filterType === 'multiselect'"> <div class="filter-control" *ngIf="filterType === 'multiselect'">
<div class="compact-multiselect-checkboxes" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;"> <div class="compact-multiselect-display" (click)="toggleMultiselectDropdown()" style="padding: 5px; border: 1px solid #ddd; cursor: pointer; background-color: #f8f8f8;">
<span *ngIf="filterValue && filterValue.length > 0">{{ filterValue.length }} selected</span>
<span *ngIf="!filterValue || filterValue.length === 0">{{ filterLabel || filterKey || 'Select options' }}</span>
<clr-icon shape="caret down" style="float: right; margin-top: 3px;"></clr-icon>
</div>
<div class="compact-multiselect-dropdown" *ngIf="showMultiselectDropdown" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-top: none; padding: 10px; background-color: white; position: absolute; z-index: 1000; width: calc(100% - 2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;"> <div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;">
<input type="checkbox" <input type="checkbox"
[id]="'multiselect-' + option" [id]="'multiselect-' + option"

67
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { FilterService, Filter } from './filter.service'; import { FilterService, Filter } from './filter.service';
import { AlertsService } from 'src/app/services/fnd/alerts.service'; import { AlertsService } from 'src/app/services/fnd/alerts.service';
@@ -7,7 +7,7 @@ import { AlertsService } from 'src/app/services/fnd/alerts.service';
templateUrl: './compact-filter.component.html', templateUrl: './compact-filter.component.html',
styleUrls: ['./compact-filter.component.scss'] styleUrls: ['./compact-filter.component.scss']
}) })
export class CompactFilterComponent implements OnInit, OnChanges { export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
@Input() filterKey: string = ''; @Input() filterKey: string = '';
@Input() filterType: string = 'text'; @Input() filterType: string = 'text';
@Input() filterOptions: string[] = []; @Input() filterOptions: string[] = [];
@@ -23,6 +23,9 @@ export class CompactFilterComponent implements OnInit, OnChanges {
availableKeys: string[] = []; availableKeys: string[] = [];
availableValues: string[] = []; availableValues: string[] = [];
// Multiselect dropdown state
showMultiselectDropdown: boolean = false;
// Configuration properties // Configuration properties
isConfigMode: boolean = false; isConfigMode: boolean = false;
configFilterKey: string = ''; configFilterKey: string = '';
@@ -73,6 +76,24 @@ export class CompactFilterComponent implements OnInit, OnChanges {
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
// If filterKey changes, clear the previous filter value and remove old filter from service
if (changes.filterKey) {
// Clear the previous filter value
this.filterValue = '';
// Clear filter options
this.filterOptions = [];
// Clear available values
this.availableValues = [];
// If we had a previous selected filter, clear its value in the service
if (this.selectedFilter && changes.filterKey.previousValue) {
const oldFilterId = changes.filterKey.previousValue;
this.filterService.updateFilterValue(oldFilterId, '');
}
}
// If filterKey or filterType changes, re-register the filter // If filterKey or filterType changes, re-register the filter
if (changes.filterKey || changes.filterType) { if (changes.filterKey || changes.filterType) {
// Load available values for the current filter key if it's a dropdown or multiselect // Load available values for the current filter key if it's a dropdown or multiselect
@@ -201,6 +222,14 @@ export class CompactFilterComponent implements OnInit, OnChanges {
this.onFilterValueChange(dateRange); this.onFilterValueChange(dateRange);
} }
ngOnDestroy(): void {
// Component cleanup - remove this filter from the filter service
if (this.selectedFilter) {
// Use the proper removeFilter method which handles both filter definition and state
this.filterService.removeFilter(this.selectedFilter.id);
}
}
// Load available keys from API // Load available keys from API
loadAvailableKeys(): void { loadAvailableKeys(): void {
if (this.apiUrl) { if (this.apiUrl) {
@@ -278,6 +307,9 @@ export class CompactFilterComponent implements OnInit, OnChanges {
this.apiUrl = config.apiUrl; this.apiUrl = config.apiUrl;
this.connectionId = config.connectionId; this.connectionId = config.connectionId;
// Clear filter value when changing configuration
this.filterValue = '';
// Load available keys if API URL is provided // Load available keys if API URL is provided
if (this.apiUrl) { if (this.apiUrl) {
this.loadAvailableKeys(); this.loadAvailableKeys();
@@ -304,11 +336,23 @@ export class CompactFilterComponent implements OnInit, OnChanges {
// Handle filter key change in configuration // Handle filter key change in configuration
onFilterKeyChange(key: string): void { onFilterKeyChange(key: string): void {
// Clear the previous filter value when changing keys
this.filterValue = '';
// Clear filter options until new values are loaded
this.filterOptions = [];
this.configFilterKey = key; this.configFilterKey = key;
// Load available values for the selected key if it's a dropdown or multiselect // Load available values for the selected key if it's a dropdown or multiselect
if ((this.configFilterType === 'dropdown' || this.configFilterType === 'multiselect') && key) { if ((this.configFilterType === 'dropdown' || this.configFilterType === 'multiselect') && key) {
this.loadAvailableValues(key); this.loadAvailableValues(key);
} }
// Clear the filter service value for the previous filter key
if (this.selectedFilter) {
this.filterService.updateFilterValue(this.selectedFilter.id, '');
}
} }
// Handle API URL change in configuration // Handle API URL change in configuration
@@ -375,4 +419,23 @@ export class CompactFilterComponent implements OnInit, OnChanges {
// Emit the change event // Emit the change event
this.onFilterValueChange(this.filterValue); this.onFilterValueChange(this.filterValue);
} }
// Add method to toggle multiselect dropdown visibility
toggleMultiselectDropdown(): void {
this.showMultiselectDropdown = !this.showMultiselectDropdown;
// Add document click handler to close dropdown when clicking outside
if (this.showMultiselectDropdown) {
setTimeout(() => {
const handleClick = (event: MouseEvent) => {
const target = event.target as HTMLElement;
if (!target.closest('.compact-multiselect-display') && !target.closest('.compact-multiselect-dropdown')) {
this.showMultiselectDropdown = false;
document.removeEventListener('click', handleClick);
}
};
document.addEventListener('click', handleClick);
}, 0);
}
}
} }

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

@@ -7,8 +7,8 @@
</ol> --> </ol> -->
<div style="display: inline;"> <div style="display: inline;">
<button class="btn componentbtn" (click)="toggleMenu()"><clr-icon shape="plus"></clr-icon>component</button> <button class="btn componentbtn" (click)="toggleMenu()" *ngIf="!fromRunner"><clr-icon shape="plus"></clr-icon>component</button>
<button class="btn btn-primary" (click)="openCommonFilterModal()" style="margin-left: 10px;"> <button class="btn btn-primary" (click)="openCommonFilterModal()" style="margin-left: 10px;" *ngIf="!fromRunner">
<clr-icon shape="filter"></clr-icon> Common Filter <clr-icon shape="filter"></clr-icon> Common Filter
</button> </button>
<div style="display: inline;"> <div style="display: inline;">
@@ -22,7 +22,7 @@
</div> </div>
<div class="content-container"> <div class="content-container">
<nav class="sidenav" *ngIf="toggle" style="width: 16%;"> <nav class="sidenav" *ngIf="toggle && !fromRunner" style="width: 16%;">
<ul class="nav-list" style="list-style-type: none;"> <ul class="nav-list" style="list-style-type: none;">
<li *ngFor="let widget of WidgetsMock"> <li *ngFor="let widget of WidgetsMock">
@@ -42,14 +42,14 @@
<gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;"> <gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
<gridster-item [item]="item" *ngFor="let item of dashboardArray"> <gridster-item [item]="item" *ngFor="let item of dashboardArray">
<!-- <ng-container *ngIf="addToDashboard && item.addToDashboard"> --> <!-- <ng-container *ngIf="addToDashboard && item.addToDashboard"> -->
<button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)"> <button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)" *ngIf="!fromRunner">
<clr-icon shape="trash"></clr-icon> <clr-icon shape="trash"></clr-icon>
</button> </button>
<button class="btn btn-icon drag-handler" style="margin-left: 10px; margin-top: 10px;"> <button class="btn btn-icon drag-handler" style="margin-left: 10px; margin-top: 10px;" *ngIf="!fromRunner">
<clr-icon shape="drag-handle"></clr-icon> <clr-icon shape="drag-handle"></clr-icon>
</button> </button>
<button class="btn btn-icon" style="margin-top: 10px; float: right;"> <button class="btn btn-icon" style="margin-top: 10px; float: right;" *ngIf="!fromRunner">
<input type="checkbox" clrToggle [(ngModel)]="item.addToDashboard" name="addToDashboardSwitch" <input type="checkbox" clrToggle [(ngModel)]="item.addToDashboard" name="addToDashboardSwitch"
(change)="toggleAddToDashboard(item)" /> (change)="toggleAddToDashboard(item)" />
</button> </button>
@@ -57,7 +57,7 @@
<!-- <label for="workflow_name">Add to Dasboard</label> <!-- <label for="workflow_name">Add to Dasboard</label>
<input class="btn btn-icon" style="margin-top: 10px;float: right;" type="checkbox" clrToggle value="billable" name="billable" /> <input class="btn btn-icon" style="margin-top: 10px;float: right;" type="checkbox" clrToggle value="billable" name="billable" />
--> -->
<button class="btn btn-icon" style="margin-top: 10px;float: right;" (click)="editGadget(item)"> <button class="btn btn-icon" style="margin-top: 10px;float: right;" (click)="editGadget(item)" *ngIf="!fromRunner">
<clr-icon shape="pencil"></clr-icon> <clr-icon shape="pencil"></clr-icon>
</button> </button>
@@ -72,7 +72,7 @@
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<button class="btn btn-outline" (click)="goBack()">Back</button> <button class="btn btn-outline" (click)="goBack()">Back</button>
<button type="submit" class="btn btn-primary btn-adddata " (click)="UpdateLine()"> <button type="submit" class="btn btn-primary btn-adddata " (click)="UpdateLine()" *ngIf="!fromRunner">
<b>Update</b> <b>Update</b>
</button> </button>
</div> </div>

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

@@ -26,6 +26,8 @@ import { SureconnectService } from '../sureconnect/sureconnect.service';
import { CommonFilterComponent } from '../common-filter/common-filter.component'; import { CommonFilterComponent } from '../common-filter/common-filter.component';
// Add the CompactFilterComponent import // Add the CompactFilterComponent import
import { CompactFilterComponent } from '../common-filter'; import { CompactFilterComponent } from '../common-filter';
// Add the FilterService import
import { FilterService } from '../common-filter/filter.service';
function isNullArray(arr) { function isNullArray(arr) {
return !Array.isArray(arr) || arr.length === 0; return !Array.isArray(arr) || arr.length === 0;
@@ -203,9 +205,15 @@ export class EditnewdashComponent implements OnInit {
private _fb: FormBuilder, private _fb: FormBuilder,
private datastoreService: DatastoreService, private datastoreService: DatastoreService,
private alertService: AlertsService, private alertService: AlertsService,
private sureconnectService: SureconnectService) { } // Add SureconnectService to constructor private sureconnectService: SureconnectService,
private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor
// Add property to track if coming from dashboard runner
fromRunner: boolean = false;
ngOnInit(): void { ngOnInit(): void {
// Reset the filter service when the component is initialized
this.filterService.resetFilters();
// Grid options // Grid options
this.options = { this.options = {
@@ -230,6 +238,13 @@ export class EditnewdashComponent implements OnInit {
// Add resize callback to handle chart resizing // Add resize callback to handle chart resizing
itemResizeCallback: this.itemResize.bind(this) itemResizeCallback: this.itemResize.bind(this)
}; };
// Check if coming from dashboard runner
this.route.queryParams.subscribe(params => {
if (params['fromRunner'] === 'true') {
this.fromRunner = true;
}
});
this.editId = this.route.snapshot.params.id; this.editId = this.route.snapshot.params.id;
console.log(this.editId); console.log(this.editId);
@@ -317,6 +332,9 @@ export class EditnewdashComponent implements OnInit {
dashboardLine: any; dashboardLine: any;
dashboardName: any; dashboardName: any;
getData() { getData() {
// Reset the filter service when switching between dashboard records
this.filterService.resetFilters();
// We get the id in get current router dashboard/:id // We get the id in get current router dashboard/:id
this.route.params.subscribe(params => { this.route.params.subscribe(params => {
// + is used to cast string to int // + is used to cast string to int
@@ -435,7 +453,17 @@ export class EditnewdashComponent implements OnInit {
onDrop(ev) { onDrop(ev) {
const componentType = ev.dataTransfer.getData("widgetIdentifier"); const componentType = ev.dataTransfer.getData("widgetIdentifier");
let maxChartId = this.dashboardArray?.reduce((maxId, item) => Math.max(maxId, item.chartid), 0); // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
let maxChartId = 0;
if (this.dashboardArray && this.dashboardArray.length > 0) {
const validChartIds = this.dashboardArray
.map(item => item.chartid)
.filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
if (validChartIds.length > 0) {
maxChartId = Math.max(...validChartIds);
}
}
switch (componentType) { switch (componentType) {
case "radar_chart": case "radar_chart":
return this.dashboardArray.push({ return this.dashboardArray.push({
@@ -599,6 +627,12 @@ export class EditnewdashComponent implements OnInit {
modelid: number; modelid: number;
// Update the editGadget method to initialize filter properties // Update the editGadget method to initialize filter properties
editGadget(item) { editGadget(item) {
// If coming from dashboard runner, skip showing the config modal
if (this.fromRunner) {
console.log('Coming from dashboard runner, skipping config modal');
return;
}
this.modeledit = true; this.modeledit = true;
this.modelid = item.chartid; this.modelid = item.chartid;
console.log(this.modelid); console.log(this.modelid);
@@ -734,15 +768,34 @@ export class EditnewdashComponent implements OnInit {
this.refreshBaseDrilldownColumns(); this.refreshBaseDrilldownColumns();
} }
if (item.datastore !== undefined || '' || null) { // Check if we have either datastore or table to fetch columns
if ((item.datastore !== undefined && item.datastore !== '' && item.datastore !== null) ||
(item.table !== undefined && item.table !== '' && item.table !== null)) {
const datastore = item.datastore; const datastore = item.datastore;
this.getTables(datastore);
const table = item.table; const table = item.table;
this.getColumns(datastore, table);
// Fetch tables if datastore is available
if (datastore) {
this.getTables(datastore);
}
// Fetch columns if table is available
if (table) {
this.getColumns(datastore, table);
}
console.log(item.yAxis); console.log(item.yAxis);
if (isArray(item.yAxis)) { // Set selectedyAxis regardless of whether it's an array or string
this.selectedyAxis = item.yAxis; if (item.yAxis !== undefined && item.yAxis !== '' && item.yAxis !== null) {
if (isArray(item.yAxis)) {
this.selectedyAxis = item.yAxis;
} else {
// For single yAxis values, convert to array
this.selectedyAxis = [item.yAxis];
}
console.log(this.selectedyAxis); console.log(this.selectedyAxis);
} else {
this.selectedyAxis = [];
} }
} else { } else {
this.selectedyAxis = []; this.selectedyAxis = [];
@@ -816,12 +869,29 @@ export class EditnewdashComponent implements OnInit {
// Update the onSubmit method to properly save filter data // Update the onSubmit method to properly save filter data
onSubmit(id) { onSubmit(id) {
console.log(id); console.log(id);
if (!isNullArray(this.selectedyAxis)) {
console.log("get y-axis array", this.selectedyAxis); // Check if ID is valid, including handling NaN
if (id === null || id === undefined || isNaN(id)) {
console.warn('Chart ID is null, undefined, or NaN, using modelid instead:', this.modelid);
id = this.modelid;
}
// Ensure we have a valid numeric ID
const numId = typeof id === 'number' ? id : parseInt(id, 10);
if (isNaN(numId)) {
console.error('Unable to determine valid chart ID, aborting onSubmit');
return;
}
// Handle both array and string yAxis values
if (this.selectedyAxis !== undefined && this.selectedyAxis !== null &&
((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) ||
(typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
console.log("get y-axis", this.selectedyAxis);
this.entryForm.patchValue({ yAxis: this.selectedyAxis }); this.entryForm.patchValue({ yAxis: this.selectedyAxis });
} }
let formdata = this.entryForm.value; let formdata = this.entryForm.value;
let num = id; let num = numId;
console.log(this.entryForm.value); console.log(this.entryForm.value);
this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => { this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
if (item.chartid == num) { if (item.chartid == num) {
@@ -1028,15 +1098,25 @@ export class EditnewdashComponent implements OnInit {
applyChanges(id) { applyChanges(id) {
console.log('Apply changes for chart ID:', id); console.log('Apply changes for chart ID:', id);
// Check if ID is valid // Check if ID is valid, including handling NaN
if (id === null || id === undefined) { if (id === null || id === undefined || isNaN(id)) {
console.warn('Chart ID is null or undefined, using modelid instead:', this.modelid); console.warn('Chart ID is null, undefined, or NaN, using modelid instead:', this.modelid);
id = this.modelid; id = this.modelid;
} }
// Update the form with selected Y-axis values if it's an array // Ensure we have a valid numeric ID
if (!isNullArray(this.selectedyAxis)) { const numId = typeof id === 'number' ? id : parseInt(id, 10);
console.log("get y-axis array", this.selectedyAxis); if (isNaN(numId)) {
console.error('Unable to determine valid chart ID, aborting applyChanges');
return;
}
// Update the form with selected Y-axis values
// Handle both array and string yAxis values
if (this.selectedyAxis !== undefined && this.selectedyAxis !== null &&
((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) ||
(typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
console.log("get y-axis", this.selectedyAxis);
this.entryForm.patchValue({ yAxis: this.selectedyAxis }); this.entryForm.patchValue({ yAxis: this.selectedyAxis });
} }
@@ -1127,6 +1207,9 @@ export class EditnewdashComponent implements OnInit {
// Note: We don't close the modal here, allowing the user to make additional changes // Note: We don't close the modal here, allowing the user to make additional changes
// The user can click "Save" when they're done with all changes // The user can click "Save" when they're done with all changes
// Reset the filter service to ensure clean state
this.filterService.resetFilters();
} }
goBack() { goBack() {

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

@@ -279,19 +279,32 @@
</div> </div>
</div> </div>
<!-- No data message --> <!-- Chart container -->
<div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;"> <div style="position: relative; height: calc(100% - 80px); width: 100%; padding: 0 10px 30px 10px;">
No data available <!-- Loading indicator -->
</div> <div *ngIf="!dataLoaded" style="text-align: center; padding: 20px; color: #666; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%;">
Loading data...
<!-- Chart display --> </div>
<div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 50px);">
<!-- No data message -->
<div *ngIf="dataLoaded && (noDataAvailable || !isChartDataValid())" style="text-align: center; padding: 20px; color: #666; font-style: italic; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%;">
No data available
</div>
<!-- Chart display - Always render the canvas but conditionally show/hide with CSS -->
<canvas baseChart <canvas baseChart
[datasets]="bubbleChartData" [datasets]="bubbleChartData"
[type]="bubbleChartType" [type]="bubbleChartType"
[options]="bubbleChartOptions" [options]="bubbleChartOptions"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"> (chartClick)="chartClicked($event)"
[style.visibility]="dataLoaded && !noDataAvailable && isChartDataValid() ? 'visible' : 'hidden'"
[style.position]="'absolute'"
[style.top]="'0'"
[style.left]="'0'"
[style.height]="'100%'"
[style.width]="'100%'"
[style.padding]="'0 10px 20px 10px'">
</canvas> </canvas>
</div> </div>
</div> </div>

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

@@ -37,55 +37,77 @@ export class BubbleChartComponent implements OnInit, OnChanges {
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
public bubbleChartOptions: ChartConfiguration['options'] = { public bubbleChartOptions: ChartConfiguration['options'] = {
// scales: { responsive: true,
// x: { maintainAspectRatio: false,
// min: 0, scales: {
// max: 30, x: {
// ticks: {} beginAtZero: true,
// }, title: {
// y: { display: true,
// min: 0, text: 'X Axis'
// max: 30, },
// ticks: {} ticks: {
// }, autoSkip: false,
// plugins: { maxRotation: 45,
// title: { minRotation: 45
// display: true, }
// text: 'Bubble Chart' },
// } y: {
// } beginAtZero: true,
// } title: {
display: true,
text: 'Y Axis'
}
}
},
plugins: {
legend: {
display: true,
position: 'top',
},
tooltip: {
enabled: true,
mode: 'point',
intersect: false,
callbacks: {
label: function(context: any) {
const point: any = context.raw;
if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
const yValue = parseFloat(point.y);
const rValue = parseFloat(point.r);
if (!isNaN(yValue) && !isNaN(rValue)) {
return `Value: ${yValue.toFixed(2)}, Size: ${rValue.toFixed(1)}`;
}
}
return context.dataset.label || '';
}
}
}
},
animation: {
duration: 800,
easing: 'easeInOutQuart'
},
// Enable individual point styling
elements: {
point: {
hoverRadius: 12,
hoverBorderWidth: 3
}
},
// Add padding to ensure x-axis labels are visible
layout: {
padding: {
left: 10,
right: 10,
top: 10,
bottom: 30
}
}
}; };
public bubbleChartType: string = 'bubble'; public bubbleChartType: string = 'bubble';
public bubbleChartData: ChartDataset[] = [ public bubbleChartData: ChartDataset[] = [];
{
data: [
{ x: 10, y: 10, r: 10 },
{ x: 15, y: 5, r: 15 },
{ x: 26, y: 12, r: 23 },
{ x: 7, y: 8, r: 8 },
],
label: 'Investment Equities',
backgroundColor: 'rgba(255, 0, 0, 0.6)', // Red
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
{
data: [
{ x: 5, y: 15, r: 12 },
{ x: 20, y: 7, r: 8 },
{ x: 12, y: 18, r: 15 },
{ x: 8, y: 6, r: 10 },
],
label: 'Investment Bonds',
backgroundColor: 'rgba(0, 255, 0, 0.6)', // Green
borderColor: 'green',
hoverBackgroundColor: 'yellow',
hoverBorderColor: 'blue',
},
];
// Multi-layer drilldown state tracking // Multi-layer drilldown state tracking
drilldownStack: any[] = []; // Stack to track drilldown navigation history drilldownStack: any[] = []; // Stack to track drilldown navigation history
@@ -94,6 +116,7 @@ export class BubbleChartComponent implements OnInit, OnChanges {
// No data state // No data state
noDataAvailable: boolean = false; noDataAvailable: boolean = false;
dataLoaded: boolean = false; // Track if data has been loaded
// Flag to prevent infinite loops // Flag to prevent infinite loops
private isFetchingData: boolean = false; private isFetchingData: boolean = false;
@@ -465,45 +488,250 @@ export class BubbleChartComponent implements OnInit, OnChanges {
this.fetchChartData(); this.fetchChartData();
} }
// Helper function to replace alpha value in RGBA color string
private replaceAlpha(color: string, newAlpha: number): string {
// Match rgba(r, g, b, a) format and replace alpha value
return color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, `rgba($1, $2, $3, ${newAlpha})`);
}
// Function to generate different colors for bubbles
private generateBubbleColor(index: number, value: number, total: number): string {
// Generate colors based on index or value
// Using HSL color model for better color distribution
const hue = (index * 137.508) % 360; // Golden angle approximation for good distribution
const saturation = 80 + (index % 20); // High saturation for vibrant colors
const lightness = 40 + (index % 30); // Vary lightness for contrast
// Convert HSL to RGB
const h = hue / 360;
const s = saturation / 100;
const l = lightness / 100;
const rgb = this.hslToRgb(h, s, l);
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)`;
}
// Helper function to convert HSL to RGB
private hslToRgb(h: number, s: number, l: number): { r: number, g: number, b: number } {
let r, g, b;
if (s === 0) {
r = g = b = l; // achromatic
} else {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
}
// Helper function to calculate logarithmic scaling
private logScale(value: number, min: number, max: number, minRadius: number, maxRadius: number): number {
if (min === max) return (minRadius + maxRadius) / 2;
// Normalize value to 0-1 range
const normalized = (value - min) / (max - min);
// Apply logarithmic scaling (base 10)
// Add 1 to avoid log(0) and scale to 1-10 range
const logValue = Math.log10(normalized * 9 + 1);
// Scale to desired radius range
return minRadius + (logValue / Math.log10(10)) * (maxRadius - minRadius);
}
// Transform data to bubble chart format // Transform data to bubble chart format
private transformToBubbleData(labels: any[], data: any[]): ChartDataset[] { private transformToBubbleData(labels: any[], data: any[]): ChartDataset[] {
// For bubble charts, we need to transform the data into bubble format // For bubble charts, we need to transform the data into bubble format
// Bubble charts expect data in the format: {x: number, y: number, r: number} // Bubble charts expect data in the format: {x: number, y: number, r: number}
console.log('Transforming data to bubble format:', { labels, data }); console.log('Transforming data to bubble format:', { labels, data });
// Handle null/undefined data
if (!labels || !data) {
console.log('Labels or data is null/undefined, returning empty dataset');
return [];
}
// If we have the expected bubble data format, return it as is // If we have the expected bubble data format, return it as is
if (data && data.length > 0 && data[0].data && data[0].data.length > 0 && if (data && data.length > 0 && data[0].data && data[0].data.length > 0 &&
typeof data[0].data[0] === 'object' && data[0].data[0].hasOwnProperty('x') && typeof data[0].data[0] === 'object' && data[0].data[0].hasOwnProperty('x') &&
data[0].data[0].hasOwnProperty('y') && data[0].data[0].hasOwnProperty('r')) { data[0].data[0].hasOwnProperty('y') && data[0].data[0].hasOwnProperty('r')) {
console.log('Data is already in bubble format, returning as is');
return data; return data;
} }
// Otherwise, create a default bubble dataset // Transform the data properly for bubble chart
const bubbleDatasets: ChartDataset[] = [ // Assuming labels are x-values and data[0].data are y-values
{ if (labels && data && data.length > 0 && data[0].data) {
data: [ console.log('Transforming regular data to bubble format');
{ x: 10, y: 10, r: 10 }, const yValues = data[0].data;
{ x: 15, y: 5, r: 15 }, const label = data[0].label || 'Dataset 1';
{ x: 26, y: 12, r: 23 },
{ x: 7, y: 8, r: 8 }, // Handle case where yValues might not be an array
], if (!Array.isArray(yValues)) {
label: 'Dataset 1', console.log('yValues is not an array, returning empty dataset');
backgroundColor: 'rgba(255, 0, 0, 0.6)', return [];
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
} }
];
console.log('yValues type:', typeof yValues);
console.log('yValues length:', yValues.length);
console.log('First few yValues:', yValues.slice(0, 5));
// Find min and max values for scaling
let minValue = Infinity;
let maxValue = -Infinity;
const validYValues = [];
// First pass: collect valid values and find min/max
for (let i = 0; i < yValues.length; i++) {
let y;
if (typeof yValues[i] === 'string') {
y = parseFloat(yValues[i]);
} else {
y = yValues[i];
}
if (!isNaN(y)) {
validYValues.push(y);
minValue = Math.min(minValue, y);
maxValue = Math.max(maxValue, y);
}
}
console.log('Value range:', { minValue, maxValue });
// Adjust radius range based on number of data points
// For fewer points, we can use larger bubbles; for more points, smaller bubbles to prevent overlap
const dataPointCount = Math.min(labels.length, yValues.length);
let minRadius = 3;
let maxRadius = 30;
// Adjust radius range based on data point count
if (dataPointCount > 50) {
minRadius = 2;
maxRadius = 20;
} else if (dataPointCount > 20) {
minRadius = 3;
maxRadius = 25;
}
console.log('Radius range:', { minRadius, maxRadius, dataPointCount });
// Create bubble points from labels (x) and data (y)
const bubblePoints = [];
const bubbleColors = [];
const minLength = Math.min(labels.length, yValues.length);
console.log('Processing data points:', { labels, yValues, minLength });
for (let i = 0; i < minLength; i++) {
// Log each point for debugging
console.log(`Processing point ${i}: label=${labels[i]}, yValue=${yValues[i]}, type=${typeof yValues[i]}`);
// Convert y to number if it's a string
let y;
if (typeof yValues[i] === 'string') {
y = parseFloat(yValues[i]);
console.log(`Converted string yValue to number: ${yValues[i]} -> ${y}`);
} else {
y = yValues[i];
}
// Handle NaN values
if (isNaN(y)) {
console.log(`Skipping point ${i} due to NaN y value: ${yValues[i]}`);
continue;
}
// Calculate radius based on the y-value with logarithmic scaling
const r = this.logScale(y, minValue, maxValue, minRadius, maxRadius);
console.log(`Value: ${y}, Radius: ${r}`);
// For x-value, we'll use the index position since labels are strings
const x = i;
// Generate a unique color for this bubble
const backgroundColor = this.generateBubbleColor(i, y, minLength);
// Store the color for the dataset
bubbleColors.push(backgroundColor);
// Add the point
const point = {
x,
y,
r
};
console.log(`Adding point ${i}:`, point);
bubblePoints.push(point);
}
console.log('Generated bubble points:', bubblePoints);
console.log('Generated bubble points count:', bubblePoints.length);
console.log('Generated bubble colors count:', bubbleColors.length);
// If we have no valid points, return empty array
if (bubblePoints.length === 0) {
console.log('No valid bubble points generated, returning empty dataset');
return [];
}
// Create a single dataset with all bubble points
const bubbleDatasets: ChartDataset[] = [
{
data: bubblePoints,
label: label,
backgroundColor: bubbleColors,
borderColor: bubbleColors.map(color => this.replaceAlpha(color, 1)), // Slightly more opaque border
hoverBackgroundColor: bubbleColors.map(color => this.replaceAlpha(color, 0.9)),
hoverBorderColor: 'rgba(255, 255, 255, 1)',
borderWidth: 2,
pointHoverRadius: 10,
}
];
console.log('Transformed bubble data:', bubbleDatasets);
return bubbleDatasets;
}
return bubbleDatasets; console.log('Could not transform data, returning empty dataset');
// Return empty dataset instead of default data
return [];
} }
fetchChartData(): void { fetchChartData(): void {
// Set flag to prevent recursive calls // Set flag to prevent recursive calls
this.isFetchingData = true; this.isFetchingData = true;
this.dataLoaded = false; // Mark data as not loaded yet
this.noDataAvailable = false; // Reset no data flag
console.log('Starting fetchChartData, current state:', {
table: this.table,
xAxis: this.xAxis,
yAxis: this.yAxis,
connection: this.connection
});
// If we're in drilldown mode, fetch the appropriate drilldown data // If we're in drilldown mode, fetch the appropriate drilldown data
if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) { if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
console.log('Fetching drilldown data');
this.fetchDrilldownData(); this.fetchDrilldownData();
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
@@ -583,32 +811,82 @@ export class BubbleChartComponent implements OnInit, OnChanges {
this.dashboardService.getChartData(this.table, 'bubble', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe( this.dashboardService.getChartData(this.table, 'bubble', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
(data: any) => { (data: any) => {
console.log('Received bubble chart data:', data); console.log('Received bubble chart data:', data);
if (data === null) {
console.warn('Bubble chart API returned null data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true;
this.bubbleChartData = [];
// Reset flag after fetching
this.isFetchingData = false;
return;
}
// Handle the actual data structure returned by the API // Reset chart data to empty first
if (data && data.chartLabels && data.chartData) { this.bubbleChartData = [];
if (data === null || data === undefined) {
console.warn('Bubble chart API returned null/undefined data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true;
} else if (data && data.chartLabels && data.chartData) {
// For bubble charts, we need to transform the data into bubble format // For bubble charts, we need to transform the data into bubble format
// Bubble charts expect data in the format: {x: number, y: number, r: number} // Bubble charts expect data in the format: {x: number, y: number, r: number}
this.noDataAvailable = data.chartLabels.length === 0; console.log('Processing chartLabels and chartData format');
this.bubbleChartData = this.transformToBubbleData(data.chartLabels, data.chartData); const transformedData = this.transformToBubbleData(data.chartLabels, data.chartData);
console.log('Updated bubble chart with data:', this.bubbleChartData); console.log('Transformed data:', transformedData);
// Check if we have valid data
let hasValidData = false;
if (transformedData && transformedData.length > 0) {
for (const dataset of transformedData) {
if (dataset.data && dataset.data.length > 0) {
hasValidData = true;
break;
}
}
}
if (hasValidData) {
// Create a new array reference to trigger change detection
this.bubbleChartData = [...transformedData];
this.noDataAvailable = false;
console.log('Updated bubble chart with data:', this.bubbleChartData);
} else {
console.log('No valid data after transformation');
this.noDataAvailable = true;
}
} else if (data && data.labels && data.datasets) { } else if (data && data.labels && data.datasets) {
// Handle the original expected format as fallback // Handle the original expected format as fallback
this.noDataAvailable = data.labels.length === 0; console.log('Processing labels and datasets format');
this.bubbleChartData = data.datasets; // Check if we have valid data
console.log('Updated bubble chart with legacy data format:', this.bubbleChartData); let hasValidData = false;
if (data.datasets && data.datasets.length > 0) {
for (const dataset of data.datasets) {
if (dataset.data && dataset.data.length > 0) {
hasValidData = true;
break;
}
}
}
if (hasValidData) {
// Create a new array reference to trigger change detection
this.bubbleChartData = [...data.datasets];
this.noDataAvailable = false;
console.log('Updated bubble chart with legacy data format:', this.bubbleChartData);
} else {
console.log('No valid data in legacy format');
this.noDataAvailable = true;
}
} else { } else {
console.warn('Bubble chart received data does not have expected structure', data); console.warn('Bubble chart received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.bubbleChartData = [];
} }
this.dataLoaded = true; // Mark data as loaded
console.log('Final state after data fetch:', {
noDataAvailable: this.noDataAvailable,
dataLoaded: this.dataLoaded,
bubbleChartDataLength: this.bubbleChartData.length,
isChartDataValid: this.isChartDataValid()
});
// Trigger change detection with a small delay to ensure proper rendering
setTimeout(() => {
this.forceChartUpdate();
}, 100);
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
}, },
@@ -616,15 +894,24 @@ export class BubbleChartComponent implements OnInit, OnChanges {
console.error('Error fetching bubble chart data:', error); console.error('Error fetching bubble chart data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.bubbleChartData = []; this.bubbleChartData = [];
this.dataLoaded = true;
// Trigger change detection
setTimeout(() => {
this.forceChartUpdate();
}, 100);
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
// Keep default data in case of error
} }
); );
} else { } else {
console.log('Missing required data for bubble chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection }); console.log('Missing required data for bubble chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
this.noDataAvailable = true; this.noDataAvailable = true;
this.bubbleChartData = []; this.bubbleChartData = [];
this.dataLoaded = true;
// Trigger change detection
setTimeout(() => {
this.forceChartUpdate();
}, 100);
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
} }
@@ -654,6 +941,10 @@ export class BubbleChartComponent implements OnInit, OnChanges {
console.warn('Invalid drilldown layer index:', layerIndex); console.warn('Invalid drilldown layer index:', layerIndex);
this.noDataAvailable = true; this.noDataAvailable = true;
this.bubbleChartData = []; this.bubbleChartData = [];
this.dataLoaded = true;
setTimeout(() => {
this.forceChartUpdate();
}, 100);
return; return;
} }
} }
@@ -665,6 +956,10 @@ export class BubbleChartComponent implements OnInit, OnChanges {
console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel); console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel);
this.noDataAvailable = true; this.noDataAvailable = true;
this.bubbleChartData = []; this.bubbleChartData = [];
this.dataLoaded = true;
setTimeout(() => {
this.forceChartUpdate();
}, 100);
return; return;
} }
@@ -758,35 +1053,84 @@ export class BubbleChartComponent implements OnInit, OnChanges {
this.dashboardService.getChartData(actualApiUrl, 'bubble', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe( this.dashboardService.getChartData(actualApiUrl, 'bubble', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
(data: any) => { (data: any) => {
console.log('Received drilldown data:', data); console.log('Received drilldown data:', data);
if (data === null) {
console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true;
this.bubbleChartData = [];
return;
}
// Handle the actual data structure returned by the API // Reset chart data to empty first
if (data && data.chartLabels && data.chartData) { this.bubbleChartData = [];
if (data === null || data === undefined) {
console.warn('Drilldown API returned null/undefined data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true;
} else if (data && data.chartLabels && data.chartData) {
// For bubble charts, we need to transform the data into bubble format // For bubble charts, we need to transform the data into bubble format
this.noDataAvailable = data.chartLabels.length === 0; const transformedData = this.transformToBubbleData(data.chartLabels, data.chartData);
this.bubbleChartData = this.transformToBubbleData(data.chartLabels, data.chartData);
console.log('Updated bubble chart with drilldown data:', this.bubbleChartData); // Check if we have valid data
let hasValidData = false;
if (transformedData && transformedData.length > 0) {
for (const dataset of transformedData) {
if (dataset.data && dataset.data.length > 0) {
hasValidData = true;
break;
}
}
}
if (hasValidData) {
this.bubbleChartData = transformedData;
this.noDataAvailable = false;
console.log('Updated bubble chart with drilldown data:', this.bubbleChartData);
} else {
console.log('No valid data after transformation in drilldown');
this.noDataAvailable = true;
}
} else if (data && data.labels && data.datasets) { } else if (data && data.labels && data.datasets) {
// Handle the original expected format as fallback // Handle the original expected format as fallback
this.noDataAvailable = data.labels.length === 0; // Check if we have valid data
this.bubbleChartData = data.datasets; let hasValidData = false;
console.log('Updated bubble chart with drilldown legacy data format:', this.bubbleChartData); if (data.datasets && data.datasets.length > 0) {
for (const dataset of data.datasets) {
if (dataset.data && dataset.data.length > 0) {
hasValidData = true;
break;
}
}
}
if (hasValidData) {
this.bubbleChartData = data.datasets;
this.noDataAvailable = false;
console.log('Updated bubble chart with drilldown legacy data format:', this.bubbleChartData);
} else {
console.log('No valid data in legacy format in drilldown');
this.noDataAvailable = true;
}
} else { } else {
console.warn('Drilldown received data does not have expected structure', data); console.warn('Drilldown received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.bubbleChartData = [];
} }
this.dataLoaded = true; // Mark data as loaded
console.log('Final state after drilldown data fetch:', {
noDataAvailable: this.noDataAvailable,
dataLoaded: this.dataLoaded,
bubbleChartDataLength: this.bubbleChartData.length,
isChartDataValid: this.isChartDataValid()
});
// Trigger change detection
setTimeout(() => {
this.forceChartUpdate();
}, 100);
}, },
(error) => { (error) => {
console.error('Error fetching drilldown data:', error); console.error('Error fetching drilldown data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.bubbleChartData = []; this.bubbleChartData = [];
// Keep current data in case of error this.dataLoaded = true;
setTimeout(() => {
this.forceChartUpdate();
}, 100);
} }
); );
} }
@@ -933,4 +1277,52 @@ export class BubbleChartComponent implements OnInit, OnChanges {
public chartHovered(e: any): void { public chartHovered(e: any): void {
console.log('Bubble chart hovered:', e); console.log('Bubble chart hovered:', e);
} }
// Method to check if chart data is valid
public isChartDataValid(): boolean {
console.log('Checking if chart data is valid:', this.bubbleChartData);
if (!this.bubbleChartData || this.bubbleChartData.length === 0) {
console.log('Chart data is null or empty');
return false;
}
// Check if any dataset has data
for (const dataset of this.bubbleChartData) {
console.log('Checking dataset:', dataset);
if (dataset.data && dataset.data.length > 0) {
console.log('Dataset has data, length:', dataset.data.length);
// For bubble charts, check if data points have x, y, r properties
for (const point of dataset.data) {
console.log('Checking point:', point);
if (typeof point === 'object' && point.hasOwnProperty('x') && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
// Valid bubble point
console.log('Found valid bubble point');
return true;
}
}
}
}
console.log('No valid chart data found');
return false;
}
// Method to force chart update
private forceChartUpdate(): void {
console.log('Forcing chart update');
console.log('Current bubbleChartData:', this.bubbleChartData);
console.log('Current bubbleChartData length:', this.bubbleChartData ? this.bubbleChartData.length : 0);
if (this.bubbleChartData && this.bubbleChartData.length > 0) {
console.log('First dataset data length:', this.bubbleChartData[0].data ? this.bubbleChartData[0].data.length : 0);
}
// Create a new reference to trigger change detection
if (this.bubbleChartData) {
this.bubbleChartData = [...this.bubbleChartData];
}
// Also update noDataAvailable to trigger UI changes
this.noDataAvailable = this.noDataAvailable;
console.log('Chart update forced, noDataAvailable:', this.noDataAvailable);
console.log('Chart update forced, bubbleChartData length:', this.bubbleChartData ? this.bubbleChartData.length : 0);
console.log('Chart update forced, isChartDataValid:', this.isChartDataValid());
}
} }

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

@@ -284,13 +284,12 @@
<div class="chart-wrapper"> <div class="chart-wrapper">
<div class="chart-content" [class.loading]="isLoading"> <div class="chart-content" [class.loading]="isLoading">
<!-- Show no data message --> <!-- Show no data message -->
<div class="no-data-message" *ngIf="noDataAvailable"> <div class="no-data-message" *ngIf="noDataAvailable && doughnutChartLabels.length === 0">
<p>No chart data available</p> <p>No chart data available</p>
</div> </div>
<!-- Show chart when data is available --> <!-- Show chart when data is available -->
<canvas baseChart <canvas baseChart
*ngIf="!noDataAvailable && doughnutChartLabels.length > 0 && doughnutChartData.length > 0"
[datasets]="doughnutChartData" [datasets]="doughnutChartData"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabels"
[type]="doughnutChartType" [type]="doughnutChartType"
@@ -306,7 +305,7 @@
</div> </div>
</div> </div>
<div class="chart-legend" *ngIf="!noDataAvailable && showlabel && doughnutChartLabels && doughnutChartLabels.length > 0"> <div class="chart-legend" *ngIf="showlabel && doughnutChartLabels && doughnutChartLabels.length > 0">
<div class="legend-item" *ngFor="let label of doughnutChartLabels; let i = index"> <div class="legend-item" *ngFor="let label of doughnutChartLabels; let i = index">
<span class="legend-color" [style.background-color]="getLegendColor(i)"></span> <span class="legend-color" [style.background-color]="getLegendColor(i)"></span>
<span class="legend-label">{{ label }}</span> <span class="legend-label">{{ label }}</span>

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

@@ -148,7 +148,10 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
// Validate initial data // Validate initial data
this.validateChartData(); this.validateChartData();
this.fetchChartData(); // Only fetch data if we have the required inputs, otherwise show default data
if (this.table && this.xAxis && this.yAxis) {
this.fetchChartData();
}
} }
/** /**
@@ -237,6 +240,12 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
console.log('Chart configuration changed, fetching new data'); console.log('Chart configuration changed, fetching new data');
this.fetchChartData(); this.fetchChartData();
} }
// If we have the required inputs and haven't fetched data yet, fetch it
if ((xAxisChanged || yAxisChanged || tableChanged) && this.table && this.xAxis && this.yAxis && !this.isFetchingData) {
console.log('Required inputs available, fetching data');
this.fetchChartData();
}
} }
ngAfterViewChecked() { ngAfterViewChecked() {
@@ -674,11 +683,31 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
// Backend has already filtered the data, just display it // Backend has already filtered the data, just display it
this.noDataAvailable = data.chartLabels.length === 0; this.noDataAvailable = data.chartLabels.length === 0;
this.doughnutChartLabels = data.chartLabels; this.doughnutChartLabels = data.chartLabels;
// Handle different data structures
let chartDataValues;
if (Array.isArray(data.chartData)) {
// If chartData is already an array of values
if (data.chartData.length > 0 && typeof data.chartData[0] !== 'object') {
chartDataValues = data.chartData;
}
// If chartData is an array with one object containing the data
else if (data.chartData.length > 0 && data.chartData[0].data) {
chartDataValues = data.chartData[0].data;
}
// Default case
else {
chartDataValues = data.chartData;
}
} else {
chartDataValues = [data.chartData];
}
this.doughnutChartData = [ this.doughnutChartData = [
{ {
data: data.chartData, data: chartDataValues,
backgroundColor: this.chartColors.slice(0, data.chartData.length), backgroundColor: this.chartColors.slice(0, chartDataValues.length),
hoverBackgroundColor: this.chartColors.slice(0, data.chartData.length) hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
} }
]; ];
console.log('Updated doughnut chart with data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData }); console.log('Updated doughnut chart with data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
@@ -691,12 +720,21 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
} else { } else {
console.warn('Received data does not have expected structure', data); console.warn('Received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.doughnutChartLabels = []; // Keep default data instead of empty arrays
this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
this.doughnutChartData = [ this.doughnutChartData = [
{ {
data: [], data: [30, 50, 20],
backgroundColor: [], backgroundColor: [
hoverBackgroundColor: [] '#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
} }
]; ];
} }
@@ -707,12 +745,26 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
(error) => { (error) => {
console.error('Error fetching doughnut chart data:', error); console.error('Error fetching doughnut chart data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.doughnutChartLabels = []; // Keep default data in case of error
this.doughnutChartData = []; this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
this.doughnutChartData = [
{
data: [30, 50, 20],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}
];
// Reset flags after fetching // Reset flags after fetching
this.isFetchingData = false; this.isFetchingData = false;
this.isLoading = false; this.isLoading = false;
// Keep default data in case of error
} }
); );
} else { } else {
@@ -869,11 +921,31 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
// Backend has already filtered the data, just display it // Backend has already filtered the data, just display it
this.noDataAvailable = data.chartLabels.length === 0; this.noDataAvailable = data.chartLabels.length === 0;
this.doughnutChartLabels = data.chartLabels; this.doughnutChartLabels = data.chartLabels;
// Handle different data structures
let chartDataValues;
if (Array.isArray(data.chartData)) {
// If chartData is already an array of values
if (data.chartData.length > 0 && typeof data.chartData[0] !== 'object') {
chartDataValues = data.chartData;
}
// If chartData is an array with one object containing the data
else if (data.chartData.length > 0 && data.chartData[0].data) {
chartDataValues = data.chartData[0].data;
}
// Default case
else {
chartDataValues = data.chartData;
}
} else {
chartDataValues = [data.chartData];
}
this.doughnutChartData = [ this.doughnutChartData = [
{ {
data: data.chartData, data: chartDataValues,
backgroundColor: this.chartColors.slice(0, data.chartData.length), backgroundColor: this.chartColors.slice(0, chartDataValues.length),
hoverBackgroundColor: this.chartColors.slice(0, data.chartData.length) hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
} }
]; ];
console.log('Updated doughnut chart with drilldown data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData }); console.log('Updated doughnut chart with drilldown data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
@@ -890,14 +962,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
} else { } else {
console.warn('Drilldown received data does not have expected structure', data); console.warn('Drilldown received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.doughnutChartLabels = []; // Keep current data instead of empty arrays
this.doughnutChartData = [
{
data: [],
backgroundColor: [],
hoverBackgroundColor: []
}
];
// Set loading state to false // Set loading state to false
this.isLoading = false; this.isLoading = false;
} }
@@ -905,11 +970,9 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
(error) => { (error) => {
console.error('Error fetching drilldown data:', error); console.error('Error fetching drilldown data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.doughnutChartLabels = []; // Keep current data in case of error
this.doughnutChartData = [];
// Set loading state to false // Set loading state to false
this.isLoading = false; this.isLoading = false;
// Keep current data in case of error
} }
); );

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

@@ -281,7 +281,7 @@
<div class="chart-wrapper"> <div class="chart-wrapper">
<!-- Show loading indicator --> <!-- Show loading indicator -->
<div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable"> <div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable && !isFetchingData">
<div class="spinner"></div> <div class="spinner"></div>
<p>Loading chart data...</p> <p>Loading chart data...</p>
</div> </div>
@@ -291,15 +291,15 @@
<p>No chart data available</p> <p>No chart data available</p>
</div> </div>
<!-- Show chart when data is available --> <!-- Show chart when data is available or show default data -->
<canvas baseChart <canvas baseChart
*ngIf="pieChartLabels.length > 0 && pieChartData.length > 0" [datasets]="pieChartDatasets"
[data]="pieChartData"
[labels]="pieChartLabels" [labels]="pieChartLabels"
[type]="pieChartType" [type]="pieChartType"
[options]="pieChartOptions" [options]="pieChartOptions"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"> (chartClick)="chartClicked($event)"
[style.display]="shouldShowChart() ? 'block' : 'none'">
</canvas> </canvas>
</div> </div>
<div class="chart-legend" *ngIf="showlabel && pieChartLabels && pieChartLabels.length > 0"> <div class="chart-legend" *ngIf="showlabel && pieChartLabels && pieChartLabels.length > 0">

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

@@ -37,6 +37,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
public pieChartLabels: string[] = ['Category A', 'Category B', 'Category C']; public pieChartLabels: string[] = ['Category A', 'Category B', 'Category C'];
public pieChartData: number[] = [30, 50, 20]; public pieChartData: number[] = [30, 50, 20];
public pieChartDatasets: any[] = [
{
data: [30, 50, 20],
label: 'Dataset 1'
}
];
public pieChartType: string = 'pie'; public pieChartType: string = 'pie';
public pieChartOptions: any = { public pieChartOptions: any = {
responsive: true, responsive: true,
@@ -96,7 +102,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
noDataAvailable: boolean = false; noDataAvailable: boolean = false;
// Flag to prevent infinite loops // Flag to prevent infinite loops
private isFetchingData: boolean = false; isFetchingData: boolean = false;
// Subscriptions to unsubscribe on destroy // Subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = []; private subscriptions: Subscription[] = [];
@@ -132,7 +138,17 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
console.log('PieChartComponent initialized with default data:', { labels: this.pieChartLabels, data: this.pieChartData }); console.log('PieChartComponent initialized with default data:', { labels: this.pieChartLabels, data: this.pieChartData });
// Validate initial data // Validate initial data
this.validateChartData(); this.validateChartData();
this.fetchChartData(); // Initialize datasets with default data
this.pieChartDatasets = [
{
data: this.pieChartData,
label: 'Dataset 1'
}
];
// Only fetch data if we have the required inputs, otherwise show default data
if (this.table && this.xAxis && this.yAxis) {
this.fetchChartData();
}
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
@@ -165,6 +181,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
console.log('Chart configuration changed, fetching new data'); console.log('Chart configuration changed, fetching new data');
this.fetchChartData(); this.fetchChartData();
} }
// If we have the required inputs and haven't fetched data yet, fetch it
if ((xAxisChanged || yAxisChanged || tableChanged) && this.table && this.xAxis && this.yAxis && !this.isFetchingData) {
console.log('Required inputs available, fetching data');
this.fetchChartData();
}
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@@ -576,8 +598,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
if (data === null) { if (data === null) {
console.warn('API returned null data. Check if the API endpoint is working correctly.'); console.warn('API returned null data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = [];
this.pieChartData = [];
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
return; return;
@@ -588,9 +608,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
// Backend has already filtered the data, just display it // Backend has already filtered the data, just display it
this.noDataAvailable = data.chartLabels.length === 0; this.noDataAvailable = data.chartLabels.length === 0;
this.pieChartLabels = data.chartLabels; this.pieChartLabels = data.chartLabels;
this.pieChartData = data.chartData;
// Extract the actual data values from the chartData array
// chartData is an array with one object containing the data
if (data.chartData.length > 0 && data.chartData[0].data) {
this.pieChartData = data.chartData[0].data;
} else {
this.pieChartData = [];
}
// Trigger change detection // Trigger change detection
this.pieChartLabels = [...this.pieChartLabels];
this.pieChartData = [...this.pieChartData]; this.pieChartData = [...this.pieChartData];
this.pieChartDatasets = [
{
data: this.pieChartData,
label: 'Dataset 1'
}
];
console.log('Updated pie chart with data:', { labels: this.pieChartLabels, data: this.pieChartData }); console.log('Updated pie chart with data:', { labels: this.pieChartLabels, data: this.pieChartData });
} else if (data && data.labels && data.datasets) { } else if (data && data.labels && data.datasets) {
// Backend has already filtered the data, just display it // Backend has already filtered the data, just display it
@@ -598,13 +633,29 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
this.pieChartLabels = data.labels; this.pieChartLabels = data.labels;
this.pieChartData = data.datasets[0]?.data || []; this.pieChartData = data.datasets[0]?.data || [];
// Trigger change detection // Trigger change detection
this.pieChartLabels = [...this.pieChartLabels];
this.pieChartData = [...this.pieChartData]; this.pieChartData = [...this.pieChartData];
this.pieChartDatasets = [
{
data: this.pieChartData,
label: 'Dataset 1'
}
];
console.log('Updated pie chart with legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData }); console.log('Updated pie chart with legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData });
} else { } else {
console.warn('Received data does not have expected structure', data); console.warn('Received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = []; // Keep default data if no data is available
this.pieChartData = []; if (this.pieChartLabels.length === 0 && this.pieChartData.length === 0) {
this.pieChartLabels = ['Category A', 'Category B', 'Category C'];
this.pieChartData = [30, 50, 20];
this.pieChartDatasets = [
{
data: this.pieChartData,
label: 'Dataset 1'
}
];
}
} }
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
@@ -612,18 +663,13 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
(error) => { (error) => {
console.error('Error fetching pie chart data:', error); console.error('Error fetching pie chart data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = [];
this.pieChartData = [];
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
// Keep default data in case of error
} }
); );
} else { } else {
console.log('Missing required data for chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection }); console.log('Missing required data for chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = [];
this.pieChartData = [];
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
} }
@@ -652,8 +698,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
} else { } else {
console.warn('Invalid drilldown layer index:', layerIndex); console.warn('Invalid drilldown layer index:', layerIndex);
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = [];
this.pieChartData = [];
return; return;
} }
} }
@@ -664,8 +708,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
if (!drilldownConfig || !drilldownConfig.apiUrl || !drilldownConfig.xAxis || !drilldownConfig.yAxis) { if (!drilldownConfig || !drilldownConfig.apiUrl || !drilldownConfig.xAxis || !drilldownConfig.yAxis) {
console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel); console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel);
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = [];
this.pieChartData = [];
return; return;
} }
@@ -762,8 +804,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
if (data === null) { if (data === null) {
console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.'); console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = [];
this.pieChartData = [];
return; return;
} }
@@ -772,9 +812,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
// Backend has already filtered the data, just display it // Backend has already filtered the data, just display it
this.noDataAvailable = data.chartLabels.length === 0; this.noDataAvailable = data.chartLabels.length === 0;
this.pieChartLabels = data.chartLabels; this.pieChartLabels = data.chartLabels;
this.pieChartData = data.chartData;
// Extract the actual data values from the chartData array
// chartData is an array with one object containing the data
if (data.chartData.length > 0 && data.chartData[0].data) {
this.pieChartData = data.chartData[0].data;
} else {
this.pieChartData = [];
}
// Trigger change detection // Trigger change detection
this.pieChartLabels = [...this.pieChartLabels];
this.pieChartData = [...this.pieChartData]; this.pieChartData = [...this.pieChartData];
this.pieChartDatasets = [
{
data: this.pieChartData,
label: 'Dataset 1'
}
];
console.log('Updated pie chart with drilldown data:', { labels: this.pieChartLabels, data: this.pieChartData }); console.log('Updated pie chart with drilldown data:', { labels: this.pieChartLabels, data: this.pieChartData });
} else if (data && data.labels && data.datasets) { } else if (data && data.labels && data.datasets) {
// Backend has already filtered the data, just display it // Backend has already filtered the data, just display it
@@ -782,21 +837,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
this.pieChartLabels = data.labels; this.pieChartLabels = data.labels;
this.pieChartData = data.datasets[0]?.data || []; this.pieChartData = data.datasets[0]?.data || [];
// Trigger change detection // Trigger change detection
this.pieChartLabels = [...this.pieChartLabels];
this.pieChartData = [...this.pieChartData]; this.pieChartData = [...this.pieChartData];
this.pieChartDatasets = [
{
data: this.pieChartData,
label: 'Dataset 1'
}
];
console.log('Updated pie chart with drilldown legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData }); console.log('Updated pie chart with drilldown legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData });
} else { } else {
console.warn('Drilldown received data does not have expected structure', data); console.warn('Drilldown received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = []; // Keep current data if no data is available
this.pieChartData = [];
} }
}, },
(error) => { (error) => {
console.error('Error fetching drilldown data:', error); console.error('Error fetching drilldown data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.pieChartLabels = [];
this.pieChartData = [];
// Keep current data in case of error
} }
); );
} }
@@ -884,6 +942,26 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
getLegendColor(index: number): string { getLegendColor(index: number): string {
return this.chartColors[index % this.chartColors.length]; return this.chartColors[index % this.chartColors.length];
} }
// Method to determine if chart should be displayed
shouldShowChart(): boolean {
// Show chart if we have data
if (this.pieChartLabels.length > 0 && this.pieChartData.length > 0) {
return true;
}
// Show chart if we're still fetching data
if (this.isFetchingData) {
return true;
}
// Show chart if we have default data
if (this.pieChartLabels.length > 0 && this.originalPieChartLabels.length > 0) {
return true;
}
return false;
}
// events // events
public chartClicked(e: any): void { public chartClicked(e: any): void {
@@ -977,4 +1055,4 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
ngAfterViewChecked(): void { ngAfterViewChecked(): void {
// This lifecycle hook can be used if needed for post-render operations // This lifecycle hook can be used if needed for post-render operations
} }
} }

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

@@ -279,10 +279,11 @@
</div> </div>
</div> </div>
<div style="position: relative; height: calc(100% - 50px);"> <div style="position: relative; height: calc(100% - 80px); padding: 0 10px 30px 10px;">
<canvas baseChart <canvas baseChart
[datasets]="polarAreaChartData" [datasets]="polarAreaChartData"
[labels]="polarAreaChartLabels" [labels]="polarAreaChartLabels"
[options]="polarAreaChartOptions"
[type]="polarAreaChartType" [type]="polarAreaChartType"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"> (chartClick)="chartClicked($event)">

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

@@ -90,6 +90,32 @@ export class PolarChartComponent implements OnInit, OnChanges {
{ data: [ 300, 500, 100, 40, 120 ], label: 'Series 1'} { data: [ 300, 500, 100, 40, 120 ], label: 'Series 1'}
]; ];
public polarAreaChartOptions: any = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
top: 10,
bottom: 30
}
},
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
r: {
ticks: {
backdropColor: 'rgba(0, 0, 0, 0)'
}
}
}
};
public polarAreaChartType: string = 'polarArea'; public polarAreaChartType: string = 'polarArea';
// Multi-layer drilldown state tracking // Multi-layer drilldown state tracking
@@ -511,7 +537,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
console.warn('Polar chart API returned null data. Check if the API endpoint is working correctly.'); console.warn('Polar chart API returned null data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
return; return;
@@ -524,32 +555,54 @@ export class PolarChartComponent implements OnInit, OnChanges {
this.noDataAvailable = data.chartLabels.length === 0; this.noDataAvailable = data.chartLabels.length === 0;
this.polarAreaChartLabels = data.chartLabels; this.polarAreaChartLabels = data.chartLabels;
if (data.chartData && data.chartData.length > 0) { if (data.chartData && data.chartData.length > 0) {
this.polarAreaChartData = data.chartData[0].data.map(value => { // Convert the data to the expected format for polar area charts
const chartValues = data.chartData[0].data.map(value => {
// Convert to number if it's not already // Convert to number if it's not already
return isNaN(Number(value)) ? 0 : Number(value); return isNaN(Number(value)) ? 0 : Number(value);
}); });
// Assign data in the correct format (array of objects with data property)
this.polarAreaChartData = [
{
data: chartValues,
label: data.chartData[0].label || 'Dataset 1'
}
];
} else { } else {
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
} }
// Trigger change detection
this.polarAreaChartData = [...this.polarAreaChartData];
console.log('Updated polar chart with data:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData }); console.log('Updated polar chart with data:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData });
} else if (data && data.labels && data.data) { } else if (data && data.labels && data.data) {
// Handle the original expected format as fallback // Handle the original expected format as fallback
this.noDataAvailable = data.labels.length === 0; this.noDataAvailable = data.labels.length === 0;
this.polarAreaChartLabels = data.labels; this.polarAreaChartLabels = data.labels;
this.polarAreaChartData = data.data.map(value => { // Convert the data to the expected format for polar area charts
const chartValues = data.data.map(value => {
// Convert to number if it's not already // Convert to number if it's not already
return isNaN(Number(value)) ? 0 : Number(value); return isNaN(Number(value)) ? 0 : Number(value);
}); });
// Trigger change detection // Assign data in the correct format (array of objects with data property)
this.polarAreaChartData = [...this.polarAreaChartData]; this.polarAreaChartData = [
{
data: chartValues,
label: 'Dataset 1'
}
];
console.log('Updated polar chart with legacy data format:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData }); console.log('Updated polar chart with legacy data format:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData });
} else { } else {
console.warn('Polar chart received data does not have expected structure', data); console.warn('Polar chart received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
} }
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
@@ -558,7 +611,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
console.error('Error fetching polar chart data:', error); console.error('Error fetching polar chart data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
// Keep default data in case of error // Keep default data in case of error
@@ -568,7 +626,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
console.log('Missing required data for polar chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection }); console.log('Missing required data for polar chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
// Reset flag after fetching // Reset flag after fetching
this.isFetchingData = false; this.isFetchingData = false;
} }
@@ -598,7 +661,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
console.warn('Invalid drilldown layer index:', layerIndex); console.warn('Invalid drilldown layer index:', layerIndex);
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
return; return;
} }
} }
@@ -610,7 +678,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel); console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel);
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
return; return;
} }
@@ -708,7 +781,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.'); console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.');
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
return; return;
} }
@@ -718,12 +796,25 @@ export class PolarChartComponent implements OnInit, OnChanges {
this.noDataAvailable = data.chartLabels.length === 0; this.noDataAvailable = data.chartLabels.length === 0;
this.polarAreaChartLabels = data.chartLabels; this.polarAreaChartLabels = data.chartLabels;
if (data.chartData && data.chartData.length > 0) { if (data.chartData && data.chartData.length > 0) {
this.polarAreaChartData = data.chartData[0].data.map(value => { // Convert the data to the expected format for polar area charts
const chartValues = data.chartData[0].data.map(value => {
// Convert to number if it's not already // Convert to number if it's not already
return isNaN(Number(value)) ? 0 : Number(value); return isNaN(Number(value)) ? 0 : Number(value);
}); });
// Assign data in the correct format (array of objects with data property)
this.polarAreaChartData = [
{
data: chartValues,
label: data.chartData[0].label || 'Dataset 1'
}
];
} else { } else {
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
} }
// Trigger change detection // Trigger change detection
this.polarAreaChartData = [...this.polarAreaChartData]; this.polarAreaChartData = [...this.polarAreaChartData];
@@ -732,10 +823,18 @@ export class PolarChartComponent implements OnInit, OnChanges {
// Handle the original expected format as fallback // Handle the original expected format as fallback
this.noDataAvailable = data.labels.length === 0; this.noDataAvailable = data.labels.length === 0;
this.polarAreaChartLabels = data.labels; this.polarAreaChartLabels = data.labels;
this.polarAreaChartData = data.data.map(value => { // Convert the data to the expected format for polar area charts
const chartValues = data.data.map(value => {
// Convert to number if it's not already // Convert to number if it's not already
return isNaN(Number(value)) ? 0 : Number(value); return isNaN(Number(value)) ? 0 : Number(value);
}); });
// Assign data in the correct format (array of objects with data property)
this.polarAreaChartData = [
{
data: chartValues,
label: 'Dataset 1'
}
];
// Trigger change detection // Trigger change detection
this.polarAreaChartData = [...this.polarAreaChartData]; this.polarAreaChartData = [...this.polarAreaChartData];
console.log('Updated polar chart with drilldown legacy data format:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData }); console.log('Updated polar chart with drilldown legacy data format:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData });
@@ -743,14 +842,24 @@ export class PolarChartComponent implements OnInit, OnChanges {
console.warn('Drilldown received data does not have expected structure', data); console.warn('Drilldown received data does not have expected structure', data);
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
} }
}, },
(error) => { (error) => {
console.error('Error fetching drilldown data:', error); console.error('Error fetching drilldown data:', error);
this.noDataAvailable = true; this.noDataAvailable = true;
this.polarAreaChartLabels = []; this.polarAreaChartLabels = [];
this.polarAreaChartData = []; this.polarAreaChartData = [
{
data: [],
label: 'Dataset 1'
}
];
// Keep current data in case of error // Keep current data in case of error
} }
); );
@@ -906,4 +1015,4 @@ export class PolarChartComponent implements OnInit, OnChanges {
// Clean up document click handler // Clean up document click handler
this.removeDocumentClickHandler(); this.removeDocumentClickHandler();
} }
} }

78
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component.ts
View File

@@ -12,23 +12,23 @@ import { ModulesetupService } from 'src/app/services/builder/modulesetup.service
styleUrls: ['./dashrunnerall.component.scss'] styleUrls: ['./dashrunnerall.component.scss']
}) })
export class DashrunnerallComponent implements OnInit { export class DashrunnerallComponent implements OnInit {
addModall:boolean = false; addModall: boolean = false;
selected:any[] = []; selected: any[] = [];
loading = false; loading = false;
data:any; data: any;
id:any; id: any;
moduleId:any; moduleId: any;
modalDelete = false; modalDelete = false;
rowSelected :any= {}; rowSelected: any = {};
rows: any[]; rows: any[];
projectname; projectname;
projectId; projectId;
error; error;
constructor( constructor(
private router : Router, private router: Router,
private route: ActivatedRoute,private dashboardService : Dashboard3Service, private route: ActivatedRoute, private dashboardService: Dashboard3Service,
// private wireframeservice : WireframeService, // private wireframeservice : WireframeService,
private excel: ExcelService,private mainService: ModulesetupService, private excel: ExcelService, private mainService: ModulesetupService,
private toastr: ToastrService,) { } private toastr: ToastrService,) { }
ngOnInit(): void { ngOnInit(): void {
@@ -42,41 +42,46 @@ export class DashrunnerallComponent implements OnInit {
// this.getprojectName(this.projectId); // this.getprojectName(this.projectId);
} }
getprojectName(id){ getprojectName(id) {
this.mainService.getProjectModules(id).subscribe((data) => { this.mainService.getProjectModules(id).subscribe((data) => {
console.log(data); console.log(data);
this.projectname=data.items[0]['projectName']; this.projectname = data.items[0]['projectName'];
console.log(this.projectname); console.log(this.projectname);
}); });
} }
getdashboard() getdashboard() {
{ this.dashboardService.getAllDash().subscribe((data) => {
this.dashboardService.getAllDash().subscribe((data) =>{
this.data = data; this.data = data;
this.rows = this.data; this.rows = this.data;
console.log(data); console.log(data);
this.error="No data Available"; this.error = "No data Available";
console.log(this.error); console.log(this.error);
}); });
} }
openModal() openModal() {
{
this.addModall = true; this.addModall = true;
} }
gotoadd() gotoadd() {
{ this.router.navigate(['../../dashboardbuilder'], { relativeTo: this.route });
this.router.navigate(['../../dashboardbuilder'],{relativeTo:this.route});
} }
goToEdit(id:number) // for runner line navigation
{ // goToEditData(id: number){
this.router.navigate(['../dashrunner/'+id],{relativeTo:this.route}); // this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
// }
goToEdit(id: number) {
// Navigate to editnewdash component instead of dashrunnerline
// Pass a query parameter to indicate this is from dashboard runner
this.router.navigate(['../../dashboardbuilder/editdashn/' + id], {
relativeTo: this.route,
queryParams: { fromRunner: true }
});
} }
goToEditData(id: number){ goToEditData(id: number) {
this.router.navigate(['../editdata/'+id],{relativeTo:this.route}); this.router.navigate(['../editdata/' + id], { relativeTo: this.route });
} }
onExport() { onExport() {
@@ -84,29 +89,28 @@ export class DashrunnerallComponent implements OnInit {
moment().format('YYYYMMDD_HHmmss')) moment().format('YYYYMMDD_HHmmss'))
} }
gotoAction(){ gotoAction() {
this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId,pname:this.projectname } }); this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId, pname: this.projectname } });
} }
gotoRepo(){ gotoRepo() {
this.router.navigate(["../../modulecard"], { relativeTo: this.route, queryParams: { p_id: this.projectId } }); this.router.navigate(["../../modulecard"], { relativeTo: this.route, queryParams: { p_id: this.projectId } });
} }
onDelete(row){ onDelete(row) {
this.rowSelected = row; this.rowSelected = row;
console.log(this.rowSelected); console.log(this.rowSelected);
this.modalDelete = true; this.modalDelete = true;
} }
delete(id) delete(id) {
{ this.modalDelete = false;
this.modalDelete = false; console.log("in delete " + id);
console.log("in delete "+id); this.dashboardService.deleteField(id).subscribe((data) => {
this.dashboardService.deleteField(id).subscribe((data)=>{
console.log(data); console.log(data);
this.ngOnInit(); this.ngOnInit();
}); });
if (id) { if (id) {
this.toastr.success('Deleted successfully'); this.toastr.success('Deleted successfully');
} }
} }
// openModal() // openModal()
// { // {

75
frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2edit/report-build2edit.component.ts
View File

@@ -13,67 +13,66 @@ import { ReportBuilderService } from 'src/app/services/api/report-builder.servic
export class ReportBuild2editComponent implements OnInit { export class ReportBuild2editComponent implements OnInit {
public entryForm: FormGroup; public entryForm: FormGroup;
updated = false; updated = false;
ReportData:any = {}; ReportData: any = {};
id: number; id: number;
nodeEditProperties = { nodeEditProperties = {
std_param_html:'', std_param_html: '',
adhoc_param_html:'', adhoc_param_html: '',
// column_str:'', // column_str:'',
// conn_name:'', // conn_name:'',
date_param_req:'', date_param_req: '',
// folderName:'', // folderName:'',
url:'', url: '',
}; };
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute,private reportBuilderService: ReportBuilderService, private route: ActivatedRoute, private reportBuilderService: ReportBuilderService,
private toastr: ToastrService, private _fb: FormBuilder) { } private toastr: ToastrService, private _fb: FormBuilder) { }
ngOnInit(): void { ngOnInit(): void {
this.id = this.route.snapshot.params["id"]; this.id = this.route.snapshot.params["id"];
console.log("update with id = ", this.id); console.log("update with id = ", this.id);
this.entryForm = this._fb.group({ this.entryForm = this._fb.group({
std_param_html : [null], std_param_html: [null],
adhoc_param_html:[null], adhoc_param_html: [null],
// column_str:[null], // column_str:[null],
// conn_name:[null], // conn_name:[null],
date_param_req:[null], date_param_req: [null],
// folderName:[null], // folderName:[null],
url:[null], url: [null],
}); });
this.getById(this.id); this.getById(this.id);
this.listoddatabase(); this.listoddatabase();
} }
databaselist; databaselist;
listoddatabase(){ listoddatabase() {
this.reportBuilderService.getdatabse().subscribe((data)=>{ this.reportBuilderService.getdatabse().subscribe((data) => {
this.databaselist=data; this.databaselist = data;
console.log(this.databaselist) console.log(this.databaselist)
},(error) => { }, (error) => {
console.log(error); console.log(error);
if(error){ if (error) {
} }
}); });
} }
builderLine; builderLine;
lineId; lineId;
builderLineData:any[] = []; builderLineData: any[] = [];
getById(id: number) { getById(id: number) {
this.reportBuilderService.getrbDetailsById(id).subscribe( this.reportBuilderService.getrbDetailsById(id).subscribe(
(data) => { (data) => {
console.log(data); console.log(data);
this.ReportData = data; this.ReportData = data;
this.builderLine = this.ReportData.rpt_builder2_lines; this.builderLine = this.ReportData.rpt_builder2_lines;
this.lineId = this.builderLine[0].id this.lineId = this.builderLine[0].id
console.log("line data ",this.lineId, this.builderLine); console.log("line data ", this.lineId, this.builderLine);
if(this.builderLine[0].model != '') if (this.builderLine[0].model != '') {
{ this.builderLineData = JSON.parse(this.builderLine[0].model);
this.builderLineData = JSON.parse(this.builderLine[0].model) ;
console.log(this.builderLineData); console.log(this.builderLineData);
this.nodeEditProperties.std_param_html = this.builderLineData[0].std_param_html; this.nodeEditProperties.std_param_html = this.builderLineData[0].std_param_html;
@@ -92,25 +91,25 @@ export class ReportBuild2editComponent implements OnInit {
stdparams; stdparams;
keysfromurl; keysfromurl;
getkeys(){ getkeys() {
if(this.nodeEditProperties.url !== null){ if (this.nodeEditProperties.url !== null) {
this.reportBuilderService.getcolumnDetailsByurl(this.nodeEditProperties.url).subscribe(data =>{ this.reportBuilderService.getcolumnDetailsByurl(this.nodeEditProperties.url).subscribe(data => {
console.log(data); console.log('coloum list data ', data);
this.keysfromurl = data; this.keysfromurl = data;
this.nodeEditProperties.adhoc_param_html = this.keysfromurl; this.nodeEditProperties.adhoc_param_html = this.keysfromurl;
}) })
}else{ } else {
this.toastr.error("URL is required"); this.toastr.error("URL is required");
} }
} }
listBuilder_Lines = { listBuilder_Lines = {
model:{} model: {}
} }
update() { update() {
this.builderLineData[0] = { this.builderLineData[0] = {
std_param_html: this.nodeEditProperties.std_param_html, std_param_html: this.nodeEditProperties.std_param_html,
adhoc_param_html: this.nodeEditProperties.adhoc_param_html, adhoc_param_html: this.nodeEditProperties.adhoc_param_html,
@@ -119,7 +118,7 @@ export class ReportBuild2editComponent implements OnInit {
}; };
this.builderLineData[0].std_param_html = this.nodeEditProperties.std_param_html; this.builderLineData[0].std_param_html = this.nodeEditProperties.std_param_html;
this.builderLineData[0].adhoc_param_html = this.nodeEditProperties.adhoc_param_html; this.builderLineData[0].adhoc_param_html = this.nodeEditProperties.adhoc_param_html;
// this.builderLineData.column_str = this.nodeEditProperties.column_str; // this.builderLineData.column_str = this.nodeEditProperties.column_str;
// this.builderLineData.conn_name = this.nodeEditProperties.conn_name ; // this.builderLineData.conn_name = this.nodeEditProperties.conn_name ;
this.builderLineData[0].date_param_req = this.nodeEditProperties.date_param_req; this.builderLineData[0].date_param_req = this.nodeEditProperties.date_param_req;
@@ -129,14 +128,14 @@ export class ReportBuild2editComponent implements OnInit {
console.log(this.builderLineData); console.log(this.builderLineData);
let tmp = JSON.stringify(this.builderLineData); //.replace(/\\/g, '') let tmp = JSON.stringify(this.builderLineData); //.replace(/\\/g, '')
this.listBuilder_Lines.model = tmp; this.listBuilder_Lines.model = tmp;
console.log(this.listBuilder_Lines); console.log(this.listBuilder_Lines);
this.reportBuilderService.updaterbLineData(this.listBuilder_Lines, this.lineId).subscribe( this.reportBuilderService.updaterbLineData(this.listBuilder_Lines, this.lineId).subscribe(
(data) => { (data) => {
console.log(data); console.log(data);
if (data) { if (data) {
this.toastr.success('Update successfully'); this.toastr.success('Update successfully');
} }
this.router.navigate(["../../all"], { relativeTo: this.route }); this.router.navigate(["../../all"], { relativeTo: this.route });
//this.router.navigate(["../../all"],{ relativeTo: this.route, queryParams: { p_id: this.projectId } }); //this.router.navigate(["../../all"],{ relativeTo: this.route, queryParams: { p_id: this.projectId } });
}, },

902
frontend/angular-clarity-master/src/app/modules/main/builder/report-runner/reportrunneredit2/reportrunneredit2.component.ts
View File

File diff suppressed because it is too large Load Diff

26
frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html
View File

@@ -39,6 +39,14 @@
</div> </div>
</a> </a>
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
routerLink="/cns-portal/shield-dashboard">
<div class="nav-icon-wrapper">
<clr-icon shape="shield" solid></clr-icon>
<span class="nav-tooltip">Shield Dashboard</span>
</div>
</a>
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active" <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
routerLink="/cns-portal/rerunner/all" (click)="getName()"> routerLink="/cns-portal/rerunner/all" (click)="getName()">
<div class="nav-icon-wrapper"> <div class="nav-icon-wrapper">
@@ -122,27 +130,27 @@
<a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="modern-lang-item"> <a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="modern-lang-item">
<clr-icon shape="globe" class="lang-icon"></clr-icon> <clr-icon shape="globe" class="lang-icon"></clr-icon>
<span>English</span> <span>English</span>
<div class="lang-flag">🇺🇸</div> <div class="lang-flag">🇺🇸</div>
</a> </a>
<a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="modern-lang-item"> <a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="modern-lang-item">
<clr-icon shape="globe" class="lang-icon"></clr-icon> <clr-icon shape="globe" class="lang-icon"></clr-icon>
<span>हिन्दी</span> <span>हिन्दी</span>
<div class="lang-flag">🇮🇳</div> <div class="lang-flag">🇮🇳</div>
</a> </a>
<a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="modern-lang-item"> <a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="modern-lang-item">
<clr-icon shape="globe" class="lang-icon"></clr-icon> <clr-icon shape="globe" class="lang-icon"></clr-icon>
<span>தமிழ்</span> <span>தமிழ்</span>
<div class="lang-flag">🇮🇳</div> <div class="lang-flag">🇮🇳</div>
</a> </a>
<a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="modern-lang-item"> <a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="modern-lang-item">
<clr-icon shape="globe" class="lang-icon"></clr-icon> <clr-icon shape="globe" class="lang-icon"></clr-icon>
<span>ਪੰਜਾਬੀ</span> <span>ਪੰਜਾਬੀ</span>
<div class="lang-flag">🇮🇳</div> <div class="lang-flag">🇮🇳</div>
</a> </a>
<a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="modern-lang-item"> <a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="modern-lang-item">
<clr-icon shape="globe" class="lang-icon"></clr-icon> <clr-icon shape="globe" class="lang-icon"></clr-icon>
<span>മലയാളം</span> <span>മലയാളം</span>
<div class="lang-flag">🇮🇳</div> <div class="lang-flag">🇮🇳</div>
</a> </a>
</clr-dropdown-menu> </clr-dropdown-menu>
</clr-dropdown> </clr-dropdown>

260
frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
View File

@@ -1,3 +1,26 @@
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component'; import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
import { Component, NgModule } from '@angular/core'; import { Component, NgModule } from '@angular/core';
@@ -82,6 +105,17 @@ import { MappingruleallComponent } from './datamanagement/mappingrule/mappingrul
import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingruleadd/mappingruleadd.component'; import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingruleadd/mappingruleadd.component';
import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component'; import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component'; import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component'; import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component'; import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component'; import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -89,9 +123,9 @@ import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.c
import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component'; import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component'; import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component'; import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';
// import { QueryComponent } from './superadmin/query/query.component'; import { QueryComponent } from './superadmin/query/query.component';
// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component'; import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component'; import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
@@ -125,11 +159,13 @@ const routes: Routes = [
{ path: 'about', component: AboutComponent }, { path: 'about', component: AboutComponent },
{ path: 'setupicon', component: SetupiconComponent }, { path: 'setupicon', component: SetupiconComponent },
{ path: 'myworkspace', component: MyworkspaceComponent }, { path: 'myworkspace', component: MyworkspaceComponent },
{ path: 'theme-customization', component: ThemeCustomizationComponent }, { path: 'theme-customization', component: ThemeCustomizationComponent },
{ path: 'datalake', component: Data_lakeComponent }, { path: 'datalake', component: Data_lakeComponent },
{ path: 'sureconnect', component: SureconnectComponent }, { path: 'sureconnect', component: SureconnectComponent },
{ path: 'oauth', component: OauthComponent }, { path: 'oauth', component: OauthComponent },
{ path: 'editconnect/:id', component: EditsureconnectComponent }, { path: 'editconnect/:id', component: EditsureconnectComponent },
{ {
@@ -143,9 +179,9 @@ const routes: Routes = [
//SUPER ADMIN //SUPER ADMIN
// { path: 'query', component: QueryComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } }, { path: 'query', component: QueryComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
// { path: 'reportQuery/:id/queryadd', component: QueryaddComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } }, { path: 'reportQuery/:id/queryadd', component: QueryaddComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
// { path: 'reportQuery/queryedit/:id', component: QueryeditComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } }, { path: 'reportQuery/queryedit/:id', component: QueryeditComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
@@ -188,6 +224,12 @@ const routes: Routes = [
{ path: 'schedule/:id', component: ScheduleComponent }, { path: 'schedule/:id', component: ScheduleComponent },
] ]
}, },
// Shield Dashboard
{
path: 'shield-dashboard',
loadChildren: () => import('./builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard-routing.module').then(m => m.ShieldDashboardRoutingModule)
},
{ {
path: 'dashboardrunner', component: DashboardrunnerComponent, path: 'dashboardrunner', component: DashboardrunnerComponent,
@@ -236,8 +278,20 @@ const routes: Routes = [
], ],
}, },
{ path: 'SequenceGenerator', component: SequencegenaratorComponent }, { path: 'SequenceGenerator', component: SequencegenaratorComponent },
{ path: 'apiregistery', component: ApiregisteryComponent },
// Api registery
{
path: 'apiregistery', component: ApiregisteryComponent,
children: [
{ path: '', redirectTo: 'all', pathMatch: 'full' },
{ path: 'all', component: AllapiregisteryComponent },
{ path: 'add', component: AddapiregisteryComponent },
{ path: 'edit/:id', component: EditapiregisteryComponent },
{ path: 'line/:id', component: ApiregisterylineComponent },
],
},
// DATA MANAGEMENT // DATA MANAGEMENT
@@ -270,18 +324,186 @@ const routes: Routes = [
// buildercomponents // buildercomponents
{ path: 'Country', component: CountryComponent },
{ path: 'Adv3', component: Adv3Component },
{ path: 'Ad10', component: Ad10Component },
{ path: 'Childform', component: ChildformComponent },
{ path: 'District', component: DistrictComponent },
{ path: 'State', component: StateComponent },
{ path: 'Country', component: CountryComponent },
{ path: 'Ad9', component: Ad9Component },
{ path: 'Ad8', component: Ad8Component },
{ path: 'Ad7', component: Ad7Component },
{ path: 'Ad6', component: Ad6Component },
{ path: 'Adv5', component: Adv5Component },
{ path: 'Support', component: SupportComponent },
{ path: 'Adv3', component: Adv3Component },
{ path: 'tokenregistery', component: Token_registeryComponent }, { path: 'tokenregistery', component: Token_registeryComponent },
{ path: 'Defatest', component: DefatestComponent },
{ path: 'Country', component: CountryComponent },
{ path: 'Defatest', component: DefatestComponent },
{ path: 'Test2', component: Test2Component },
{ path: 'Country', component: CountryComponent },
{ path: 'Test2', component: Test2Component },
{ path: 'Childform', component: ChildformComponent },
{ path: 'District', component: DistrictComponent },
{ path: 'State', component: StateComponent },
{ path: 'Country', component: CountryComponent },
{ path: 'Ad9', component: Ad9Component },
{ path: 'Ad8', component: Ad8Component },
{ path: 'Ad7', component: Ad7Component },
{ path: 'Ad6', component: Ad6Component },
{ path: 'Adv5', component: Adv5Component },
{ path: 'Adv4', component: Adv4Component },
{ path: 'Support', component: SupportComponent },
{ path: 'Adv3', component: Adv3Component },
{ path: 'Dv2', component: Dv2Component },
{ path: 'Adv1', component: Adv1Component },
{ path: 'Basicp3', component: Basicp3Component },
{ path: 'Basicp2', component: Basicp2Component },
{ path: 'Basicp1', component: Basicp1Component },
{ path: 'cust', component: Customer_informationComponent },
{ path: 'Order_summary', component: Order_summaryComponent },
{ path: 'Types', component: TypesComponent },
{ path: 'Product', component: ProductComponent },
{ path: 'Manufacturer', component: ManufacturerComponent },
{ path: 'Deployment_type', component: Deployment_typeComponent },
{ path: 'Stepper_workflow', component: Stepper_workflowComponent }, { path: 'Stepper_workflow', component: Stepper_workflowComponent },
{ path: '**', component: PageNotFoundComponent }, { path: '**', component: PageNotFoundComponent },
] ]

148
frontend/angular-clarity-master/src/app/modules/main/main.module.ts
View File

@@ -1,3 +1,25 @@
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
@@ -74,6 +96,9 @@ import { RadarChartComponent } from './builder/dashboardnew/gadgets/radar-chart/
import { ScatterChartComponent } from './builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component'; import { ScatterChartComponent } from './builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component';
import { ToDoChartComponent } from './builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component'; import { ToDoChartComponent } from './builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component';
import { ScheduleComponent } from './builder/dashboardnew/schedule/schedule.component'; import { ScheduleComponent } from './builder/dashboardnew/schedule/schedule.component';
import { CommonFilterComponent } from './builder/dashboardnew/common-filter/common-filter.component';
import { ChartWrapperComponent } from './builder/dashboardnew/common-filter/chart-wrapper.component';
import { CompactFilterComponent } from './builder/dashboardnew/common-filter/compact-filter.component';
import { AddextensionComponent } from './fnd/extension/addextension/addextension.component'; import { AddextensionComponent } from './fnd/extension/addextension/addextension.component';
import { AllextensionComponent } from './fnd/extension/allextension/allextension.component'; import { AllextensionComponent } from './fnd/extension/allextension/allextension.component';
import { EditextensionComponent } from './fnd/extension/editextension/editextension.component'; import { EditextensionComponent } from './fnd/extension/editextension/editextension.component';
@@ -91,6 +116,9 @@ import { RadarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/r
import { ScatterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component'; import { ScatterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component';
import { TodoRunnerComponent } from './builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component'; import { TodoRunnerComponent } from './builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component';
// Import CompactFilterRunnerComponent
import { CompactFilterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component';
import { ApiregisteryComponent } from './fnd/apiregistery/apiregistery.component'; import { ApiregisteryComponent } from './fnd/apiregistery/apiregistery.component';
import { BulkimportComponent } from './datamanagement/bulkimport/bulkimport.component'; import { BulkimportComponent } from './datamanagement/bulkimport/bulkimport.component';
@@ -106,18 +134,34 @@ import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingrul
import { MappingruleallComponent } from './datamanagement/mappingrule/mappingruleall/mappingruleall.component'; import { MappingruleallComponent } from './datamanagement/mappingrule/mappingruleall/mappingruleall.component';
import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component'; import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component'; import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component'; import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component'; import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component'; import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
import { QueryComponent } from './superadmin/query/query.component';
import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
import { FieldTypesModule } from '../../shared/components/field-types/field-types.module';
import { SharedModule } from '../../shared/shared.module';
import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.component'; import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.component';
import { CronJobBuilderComponent } from './builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component'; import { CronJobBuilderComponent } from './builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component';
import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component'; import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component'; import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component'; import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';
// import { QueryComponent } from './superadmin/query/query.component'; // Import Shield Dashboard Module
// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component'; import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module';
// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@@ -128,71 +172,58 @@ import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.c
UsermaintanceaddComponent, UsermaintanceeditComponent, UsermaintanceaddComponent, UsermaintanceeditComponent,
SubmenuComponent, ModulesComponent, SessionloggerComponent, SubmenuComponent, ModulesComponent, SessionloggerComponent,
DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent, DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent, CommonFilterComponent, ChartWrapperComponent, CompactFilterComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent, DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
// Add CompactFilterRunnerComponent to declarations
CompactFilterRunnerComponent,
ReportBuildComponent, ReportbuildeditComponent, ReportbuildqueryComponent, ReportBuild2Component, ReportBuild2editComponent, ReportBuildComponent, ReportbuildeditComponent, ReportbuildqueryComponent, ReportBuild2Component, ReportBuild2editComponent,
// QueryComponent, QueryaddComponent, QueryeditComponent, QueryComponent, QueryaddComponent, QueryeditComponent,
ExtensionComponent, ExtensionComponent,
AllextensionComponent, AllextensionComponent,
AddextensionComponent, EditextensionComponent, ApiregisteryComponent, AddextensionComponent, EditextensionComponent, ApiregisteryComponent, AllapiregisteryComponent, AddapiregisteryComponent, EditapiregisteryComponent,
DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent,
MappingruleallComponent, MappingruleaddComponent, MappingruleeditComponent, ApiregisterylineComponent,
ThemeCustomizationComponent, DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
MappingruleaddComponent,
MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
Data_lakeComponent, Data_lakeComponent,
SureconnectComponent, SureconnectComponent,
EditsureconnectComponent, EditsureconnectComponent,
OauthComponent, OauthComponent,
CronJobBuilderComponent, CronJobBuilderComponent,
// FileUploadListComponent,
// buildercomponents // buildercomponents
ThemeCustomizationComponent,
Ad10Component,
Token_registeryComponent, Token_registeryComponent,
DefatestComponent,
Test2Component,
Order_summaryComponent,
TypesComponent,
ProductComponent,
ManufacturerComponent,
Deployment_typeComponent,
ChildformComponent,
DistrictComponent,
StateComponent,
CountryComponent,
Ad9Component,
Ad8Component,
Ad7Component,
Ad6Component,
Adv5Component,
Adv4Component,
SupportComponent,
Adv3Component,
Dv2Component,
Adv1Component,
Basicp3Component,
Basicp2Component,
Basicp1Component,
Stepper_workflowComponent,
], ],
imports: [ imports: [
QRCodeModule, QRCodeModule,
@@ -212,6 +243,9 @@ import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.c
NgChartsModule, NgChartsModule,
NgxChartsModule, NgxChartsModule,
DynamicModule, DynamicModule,
FieldTypesModule,
SharedModule,
ShieldDashboardModule,
], ],
providers: [ providers: [
CookieService, CookieService,

252
frontend/angular-clarity-master/src/app/modules/main/main.module.ts.tmp Normal file
View File

@@ -0,0 +1,252 @@
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ClarityModule } from '@clr/angular';
import { MainPageComponent } from '../main/fnd/main-page/main-page.component';
import { MainRoutingModule } from './main-routing.module';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
// import { AboutComponent } from '../main/admin/about/about.component';
// import { LayoutComponent } from './layout/layout.component';
import { HelperModule } from 'src/app/pipes/helpers.module';
import { PasswordResetComponent } from '../main/admin/password-reset/password-reset.component';
import { UserComponent } from '../main/admin/user/user.component';
import { AllMenuGroupComponent } from '../main/admin/menu-group/all/all-menu-group.component';
import { EditMenuGroupComponent } from '../main/admin/menu-group/edit/edit-menu-group.component';
import { MenuGroupComponent } from '../main/admin/menu-group/menu-group.component';
import { ReadOnlyMenuGroupComponent } from '../main/admin/menu-group/read-only/readonly-menu-group.component';
import { AddMenurComponent } from '../main/admin/menu-register/add-menur/add-menur.component';
import { AllMenurComponent } from '../main/admin/menu-register/all-menur/all-menur.component';
import { EditMenurComponent } from '../main/admin/menu-register/edit-menur/edit-menur.component';
import { MenuRegisterComponent } from '../main/admin/menu-register/menu-register.component';
import { ReadonlyMenurComponent } from '../main/admin/menu-register/readonly-menur/readonly-menur.component';
import { ProfileSettingComponent } from '../main/admin/profile-setting/profile-setting.component';
import { UsermaintanceaddComponent } from '../main/admin/usermaintanceadd/usermaintanceadd.component';
import { UsermaintanceeditComponent } from '../main/admin/usermaintanceedit/usermaintanceedit.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { HttpClientModule } from '@angular/common/http';
import { CodemirrorModule } from "@ctrl/ngx-codemirror";
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { GridsterModule } from 'angular-gridster2';
import { DynamicModule } from 'ng-dynamic-component';
import { NgChartsModule } from 'ng2-charts';
import { CKEditorModule } from 'ng2-ckeditor';
import { UserRegistrationComponent } from '../main/admin/user-registration/user-registration.component';
import { QRCodeModule } from 'angularx-qrcode';
import { TagInputModule } from 'ngx-chips';
import { CookieService } from 'ngx-cookie-service';
import { ImageCropperModule } from 'ngx-image-cropper';
import { ModulesComponent } from './admin/modules/modules.component';
import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
import { SubmenuComponent } from './admin/submenu/submenu.component';
import { WireframeService } from 'src/app/services/builder/wireframe.service';
import { ReportBuildComponent } from './builder/report-build/report-build.component';
import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit/reportbuildedit.component';
import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
import { EditformnewdashComponent } from './builder/dashboardnew/editformnewdash/editformnewdash.component';
import { EditnewdashComponent } from './builder/dashboardnew/editnewdash/editnewdash.component';
import { BarChartComponent } from './builder/dashboardnew/gadgets/bar-chart/bar-chart.component';
import { BubbleChartComponent } from './builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component';
import { DoughnutChartComponent } from './builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component';
import { DynamicChartComponent } from './builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component';
import { FinancialChartComponent } from './builder/dashboardnew/gadgets/financial-chart/financial-chart.component';
import { GridViewComponent } from './builder/dashboardnew/gadgets/grid-view/grid-view.component';
import { LineChartComponent } from './builder/dashboardnew/gadgets/line-chart/line-chart.component';
import { PieChartComponent } from './builder/dashboardnew/gadgets/pie-chart/pie-chart.component';
import { PolarChartComponent } from './builder/dashboardnew/gadgets/polar-chart/polar-chart.component';
import { RadarChartComponent } from './builder/dashboardnew/gadgets/radar-chart/radar-chart.component';
import { ScatterChartComponent } from './builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component';
import { ToDoChartComponent } from './builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component';
import { ScheduleComponent } from './builder/dashboardnew/schedule/schedule.component';
import { CommonFilterComponent } from './builder/dashboardnew/common-filter/common-filter.component';
import { ChartWrapperComponent } from './builder/dashboardnew/common-filter/chart-wrapper.component';
import { AddextensionComponent } from './fnd/extension/addextension/addextension.component';
import { AllextensionComponent } from './fnd/extension/allextension/allextension.component';
import { EditextensionComponent } from './fnd/extension/editextension/editextension.component';
import { ExtensionComponent } from './fnd/extension/extension.component';
import { BarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component';
import { BubbleRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component';
import { DashrunnerlineComponent } from './builder/dashboardrunner/dashrunnerline/dashrunnerline.component';
import { DoughnutRunnerComponent } from './builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component';
import { GridRunnerComponent } from './builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component';
import { LineRunnerComponent } from './builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component';
import { PieRunnerComponent } from './builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component';
import { PolarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component';
import { RadarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component';
import { ScatterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component';
import { TodoRunnerComponent } from './builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component';
import { ApiregisteryComponent } from './fnd/apiregistery/apiregistery.component';
import { BulkimportComponent } from './datamanagement/bulkimport/bulkimport.component';
import { BulkimportaddComponent } from './datamanagement/bulkimport/bulkimportadd/bulkimportadd.component';
import { BulkimportallComponent } from './datamanagement/bulkimport/bulkimportall/bulkimportall.component';
import { BulkimporteditComponent } from './datamanagement/bulkimport/bulkimportedit/bulkimportedit.component';
import { BulkimporteditlineComponent } from './datamanagement/bulkimport/bulkimporteditline/bulkimporteditline.component';
import { BulkimportlineComponent } from './datamanagement/bulkimport/bulkimportline/bulkimportline.component';
import { DatamanagementComponent } from './datamanagement/datamanagement/datamanagement.component';
import { DatamananementworkflowComponent } from './datamanagement/datamananementworkflow/datamananementworkflow.component';
import { MappingruleComponent } from './datamanagement/mappingrule/mappingrule.component';
import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingruleadd/mappingruleadd.component';
import { MappingruleallComponent } from './datamanagement/mappingrule/mappingruleall/mappingruleall.component';
import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
// import { QueryComponent } from './superadmin/query/query.component';
// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
import { FieldTypesModule } from '../../shared/components/field-types/field-types.module';
import { SharedModule } from '../../shared/shared.module';
import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.component';
import { CronJobBuilderComponent } from './builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component';
import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';
// Import Shield Dashboard Module
import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module';
@NgModule({
declarations: [
MainPageComponent, PageNotFoundComponent, UserComponent, PasswordResetComponent,
MyworkspaceComponent,
ReportRunnerComponent, ReportrunnereditComponent, Reportrunneredit2Component, MenuGroupComponent, AllMenuGroupComponent, EditMenuGroupComponent, ReadOnlyMenuGroupComponent, UserRegistrationComponent,
MenuRegisterComponent, AddMenurComponent, EditMenurComponent, AllMenurComponent, ReadonlyMenurComponent, ProfileSettingComponent,
UsermaintanceaddComponent, UsermaintanceeditComponent,
SubmenuComponent, ModulesComponent, SessionloggerComponent,
DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
CommonFilterComponent, ChartWrapperComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
ReportBuildComponent, ReportbuildeditComponent, ReportbuildqueryComponent, ReportBuild2Component, ReportBuild2editComponent,
// QueryComponent, QueryaddComponent, QueryeditComponent,
ExtensionComponent,
AllextensionComponent,
AddextensionComponent, EditextensionComponent, ApiregisteryComponent, AllapiregisteryComponent, AddapiregisteryComponent, EditapiregisteryComponent,
ApiregisterylineComponent,
DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
MappingruleaddComponent,
MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
Data_lakeComponent,
SureconnectComponent,
EditsureconnectComponent,
OauthComponent,
CronJobBuilderComponent,
// FileUploadListComponent,
// buildercomponents
ThemeCustomizationComponent,
Ad10Component,
Token_registeryComponent,
DefatestComponent,
Test2Component,
Order_summaryComponent,
TypesComponent,
ProductComponent,
ManufacturerComponent,
Deployment_typeComponent,
ChildformComponent,
DistrictComponent,
StateComponent,
CountryComponent,
Ad9Component,
Ad8Component,
Ad7Component,
Ad6Component,
Adv5Component,
Adv4Component,
SupportComponent,
Adv3Component,
Dv2Component,
Adv1Component,
Basicp3Component,
Basicp2Component,
Basicp1Component,
],
imports: [
QRCodeModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
ClarityModule,
HelperModule,
MainRoutingModule,
DragDropModule,
HttpClientModule,
ImageCropperModule,
TagInputModule,
CodemirrorModule,
CKEditorModule,
GridsterModule,
NgChartsModule,
NgxChartsModule,
DynamicModule,
FieldTypesModule,
SharedModule,
ShieldDashboardModule,
],
providers: [
CookieService,
WireframeService,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MainModule { }