Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
43df9ad37c | ||
|
|
8dbeedba89 | ||
|
|
f654b233f6 | ||
|
|
123c4698a4 | ||
|
|
35e3f411a8 |
@@ -1,9 +1,8 @@
|
|||||||
export class ReportBuilder {
|
export class ReportBuilder {
|
||||||
public report_id: number;
|
public report_id: number;
|
||||||
public report_name: string;
|
public report_name:string;
|
||||||
public description: string;
|
public description: string;
|
||||||
public report_tags: string;
|
public report_tags: string;
|
||||||
public servicename: string;
|
public servicename:string;
|
||||||
// Add SureConnect reference
|
|
||||||
public sureConnectId: number | null;
|
}
|
||||||
}
|
|
||||||
|
|||||||
@@ -23,22 +23,8 @@ export interface DashboardContentModel {
|
|||||||
component?: any;
|
component?: any;
|
||||||
name: string;
|
name: string;
|
||||||
type?:string;
|
type?:string;
|
||||||
// Chart properties
|
// Common properties
|
||||||
xAxis?: string;
|
|
||||||
yAxis?: string | string[];
|
|
||||||
chartType?: string;
|
|
||||||
charttitle?: string;
|
|
||||||
chartlegend?: boolean;
|
|
||||||
showlabel?: boolean;
|
|
||||||
chartcolor?: boolean;
|
|
||||||
slices?: boolean;
|
|
||||||
donut?: boolean;
|
|
||||||
charturl?: string;
|
|
||||||
chartparameter?: string;
|
|
||||||
datastore?: string;
|
|
||||||
table?: string;
|
table?: string;
|
||||||
datasource?: string;
|
|
||||||
fieldName?: string;
|
|
||||||
connection?: string;
|
connection?: string;
|
||||||
baseFilters?: any[];
|
baseFilters?: any[];
|
||||||
// Common filter properties
|
// Common filter properties
|
||||||
@@ -51,11 +37,6 @@ export interface DashboardContentModel {
|
|||||||
drilldownParameter?: string;
|
drilldownParameter?: string;
|
||||||
drilldownFilters?: any[];
|
drilldownFilters?: any[];
|
||||||
drilldownLayers?: any[];
|
drilldownLayers?: any[];
|
||||||
// Compact filter properties
|
|
||||||
filterKey?: string;
|
|
||||||
filterType?: string;
|
|
||||||
filterLabel?: string;
|
|
||||||
filterOptions?: string[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DashboardModel {
|
export interface DashboardModel {
|
||||||
|
|||||||
@@ -1,20 +0,0 @@
|
|||||||
<!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>
|
|
||||||
|
|
||||||
@@ -79,21 +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-display" (click)="toggleMultiselectDropdown()" style="padding: 5px; border: 1px solid #ddd; cursor: pointer; background-color: #f8f8f8;">
|
<select [(ngModel)]="filterValue"
|
||||||
<span *ngIf="filterValue && filterValue.length > 0">{{ filterValue.length }} selected</span>
|
(ngModelChange)="onFilterValueChange($event)"
|
||||||
<span *ngIf="!filterValue || filterValue.length === 0">{{ filterLabel || filterKey || 'Select options' }}</span>
|
multiple
|
||||||
<clr-icon shape="caret down" style="float: right; margin-top: 3px;"></clr-icon>
|
class="clr-select compact-multiselect">
|
||||||
</div>
|
<option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
|
||||||
<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);">
|
</select>
|
||||||
<div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;">
|
|
||||||
<input type="checkbox"
|
|
||||||
[id]="'multiselect-' + option"
|
|
||||||
[value]="option"
|
|
||||||
[checked]="isOptionSelected(option)"
|
|
||||||
(change)="onMultiselectOptionChange($event, option)">
|
|
||||||
<label [for]="'multiselect-' + option" class="clr-control-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
<!-- Date Range Filter -->
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
|
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } 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, OnDestroy {
|
export class CompactFilterComponent implements OnInit, OnChanges {
|
||||||
@Input() filterKey: string = '';
|
@Input() filterKey: string = '';
|
||||||
@Input() filterType: string = 'text';
|
@Input() filterType: string = 'text';
|
||||||
@Input() filterOptions: string[] = [];
|
@Input() filterOptions: string[] = [];
|
||||||
@@ -23,9 +23,6 @@ export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
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 = '';
|
||||||
@@ -76,24 +73,6 @@ export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
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
|
||||||
@@ -222,14 +201,6 @@ export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
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) {
|
||||||
@@ -307,9 +278,6 @@ export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
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();
|
||||||
@@ -336,23 +304,11 @@ export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
|
|
||||||
// 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,67 +331,4 @@ export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.loadAvailableValues(this.configFilterKey);
|
this.loadAvailableValues(this.configFilterKey);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add method to check if an option is selected for checkboxes
|
|
||||||
isOptionSelected(option: string): boolean {
|
|
||||||
if (!this.filterValue) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ensure filterValue is an array for multiselect
|
|
||||||
if (!Array.isArray(this.filterValue)) {
|
|
||||||
this.filterValue = [];
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.filterValue.includes(option);
|
|
||||||
}
|
|
||||||
// need to check this
|
|
||||||
// Add method to handle multiselect option change
|
|
||||||
onMultiselectOptionChange(event: any, option: string): void {
|
|
||||||
// Initialize filterValue array if it doesn't exist
|
|
||||||
if (!this.filterValue) {
|
|
||||||
this.filterValue = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ensure filterValue is an array
|
|
||||||
if (!Array.isArray(this.filterValue)) {
|
|
||||||
this.filterValue = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.target.checked) {
|
|
||||||
// Add option if not already in array
|
|
||||||
if (!this.filterValue.includes(option)) {
|
|
||||||
this.filterValue.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
const index = this.filterValue.indexOf(option);
|
|
||||||
if (index > -1) {
|
|
||||||
this.filterValue.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Emit the change event
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,334 +1,32 @@
|
|||||||
<div class="chart-container">
|
<div style="display: block; height: 100%; width: 100%;">
|
||||||
<!-- Filter Controls Section -->
|
<!-- No filter controls needed with the new simplified approach -->
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<!-- Filters are now configured at the drilldown level -->
|
||||||
<!-- Base Filters -->
|
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
<!-- Drilldown mode indicator -->
|
||||||
<h4>Base Filters</h4>
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<div class="filter-controls">
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
<button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
Back to Level {{currentDrilldownLevel - 1}}
|
||||||
|
</button>
|
||||||
<!-- Text Filter -->
|
<button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
Back to Main View
|
||||||
<input type="text"
|
</button>
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
<!-- No data message -->
|
||||||
<div class="chart-header">
|
<div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;">
|
||||||
<div class="clr-row header-row">
|
No data available
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'Bar Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart-wrapper">
|
<!-- Chart display -->
|
||||||
<div class="chart-content" [class.loading]="isLoading">
|
<div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 50px);">
|
||||||
|
<canvas baseChart
|
||||||
<div *ngIf="noDataAvailable" class="no-data-message">
|
[datasets]="barChartData"
|
||||||
No data available
|
[labels]="barChartLabels"
|
||||||
</div>
|
[type]="barChartType"
|
||||||
|
[options]="barChartOptions"
|
||||||
|
(chartHover)="chartHovered($event)"
|
||||||
<div *ngIf="!noDataAvailable" class="chart-display">
|
(chartClick)="chartClicked($event)">
|
||||||
<canvas baseChart
|
</canvas>
|
||||||
[datasets]="barChartData"
|
|
||||||
[labels]="barChartLabels"
|
|
||||||
[type]="barChartType"
|
|
||||||
[options]="barChartOptions"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="loading-overlay" *ngIf="isLoading">
|
|
||||||
<div class="shimmer-bar"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- sheield dashboard -->
|
|
||||||
<!--
|
|
||||||
<div class="chart-container">
|
|
||||||
<div class="chart-header">
|
|
||||||
<h3>Deal Stage Wise Progress</h3>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<div class="chart-content" [class.loading]="isLoading">
|
|
||||||
<canvas
|
|
||||||
baseChart
|
|
||||||
[data]="barChartData"
|
|
||||||
[options]="barChartOptions"
|
|
||||||
[type]="barChartType"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
<div class="loading-overlay" *ngIf="isLoading">
|
|
||||||
<div class="shimmer-bar"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -1,278 +1,31 @@
|
|||||||
// Chart container structure
|
// Bar Chart Component Styles
|
||||||
.chart-container {
|
:host {
|
||||||
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
// Filter section styling
|
|
||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chart header styling
|
|
||||||
.chart-header {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chart wrapper and content
|
|
||||||
.chart-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.chart-content {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 300px; // Ensure minimum height for chart
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
.chart-display {
|
|
||||||
filter: blur(2px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-data-message {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
color: #666;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-display {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
transition: filter 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
|
|
||||||
.shimmer-bar {
|
|
||||||
width: 80%;
|
|
||||||
height: 20px;
|
|
||||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 1.5s infinite;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
.bar-chart-container {
|
||||||
0% {
|
position: relative;
|
||||||
background-position: -200% 0;
|
height: 100%;
|
||||||
}
|
width: 100%;
|
||||||
100% {
|
|
||||||
background-position: 200% 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Responsive design
|
canvas {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive design for chart container
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.chart-container {
|
.bar-chart-container {
|
||||||
.filter-controls {
|
height: 300px;
|
||||||
flex-direction: column;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-item {
|
@media (max-width: 480px) {
|
||||||
min-width: 100%;
|
.bar-chart-container {
|
||||||
}
|
height: 250px;
|
||||||
|
|
||||||
.chart-header {
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-content {
|
|
||||||
min-height: 250px; // Adjust for mobile
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -57,46 +57,21 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
ticks: {
|
ticks: {
|
||||||
autoSkip: false,
|
autoSkip: false,
|
||||||
maxRotation: 45,
|
maxRotation: 45,
|
||||||
minRotation: 45,
|
minRotation: 45
|
||||||
padding: 15,
|
|
||||||
font: {
|
|
||||||
size: 12
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
beginAtZero: true,
|
beginAtZero: true
|
||||||
ticks: {
|
|
||||||
font: {
|
|
||||||
size: 12
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
display: true,
|
display: true,
|
||||||
position: 'top',
|
position: 'top',
|
||||||
labels: {
|
|
||||||
font: {
|
|
||||||
size: 12
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
enabled: true
|
enabled: true
|
||||||
}
|
}
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
padding: {
|
|
||||||
bottom: 60,
|
|
||||||
left: 15,
|
|
||||||
right: 15,
|
|
||||||
top: 15
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -109,20 +84,12 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
// No data state
|
// No data state
|
||||||
noDataAvailable: boolean = false;
|
noDataAvailable: boolean = false;
|
||||||
|
|
||||||
// Loading state
|
|
||||||
isLoading: boolean = false;
|
|
||||||
|
|
||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
private isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
// Subscriptions to unsubscribe on destroy
|
||||||
private subscriptions: Subscription[] = [];
|
private subscriptions: Subscription[] = [];
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dashboardService: Dashboard3Service,
|
private dashboardService: Dashboard3Service,
|
||||||
private filterService: FilterService
|
private filterService: FilterService
|
||||||
@@ -144,12 +111,6 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('BarChartComponent input changes:', changes);
|
console.log('BarChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -180,329 +141,15 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchChartData(): void {
|
fetchChartData(): void {
|
||||||
// Set loading state
|
|
||||||
this.isLoading = true;
|
|
||||||
|
|
||||||
// Set flag to prevent recursive calls
|
// Set flag to prevent recursive calls
|
||||||
this.isFetchingData = true;
|
this.isFetchingData = true;
|
||||||
|
|
||||||
// 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) {
|
||||||
this.fetchDrilldownData();
|
this.fetchDrilldownData();
|
||||||
// Reset flags after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -572,9 +219,8 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
this.barChartLabels = [];
|
this.barChartLabels = [];
|
||||||
this.barChartData = [];
|
this.barChartData = [];
|
||||||
// Reset flags after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -603,9 +249,8 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.barChartLabels = [];
|
this.barChartLabels = [];
|
||||||
this.barChartData = [];
|
this.barChartData = [];
|
||||||
}
|
}
|
||||||
// Reset flags after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
console.error('=== BAR CHART ERROR ===');
|
console.error('=== BAR CHART ERROR ===');
|
||||||
@@ -613,9 +258,8 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
this.barChartLabels = [];
|
this.barChartLabels = [];
|
||||||
this.barChartData = [];
|
this.barChartData = [];
|
||||||
// Reset flags after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
// Keep default data in case of error
|
// Keep default data in case of error
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -627,9 +271,8 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
this.barChartLabels = [];
|
this.barChartLabels = [];
|
||||||
this.barChartData = [];
|
this.barChartData = [];
|
||||||
// Reset flags after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -791,23 +434,17 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
// Trigger change detection
|
// Trigger change detection
|
||||||
// this.barChartData = [...this.barChartData];
|
// this.barChartData = [...this.barChartData];
|
||||||
console.log('Updated bar chart with drilldown data:', { labels: this.barChartLabels, data: this.barChartData });
|
console.log('Updated bar chart with drilldown data:', { labels: this.barChartLabels, data: this.barChartData });
|
||||||
// Set loading state to false
|
|
||||||
this.isLoading = false;
|
|
||||||
} 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
|
||||||
this.noDataAvailable = data.labels.length === 0;
|
this.noDataAvailable = data.labels.length === 0;
|
||||||
this.barChartLabels = data.labels;
|
this.barChartLabels = data.labels;
|
||||||
this.barChartData = data.datasets;
|
this.barChartData = data.datasets;
|
||||||
console.log('Updated bar chart with drilldown legacy data format:', { labels: this.barChartLabels, data: this.barChartData });
|
console.log('Updated bar chart with drilldown legacy data format:', { labels: this.barChartLabels, data: this.barChartData });
|
||||||
// Set loading state to false
|
|
||||||
this.isLoading = false;
|
|
||||||
} 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.barChartLabels = [];
|
this.barChartLabels = [];
|
||||||
this.barChartData = [];
|
this.barChartData = [];
|
||||||
// Set loading state to false
|
|
||||||
this.isLoading = false;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
@@ -815,17 +452,12 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
this.barChartLabels = [];
|
this.barChartLabels = [];
|
||||||
this.barChartData = [];
|
this.barChartData = [];
|
||||||
// Set loading state to false
|
|
||||||
this.isLoading = false;
|
|
||||||
// Keep current data in case of error
|
// Keep current data in case of error
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// Add subscription to array for cleanup
|
// Add subscription to array for cleanup
|
||||||
this.subscriptions.push(subscription);
|
this.subscriptions.push(subscription);
|
||||||
|
|
||||||
// Set loading state
|
|
||||||
this.isLoading = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset to original data (go back to base level)
|
// Reset to original data (go back to base level)
|
||||||
@@ -1029,12 +661,6 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.originalBarChartLabels = [];
|
this.originalBarChartLabels = [];
|
||||||
this.originalBarChartData = [];
|
this.originalBarChartData = [];
|
||||||
|
|
||||||
// Clear multiselect tracking
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
|
|
||||||
console.log('BarChartComponent destroyed and cleaned up');
|
console.log('BarChartComponent destroyed and cleaned up');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,310 +1,28 @@
|
|||||||
<div style="display:block; height: 100%; width: 100%;">
|
<div style="display:block">
|
||||||
<!-- Filter Controls Section -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<!-- Base Filters -->
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
<button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<h4>Base Filters</h4>
|
Back to Level {{currentDrilldownLevel - 1}}
|
||||||
<div class="filter-controls">
|
</button>
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
<button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
Back to Main View
|
||||||
|
</button>
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
<!-- No data message -->
|
||||||
<div class="clr-row header-row">
|
<div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;">
|
||||||
<div class="clr-col-6">
|
No data available
|
||||||
<h3 class="chart-title">{{charttitle || 'Bubble Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
<!-- Chart display -->
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
<div *ngIf="!noDataAvailable">
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Chart container -->
|
|
||||||
<div style="position: relative; height: calc(100% - 80px); width: 100%; padding: 0 10px 30px 10px;">
|
|
||||||
<!-- Loading indicator -->
|
|
||||||
<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...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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>
|
||||||
@@ -1,192 +0,0 @@
|
|||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,296 +1,39 @@
|
|||||||
<div class="chart-container">
|
<div class="doughnut-chart-container">
|
||||||
<!-- Filter Controls Section -->
|
<!-- Compact Filters -->
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<div class="compact-filters-container" *ngIf="baseFilters && baseFilters.length > 0">
|
||||||
<!-- Base Filters -->
|
<app-compact-filter
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
*ngFor="let filter of baseFilters"
|
||||||
<h4>Base Filters</h4>
|
[filterKey]="filter.field"
|
||||||
<div class="filter-controls">
|
(filterChange)="onFilterChange($event)">
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
</app-compact-filter>
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
</div>
|
||||||
|
|
||||||
<!-- Text Filter -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
<div *ngIf="currentDrilldownLevel > 0" class="drilldown-indicator">
|
||||||
<input type="text"
|
<span class="drilldown-text">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
[(ngModel)]="filter.value"
|
<button class="btn btn-secondary btn-sm" (click)="navigateBack()">
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
Back to Level {{currentDrilldownLevel - 1}}
|
||||||
[placeholder]="filter.field"
|
</button>
|
||||||
class="clr-input filter-text-input">
|
<button class="btn btn-danger btn-sm" (click)="resetToOriginalData()">
|
||||||
</div>
|
Back to Main View
|
||||||
|
</button>
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="chart-header">
|
<div class="chart-header">
|
||||||
<div class="clr-row header-row">
|
<h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<div class="chart-content" [class.loading]="isLoading">
|
<div class="chart-content" [class.loading]="doughnutChartLabels.length === 0 && doughnutChartData.length === 0 && !noDataAvailable">
|
||||||
<!-- Show no data message -->
|
<!-- Show no data message -->
|
||||||
<div class="no-data-message" *ngIf="noDataAvailable && doughnutChartLabels.length === 0">
|
<div class="no-data-message" *ngIf="noDataAvailable">
|
||||||
<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
|
||||||
[datasets]="doughnutChartData"
|
*ngIf="!noDataAvailable && doughnutChartLabels.length > 0 && doughnutChartData.length > 0"
|
||||||
|
[data]="doughnutChartData"
|
||||||
[labels]="doughnutChartLabels"
|
[labels]="doughnutChartLabels"
|
||||||
[type]="doughnutChartType"
|
[type]="doughnutChartType"
|
||||||
[options]="doughnutChartOptions"
|
[options]="doughnutChartOptions"
|
||||||
@@ -299,17 +42,17 @@
|
|||||||
</canvas>
|
</canvas>
|
||||||
|
|
||||||
<!-- Loading overlay -->
|
<!-- Loading overlay -->
|
||||||
<div class="loading-overlay" *ngIf="isLoading">
|
<div class="loading-overlay" *ngIf="doughnutChartLabels.length === 0 && doughnutChartData.length === 0 && !noDataAvailable">
|
||||||
<div class="shimmer-donut"></div>
|
<div class="shimmer-donut"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart-legend" *ngIf="showlabel && doughnutChartLabels && doughnutChartLabels.length > 0">
|
<div class="chart-legend" *ngIf="!noDataAvailable && 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>
|
||||||
<span class="legend-value">{{ doughnutChartData && doughnutChartData[0] && doughnutChartData[0].data && doughnutChartData[0].data[i] !== undefined ? doughnutChartData[0].data[i] : 0 }}</span>
|
<span class="legend-value">{{ doughnutChartData && doughnutChartData[i] !== undefined ? doughnutChartData[i] : 0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1,294 +1,241 @@
|
|||||||
// Chart container structure - simplified to match shield dashboard
|
.doughnut-chart-container {
|
||||||
.chart-container {
|
|
||||||
height: 100%;
|
|
||||||
min-height: 400px; // Ensure minimum height
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 400px;
|
||||||
|
min-height: 400px;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doughnut-chart-container:hover {
|
||||||
|
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-filters-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 6px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drilldown-indicator {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drilldown-text {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: #007cba;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background-color: #dc3545;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-header {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
// Filter section styling
|
.chart-title {
|
||||||
.filter-section {
|
font-size: 22px;
|
||||||
margin-bottom: 20px;
|
font-weight: 600;
|
||||||
padding: 15px;
|
color: #0a192f;
|
||||||
border: 1px solid #ddd;
|
margin: 0;
|
||||||
border-radius: 4px;
|
text-align: center;
|
||||||
background-color: #f9f9f9;
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 2px solid #3498db;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-group {
|
.chart-wrapper {
|
||||||
margin-bottom: 15px;
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 250px;
|
||||||
|
margin: 15px 0;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-wrapper canvas {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-wrapper canvas:hover {
|
||||||
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
|
||||||
|
transform: scale(1.02);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-content {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
h4 {
|
canvas {
|
||||||
margin-top: 0;
|
filter: blur(2px);
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-controls {
|
.no-data-message {
|
||||||
display: flex;
|
text-align: center;
|
||||||
flex-wrap: wrap;
|
padding: 30px;
|
||||||
gap: 15px;
|
color: #666;
|
||||||
}
|
font-size: 18px;
|
||||||
|
font-style: italic;
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
padding: 6px 12px;
|
height: 100%;
|
||||||
border: 1px solid #ccc;
|
width: 100%;
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect-dropdown {
|
.no-data-message p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1000;
|
bottom: 0;
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chart header styling
|
|
||||||
.chart-header {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0a192f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chart wrapper and content - simplified to match shield dashboard
|
|
||||||
.chart-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.chart-content {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 300px;
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
filter: blur(2px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-data-message {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
color: #666;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: calc(100% - 40px); // Leave space for legend
|
|
||||||
transition: filter 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
|
|
||||||
.shimmer-donut {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 1.5s infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chart legend - simplified
|
|
||||||
.chart-legend {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 15px;
|
background: rgba(255, 255, 255, 0.8);
|
||||||
margin: 20px 0;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.legend-item {
|
.shimmer-donut {
|
||||||
display: flex;
|
width: 120px;
|
||||||
align-items: center;
|
height: 120px;
|
||||||
padding: 8px 15px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid #e9ecef;
|
|
||||||
min-width: 120px;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend-color {
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 8px;
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||||
display: inline-block;
|
background-size: 200% 100%;
|
||||||
flex-shrink: 0;
|
animation: shimmer 1.5s infinite;
|
||||||
}
|
|
||||||
|
|
||||||
.legend-label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-right: 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend-value {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #3498db;
|
|
||||||
min-width: 30px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chart-legend {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
border-color: #3498db;
|
||||||
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
border: 2px solid white;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-label {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-right: 15px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-value {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #3498db;
|
||||||
|
background: linear-gradient(135deg, #e9ecef 0%, #dde1e5 100%);
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
min-width: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
@keyframes shimmer {
|
||||||
0% {
|
0% {
|
||||||
background-position: -200% 0;
|
background-position: -200% 0;
|
||||||
@@ -298,46 +245,46 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Responsive design
|
/* Responsive design */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.chart-container {
|
.doughnut-chart-container {
|
||||||
.filter-controls {
|
padding: 15px;
|
||||||
flex-direction: column;
|
}
|
||||||
}
|
|
||||||
|
.chart-header .chart-title {
|
||||||
.filter-item {
|
font-size: 18px;
|
||||||
min-width: 100%;
|
}
|
||||||
}
|
|
||||||
|
.drilldown-indicator {
|
||||||
.chart-header {
|
flex-direction: column;
|
||||||
.header-row {
|
gap: 5px;
|
||||||
.chart-title {
|
}
|
||||||
font-size: 16px;
|
|
||||||
}
|
.drilldown-text {
|
||||||
}
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-content {
|
.chart-wrapper {
|
||||||
min-height: 250px;
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-legend {
|
.chart-legend {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
.legend-item {
|
|
||||||
width: 100%;
|
.legend-item {
|
||||||
max-width: 300px;
|
width: 100%;
|
||||||
justify-content: space-between;
|
max-width: 300px;
|
||||||
}
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-content {
|
.no-data-message {
|
||||||
min-height: 250px;
|
font-size: 16px;
|
||||||
|
padding: 20px;
|
||||||
canvas {
|
}
|
||||||
max-height: calc(100% - 60px); // More space for legend on mobile
|
|
||||||
}
|
.compact-filters-container {
|
||||||
}
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
|
|||||||
templateUrl: './doughnut-chart.component.html',
|
templateUrl: './doughnut-chart.component.html',
|
||||||
styleUrls: ['./doughnut-chart.component.scss']
|
styleUrls: ['./doughnut-chart.component.scss']
|
||||||
})
|
})
|
||||||
export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
|
export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewChecked {
|
||||||
@Input() xAxis: string;
|
@Input() xAxis: string;
|
||||||
@Input() yAxis: string | string[];
|
@Input() yAxis: string | string[];
|
||||||
@Input() table: string;
|
@Input() table: string;
|
||||||
@@ -36,21 +36,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
||||||
|
|
||||||
public doughnutChartLabels: string[] = ["Category A", "Category B", "Category C"];
|
public doughnutChartLabels: string[] = ["Category A", "Category B", "Category C"];
|
||||||
public doughnutChartData: any[] = [
|
public doughnutChartData: number[] = [30, 50, 20];
|
||||||
{
|
|
||||||
data: [30, 50, 20],
|
|
||||||
backgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
],
|
|
||||||
hoverBackgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public doughnutChartType: string = "doughnut";
|
public doughnutChartType: string = "doughnut";
|
||||||
public doughnutChartOptions: any = {
|
public doughnutChartOptions: any = {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
@@ -86,14 +72,6 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
borderColor: '#fff'
|
borderColor: '#fff'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
padding: {
|
|
||||||
top: 20,
|
|
||||||
bottom: 20,
|
|
||||||
left: 20,
|
|
||||||
right: 20
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -118,20 +96,12 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
// No data state
|
// No data state
|
||||||
noDataAvailable: boolean = false;
|
noDataAvailable: boolean = false;
|
||||||
|
|
||||||
// Loading state
|
|
||||||
isLoading: boolean = false;
|
|
||||||
|
|
||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
private isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
// Subscriptions to unsubscribe on destroy
|
||||||
private subscriptions: Subscription[] = [];
|
private subscriptions: Subscription[] = [];
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dashboardService: Dashboard3Service,
|
private dashboardService: Dashboard3Service,
|
||||||
private filterService: FilterService
|
private filterService: FilterService
|
||||||
@@ -148,10 +118,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
|
|
||||||
// Validate initial data
|
// Validate initial data
|
||||||
this.validateChartData();
|
this.validateChartData();
|
||||||
// Only fetch data if we have the required inputs, otherwise show default data
|
this.fetchChartData();
|
||||||
if (this.table && this.xAxis && this.yAxis) {
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -171,33 +138,17 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
if (this.doughnutChartLabels.length === 0 && this.doughnutChartData.length === 0) {
|
if (this.doughnutChartLabels.length === 0 && this.doughnutChartData.length === 0) {
|
||||||
// Add default data to ensure chart visibility
|
// Add default data to ensure chart visibility
|
||||||
this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
|
this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
|
||||||
this.doughnutChartData = [
|
this.doughnutChartData = [30, 50, 20];
|
||||||
{
|
|
||||||
data: [30, 50, 20],
|
|
||||||
backgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
],
|
|
||||||
hoverBackgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ensure we have matching arrays
|
// Ensure we have matching arrays
|
||||||
if (this.doughnutChartLabels.length !== (this.doughnutChartData[0]?.data?.length || 0)) {
|
if (this.doughnutChartLabels.length !== this.doughnutChartData.length) {
|
||||||
const maxLength = Math.max(this.doughnutChartLabels.length, this.doughnutChartData[0]?.data?.length || 0);
|
const maxLength = Math.max(this.doughnutChartLabels.length, this.doughnutChartData.length);
|
||||||
while (this.doughnutChartLabels.length < maxLength) {
|
while (this.doughnutChartLabels.length < maxLength) {
|
||||||
this.doughnutChartLabels.push(`Label ${this.doughnutChartLabels.length + 1}`);
|
this.doughnutChartLabels.push(`Label ${this.doughnutChartLabels.length + 1}`);
|
||||||
}
|
}
|
||||||
if (this.doughnutChartData[0]) {
|
while (this.doughnutChartData.length < maxLength) {
|
||||||
while (this.doughnutChartData[0].data.length < maxLength) {
|
this.doughnutChartData.push(0);
|
||||||
this.doughnutChartData[0].data.push(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -213,12 +164,6 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('DoughnutChartComponent input changes:', changes);
|
console.log('DoughnutChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -240,12 +185,6 @@ 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() {
|
||||||
@@ -259,318 +198,12 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this.subscriptions.forEach(sub => sub.unsubscribe());
|
this.subscriptions.forEach(sub => sub.unsubscribe());
|
||||||
// Clean up document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
// Handle filter changes from compact filters
|
||||||
private initializeFilterValues(): void {
|
onFilterChange(event: { filterId: string, value: any }): void {
|
||||||
console.log('Initializing filter values');
|
console.log('Compact filter changed:', event);
|
||||||
|
// The filter service will automatically trigger chart updates through the subscription
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public method to refresh data when filters change
|
// Public method to refresh data when filters change
|
||||||
@@ -579,18 +212,14 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
}
|
}
|
||||||
|
|
||||||
fetchChartData(): void {
|
fetchChartData(): void {
|
||||||
// Set loading state
|
|
||||||
this.isLoading = true;
|
|
||||||
|
|
||||||
// Set flag to prevent recursive calls
|
// Set flag to prevent recursive calls
|
||||||
this.isFetchingData = true;
|
this.isFetchingData = true;
|
||||||
|
|
||||||
// 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) {
|
||||||
this.fetchDrilldownData();
|
this.fetchDrilldownData();
|
||||||
// Reset flags after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -660,7 +289,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/doughnut?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/doughnut?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
console.log('Chart data URL:', url);
|
console.log('Doughnut chart data URL:', url);
|
||||||
|
|
||||||
// Fetch data from the dashboard service with parameter field and value
|
// Fetch data from the dashboard service with parameter field and value
|
||||||
// For base level, we pass empty parameter and value, but now also pass filters
|
// For base level, we pass empty parameter and value, but now also pass filters
|
||||||
@@ -668,113 +297,89 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
(data: any) => {
|
(data: any) => {
|
||||||
console.log('Received doughnut chart data:', data);
|
console.log('Received doughnut chart data:', data);
|
||||||
if (data === null) {
|
if (data === null) {
|
||||||
console.warn('API returned null data. Check if the API endpoint is working correctly.');
|
console.warn('Doughnut chart API returned null data. Check if the API endpoint is working correctly.');
|
||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
this.doughnutChartLabels = [];
|
this.doughnutChartLabels = [];
|
||||||
this.doughnutChartData = [];
|
this.doughnutChartData = [];
|
||||||
// Reset flags after fetching
|
// Validate and sanitize data to show default data
|
||||||
|
this.validateChartData();
|
||||||
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle the actual data structure returned by the API
|
// Handle the actual data structure returned by the API
|
||||||
if (data && data.chartLabels && data.chartData) {
|
if (data && data.chartLabels && data.chartData) {
|
||||||
// Backend has already filtered the data, just display it
|
// For doughnut charts, we need to extract the data differently
|
||||||
|
// The first dataset's data array contains the values for the doughnut chart
|
||||||
this.noDataAvailable = data.chartLabels.length === 0;
|
this.noDataAvailable = data.chartLabels.length === 0;
|
||||||
this.doughnutChartLabels = data.chartLabels;
|
this.doughnutChartLabels = data.chartLabels || [];
|
||||||
|
if (data.chartData && data.chartData.length > 0) {
|
||||||
// Handle different data structures
|
this.doughnutChartData = data.chartData[0].data.map(value => {
|
||||||
let chartDataValues;
|
// Convert to number if it's not already
|
||||||
if (Array.isArray(data.chartData)) {
|
const numValue = Number(value);
|
||||||
// If chartData is already an array of values
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
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 {
|
} else {
|
||||||
chartDataValues = [data.chartData];
|
this.doughnutChartData = [];
|
||||||
}
|
}
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
this.doughnutChartData = [
|
this.syncLabelAndDataArrays();
|
||||||
{
|
// Validate and sanitize data
|
||||||
data: chartDataValues,
|
this.validateChartData();
|
||||||
backgroundColor: this.chartColors.slice(0, chartDataValues.length),
|
// Trigger change detection
|
||||||
hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
|
this.doughnutChartData = [...this.doughnutChartData];
|
||||||
}
|
|
||||||
];
|
|
||||||
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 });
|
||||||
} else if (data && data.labels && data.datasets) {
|
} else if (data && data.labels && data.data) {
|
||||||
// Backend has already filtered the data, just display it
|
// Handle the original expected format as fallback
|
||||||
this.noDataAvailable = data.labels.length === 0;
|
this.noDataAvailable = data.labels.length === 0;
|
||||||
this.doughnutChartLabels = data.labels;
|
this.doughnutChartLabels = data.labels || [];
|
||||||
this.doughnutChartData = data.datasets;
|
this.doughnutChartData = data.data.map(value => {
|
||||||
|
// Convert to number if it's not already
|
||||||
|
const numValue = Number(value);
|
||||||
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
|
});
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
|
this.syncLabelAndDataArrays();
|
||||||
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
|
// Trigger change detection
|
||||||
|
this.doughnutChartData = [...this.doughnutChartData];
|
||||||
console.log('Updated doughnut chart with legacy data format:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
|
console.log('Updated doughnut chart with legacy data format:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
|
||||||
} else {
|
} else {
|
||||||
console.warn('Received data does not have expected structure', data);
|
console.warn('Doughnut chart received data does not have expected structure', data);
|
||||||
|
// Reset to default data
|
||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
// Keep default data instead of empty arrays
|
this.doughnutChartLabels = [];
|
||||||
this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
|
this.doughnutChartData = [];
|
||||||
this.doughnutChartData = [
|
// Validate and sanitize data to show default data
|
||||||
{
|
this.validateChartData();
|
||||||
data: [30, 50, 20],
|
|
||||||
backgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
],
|
|
||||||
hoverBackgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
// Reset flags after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
console.error('Error fetching doughnut chart data:', error);
|
console.error('Error fetching doughnut chart data:', error);
|
||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
// Keep default data in case of error
|
this.doughnutChartLabels = [];
|
||||||
this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
|
this.doughnutChartData = [];
|
||||||
this.doughnutChartData = [
|
// Validate and sanitize data to show default data
|
||||||
{
|
this.validateChartData();
|
||||||
data: [30, 50, 20],
|
// Reset flag after fetching
|
||||||
backgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
],
|
|
||||||
hoverBackgroundColor: [
|
|
||||||
'#FF6384',
|
|
||||||
'#36A2EB',
|
|
||||||
'#FFCE56'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
// Reset flags after fetching
|
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
} 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 doughnut chart, showing default data:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
|
||||||
this.noDataAvailable = true;
|
// Don't set noDataAvailable to true when there's no required data
|
||||||
this.doughnutChartLabels = [];
|
// This allows static data to be displayed
|
||||||
this.doughnutChartData = [];
|
this.noDataAvailable = false;
|
||||||
// Reset flags after fetching
|
// Validate the chart data to ensure we have some data to display
|
||||||
|
this.validateChartData();
|
||||||
|
// Force a redraw to ensure the chart displays
|
||||||
|
this.doughnutChartData = [...this.doughnutChartData];
|
||||||
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
this.isLoading = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -870,35 +475,6 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add common filters to drilldown filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with drilldown filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add drilldown filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const drilldownFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, drilldownFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse drilldown filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters
|
|
||||||
Object.keys(commonFilters).forEach(key => {
|
|
||||||
const value = commonFilters[key];
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
mergedFilterObj[key] = value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/doughnut?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/doughnut?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
console.log('Drilldown data URL:', url);
|
console.log('Drilldown data URL:', url);
|
||||||
@@ -918,66 +494,59 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
|
|
||||||
// Handle the actual data structure returned by the API
|
// Handle the actual data structure returned by the API
|
||||||
if (data && data.chartLabels && data.chartData) {
|
if (data && data.chartLabels && data.chartData) {
|
||||||
// Backend has already filtered the data, just display it
|
// For doughnut charts, we need to extract the data differently
|
||||||
|
// The first dataset's data array contains the values for the doughnut chart
|
||||||
this.noDataAvailable = data.chartLabels.length === 0;
|
this.noDataAvailable = data.chartLabels.length === 0;
|
||||||
this.doughnutChartLabels = data.chartLabels;
|
this.doughnutChartLabels = data.chartLabels || [];
|
||||||
|
if (data.chartData && data.chartData.length > 0) {
|
||||||
// Handle different data structures
|
this.doughnutChartData = data.chartData[0].data.map(value => {
|
||||||
let chartDataValues;
|
// Convert to number if it's not already
|
||||||
if (Array.isArray(data.chartData)) {
|
const numValue = Number(value);
|
||||||
// If chartData is already an array of values
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
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 {
|
} else {
|
||||||
chartDataValues = [data.chartData];
|
this.doughnutChartData = [];
|
||||||
}
|
}
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
this.doughnutChartData = [
|
this.syncLabelAndDataArrays();
|
||||||
{
|
// Validate and sanitize data
|
||||||
data: chartDataValues,
|
this.validateChartData();
|
||||||
backgroundColor: this.chartColors.slice(0, chartDataValues.length),
|
// Trigger change detection
|
||||||
hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
|
this.doughnutChartData = [...this.doughnutChartData];
|
||||||
}
|
|
||||||
];
|
|
||||||
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 });
|
||||||
// Set loading state to false
|
} else if (data && data.labels && data.data) {
|
||||||
this.isLoading = false;
|
// Handle the original expected format as fallback
|
||||||
} else if (data && data.labels && data.datasets) {
|
|
||||||
// Backend has already filtered the data, just display it
|
|
||||||
this.noDataAvailable = data.labels.length === 0;
|
this.noDataAvailable = data.labels.length === 0;
|
||||||
this.doughnutChartLabels = data.labels;
|
this.doughnutChartLabels = data.labels || [];
|
||||||
this.doughnutChartData = data.datasets;
|
this.doughnutChartData = data.data.map(value => {
|
||||||
|
// Convert to number if it's not already
|
||||||
|
const numValue = Number(value);
|
||||||
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
|
});
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
|
this.syncLabelAndDataArrays();
|
||||||
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
|
// Trigger change detection
|
||||||
|
this.doughnutChartData = [...this.doughnutChartData];
|
||||||
console.log('Updated doughnut chart with drilldown legacy data format:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
|
console.log('Updated doughnut chart with drilldown legacy data format:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
|
||||||
// Set loading state to false
|
|
||||||
this.isLoading = false;
|
|
||||||
} 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;
|
||||||
// Keep current data instead of empty arrays
|
this.doughnutChartLabels = [];
|
||||||
// Set loading state to false
|
this.doughnutChartData = [];
|
||||||
this.isLoading = false;
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
console.error('Error fetching drilldown data:', error);
|
console.error('Error fetching drilldown data:', error);
|
||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
|
this.doughnutChartLabels = [];
|
||||||
|
this.doughnutChartData = [];
|
||||||
// Keep current data in case of error
|
// Keep current data in case of error
|
||||||
// Set loading state to false
|
|
||||||
this.isLoading = false;
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// Set loading state
|
|
||||||
this.isLoading = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset to original data (go back to base level)
|
// Reset to original data (go back to base level)
|
||||||
@@ -994,7 +563,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
console.log('Restored original labels');
|
console.log('Restored original labels');
|
||||||
}
|
}
|
||||||
if (this.originalDoughnutChartData.length > 0) {
|
if (this.originalDoughnutChartData.length > 0) {
|
||||||
this.doughnutChartData = JSON.parse(JSON.stringify(this.originalDoughnutChartData));
|
this.doughnutChartData = [...this.originalDoughnutChartData];
|
||||||
console.log('Restored original data');
|
console.log('Restored original data');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1035,11 +604,44 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
this.resetToOriginalData();
|
this.resetToOriginalData();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get legend color for a specific index
|
/**
|
||||||
getLegendColor(index: number): string {
|
* Get color for legend item
|
||||||
|
* @param index Index of the legend item
|
||||||
|
*/
|
||||||
|
public getLegendColor(index: number): string {
|
||||||
return this.chartColors[index % this.chartColors.length];
|
return this.chartColors[index % this.chartColors.length];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ensure labels and data arrays have the same length
|
||||||
|
*/
|
||||||
|
private syncLabelAndDataArrays(): void {
|
||||||
|
// Handle empty arrays
|
||||||
|
if (this.doughnutChartLabels.length === 0 && this.doughnutChartData.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const maxLength = Math.max(this.doughnutChartLabels.length, this.doughnutChartData.length);
|
||||||
|
|
||||||
|
// Pad the shorter array with default values
|
||||||
|
while (this.doughnutChartLabels.length < maxLength) {
|
||||||
|
this.doughnutChartLabels.push(`Label ${this.doughnutChartLabels.length + 1}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
while (this.doughnutChartData.length < maxLength) {
|
||||||
|
this.doughnutChartData.push(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Truncate the longer array if needed
|
||||||
|
if (this.doughnutChartLabels.length > maxLength) {
|
||||||
|
this.doughnutChartLabels = this.doughnutChartLabels.slice(0, maxLength);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.doughnutChartData.length > maxLength) {
|
||||||
|
this.doughnutChartData = this.doughnutChartData.slice(0, maxLength);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// events
|
// events
|
||||||
public chartClicked(e: any): void {
|
public chartClicked(e: any): void {
|
||||||
@@ -1127,6 +729,6 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
|
|||||||
}
|
}
|
||||||
|
|
||||||
public chartHovered(e: any): void {
|
public chartHovered(e: any): void {
|
||||||
console.log('Doughnut chart hovered:', e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,285 +1,4 @@
|
|||||||
<div class="dynamic-chart-container">
|
<div class="dynamic-chart-container">
|
||||||
<!-- Filter Controls Section -->
|
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
|
||||||
<!-- Base Filters -->
|
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
|
||||||
<h4>Base Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'Dynamic Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Existing content -->
|
|
||||||
<!-- Drilldown mode indicator -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
|
|||||||
@@ -1,192 +0,0 @@
|
|||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -2,8 +2,6 @@ import { Component, OnInit, ViewChild, Input, OnChanges, SimpleChanges } from '@
|
|||||||
import { ChartConfiguration, ChartData, ChartDataset } from 'chart.js';
|
import { ChartConfiguration, ChartData, ChartDataset } from 'chart.js';
|
||||||
import { BaseChartDirective } from 'ng2-charts';
|
import { BaseChartDirective } from 'ng2-charts';
|
||||||
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
||||||
import { FilterService } from '../../common-filter/filter.service';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dynamic-chart',
|
selector: 'app-dynamic-chart',
|
||||||
@@ -39,20 +37,9 @@ export class DynamicChartComponent implements OnInit, OnChanges {
|
|||||||
|
|
||||||
@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
|
@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
|
||||||
|
|
||||||
constructor(
|
constructor(private dashboardService: Dashboard3Service) { }
|
||||||
private dashboardService: Dashboard3Service,
|
|
||||||
private filterService: FilterService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Subscribe to filter changes
|
|
||||||
this.subscriptions.push(
|
|
||||||
this.filterService.filterState$.subscribe(filters => {
|
|
||||||
// When filters change, refresh the chart data
|
|
||||||
this.fetchChartData();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Initialize with default data
|
// Initialize with default data
|
||||||
this.fetchChartData();
|
this.fetchChartData();
|
||||||
}
|
}
|
||||||
@@ -60,12 +47,6 @@ export class DynamicChartComponent implements OnInit, OnChanges {
|
|||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('DynamicChartComponent input changes:', changes);
|
console.log('DynamicChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -125,14 +106,6 @@ export class DynamicChartComponent implements OnInit, OnChanges {
|
|||||||
|
|
||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
private isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
|
||||||
private subscriptions: Subscription[] = [];
|
|
||||||
|
|
||||||
fetchChartData(): void {
|
fetchChartData(): void {
|
||||||
// Set flag to prevent recursive calls
|
// Set flag to prevent recursive calls
|
||||||
@@ -166,49 +139,7 @@ export class DynamicChartComponent implements OnInit, OnChanges {
|
|||||||
filterParams = JSON.stringify(filterObj);
|
filterParams = JSON.stringify(filterObj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log('Base filter parameters:', filterParams);
|
||||||
// Add common filters to filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
console.log('Common filters from service:', commonFilters);
|
|
||||||
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with base filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add base filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const baseFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, baseFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse base filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters using the field name as the key, not the filter id
|
|
||||||
Object.keys(commonFilters).forEach(filterId => {
|
|
||||||
const filterValue = commonFilters[filterId];
|
|
||||||
// Find the filter definition to get the field name
|
|
||||||
const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
|
|
||||||
if (filterDef && filterDef.field) {
|
|
||||||
const fieldName = filterDef.field;
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[fieldName] = filterValue;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback to using filterId as field name if no field is defined
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[filterId] = filterValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Final filter parameters:', filterParams);
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/dynamic?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/dynamic?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
@@ -573,322 +504,4 @@ export class DynamicChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
this.dynamicChartData = _dynamicChartData;
|
this.dynamicChartData = _dynamicChartData;
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
|
||||||
// Unsubscribe from all subscriptions to prevent memory leaks
|
|
||||||
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
|
||||||
|
|
||||||
// Remove document click handler if it exists
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,285 +1,4 @@
|
|||||||
<div class="financial-chart-container">
|
<div class="financial-chart-container">
|
||||||
<!-- Filter Controls Section -->
|
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
|
||||||
<!-- Base Filters -->
|
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
|
||||||
<h4>Base Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'Financial Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Existing content -->
|
|
||||||
<!-- Drilldown mode indicator -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
|
|||||||
@@ -1,192 +1,108 @@
|
|||||||
.filter-section {
|
.financial-chart-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 400px;
|
||||||
|
min-height: 400px;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.financial-chart-container:hover {
|
||||||
|
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-title {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2c3e50;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 15px;
|
text-align: center;
|
||||||
border: 1px solid #ddd;
|
padding-bottom: 15px;
|
||||||
border-radius: 4px;
|
border-bottom: 2px solid #3498db;
|
||||||
background-color: #f9f9f9;
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-group {
|
.chart-wrapper {
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
flex: 1;
|
||||||
|
min-height: 250px;
|
||||||
.multiselect-display {
|
margin: 15px 0;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect-dropdown {
|
.chart-wrapper canvas {
|
||||||
position: absolute;
|
max-width: 100%;
|
||||||
top: 100%;
|
max-height: 100%;
|
||||||
left: 0;
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-range {
|
.chart-wrapper canvas:hover {
|
||||||
.date-input-group {
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
|
||||||
display: flex;
|
transform: scale(1.02);
|
||||||
align-items: center;
|
transition: all 0.3s ease;
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle {
|
.loading-indicator, .no-data-message {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: italic;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-actions {
|
.loading-indicator p, .no-data-message p {
|
||||||
margin-top: 15px;
|
margin: 10px 0 0 0;
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// New header row styling
|
.spinner {
|
||||||
.header-row {
|
border: 4px solid #f3f3f3;
|
||||||
margin-bottom: 15px;
|
border-top: 4px solid #3498db;
|
||||||
padding-bottom: 10px;
|
border-radius: 50%;
|
||||||
border-bottom: 1px solid #eee;
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.financial-chart-container {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-title {
|
.chart-title {
|
||||||
margin: 0;
|
font-size: 20px;
|
||||||
font-size: 18px;
|
margin-bottom: 15px;
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-item {
|
.chart-wrapper {
|
||||||
min-width: 100%;
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-row {
|
.no-data-message {
|
||||||
.chart-title {
|
font-size: 16px;
|
||||||
font-size: 16px;
|
padding: 20px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,8 +1,5 @@
|
|||||||
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
||||||
import { FilterService } from '../../common-filter/filter.service';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
import { AlertsService } from 'src/app/services/fnd/alerts.service';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-financial-chart',
|
selector: 'app-financial-chart',
|
||||||
@@ -36,21 +33,9 @@ export class FinancialChartComponent implements OnInit, OnChanges {
|
|||||||
// Multi-layer drilldown configuration inputs
|
// Multi-layer drilldown configuration inputs
|
||||||
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
||||||
|
|
||||||
constructor(
|
constructor(private dashboardService: Dashboard3Service) { }
|
||||||
private dashboardService: Dashboard3Service,
|
|
||||||
private filterService: FilterService,
|
|
||||||
private alertService: AlertsService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Subscribe to filter changes
|
|
||||||
this.subscriptions.push(
|
|
||||||
this.filterService.filterState$.subscribe(filters => {
|
|
||||||
// When filters change, refresh the chart data
|
|
||||||
this.fetchChartData();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Initialize with default data
|
// Initialize with default data
|
||||||
this.fetchChartData();
|
this.fetchChartData();
|
||||||
}
|
}
|
||||||
@@ -58,14 +43,6 @@ export class FinancialChartComponent implements OnInit, OnChanges {
|
|||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('FinancialChartComponent input changes:', changes);
|
console.log('FinancialChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
// Load filter options for dropdown/multiselect filters
|
|
||||||
this.loadFilterOptions();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -109,14 +86,6 @@ export class FinancialChartComponent implements OnInit, OnChanges {
|
|||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
private isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
|
||||||
private subscriptions: Subscription[] = [];
|
|
||||||
|
|
||||||
fetchChartData(): void {
|
fetchChartData(): void {
|
||||||
// Set flag to prevent recursive calls
|
// Set flag to prevent recursive calls
|
||||||
this.isFetchingData = true;
|
this.isFetchingData = true;
|
||||||
@@ -149,49 +118,7 @@ export class FinancialChartComponent implements OnInit, OnChanges {
|
|||||||
filterParams = JSON.stringify(filterObj);
|
filterParams = JSON.stringify(filterObj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log('Base filter parameters:', filterParams);
|
||||||
// Add common filters to filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
console.log('Common filters from service:', commonFilters);
|
|
||||||
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with base filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add base filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const baseFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, baseFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse base filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters using the field name as the key, not the filter id
|
|
||||||
Object.keys(commonFilters).forEach(filterId => {
|
|
||||||
const filterValue = commonFilters[filterId];
|
|
||||||
// Find the filter definition to get the field name
|
|
||||||
const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
|
|
||||||
if (filterDef && filterDef.field) {
|
|
||||||
const fieldName = filterDef.field;
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[fieldName] = filterValue;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback to using filterId as field name if no field is defined
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[filterId] = filterValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Final filter parameters:', filterParams);
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/financial?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/financial?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
@@ -569,520 +496,4 @@ export class FinancialChartComponent implements OnInit, OnChanges {
|
|||||||
public chartHovered(e: any): void {
|
public chartHovered(e: any): void {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
// Ensure filter has required properties
|
|
||||||
if (!filter.type) filter.type = 'text';
|
|
||||||
if (!filter.options) filter.options = '';
|
|
||||||
if (!filter.availableValues) filter.availableValues = '';
|
|
||||||
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
// Ensure filter has required properties
|
|
||||||
if (!filter.type) filter.type = 'text';
|
|
||||||
if (!filter.options) filter.options = '';
|
|
||||||
if (!filter.availableValues) filter.availableValues = '';
|
|
||||||
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
// Ensure filter has required properties
|
|
||||||
if (!filter.type) filter.type = 'text';
|
|
||||||
if (!filter.options) filter.options = '';
|
|
||||||
if (!filter.availableValues) filter.availableValues = '';
|
|
||||||
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
|
||||||
// Unsubscribe from all subscriptions to prevent memory leaks
|
|
||||||
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
|
||||||
|
|
||||||
// Remove document click handler if it exists
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load filter options for dropdown and multiselect filters
|
|
||||||
private loadFilterOptions(): void {
|
|
||||||
console.log('Loading filter options');
|
|
||||||
|
|
||||||
// Load options for base filters
|
|
||||||
if (this.baseFilters && this.table) {
|
|
||||||
this.baseFilters.forEach((filter, index) => {
|
|
||||||
if ((filter.type === 'dropdown' || filter.type === 'multiselect') && filter.field) {
|
|
||||||
this.loadFilterValuesForField(this.table, this.connection, filter.field, index, 'base');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load options for drilldown filters
|
|
||||||
if (this.drilldownFilters && this.drilldownApiUrl) {
|
|
||||||
this.drilldownFilters.forEach((filter, index) => {
|
|
||||||
if ((filter.type === 'dropdown' || filter.type === 'multiselect') && filter.field) {
|
|
||||||
this.loadFilterValuesForField(this.drilldownApiUrl, this.connection, filter.field, index, 'drilldown');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load options for layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach((layer, layerIndex) => {
|
|
||||||
if (layer.filters && layer.apiUrl) {
|
|
||||||
layer.filters.forEach((filter, filterIndex) => {
|
|
||||||
if ((filter.type === 'dropdown' || filter.type === 'multiselect') && filter.field) {
|
|
||||||
this.loadFilterValuesForField(layer.apiUrl, this.connection, filter.field, filterIndex, 'layer', layerIndex);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load filter values for a specific field
|
|
||||||
private loadFilterValuesForField(
|
|
||||||
apiUrl: string,
|
|
||||||
connectionId: number | undefined,
|
|
||||||
field: string,
|
|
||||||
filterIndex: number,
|
|
||||||
filterType: 'base' | 'drilldown' | 'layer',
|
|
||||||
layerIndex?: number
|
|
||||||
): void {
|
|
||||||
if (apiUrl && field) {
|
|
||||||
this.alertService.getValuesFromUrl(apiUrl, connectionId, field).subscribe(
|
|
||||||
(values: string[]) => {
|
|
||||||
console.log(`Loaded filter values for ${filterType} filter ${field}:`, values);
|
|
||||||
|
|
||||||
// Update the filter with available values
|
|
||||||
if (filterType === 'base') {
|
|
||||||
const filter = this.baseFilters[filterIndex];
|
|
||||||
if (filter) {
|
|
||||||
filter.availableValues = values.join(', ');
|
|
||||||
// For dropdown/multiselect types, also update the options
|
|
||||||
if (filter.type === 'dropdown' || filter.type === 'multiselect') {
|
|
||||||
filter.options = filter.availableValues;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (filterType === 'drilldown') {
|
|
||||||
const filter = this.drilldownFilters[filterIndex];
|
|
||||||
if (filter) {
|
|
||||||
filter.availableValues = values.join(', ');
|
|
||||||
// For dropdown/multiselect types, also update the options
|
|
||||||
if (filter.type === 'dropdown' || filter.type === 'multiselect') {
|
|
||||||
filter.options = filter.availableValues;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (filterType === 'layer' && layerIndex !== undefined) {
|
|
||||||
const layer = this.drilldownLayers[layerIndex];
|
|
||||||
if (layer && layer.filters) {
|
|
||||||
const filter = layer.filters[filterIndex];
|
|
||||||
if (filter) {
|
|
||||||
filter.availableValues = values.join(', ');
|
|
||||||
// For dropdown/multiselect types, also update the options
|
|
||||||
if (filter.type === 'dropdown' || filter.type === 'multiselect') {
|
|
||||||
filter.options = filter.availableValues;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
console.error('Error loading available values for field:', field, error);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter field change
|
|
||||||
onBaseFilterFieldChange(index: number, field: string): void {
|
|
||||||
const filter = this.baseFilters[index];
|
|
||||||
if (filter) {
|
|
||||||
filter.field = field;
|
|
||||||
// If field changes, reset value and options
|
|
||||||
filter.value = '';
|
|
||||||
filter.options = '';
|
|
||||||
filter.availableValues = '';
|
|
||||||
|
|
||||||
// If we have a field and table URL, load available values
|
|
||||||
if (field && this.table && (filter.type === 'dropdown' || filter.type === 'multiselect')) {
|
|
||||||
this.loadFilterValuesForField(this.table, this.connection, field, index, 'base');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter type change
|
|
||||||
onBaseFilterTypeChange(index: number, type: string): void {
|
|
||||||
const filter = this.baseFilters[index];
|
|
||||||
if (filter) {
|
|
||||||
filter.type = type;
|
|
||||||
// If type changes to dropdown/multiselect and we have a field, load available values
|
|
||||||
if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.table) {
|
|
||||||
this.loadFilterValuesForField(this.table, this.connection, filter.field, index, 'base');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter field change
|
|
||||||
onDrilldownFilterFieldChange(index: number, field: string): void {
|
|
||||||
const filter = this.drilldownFilters[index];
|
|
||||||
if (filter) {
|
|
||||||
filter.field = field;
|
|
||||||
// If field changes, reset value and options
|
|
||||||
filter.value = '';
|
|
||||||
filter.options = '';
|
|
||||||
filter.availableValues = '';
|
|
||||||
|
|
||||||
// If we have a field and drilldown API URL, load available values
|
|
||||||
if (field && this.drilldownApiUrl && (filter.type === 'dropdown' || filter.type === 'multiselect')) {
|
|
||||||
this.loadFilterValuesForField(this.drilldownApiUrl, this.connection, field, index, 'drilldown');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter type change
|
|
||||||
onDrilldownFilterTypeChange(index: number, type: string): void {
|
|
||||||
const filter = this.drilldownFilters[index];
|
|
||||||
if (filter) {
|
|
||||||
filter.type = type;
|
|
||||||
// If type changes to dropdown/multiselect and we have a field, load available values
|
|
||||||
if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.drilldownApiUrl) {
|
|
||||||
this.loadFilterValuesForField(this.drilldownApiUrl, this.connection, filter.field, index, 'drilldown');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter field change
|
|
||||||
onLayerFilterFieldChange(layerIndex: number, filterIndex: number, field: string): void {
|
|
||||||
const layer = this.drilldownLayers[layerIndex];
|
|
||||||
if (layer && layer.filters) {
|
|
||||||
const filter = layer.filters[filterIndex];
|
|
||||||
if (filter) {
|
|
||||||
filter.field = field;
|
|
||||||
// If field changes, reset value and options
|
|
||||||
filter.value = '';
|
|
||||||
filter.options = '';
|
|
||||||
filter.availableValues = '';
|
|
||||||
|
|
||||||
// If we have a field and layer API URL, load available values
|
|
||||||
if (field && layer.apiUrl && (filter.type === 'dropdown' || filter.type === 'multiselect')) {
|
|
||||||
this.loadFilterValuesForField(layer.apiUrl, this.connection, field, filterIndex, 'layer', layerIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter type change
|
|
||||||
onLayerFilterTypeChange(layerIndex: number, filterIndex: number, type: string): void {
|
|
||||||
const layer = this.drilldownLayers[layerIndex];
|
|
||||||
if (layer && layer.filters) {
|
|
||||||
const filter = layer.filters[filterIndex];
|
|
||||||
if (filter) {
|
|
||||||
filter.type = type;
|
|
||||||
// If type changes to dropdown/multiselect and we have a field, load available values
|
|
||||||
if ((type === 'dropdown' || type === 'multiselect') && filter.field && layer.apiUrl) {
|
|
||||||
this.loadFilterValuesForField(layer.apiUrl, this.connection, filter.field, filterIndex, 'layer', layerIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,254 +1,9 @@
|
|||||||
<div style="display: block;">
|
<div style="display: block;">
|
||||||
<div class="dg-wrapper">
|
<div class="dg-wrapper">
|
||||||
<!-- Filter Controls Section -->
|
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
|
||||||
<!-- Base Filters -->
|
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
|
||||||
<h4>Base Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clr-row">
|
<div class="clr-row">
|
||||||
<!-- <div class="clr-col-8">
|
<div class="clr-col-8">
|
||||||
<h3>{{charttitle || 'Data Grid'}}</h3>
|
<h3>{{charttitle || 'Data Grid'}}</h3>
|
||||||
</div> -->
|
</div>
|
||||||
<!-- Add drilldown navigation controls -->
|
<!-- Add drilldown navigation controls -->
|
||||||
<div class="clr-col-4" *ngIf="drilldownEnabled && drilldownStack.length > 0" style="text-align: right;">
|
<div class="clr-col-4" *ngIf="drilldownEnabled && drilldownStack.length > 0" style="text-align: right;">
|
||||||
<button class="btn btn-sm btn-link" (click)="navigateBack()">
|
<button class="btn btn-sm btn-link" (click)="navigateBack()">
|
||||||
|
|||||||
@@ -1,180 +1,28 @@
|
|||||||
.filter-section {
|
// Add styles for drilldown navigation
|
||||||
margin-bottom: 20px;
|
.alert-info {
|
||||||
padding: 15px;
|
background-color: #dcedf7;
|
||||||
border: 1px solid #ddd;
|
border-color: #a3d4f5;
|
||||||
border-radius: 4px;
|
color: #21333b;
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-group {
|
.alert-info .alert-icon {
|
||||||
margin-bottom: 15px;
|
color: #0072a3;
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-controls {
|
.btn-link {
|
||||||
display: flex;
|
color: #0072a3;
|
||||||
flex-wrap: wrap;
|
text-decoration: none;
|
||||||
gap: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-item {
|
.btn-link:hover {
|
||||||
flex: 1 1 300px;
|
color: #00567a;
|
||||||
min-width: 250px;
|
text-decoration: underline;
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dg-wrapper {
|
.dg-wrapper {
|
||||||
padding: 15px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
clr-datagrid {
|
.clr-row {
|
||||||
margin-top: 10px;
|
margin-bottom: 12px;
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -66,15 +66,6 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
// Add subscriptions to unsubscribe on destroy
|
// Add subscriptions to unsubscribe on destroy
|
||||||
private subscriptions: Subscription[] = [];
|
private subscriptions: Subscription[] = [];
|
||||||
|
|
||||||
// Add a flag to track if filters have been initialized
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
// Add properties to track open multiselect dropdowns
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
|
|
||||||
// Add property to track document click handler
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private mainservice: UsergrpmaintainceService,
|
private mainservice: UsergrpmaintainceService,
|
||||||
private dashboardService: Dashboard3Service,
|
private dashboardService: Dashboard3Service,
|
||||||
@@ -111,12 +102,6 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
const drilldownYAxisChanged = changes.drilldownYAxis && !changes.drilldownYAxis.firstChange;
|
const drilldownYAxisChanged = changes.drilldownYAxis && !changes.drilldownYAxis.firstChange;
|
||||||
const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
|
const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Respond to input changes
|
// Respond to input changes
|
||||||
if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
|
if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
|
||||||
drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
|
drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
|
||||||
@@ -127,84 +112,6 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dynamic headers for the grid
|
// Dynamic headers for the grid
|
||||||
|
|
||||||
fetchGridData(): void {
|
fetchGridData(): void {
|
||||||
@@ -721,238 +628,6 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
.replace(/^./, str => str.toUpperCase());
|
.replace(/^./, str => str.toUpperCase());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchGridData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchGridData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchGridData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchGridData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchGridData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchGridData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchGridData();
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
// Unsubscribe from all subscriptions to prevent memory leaks
|
// Unsubscribe from all subscriptions to prevent memory leaks
|
||||||
console.log('GridViewComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
|
console.log('GridViewComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
|
||||||
@@ -969,12 +644,6 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
this.drilldownStack = [];
|
this.drilldownStack = [];
|
||||||
this.originalGridData = [];
|
this.originalGridData = [];
|
||||||
|
|
||||||
// Clear multiselect tracking
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
|
|
||||||
console.log('GridViewComponent destroyed and cleaned up');
|
console.log('GridViewComponent destroyed and cleaned up');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,282 +1,13 @@
|
|||||||
<div style="display: block; height: 100%; width: 100%;">
|
<div style="display: block">
|
||||||
<!-- Filter Controls Section -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<!-- Base Filters -->
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
<button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<h4>Base Filters</h4>
|
Back to Level {{currentDrilldownLevel - 1}}
|
||||||
<div class="filter-controls">
|
</button>
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
<button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
Back to Main View
|
||||||
|
</button>
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'Line Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No data message -->
|
<!-- No data message -->
|
||||||
@@ -285,11 +16,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Chart display -->
|
<!-- Chart display -->
|
||||||
<div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 50px);">
|
<div *ngIf="!noDataAvailable">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="lineChartData"
|
[datasets]="lineChartData"
|
||||||
[labels]="lineChartLabels"
|
[labels]="lineChartLabels"
|
||||||
[options]="lineChartOptions"
|
[options]="lineChartOptions"
|
||||||
|
|
||||||
[legend]="lineChartLegend"
|
[legend]="lineChartLegend"
|
||||||
[type]="lineChartType"
|
[type]="lineChartType"
|
||||||
(chartHover)="chartHovered($event)"
|
(chartHover)="chartHovered($event)"
|
||||||
|
|||||||
@@ -1,192 +0,0 @@
|
|||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
|
|||||||
templateUrl: './line-chart.component.html',
|
templateUrl: './line-chart.component.html',
|
||||||
styleUrls: ['./line-chart.component.scss']
|
styleUrls: ['./line-chart.component.scss']
|
||||||
})
|
})
|
||||||
export class LineChartComponent implements OnInit, OnChanges, OnDestroy {
|
export class LineChartComponent implements OnInit, OnChanges {
|
||||||
@Input() xAxis: string;
|
@Input() xAxis: string;
|
||||||
@Input() yAxis: string | string[];
|
@Input() yAxis: string | string[];
|
||||||
@Input() table: string;
|
@Input() table: string;
|
||||||
@@ -88,11 +88,6 @@ export class LineChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
// Subscriptions to unsubscribe on destroy
|
// Subscriptions to unsubscribe on destroy
|
||||||
private subscriptions: Subscription[] = [];
|
private subscriptions: Subscription[] = [];
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dashboardService: Dashboard3Service,
|
private dashboardService: Dashboard3Service,
|
||||||
private filterService: FilterService
|
private filterService: FilterService
|
||||||
@@ -114,12 +109,6 @@ export class LineChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('LineChartComponent input changes:', changes);
|
console.log('LineChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -151,318 +140,6 @@ export class LineChartComponent implements OnInit, OnChanges, OnDestroy {
|
|||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this.subscriptions.forEach(sub => sub.unsubscribe());
|
this.subscriptions.forEach(sub => sub.unsubscribe());
|
||||||
// Clean up document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public method to refresh data when filters change
|
// Public method to refresh data when filters change
|
||||||
|
|||||||
@@ -1,287 +1,19 @@
|
|||||||
<div class="pie-chart-container">
|
<div class="pie-chart-container">
|
||||||
<!-- Filter Controls Section -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<!-- Base Filters -->
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
<button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<h4>Base Filters</h4>
|
Back to Level {{currentDrilldownLevel - 1}}
|
||||||
<div class="filter-controls">
|
</button>
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
<button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
Back to Main View
|
||||||
|
</button>
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
|
||||||
<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 && !isFetchingData">
|
<div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable">
|
||||||
<div class="spinner"></div>
|
<div class="spinner"></div>
|
||||||
<p>Loading chart data...</p>
|
<p>Loading chart data...</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -291,15 +23,15 @@
|
|||||||
<p>No chart data available</p>
|
<p>No chart data available</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Show chart when data is available or show default data -->
|
<!-- Show chart when data is available -->
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="pieChartDatasets"
|
*ngIf="pieChartLabels.length > 0 && pieChartData.length > 0"
|
||||||
|
[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">
|
||||||
|
|||||||
@@ -149,192 +149,10 @@
|
|||||||
100% { transform: rotate(360deg); }
|
100% { transform: rotate(360deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Filter section styles
|
/* Responsive design */
|
||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
text-align: left;
|
|
||||||
padding-bottom: 0;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.pie-chart-container {
|
.pie-chart-container {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
height: auto;
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-title {
|
.chart-title {
|
||||||
@@ -361,18 +179,4 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
|
|||||||
templateUrl: './pie-chart.component.html',
|
templateUrl: './pie-chart.component.html',
|
||||||
styleUrls: ['./pie-chart.component.scss']
|
styleUrls: ['./pie-chart.component.scss']
|
||||||
})
|
})
|
||||||
export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
|
export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
|
||||||
@Input() xAxis: string;
|
@Input() xAxis: string;
|
||||||
@Input() yAxis: string | string[];
|
@Input() yAxis: string | string[];
|
||||||
@Input() table: string;
|
@Input() table: string;
|
||||||
@@ -37,12 +37,6 @@ 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,
|
||||||
@@ -102,16 +96,11 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
|
|||||||
noDataAvailable: boolean = false;
|
noDataAvailable: boolean = false;
|
||||||
|
|
||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
// Subscriptions to unsubscribe on destroy
|
||||||
private subscriptions: Subscription[] = [];
|
private subscriptions: Subscription[] = [];
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dashboardService: Dashboard3Service,
|
private dashboardService: Dashboard3Service,
|
||||||
private filterService: FilterService
|
private filterService: FilterService
|
||||||
@@ -138,28 +127,12 @@ 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();
|
||||||
// Initialize datasets with default data
|
this.fetchChartData();
|
||||||
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 {
|
||||||
console.log('PieChartComponent input changes:', changes);
|
console.log('PieChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -181,328 +154,10 @@ 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 {
|
||||||
this.subscriptions.forEach(sub => sub.unsubscribe());
|
this.subscriptions.forEach(sub => sub.unsubscribe());
|
||||||
// Clean up document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public method to refresh data when filters change
|
// Public method to refresh data when filters change
|
||||||
@@ -588,7 +243,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
|
|||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/pie?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/pie?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
console.log('Chart data URL:', url);
|
console.log('Pie chart data URL:', url);
|
||||||
|
|
||||||
// Fetch data from the dashboard service with parameter field and value
|
// Fetch data from the dashboard service with parameter field and value
|
||||||
// For base level, we pass empty parameter and value, but now also pass filters
|
// For base level, we pass empty parameter and value, but now also pass filters
|
||||||
@@ -596,8 +251,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
|
|||||||
(data: any) => {
|
(data: any) => {
|
||||||
console.log('Received pie chart data:', data);
|
console.log('Received pie chart data:', data);
|
||||||
if (data === null) {
|
if (data === null) {
|
||||||
console.warn('API returned null data. Check if the API endpoint is working correctly.');
|
console.warn('Pie chart API returned null data. Check if the API endpoint is working correctly.');
|
||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
|
this.pieChartLabels = [];
|
||||||
|
this.pieChartData = [];
|
||||||
|
// Validate and sanitize data to show default data
|
||||||
|
this.validateChartData();
|
||||||
// Reset flag after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
return;
|
return;
|
||||||
@@ -605,57 +264,50 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
|
|||||||
|
|
||||||
// Handle the actual data structure returned by the API
|
// Handle the actual data structure returned by the API
|
||||||
if (data && data.chartLabels && data.chartData) {
|
if (data && data.chartLabels && data.chartData) {
|
||||||
// Backend has already filtered the data, just display it
|
// For pie charts, we need to extract the data differently
|
||||||
|
// The first dataset's data array contains the values for the pie chart
|
||||||
this.noDataAvailable = data.chartLabels.length === 0;
|
this.noDataAvailable = data.chartLabels.length === 0;
|
||||||
this.pieChartLabels = data.chartLabels;
|
this.pieChartLabels = data.chartLabels || [];
|
||||||
|
if (data.chartData && data.chartData.length > 0) {
|
||||||
// Extract the actual data values from the chartData array
|
this.pieChartData = data.chartData[0].data.map(value => {
|
||||||
// chartData is an array with one object containing the data
|
// Convert to number if it's not already
|
||||||
if (data.chartData.length > 0 && data.chartData[0].data) {
|
const numValue = Number(value);
|
||||||
this.pieChartData = data.chartData[0].data;
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
this.pieChartData = [];
|
this.pieChartData = [];
|
||||||
}
|
}
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
|
this.syncLabelAndDataArrays();
|
||||||
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
// 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.data) {
|
||||||
// Backend has already filtered the data, just display it
|
// Handle the original expected format as fallback
|
||||||
this.noDataAvailable = data.labels.length === 0;
|
this.noDataAvailable = data.labels.length === 0;
|
||||||
this.pieChartLabels = data.labels;
|
this.pieChartLabels = data.labels || [];
|
||||||
this.pieChartData = data.datasets[0]?.data || [];
|
this.pieChartData = data.data.map(value => {
|
||||||
|
// Convert to number if it's not already
|
||||||
|
const numValue = Number(value);
|
||||||
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
|
});
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
|
this.syncLabelAndDataArrays();
|
||||||
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
// 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('Pie chart received data does not have expected structure', data);
|
||||||
|
// Reset to default data
|
||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
// Keep default data if no data is available
|
this.pieChartLabels = [];
|
||||||
if (this.pieChartLabels.length === 0 && this.pieChartData.length === 0) {
|
this.pieChartData = [];
|
||||||
this.pieChartLabels = ['Category A', 'Category B', 'Category C'];
|
// Validate and sanitize data to show default data
|
||||||
this.pieChartData = [30, 50, 20];
|
this.validateChartData();
|
||||||
this.pieChartDatasets = [
|
|
||||||
{
|
|
||||||
data: this.pieChartData,
|
|
||||||
label: 'Dataset 1'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// Reset flag after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
@@ -663,13 +315,23 @@ 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 = [];
|
||||||
|
// Validate and sanitize data to show default data
|
||||||
|
this.validateChartData();
|
||||||
// Reset flag after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
} 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 pie chart, showing default data:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
|
||||||
this.noDataAvailable = true;
|
// Don't set noDataAvailable to true when there's no required data
|
||||||
|
// This allows static data to be displayed
|
||||||
|
this.noDataAvailable = false;
|
||||||
|
// Validate the chart data to ensure we have some data to display
|
||||||
|
this.validateChartData();
|
||||||
|
// Force a redraw to ensure the chart displays
|
||||||
|
this.pieChartData = [...this.pieChartData];
|
||||||
// Reset flag after fetching
|
// Reset flag after fetching
|
||||||
this.isFetchingData = false;
|
this.isFetchingData = false;
|
||||||
}
|
}
|
||||||
@@ -698,6 +360,8 @@ 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -708,6 +372,8 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -804,57 +470,64 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle the actual data structure returned by the API
|
// Handle the actual data structure returned by the API
|
||||||
if (data && data.chartLabels && data.chartData) {
|
if (data && data.chartLabels && data.chartData) {
|
||||||
// Backend has already filtered the data, just display it
|
// For pie charts, we need to extract the data differently
|
||||||
|
// The first dataset's data array contains the values for the pie chart
|
||||||
this.noDataAvailable = data.chartLabels.length === 0;
|
this.noDataAvailable = data.chartLabels.length === 0;
|
||||||
this.pieChartLabels = data.chartLabels;
|
this.pieChartLabels = data.chartLabels || [];
|
||||||
|
if (data.chartData && data.chartData.length > 0) {
|
||||||
// Extract the actual data values from the chartData array
|
this.pieChartData = data.chartData[0].data.map(value => {
|
||||||
// chartData is an array with one object containing the data
|
// Convert to number if it's not already
|
||||||
if (data.chartData.length > 0 && data.chartData[0].data) {
|
const numValue = Number(value);
|
||||||
this.pieChartData = data.chartData[0].data;
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
this.pieChartData = [];
|
this.pieChartData = [];
|
||||||
}
|
}
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
|
this.syncLabelAndDataArrays();
|
||||||
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
// 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.data) {
|
||||||
// Backend has already filtered the data, just display it
|
// Handle the original expected format as fallback
|
||||||
this.noDataAvailable = data.labels.length === 0;
|
this.noDataAvailable = data.labels.length === 0;
|
||||||
this.pieChartLabels = data.labels;
|
this.pieChartLabels = data.labels || [];
|
||||||
this.pieChartData = data.datasets[0]?.data || [];
|
this.pieChartData = data.data.map(value => {
|
||||||
|
// Convert to number if it's not already
|
||||||
|
const numValue = Number(value);
|
||||||
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
|
});
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
|
this.syncLabelAndDataArrays();
|
||||||
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
// 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;
|
||||||
// Keep current data if no data is available
|
this.pieChartLabels = [];
|
||||||
|
this.pieChartData = [];
|
||||||
|
// Validate and sanitize data
|
||||||
|
this.validateChartData();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
(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
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -915,54 +588,84 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate chart data to ensure labels and data arrays have the same length
|
/**
|
||||||
private validateChartData(): void {
|
* Get color for legend item
|
||||||
if (this.pieChartLabels && this.pieChartData) {
|
* @param index Index of the legend item
|
||||||
// For pie charts, we need to ensure labels and data arrays have the same length
|
*/
|
||||||
const labelCount = this.pieChartLabels.length;
|
public getLegendColor(index: number): string {
|
||||||
const dataCount = this.pieChartData.length;
|
return this.chartColors[index % this.chartColors.length];
|
||||||
|
}
|
||||||
if (labelCount !== dataCount) {
|
|
||||||
console.warn('Pie chart labels and data arrays have different lengths:', { labels: labelCount, data: dataCount });
|
/**
|
||||||
// Pad or truncate data array to match label count
|
* Ensure labels and data arrays have the same length
|
||||||
if (dataCount < labelCount) {
|
*/
|
||||||
// Pad with zeros
|
private syncLabelAndDataArrays(): void {
|
||||||
while (this.pieChartData.length < labelCount) {
|
// Ensure we have matching arrays
|
||||||
this.pieChartData.push(0);
|
if (this.pieChartLabels.length !== this.pieChartData.length) {
|
||||||
}
|
const maxLength = Math.max(this.pieChartLabels.length, this.pieChartData.length);
|
||||||
} else if (dataCount > labelCount) {
|
while (this.pieChartLabels.length < maxLength) {
|
||||||
// Truncate data array
|
this.pieChartLabels.push(`Label ${this.pieChartLabels.length + 1}`);
|
||||||
this.pieChartData = this.pieChartData.slice(0, labelCount);
|
}
|
||||||
}
|
while (this.pieChartData.length < maxLength) {
|
||||||
|
this.pieChartData.push(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get legend color for a specific index
|
/**
|
||||||
getLegendColor(index: number): string {
|
* Validate and sanitize chart data
|
||||||
return this.chartColors[index % this.chartColors.length];
|
*/
|
||||||
|
private validateChartData(): void {
|
||||||
|
console.log('Validating chart data:', { labels: this.pieChartLabels, data: this.pieChartData });
|
||||||
|
|
||||||
|
// Ensure we have valid arrays
|
||||||
|
if (!Array.isArray(this.pieChartLabels)) {
|
||||||
|
this.pieChartLabels = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(this.pieChartData)) {
|
||||||
|
this.pieChartData = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure we have some data to display
|
||||||
|
if (this.pieChartLabels.length === 0 && this.pieChartData.length === 0) {
|
||||||
|
// Add default data to ensure chart visibility
|
||||||
|
this.pieChartLabels = ['Category A', 'Category B', 'Category C'];
|
||||||
|
this.pieChartData = [30, 50, 20];
|
||||||
|
console.log('Added default data for chart display');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure labels and data arrays have the same length
|
||||||
|
this.syncLabelAndDataArrays();
|
||||||
|
|
||||||
|
// Ensure all data values are numbers
|
||||||
|
this.pieChartData = this.pieChartData.map(value => {
|
||||||
|
const numValue = Number(value);
|
||||||
|
return isNaN(numValue) ? 0 : numValue;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('After validation:', { labels: this.pieChartLabels, data: this.pieChartData });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Method to determine if chart should be displayed
|
ngAfterViewChecked() {
|
||||||
shouldShowChart(): boolean {
|
// Debugging: Log component state after view checks
|
||||||
// Show chart if we have data
|
console.log('PieChartComponent state:', {
|
||||||
if (this.pieChartLabels.length > 0 && this.pieChartData.length > 0) {
|
labels: this.pieChartLabels,
|
||||||
return true;
|
data: this.pieChartData,
|
||||||
}
|
hasData: this.pieChartLabels.length > 0 && this.pieChartData.length > 0
|
||||||
|
});
|
||||||
// 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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if chart data is valid and ready to display
|
||||||
|
*/
|
||||||
|
public isChartDataValid(): boolean {
|
||||||
|
return this.pieChartLabels && this.pieChartData &&
|
||||||
|
Array.isArray(this.pieChartLabels) && Array.isArray(this.pieChartData) &&
|
||||||
|
this.pieChartLabels.length > 0 && this.pieChartData.length > 0 &&
|
||||||
|
this.pieChartLabels.length === this.pieChartData.length;
|
||||||
|
}
|
||||||
|
|
||||||
// events
|
// events
|
||||||
public chartClicked(e: any): void {
|
public chartClicked(e: any): void {
|
||||||
console.log('Pie chart clicked:', e);
|
console.log('Pie chart clicked:', e);
|
||||||
@@ -1049,10 +752,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
|
|||||||
}
|
}
|
||||||
|
|
||||||
public chartHovered(e: any): void {
|
public chartHovered(e: any): void {
|
||||||
console.log('Pie chart hovered:', e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
ngAfterViewChecked(): void {
|
|
||||||
// This lifecycle hook can be used if needed for post-render operations
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,292 +1,10 @@
|
|||||||
<div style="display: block; height: 100%; width: 100%;">
|
|
||||||
<!-- Filter Controls Section -->
|
<div style="display: block">
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<canvas baseChart
|
||||||
<!-- Base Filters -->
|
[datasets]="polarAreaChartData"
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
[labels]="polarAreaChartLabels"
|
||||||
<h4>Base Filters</h4>
|
[type]="polarAreaChartType"
|
||||||
<div class="filter-controls">
|
(chartHover)="chartHovered($event)"
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
(chartClick)="chartClicked($event)">
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
</canvas>
|
||||||
|
</div>
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'Polar Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="position: relative; height: calc(100% - 80px); padding: 0 10px 30px 10px;">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="polarAreaChartData"
|
|
||||||
[labels]="polarAreaChartLabels"
|
|
||||||
[options]="polarAreaChartOptions"
|
|
||||||
[type]="polarAreaChartType"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,192 +1,18 @@
|
|||||||
.filter-section {
|
// Polar Chart Component Styles
|
||||||
margin-bottom: 20px;
|
div[style*="display: block"] {
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect-display {
|
canvas {
|
||||||
display: flex;
|
max-width: 100%;
|
||||||
align-items: center;
|
max-height: 100%;
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect-dropdown {
|
// Ensure the chart container has proper sizing
|
||||||
position: absolute;
|
:host {
|
||||||
top: 100%;
|
display: block;
|
||||||
left: 0;
|
width: 100%;
|
||||||
right: 0;
|
height: 100%;
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,5 @@
|
|||||||
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
||||||
import { FilterService } from '../../common-filter/filter.service';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-polar-chart',
|
selector: 'app-polar-chart',
|
||||||
@@ -35,20 +33,9 @@ export class PolarChartComponent implements OnInit, OnChanges {
|
|||||||
// Multi-layer drilldown configuration inputs
|
// Multi-layer drilldown configuration inputs
|
||||||
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
||||||
|
|
||||||
constructor(
|
constructor(private dashboardService: Dashboard3Service) { }
|
||||||
private dashboardService: Dashboard3Service,
|
|
||||||
private filterService: FilterService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Subscribe to filter changes
|
|
||||||
this.subscriptions.push(
|
|
||||||
this.filterService.filterState$.subscribe(filters => {
|
|
||||||
// When filters change, refresh the chart data
|
|
||||||
this.fetchChartData();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Initialize with default data
|
// Initialize with default data
|
||||||
this.fetchChartData();
|
this.fetchChartData();
|
||||||
}
|
}
|
||||||
@@ -56,12 +43,6 @@ export class PolarChartComponent implements OnInit, OnChanges {
|
|||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('PolarChartComponent input changes:', changes);
|
console.log('PolarChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -90,32 +71,6 @@ 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
|
||||||
@@ -130,324 +85,6 @@ export class PolarChartComponent implements OnInit, OnChanges {
|
|||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
private isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
|
||||||
private subscriptions: Subscription[] = [];
|
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchChartData(): void {
|
fetchChartData(): void {
|
||||||
// Set flag to prevent recursive calls
|
// Set flag to prevent recursive calls
|
||||||
this.isFetchingData = true;
|
this.isFetchingData = true;
|
||||||
@@ -480,49 +117,7 @@ export class PolarChartComponent implements OnInit, OnChanges {
|
|||||||
filterParams = JSON.stringify(filterObj);
|
filterParams = JSON.stringify(filterObj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log('Base filter parameters:', filterParams);
|
||||||
// Add common filters to filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
console.log('Common filters from service:', commonFilters);
|
|
||||||
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with base filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add base filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const baseFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, baseFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse base filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters using the field name as the key, not the filter id
|
|
||||||
Object.keys(commonFilters).forEach(filterId => {
|
|
||||||
const filterValue = commonFilters[filterId];
|
|
||||||
// Find the filter definition to get the field name
|
|
||||||
const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
|
|
||||||
if (filterDef && filterDef.field) {
|
|
||||||
const fieldName = filterDef.field;
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[fieldName] = filterValue;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback to using filterId as field name if no field is defined
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[filterId] = filterValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Final filter parameters:', filterParams);
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/polar?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/polar?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
@@ -537,12 +132,7 @@ 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;
|
||||||
@@ -555,54 +145,32 @@ 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) {
|
||||||
// Convert the data to the expected format for polar area charts
|
this.polarAreaChartData = data.chartData[0].data.map(value => {
|
||||||
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;
|
||||||
// Convert the data to the expected format for polar area charts
|
this.polarAreaChartData = data.data.map(value => {
|
||||||
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)
|
// Trigger change detection
|
||||||
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;
|
||||||
@@ -611,12 +179,7 @@ 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
|
||||||
@@ -626,12 +189,7 @@ 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;
|
||||||
}
|
}
|
||||||
@@ -661,12 +219,7 @@ 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -678,12 +231,7 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -739,35 +287,6 @@ export class PolarChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add common filters to drilldown filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with drilldown filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add drilldown filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const drilldownFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, drilldownFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse drilldown filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters
|
|
||||||
Object.keys(commonFilters).forEach(key => {
|
|
||||||
const value = commonFilters[key];
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
mergedFilterObj[key] = value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/polar?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/polar?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
console.log('Drilldown data URL:', url);
|
console.log('Drilldown data URL:', url);
|
||||||
@@ -781,40 +300,23 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle the actual data structure returned by the API
|
// Handle the actual data structure returned by the API
|
||||||
if (data && data.chartLabels && data.chartData) {
|
if (data && data.chartLabels && data.chartData) {
|
||||||
// For polar charts, we need to extract the data differently
|
// For polar charts, we need to extract the data differently
|
||||||
|
// The first dataset's data array contains the values for the polar chart
|
||||||
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) {
|
||||||
// Convert the data to the expected format for polar area charts
|
this.polarAreaChartData = data.chartData[0].data.map(value => {
|
||||||
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];
|
||||||
@@ -823,18 +325,10 @@ 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;
|
||||||
// Convert the data to the expected format for polar area charts
|
this.polarAreaChartData = data.data.map(value => {
|
||||||
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 });
|
||||||
@@ -842,24 +336,14 @@ 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
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -933,13 +417,13 @@ export class PolarChartComponent implements OnInit, OnChanges {
|
|||||||
// Get the label of the clicked element
|
// Get the label of the clicked element
|
||||||
const clickedLabel = this.polarAreaChartLabels[clickedIndex];
|
const clickedLabel = this.polarAreaChartLabels[clickedIndex];
|
||||||
|
|
||||||
console.log('Clicked on polar point:', { index: clickedIndex, label: clickedLabel });
|
console.log('Clicked on polar area:', { index: clickedIndex, label: clickedLabel });
|
||||||
|
|
||||||
// If we're not at the base level, store original data
|
// If we're not at the base level, store original data
|
||||||
if (this.currentDrilldownLevel === 0) {
|
if (this.currentDrilldownLevel === 0) {
|
||||||
// Store original data before entering drilldown mode
|
// Store original data before entering drilldown mode
|
||||||
this.originalPolarAreaChartLabels = [...this.polarAreaChartLabels];
|
this.originalPolarAreaChartLabels = [...this.polarAreaChartLabels];
|
||||||
this.originalPolarAreaChartData = JSON.parse(JSON.stringify(this.polarAreaChartData));
|
this.originalPolarAreaChartData = [...this.polarAreaChartData];
|
||||||
console.log('Stored original data for drilldown');
|
console.log('Stored original data for drilldown');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1007,12 +491,6 @@ export class PolarChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public chartHovered(e: any): void {
|
public chartHovered(e: any): void {
|
||||||
console.log('Polar chart hovered:', e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
ngOnDestroy(): void {
|
|
||||||
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
||||||
// Clean up document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,282 +1,13 @@
|
|||||||
<div style="display: block; height: 100%; width: 100%;">
|
<div style="display: block">
|
||||||
<!-- Filter Controls Section -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<!-- Base Filters -->
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
<button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<h4>Base Filters</h4>
|
Back to Level {{currentDrilldownLevel - 1}}
|
||||||
<div class="filter-controls">
|
</button>
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
<button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
Back to Main View
|
||||||
|
</button>
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'Radar Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No data message -->
|
<!-- No data message -->
|
||||||
@@ -285,7 +16,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Chart display -->
|
<!-- Chart display -->
|
||||||
<div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 50px);">
|
<div *ngIf="!noDataAvailable">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="radarChartData"
|
[datasets]="radarChartData"
|
||||||
[labels]="radarChartLabels"
|
[labels]="radarChartLabels"
|
||||||
|
|||||||
@@ -1,192 +0,0 @@
|
|||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,5 @@
|
|||||||
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
||||||
import { FilterService } from '../../common-filter/filter.service';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-radar-chart',
|
selector: 'app-radar-chart',
|
||||||
@@ -63,41 +61,16 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
|
|
||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
private isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
|
||||||
private subscriptions: Subscription[] = [];
|
|
||||||
|
|
||||||
// Add properties for filter functionality
|
constructor(private dashboardService: Dashboard3Service) { }
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private dashboardService: Dashboard3Service,
|
|
||||||
private filterService: FilterService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Subscribe to filter changes
|
|
||||||
this.subscriptions.push(
|
|
||||||
this.filterService.filterState$.subscribe(filters => {
|
|
||||||
// When filters change, refresh the chart data
|
|
||||||
this.fetchChartData();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
this.fetchChartData();
|
this.fetchChartData();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('RadarChartComponent input changes:', changes);
|
console.log('RadarChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -120,317 +93,7 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
this.fetchChartData();
|
this.fetchChartData();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchChartData(): void {
|
fetchChartData(): void {
|
||||||
// Set flag to prevent recursive calls
|
// Set flag to prevent recursive calls
|
||||||
this.isFetchingData = true;
|
this.isFetchingData = true;
|
||||||
@@ -463,49 +126,7 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
filterParams = JSON.stringify(filterObj);
|
filterParams = JSON.stringify(filterObj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log('Base filter parameters:', filterParams);
|
||||||
// Add common filters to filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
console.log('Common filters from service:', commonFilters);
|
|
||||||
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with base filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add base filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const baseFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, baseFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse base filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters using the field name as the key, not the filter id
|
|
||||||
Object.keys(commonFilters).forEach(filterId => {
|
|
||||||
const filterValue = commonFilters[filterId];
|
|
||||||
// Find the filter definition to get the field name
|
|
||||||
const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
|
|
||||||
if (filterDef && filterDef.field) {
|
|
||||||
const fieldName = filterDef.field;
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[fieldName] = filterValue;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback to using filterId as field name if no field is defined
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[filterId] = filterValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Final filter parameters:', filterParams);
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/radar?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/radar?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
@@ -677,35 +298,6 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add common filters to drilldown filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with drilldown filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add drilldown filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const drilldownFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, drilldownFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse drilldown filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters
|
|
||||||
Object.keys(commonFilters).forEach(key => {
|
|
||||||
const value = commonFilters[key];
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
mergedFilterObj[key] = value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/radar?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/radar?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
console.log('Drilldown data URL:', url);
|
console.log('Drilldown data URL:', url);
|
||||||
@@ -729,6 +321,7 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
this.noDataAvailable = data.chartLabels.length === 0;
|
this.noDataAvailable = data.chartLabels.length === 0;
|
||||||
this.radarChartLabels = data.chartLabels;
|
this.radarChartLabels = data.chartLabels;
|
||||||
// For radar charts, we need to ensure the data is properly formatted
|
// For radar charts, we need to ensure the data is properly formatted
|
||||||
|
// Each dataset should have a data array with numeric values
|
||||||
this.radarChartData = data.chartData.map(dataset => ({
|
this.radarChartData = data.chartData.map(dataset => ({
|
||||||
...dataset,
|
...dataset,
|
||||||
data: dataset.data ? dataset.data.map(value => {
|
data: dataset.data ? dataset.data.map(value => {
|
||||||
@@ -765,7 +358,6 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
this.noDataAvailable = true;
|
this.noDataAvailable = true;
|
||||||
this.radarChartLabels = [];
|
this.radarChartLabels = [];
|
||||||
this.radarChartData = [];
|
this.radarChartData = [];
|
||||||
// Keep current data in case of error
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -844,7 +436,7 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
if (this.currentDrilldownLevel === 0) {
|
if (this.currentDrilldownLevel === 0) {
|
||||||
// Store original data before entering drilldown mode
|
// Store original data before entering drilldown mode
|
||||||
this.originalRadarChartLabels = [...this.radarChartLabels];
|
this.originalRadarChartLabels = [...this.radarChartLabels];
|
||||||
this.originalRadarChartData = JSON.parse(JSON.stringify(this.radarChartData));
|
this.originalRadarChartData = [...this.radarChartData];
|
||||||
console.log('Stored original data for drilldown');
|
console.log('Stored original data for drilldown');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -912,12 +504,6 @@ export class RadarChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public chartHovered(e: any): void {
|
public chartHovered(e: any): void {
|
||||||
console.log('Radar chart hovered:', e);
|
console.log(e);
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
|
||||||
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
||||||
// Clean up document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,282 +1,13 @@
|
|||||||
<div style="display: block; height: 100%; width: 100%;">
|
<div style="display: block">
|
||||||
<!-- Filter Controls Section -->
|
<!-- Drilldown mode indicator -->
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
|
||||||
<!-- Base Filters -->
|
<span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
<button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<h4>Base Filters</h4>
|
Back to Level {{currentDrilldownLevel - 1}}
|
||||||
<div class="filter-controls">
|
</button>
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
<button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
Back to Main View
|
||||||
|
</button>
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'Scatter Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No data message -->
|
<!-- No data message -->
|
||||||
@@ -285,10 +16,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Chart display -->
|
<!-- Chart display -->
|
||||||
<div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 70px); min-height: 300px;">
|
<div *ngIf="!noDataAvailable">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="scatterChartData"
|
[datasets]="scatterChartData"
|
||||||
[options]="scatterChartOptions"
|
|
||||||
[type]="scatterChartType"
|
[type]="scatterChartType"
|
||||||
(chartHover)="chartHovered($event)"
|
(chartHover)="chartHovered($event)"
|
||||||
(chartClick)="chartClicked($event)">
|
(chartClick)="chartClicked($event)">
|
||||||
|
|||||||
@@ -1,192 +0,0 @@
|
|||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +1,6 @@
|
|||||||
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
import { ChartData,ChartDataset,ChartOptions } from 'chart.js';
|
import { ChartData,ChartDataset } from 'chart.js';
|
||||||
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
||||||
import { FilterService } from '../../common-filter/filter.service';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-scatter-chart',
|
selector: 'app-scatter-chart',
|
||||||
@@ -36,20 +34,9 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
// Multi-layer drilldown configuration inputs
|
// Multi-layer drilldown configuration inputs
|
||||||
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
||||||
|
|
||||||
constructor(
|
constructor(private dashboardService: Dashboard3Service) { }
|
||||||
private dashboardService: Dashboard3Service,
|
|
||||||
private filterService: FilterService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Subscribe to filter changes
|
|
||||||
this.subscriptions.push(
|
|
||||||
this.filterService.filterState$.subscribe(filters => {
|
|
||||||
// When filters change, refresh the chart data
|
|
||||||
this.fetchChartData();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Initialize with default data
|
// Initialize with default data
|
||||||
this.fetchChartData();
|
this.fetchChartData();
|
||||||
}
|
}
|
||||||
@@ -57,12 +44,6 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('ScatterChartComponent input changes:', changes);
|
console.log('ScatterChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -113,89 +94,6 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
public scatterChartOptions: any = {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: 'linear',
|
|
||||||
position: 'bottom',
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'X Axis'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
autoSkip: true,
|
|
||||||
maxTicksLimit: 10,
|
|
||||||
callback: function(value: any) {
|
|
||||||
if (typeof value === 'number') {
|
|
||||||
// Format large numbers for better readability
|
|
||||||
if (Math.abs(value) >= 1000000) {
|
|
||||||
return (value / 1000000).toFixed(1) + 'M';
|
|
||||||
} else if (Math.abs(value) >= 1000) {
|
|
||||||
return (value / 1000).toFixed(1) + 'K';
|
|
||||||
}
|
|
||||||
return value.toString();
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
display: true,
|
|
||||||
color: 'rgba(0, 0, 0, 0.1)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Y Axis'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
autoSkip: true,
|
|
||||||
maxTicksLimit: 10,
|
|
||||||
callback: function(value: any) {
|
|
||||||
if (typeof value === 'number') {
|
|
||||||
// Format large numbers for better readability
|
|
||||||
if (Math.abs(value) >= 1000000) {
|
|
||||||
return (value / 1000000).toFixed(1) + 'M';
|
|
||||||
} else if (Math.abs(value) >= 1000) {
|
|
||||||
return (value / 1000).toFixed(1) + 'K';
|
|
||||||
}
|
|
||||||
return value.toString();
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
display: true,
|
|
||||||
color: 'rgba(0, 0, 0, 0.1)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: true,
|
|
||||||
position: 'top',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
callbacks: {
|
|
||||||
label: function(context: any) {
|
|
||||||
return `(${context.parsed.x}, ${context.parsed.y})`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
padding: {
|
|
||||||
left: 15,
|
|
||||||
right: 15,
|
|
||||||
top: 15,
|
|
||||||
bottom: 60 // Add padding at the bottom to ensure X-axis visibility
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
public scatterChartType: string = 'scatter';
|
public scatterChartType: string = 'scatter';
|
||||||
|
|
||||||
// Multi-layer drilldown state tracking
|
// Multi-layer drilldown state tracking
|
||||||
@@ -209,417 +107,6 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
// Flag to prevent infinite loops
|
// Flag to prevent infinite loops
|
||||||
private isFetchingData: boolean = false;
|
private isFetchingData: boolean = false;
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
|
||||||
private subscriptions: Subscription[] = [];
|
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchChartData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transform data to scatter chart format
|
|
||||||
private transformToScatterData(labels: any[], data: any[]): ChartDataset[] {
|
|
||||||
// For scatter charts, we need to transform the data into scatter format
|
|
||||||
// Scatter charts expect data in the format: {x: number, y: number}
|
|
||||||
console.log('Transforming data to scatter format:', { labels, data });
|
|
||||||
|
|
||||||
// If we have the expected scatter data format, return it as is
|
|
||||||
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') &&
|
|
||||||
data[0].data[0].hasOwnProperty('y')) {
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transform the data properly for scatter chart
|
|
||||||
// Assuming labels are x-values and data[0].data are y-values
|
|
||||||
if (labels && data && data.length > 0 && data[0].data) {
|
|
||||||
const yValues = data[0].data;
|
|
||||||
const label = data[0].label || 'Dataset 1';
|
|
||||||
|
|
||||||
// Create scatter points from labels (x) and data (y)
|
|
||||||
const scatterPoints = [];
|
|
||||||
const minLength = Math.min(labels.length, yValues.length);
|
|
||||||
|
|
||||||
for (let i = 0; i < minLength; i++) {
|
|
||||||
// Convert to numbers if they're strings
|
|
||||||
const x = typeof labels[i] === 'string' ? parseFloat(labels[i]) : labels[i];
|
|
||||||
const y = typeof yValues[i] === 'string' ? parseFloat(yValues[i]) : yValues[i];
|
|
||||||
|
|
||||||
// Only add valid points
|
|
||||||
if (!isNaN(x) && !isNaN(y)) {
|
|
||||||
scatterPoints.push({ x, y });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate different colors for each point to avoid all points showing the same color
|
|
||||||
const backgroundColors = [];
|
|
||||||
const borderColors = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < scatterPoints.length; i++) {
|
|
||||||
// Generate a color based on the point index for variety
|
|
||||||
const hue = (i * 137.508) % 360; // Use golden angle to spread colors
|
|
||||||
backgroundColors.push(`hsla(${hue}, 70%, 50%, 0.6)`);
|
|
||||||
borderColors.push(`hsla(${hue}, 70%, 40%, 1)`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a single dataset with all scatter points
|
|
||||||
const scatterDatasets: ChartDataset[] = [
|
|
||||||
{
|
|
||||||
data: scatterPoints,
|
|
||||||
label: label,
|
|
||||||
pointRadius: 8,
|
|
||||||
pointHoverRadius: 10,
|
|
||||||
backgroundColor: backgroundColors,
|
|
||||||
borderColor: borderColors,
|
|
||||||
borderWidth: 1,
|
|
||||||
pointHoverBackgroundColor: 'rgba(255, 99, 132, 1)',
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
console.log('Transformed scatter data:', scatterDatasets);
|
|
||||||
return scatterDatasets;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Otherwise, create a default scatter dataset
|
|
||||||
const scatterDatasets: ChartDataset[] = [
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
{ x: 1, y: 1 },
|
|
||||||
{ x: 2, y: 3 },
|
|
||||||
{ x: 3, y: -2 },
|
|
||||||
{ x: 4, y: 4 },
|
|
||||||
{ x: 5, y: -3 },
|
|
||||||
],
|
|
||||||
label: 'Dataset 1',
|
|
||||||
pointRadius: 10,
|
|
||||||
backgroundColor: [
|
|
||||||
'red',
|
|
||||||
'green',
|
|
||||||
'blue',
|
|
||||||
'purple',
|
|
||||||
'yellow',
|
|
||||||
'brown',
|
|
||||||
'magenta',
|
|
||||||
'cyan',
|
|
||||||
'orange',
|
|
||||||
'pink'
|
|
||||||
],
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return scatterDatasets;
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchChartData(): void {
|
fetchChartData(): void {
|
||||||
// Set flag to prevent recursive calls
|
// Set flag to prevent recursive calls
|
||||||
this.isFetchingData = true;
|
this.isFetchingData = true;
|
||||||
@@ -652,49 +139,7 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
filterParams = JSON.stringify(filterObj);
|
filterParams = JSON.stringify(filterObj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log('Base filter parameters:', filterParams);
|
||||||
// Add common filters to filter parameters
|
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
|
||||||
console.log('Common filters from service:', commonFilters);
|
|
||||||
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with base filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add base filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const baseFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, baseFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse base filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters using the field name as the key, not the filter id
|
|
||||||
Object.keys(commonFilters).forEach(filterId => {
|
|
||||||
const filterValue = commonFilters[filterId];
|
|
||||||
// Find the filter definition to get the field name
|
|
||||||
const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
|
|
||||||
if (filterDef && filterDef.field) {
|
|
||||||
const fieldName = filterDef.field;
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[fieldName] = filterValue;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback to using filterId as field name if no field is defined
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[filterId] = filterValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Final filter parameters:', filterParams);
|
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/scatter?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/scatter?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
@@ -720,19 +165,11 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
// Scatter charts expect data in the format: {x: number, y: number}
|
// Scatter charts expect data in the format: {x: number, y: number}
|
||||||
this.noDataAvailable = data.chartLabels.length === 0;
|
this.noDataAvailable = data.chartLabels.length === 0;
|
||||||
this.scatterChartData = this.transformToScatterData(data.chartLabels, data.chartData);
|
this.scatterChartData = this.transformToScatterData(data.chartLabels, data.chartData);
|
||||||
|
|
||||||
// Update chart options with axis titles
|
|
||||||
this.updateChartOptionsWithAxisTitles();
|
|
||||||
|
|
||||||
console.log('Updated scatter chart with data:', this.scatterChartData);
|
console.log('Updated scatter chart with data:', this.scatterChartData);
|
||||||
} 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;
|
this.noDataAvailable = data.labels.length === 0;
|
||||||
this.scatterChartData = data.datasets;
|
this.scatterChartData = data.datasets;
|
||||||
|
|
||||||
// Update chart options with axis titles
|
|
||||||
this.updateChartOptionsWithAxisTitles();
|
|
||||||
|
|
||||||
console.log('Updated scatter chart with legacy data format:', this.scatterChartData);
|
console.log('Updated scatter chart with legacy data format:', this.scatterChartData);
|
||||||
} else {
|
} else {
|
||||||
console.warn('Scatter chart received data does not have expected structure', data);
|
console.warn('Scatter chart received data does not have expected structure', data);
|
||||||
@@ -760,20 +197,6 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update chart options with axis titles
|
|
||||||
private updateChartOptionsWithAxisTitles(): void {
|
|
||||||
// Update X axis title
|
|
||||||
if (this.scatterChartOptions.scales && this.scatterChartOptions.scales.x) {
|
|
||||||
this.scatterChartOptions.scales.x.title.text = this.xAxis || 'X Axis';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update Y axis title
|
|
||||||
if (this.scatterChartOptions.scales && this.scatterChartOptions.scales.y) {
|
|
||||||
const yAxisLabel = Array.isArray(this.yAxis) ? this.yAxis[0] : this.yAxis;
|
|
||||||
this.scatterChartOptions.scales.y.title.text = yAxisLabel || 'Y Axis';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fetch drilldown data based on current drilldown level
|
// Fetch drilldown data based on current drilldown level
|
||||||
fetchDrilldownData(): void {
|
fetchDrilldownData(): void {
|
||||||
console.log('Fetching drilldown data, current level:', this.currentDrilldownLevel);
|
console.log('Fetching drilldown data, current level:', this.currentDrilldownLevel);
|
||||||
@@ -864,34 +287,24 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add common filters to drilldown filter parameters
|
// Convert drilldownFilters to filter parameters for drilldown level
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
let drilldownFilterParams = '';
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
if (this.drilldownFilters && this.drilldownFilters.length > 0) {
|
||||||
// Merge common filters with drilldown filters
|
const filterObj = {};
|
||||||
const mergedFilterObj = {};
|
this.drilldownFilters.forEach(filter => {
|
||||||
|
if (filter.field && filter.value) {
|
||||||
// Add drilldown filters first
|
filterObj[filter.field] = filter.value;
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const drilldownFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, drilldownFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse drilldown filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters
|
|
||||||
Object.keys(commonFilters).forEach(key => {
|
|
||||||
const value = commonFilters[key];
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
mergedFilterObj[key] = value;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
if (Object.keys(filterObj).length > 0) {
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
drilldownFilterParams = JSON.stringify(filterObj);
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log('Drilldown filter parameters:', drilldownFilterParams);
|
||||||
|
|
||||||
|
// Use drilldown filters if available, otherwise use layer filters
|
||||||
|
const finalFilterParams = drilldownFilterParams || filterParams;
|
||||||
|
console.log('Final filter parameters:', finalFilterParams);
|
||||||
|
|
||||||
// Log the URL that will be called
|
// Log the URL that will be called
|
||||||
const url = `chart/getdashjson/scatter?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
const url = `chart/getdashjson/scatter?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
|
||||||
@@ -899,7 +312,7 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
|
|
||||||
// Fetch data from the dashboard service with parameter field and value
|
// Fetch data from the dashboard service with parameter field and value
|
||||||
// Backend handles filtering, we just pass the parameter field and value
|
// Backend handles filtering, we just pass the parameter field and value
|
||||||
this.dashboardService.getChartData(actualApiUrl, 'scatter', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
|
this.dashboardService.getChartData(actualApiUrl, 'scatter', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
|
||||||
(data: any) => {
|
(data: any) => {
|
||||||
console.log('Received drilldown data:', data);
|
console.log('Received drilldown data:', data);
|
||||||
if (data === null) {
|
if (data === null) {
|
||||||
@@ -912,6 +325,7 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
// Handle the actual data structure returned by the API
|
// Handle the actual data structure returned by the API
|
||||||
if (data && data.chartLabels && data.chartData) {
|
if (data && data.chartLabels && data.chartData) {
|
||||||
// For scatter charts, we need to transform the data into scatter format
|
// For scatter charts, we need to transform the data into scatter format
|
||||||
|
// Scatter charts expect data in the format: {x: number, y: number}
|
||||||
this.noDataAvailable = data.chartLabels.length === 0;
|
this.noDataAvailable = data.chartLabels.length === 0;
|
||||||
this.scatterChartData = this.transformToScatterData(data.chartLabels, data.chartData);
|
this.scatterChartData = this.transformToScatterData(data.chartLabels, data.chartData);
|
||||||
console.log('Updated scatter chart with drilldown data:', this.scatterChartData);
|
console.log('Updated scatter chart with drilldown data:', this.scatterChartData);
|
||||||
@@ -935,6 +349,33 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Transform chart data to scatter chart format
|
||||||
|
private transformToScatterData(labels: string[], datasets: any[]): ChartDataset[] {
|
||||||
|
// For scatter charts, we need to transform the data into scatter format
|
||||||
|
// Scatter charts expect data in the format: {x: number, y: number}
|
||||||
|
|
||||||
|
// This is a simple transformation - in a real implementation, you might want to
|
||||||
|
// create a more sophisticated mapping based on your data structure
|
||||||
|
return datasets.map((dataset, index) => {
|
||||||
|
// Create scatter data points
|
||||||
|
const scatterData = labels.map((label, i) => {
|
||||||
|
// Use x-axis data as x coordinate, y-axis data as y coordinate
|
||||||
|
const xValue = dataset.data[i] || 0;
|
||||||
|
const yValue = i < datasets.length ? (datasets[i].data[index] || 0) : 0;
|
||||||
|
|
||||||
|
return { x: xValue, y: yValue };
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: scatterData,
|
||||||
|
label: dataset.label || `Dataset ${index + 1}`,
|
||||||
|
backgroundColor: dataset.backgroundColor || `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`,
|
||||||
|
borderColor: dataset.borderColor || 'rgba(0, 0, 0, 1)',
|
||||||
|
pointRadius: dataset.pointRadius || 5
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Reset to original data (go back to base level)
|
// Reset to original data (go back to base level)
|
||||||
resetToOriginalData(): void {
|
resetToOriginalData(): void {
|
||||||
console.log('Resetting to original data');
|
console.log('Resetting to original data');
|
||||||
@@ -995,18 +436,16 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
// Get the index of the clicked element
|
// Get the index of the clicked element
|
||||||
const clickedIndex = e.active[0].index;
|
const clickedIndex = e.active[0].index;
|
||||||
|
|
||||||
// Get the dataset index
|
// Get the label of the clicked element
|
||||||
const datasetIndex = e.active[0].datasetIndex;
|
// For scatter charts, we might not have labels in the same way as other charts
|
||||||
|
const clickedLabel = `Point ${clickedIndex}`;
|
||||||
|
|
||||||
// Get the data point
|
console.log('Clicked on scatter point:', { index: clickedIndex, label: clickedLabel });
|
||||||
const dataPoint = this.scatterChartData[datasetIndex].data[clickedIndex];
|
|
||||||
|
|
||||||
console.log('Clicked on scatter point:', { datasetIndex, clickedIndex, dataPoint });
|
|
||||||
|
|
||||||
// If we're not at the base level, store original data
|
// If we're not at the base level, store original data
|
||||||
if (this.currentDrilldownLevel === 0) {
|
if (this.currentDrilldownLevel === 0) {
|
||||||
// Store original data before entering drilldown mode
|
// Store original data before entering drilldown mode
|
||||||
this.originalScatterChartData = JSON.parse(JSON.stringify(this.scatterChartData));
|
this.originalScatterChartData = [...this.scatterChartData];
|
||||||
console.log('Stored original data for drilldown');
|
console.log('Stored original data for drilldown');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1048,10 +487,9 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
// Add this click to the drilldown stack
|
// Add this click to the drilldown stack
|
||||||
const stackEntry = {
|
const stackEntry = {
|
||||||
level: nextDrilldownLevel,
|
level: nextDrilldownLevel,
|
||||||
datasetIndex: datasetIndex,
|
|
||||||
clickedIndex: clickedIndex,
|
clickedIndex: clickedIndex,
|
||||||
dataPoint: dataPoint,
|
clickedLabel: clickedLabel,
|
||||||
clickedValue: dataPoint // Using data point as value for now
|
clickedValue: clickedLabel // Using label as value for now
|
||||||
};
|
};
|
||||||
|
|
||||||
this.drilldownStack.push(stackEntry);
|
this.drilldownStack.push(stackEntry);
|
||||||
@@ -1075,12 +513,6 @@ export class ScatterChartComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public chartHovered(e: any): void {
|
public chartHovered(e: any): void {
|
||||||
console.log('Scatter chart hovered:', e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
ngOnDestroy(): void {
|
|
||||||
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
||||||
// Clean up document click handler
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,307 +1,27 @@
|
|||||||
<div class="to-do-chart-container">
|
<table class="table">
|
||||||
<!-- Filter Controls Section -->
|
<thead>
|
||||||
<div class="filter-section" *ngIf="hasActiveFilters()">
|
<th class="c-col">#</th>
|
||||||
<!-- Base Filters -->
|
<th>Item</th>
|
||||||
<div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
|
<th></th>
|
||||||
<h4>Base Filters</h4>
|
</thead>
|
||||||
<div class="filter-controls">
|
<tr class="ui basic segment" *ngFor="let todo of todoList; let i = index">
|
||||||
<div *ngFor="let filter of baseFilters" class="filter-item">
|
<td class="c-col">{{i + 1}}</td>
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
<td>{{todo}}</td>
|
||||||
|
<td style="text-align:right">
|
||||||
<!-- Text Filter -->
|
<a routerLink="." (click)="removeTodo(i)">
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
<clr-icon shape="times"></clr-icon>
|
||||||
<input type="text"
|
</a>
|
||||||
[(ngModel)]="filter.value"
|
</td>
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
</tr>
|
||||||
[placeholder]="filter.field"
|
<tr>
|
||||||
class="clr-input filter-text-input">
|
<td></td>
|
||||||
</div>
|
<td>
|
||||||
|
<input [(ngModel)]="todo" placeholder="Add Todo" class="clr-input">
|
||||||
<!-- Dropdown Filter -->
|
</td>
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
<td style="text-align:right">
|
||||||
<select [(ngModel)]="filter.value"
|
<a routerLink="." color='primary' (click)="addTodo(todo)">
|
||||||
(ngModelChange)="onBaseFilterChange(filter)"
|
<clr-icon shape="plus"></clr-icon>
|
||||||
class="clr-select filter-select">
|
</a>
|
||||||
<option value="">Select {{ filter.field }}</option>
|
</td>
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
</tr>
|
||||||
</select>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'base-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
|
|
||||||
<h4>Drilldown Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of drilldownFilters" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'drilldown-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filter-group" *ngIf="hasActiveLayerFilters()">
|
|
||||||
<h4>Layer Filters</h4>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
|
|
||||||
<div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
|
|
||||||
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
|
|
||||||
<input type="text"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
[placeholder]="filter.field"
|
|
||||||
class="clr-input filter-text-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-input">
|
|
||||||
<select [(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="clr-select filter-select">
|
|
||||||
<option value="">Select {{ filter.field }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span class="multiselect-label">{{ filter.field }}</span>
|
|
||||||
<span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
|
|
||||||
({{ getSelectedOptionsCount(filter) }} selected)
|
|
||||||
</span>
|
|
||||||
<clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
[id]="'layer-' + filter.field + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
|
|
||||||
<div class="date-input-group">
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.start"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
|
|
||||||
placeholder="Start Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
<span class="date-separator">to</span>
|
|
||||||
<input type="date"
|
|
||||||
[(ngModel)]="filter.value.end"
|
|
||||||
(ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
|
|
||||||
placeholder="End Date"
|
|
||||||
class="clr-input filter-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
|
|
||||||
<input type="checkbox"
|
|
||||||
[(ngModel)]="filter.value"
|
|
||||||
(ngModelChange)="onToggleChange(filter, $event)"
|
|
||||||
clrToggle
|
|
||||||
class="clr-toggle">
|
|
||||||
<label class="toggle-label">{{ filter.field }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header row with chart title and drilldown navigation -->
|
|
||||||
<div class="clr-row header-row">
|
|
||||||
<div class="clr-col-6">
|
|
||||||
<h3 class="chart-title">{{charttitle || 'To Do Chart'}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-6" style="text-align: right;">
|
|
||||||
<!-- Add drilldown navigation controls -->
|
|
||||||
<button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
|
|
||||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
|
||||||
Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Show current drilldown level -->
|
|
||||||
<div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
|
|
||||||
<div class="clr-col-12">
|
|
||||||
<div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
|
|
||||||
<div class="alert-items">
|
|
||||||
<div class="alert-item static">
|
|
||||||
<div class="alert-icon-wrapper">
|
|
||||||
<cds-icon class="alert-icon" shape="info-circle"></cds-icon>
|
|
||||||
</div>
|
|
||||||
<span class="alert-text">
|
|
||||||
Drilldown Level: {{currentDrilldownLevel}}
|
|
||||||
<span *ngIf="drilldownStack.length > 0">
|
|
||||||
(Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Existing content -->
|
|
||||||
<div class="todo-table-container">
|
|
||||||
<table class="table todo-table">
|
|
||||||
<thead>
|
|
||||||
<th class="c-col">#</th>
|
|
||||||
<th>Item</th>
|
|
||||||
<th></th>
|
|
||||||
</thead>
|
|
||||||
<tr class="ui basic segment" *ngFor="let todo of todoList; let i = index">
|
|
||||||
<td class="c-col">{{i + 1}}</td>
|
|
||||||
<td>{{todo}}</td>
|
|
||||||
<td style="text-align:right">
|
|
||||||
<a (click)="removeTodo(i)" class="remove-button">
|
|
||||||
<clr-icon shape="times"></clr-icon>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="add-todo-section">
|
|
||||||
<input [(ngModel)]="todo" (keyup.enter)="addTodo(todo)" placeholder="Add Todo" class="clr-input todo-input">
|
|
||||||
<button (click)="addTodo(todo)" class="btn btn-primary add-button">
|
|
||||||
<clr-icon shape="plus"></clr-icon> Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,289 +0,0 @@
|
|||||||
// To Do Chart specific styles
|
|
||||||
.to-do-chart-container {
|
|
||||||
padding: 20px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-table-container {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 400px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 20px; // Add margin at the bottom for spacing
|
|
||||||
|
|
||||||
.todo-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: 12px;
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
font-weight: bold;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-col {
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add padding at the bottom of the table body
|
|
||||||
tbody {
|
|
||||||
tr:last-child td {
|
|
||||||
padding-bottom: 20px; // Extra padding for the last row
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-todo-section {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 15px;
|
|
||||||
padding: 20px; // Increased padding all around
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
|
|
||||||
.todo-input {
|
|
||||||
flex: 1;
|
|
||||||
padding: 12px; // Increased padding for better touch targets
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-button {
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 12px 20px; // Increased padding for better touch targets
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 8px; // Increased padding for better touch targets
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #dc3545;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #555;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.filter-text-input,
|
|
||||||
.filter-select,
|
|
||||||
.filter-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 34px;
|
|
||||||
|
|
||||||
.multiselect-label {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-value {
|
|
||||||
color: #666;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 0;
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// New header row styling
|
|
||||||
.header-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive design
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filter-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-row {
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-todo-section {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.to-do-chart-container {
|
|
||||||
padding: 15px; // Adjust padding for mobile
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,4 @@
|
|||||||
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
|
||||||
import { FilterService } from '../../common-filter/filter.service';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-to-do-chart',
|
selector: 'app-to-do-chart',
|
||||||
@@ -24,49 +21,15 @@ export class ToDoChartComponent implements OnInit, OnChanges {
|
|||||||
@Input() datasource: string;
|
@Input() datasource: string;
|
||||||
@Input() fieldName: string;
|
@Input() fieldName: string;
|
||||||
@Input() connection: number; // Add connection input
|
@Input() connection: number; // Add connection input
|
||||||
// Drilldown configuration inputs
|
|
||||||
@Input() drilldownEnabled: boolean = false;
|
|
||||||
@Input() drilldownApiUrl: string;
|
|
||||||
@Input() drilldownXAxis: string;
|
|
||||||
@Input() drilldownYAxis: string;
|
|
||||||
@Input() drilldownParameter: string; // Add drilldown parameter input
|
|
||||||
@Input() baseFilters: any[] = []; // Add base filters input
|
|
||||||
@Input() drilldownFilters: any[] = []; // Add drilldown filters input
|
|
||||||
// Multi-layer drilldown configuration inputs
|
|
||||||
@Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
|
|
||||||
|
|
||||||
// Multi-layer drilldown state tracking
|
|
||||||
drilldownStack: any[] = []; // Stack to track drilldown navigation history
|
|
||||||
currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
|
|
||||||
originalTodoList: string[] = [];
|
|
||||||
|
|
||||||
constructor(
|
constructor() { }
|
||||||
private dashboardService: Dashboard3Service,
|
|
||||||
private filterService: FilterService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Subscribe to filter changes
|
|
||||||
this.subscriptions.push(
|
|
||||||
this.filterService.filterState$.subscribe(filters => {
|
|
||||||
// When filters change, refresh the chart data
|
|
||||||
this.fetchToDoData();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Initialize with default data
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('ToDoChartComponent input changes:', changes);
|
console.log('ToDoChartComponent input changes:', changes);
|
||||||
|
|
||||||
// Initialize filter values if they haven't been initialized yet
|
|
||||||
if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
|
|
||||||
this.initializeFilterValues();
|
|
||||||
this.filtersInitialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any of the key properties have changed
|
// Check if any of the key properties have changed
|
||||||
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
|
||||||
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
|
||||||
@@ -83,119 +46,26 @@ export class ToDoChartComponent implements OnInit, OnChanges {
|
|||||||
|
|
||||||
data: any;
|
data: any;
|
||||||
todo: string;
|
todo: string;
|
||||||
todoList: string[] = [];
|
todoList = ['todo 1'];
|
||||||
|
|
||||||
// Add properties for filter functionality
|
|
||||||
private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
|
|
||||||
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
|
|
||||||
private filtersInitialized: boolean = false;
|
|
||||||
|
|
||||||
// Subscriptions to unsubscribe on destroy
|
|
||||||
private subscriptions: Subscription[] = [];
|
|
||||||
|
|
||||||
fetchToDoData(): void {
|
fetchToDoData(): void {
|
||||||
// If we have the necessary data, fetch to-do data from the service
|
// If we have the necessary data, fetch to-do data from the service
|
||||||
if (this.table && this.xAxis) {
|
if (this.table) {
|
||||||
console.log('Fetching to-do data for:', { table: this.table, xAxis: this.xAxis, connection: this.connection });
|
console.log('Fetching to-do data for:', { table: this.table });
|
||||||
|
|
||||||
// Convert baseFilters to filter parameters
|
// For to-do chart, we might want to fetch data differently
|
||||||
let filterParams = '';
|
// This is a placeholder implementation - you may need to adjust based on your API
|
||||||
if (this.baseFilters && this.baseFilters.length > 0) {
|
console.log('To-do chart would fetch data from table:', this.table);
|
||||||
const filterObj = {};
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.field && filter.value) {
|
|
||||||
filterObj[filter.field] = filter.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (Object.keys(filterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(filterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters to filter parameters
|
// In a real implementation, you would connect to your service here
|
||||||
const commonFilters = this.filterService.getFilterValues();
|
// For now, we'll just keep the default to-do list
|
||||||
console.log('Common filters from service:', commonFilters);
|
|
||||||
|
|
||||||
if (Object.keys(commonFilters).length > 0) {
|
|
||||||
// Merge common filters with base filters
|
|
||||||
const mergedFilterObj = {};
|
|
||||||
|
|
||||||
// Add base filters first
|
|
||||||
if (filterParams) {
|
|
||||||
try {
|
|
||||||
const baseFilterObj = JSON.parse(filterParams);
|
|
||||||
Object.assign(mergedFilterObj, baseFilterObj);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to parse base filter parameters:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add common filters using the field name as the key, not the filter id
|
|
||||||
Object.keys(commonFilters).forEach(filterId => {
|
|
||||||
const filterValue = commonFilters[filterId];
|
|
||||||
// Find the filter definition to get the field name
|
|
||||||
const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
|
|
||||||
if (filterDef && filterDef.field) {
|
|
||||||
const fieldName = filterDef.field;
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[fieldName] = filterValue;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback to using filterId as field name if no field is defined
|
|
||||||
if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
|
|
||||||
mergedFilterObj[filterId] = filterValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(mergedFilterObj).length > 0) {
|
|
||||||
filterParams = JSON.stringify(mergedFilterObj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Final filter parameters:', filterParams);
|
|
||||||
|
|
||||||
// Fetch data from the dashboard service
|
|
||||||
this.dashboardService.getChartData(this.table, 'todo', this.xAxis, '', this.connection, '', '', filterParams).subscribe(
|
|
||||||
(data: any) => {
|
|
||||||
console.log('Received to-do chart data:', data);
|
|
||||||
if (data === null) {
|
|
||||||
console.warn('To-do chart API returned null data. Check if the API endpoint is working correctly.');
|
|
||||||
this.todoList = [];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle the actual data structure returned by the API
|
|
||||||
if (data && data.chartLabels) {
|
|
||||||
// Use chartLabels as the todo items
|
|
||||||
this.todoList = data.chartLabels;
|
|
||||||
} else if (data && data.labels) {
|
|
||||||
// Fallback to labels if chartLabels is not available
|
|
||||||
this.todoList = data.labels;
|
|
||||||
} else {
|
|
||||||
console.warn('To-do chart received data does not have expected structure', data);
|
|
||||||
this.todoList = [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
console.error('Error fetching to-do chart data:', error);
|
|
||||||
this.todoList = [];
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
console.log('Missing required data for to-do chart:', { table: this.table, xAxis: this.xAxis });
|
console.log('Missing required data for to-do chart:', { table: this.table });
|
||||||
// Initialize with default data if no table is specified
|
|
||||||
if (this.todoList.length === 0) {
|
|
||||||
this.todoList = ['Sample Task 1', 'Sample Task 2', 'Sample Task 3'];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public addTodo(todo: string) {
|
public addTodo(todo: string) {
|
||||||
if (todo && todo.trim() !== '') {
|
this.todoList.push(todo);
|
||||||
this.todoList.push(todo.trim());
|
|
||||||
this.todo = ''; // Clear the input field
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public removeTodo(todoIx: number) {
|
public removeTodo(todoIx: number) {
|
||||||
@@ -203,353 +73,4 @@ export class ToDoChartComponent implements OnInit, OnChanges {
|
|||||||
this.todoList.splice(todoIx, 1);
|
this.todoList.splice(todoIx, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Navigate back to previous drilldown level
|
|
||||||
navigateBack(): void {
|
|
||||||
console.log('Navigating back, current stack:', this.drilldownStack);
|
|
||||||
console.log('Current level:', this.currentDrilldownLevel);
|
|
||||||
|
|
||||||
if (this.drilldownStack.length > 0) {
|
|
||||||
// Remove the last entry from the stack
|
|
||||||
const removedEntry = this.drilldownStack.pop();
|
|
||||||
console.log('Removed entry from stack:', removedEntry);
|
|
||||||
|
|
||||||
// Update the current drilldown level
|
|
||||||
this.currentDrilldownLevel = this.drilldownStack.length;
|
|
||||||
console.log('New level after pop:', this.currentDrilldownLevel);
|
|
||||||
console.log('Stack after pop:', this.drilldownStack);
|
|
||||||
|
|
||||||
if (this.drilldownStack.length > 0) {
|
|
||||||
// Fetch data for the previous level
|
|
||||||
console.log('Fetching data for previous level');
|
|
||||||
this.fetchToDoData();
|
|
||||||
} else {
|
|
||||||
// Back to base level
|
|
||||||
console.log('Back to base level, resetting to original data');
|
|
||||||
this.todoList = [...this.originalTodoList];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Already at base level, reset to original data
|
|
||||||
console.log('Already at base level, resetting to original data');
|
|
||||||
this.todoList = [...this.originalTodoList];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize filter values with proper default values based on type
|
|
||||||
private initializeFilterValues(): void {
|
|
||||||
console.log('Initializing filter values');
|
|
||||||
|
|
||||||
// Initialize base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.value === undefined || filter.value === null) {
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'multiselect':
|
|
||||||
filter.value = [];
|
|
||||||
break;
|
|
||||||
case 'date-range':
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
filter.value = false;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filter values initialized:', {
|
|
||||||
baseFilters: this.baseFilters,
|
|
||||||
drilldownFilters: this.drilldownFilters,
|
|
||||||
drilldownLayers: this.drilldownLayers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active filters
|
|
||||||
hasActiveFilters(): boolean {
|
|
||||||
return (this.baseFilters && this.baseFilters.length > 0) ||
|
|
||||||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
|
|
||||||
this.hasActiveLayerFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if there are active layer filters for current drilldown level
|
|
||||||
hasActiveLayerFilters(): boolean {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
return layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters &&
|
|
||||||
this.drilldownLayers[layerIndex].filters.length > 0;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get active layer filters for current drilldown level
|
|
||||||
getActiveLayerFilters(): any[] {
|
|
||||||
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
|
|
||||||
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
|
|
||||||
if (layerIndex < this.drilldownLayers.length &&
|
|
||||||
this.drilldownLayers[layerIndex].filters) {
|
|
||||||
return this.drilldownLayers[layerIndex].filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filter options for dropdown/multiselect filters
|
|
||||||
getFilterOptions(filter: any): string[] {
|
|
||||||
if (filter.options) {
|
|
||||||
if (Array.isArray(filter.options)) {
|
|
||||||
return filter.options;
|
|
||||||
} else if (typeof filter.options === 'string') {
|
|
||||||
return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if an option is selected for multiselect filters
|
|
||||||
isOptionSelected(filter: any, option: string): boolean {
|
|
||||||
if (!filter.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.includes(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.value === option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle base filter changes
|
|
||||||
onBaseFilterChange(filter: any): void {
|
|
||||||
console.log('Base filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle drilldown filter changes
|
|
||||||
onDrilldownFilterChange(filter: any): void {
|
|
||||||
console.log('Drilldown filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle layer filter changes
|
|
||||||
onLayerFilterChange(filter: any): void {
|
|
||||||
console.log('Layer filter changed:', filter);
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle multiselect changes
|
|
||||||
onMultiSelectChange(filter: any, option: string, event: any): void {
|
|
||||||
const checked = event.target.checked;
|
|
||||||
|
|
||||||
// Initialize filter.value as array if it's not already
|
|
||||||
if (!Array.isArray(filter.value)) {
|
|
||||||
filter.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
// Add option to array if not already present
|
|
||||||
if (!filter.value.includes(option)) {
|
|
||||||
filter.value.push(option);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Remove option from array
|
|
||||||
filter.value = filter.value.filter((item: string) => item !== option);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date range changes
|
|
||||||
onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
|
|
||||||
filter.value = dateRange;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle toggle changes
|
|
||||||
onToggleChange(filter: any, checked: boolean): void {
|
|
||||||
filter.value = checked;
|
|
||||||
// Refresh data when filter changes
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle multiselect dropdown visibility
|
|
||||||
toggleMultiselect(filter: any, context: string): void {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
if (this.isMultiselectOpen(filter, context)) {
|
|
||||||
this.openMultiselects.delete(filterId);
|
|
||||||
} else {
|
|
||||||
// Close all other multiselects first
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.openMultiselects.set(filterId, context);
|
|
||||||
|
|
||||||
// Add document click handler to close dropdown when clicking outside
|
|
||||||
this.addDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add document click handler to close dropdowns when clicking outside
|
|
||||||
private addDocumentClickHandler(): void {
|
|
||||||
if (!this.documentClickHandler) {
|
|
||||||
this.documentClickHandler = (event: MouseEvent) => {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
// Check if click is outside any multiselect dropdown
|
|
||||||
if (!target.closest('.multiselect-container')) {
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
|
|
||||||
setTimeout(() => {
|
|
||||||
document.addEventListener('click', this.documentClickHandler!);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove document click handler
|
|
||||||
private removeDocumentClickHandler(): void {
|
|
||||||
if (this.documentClickHandler) {
|
|
||||||
document.removeEventListener('click', this.documentClickHandler);
|
|
||||||
this.documentClickHandler = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if multiselect dropdown is open
|
|
||||||
isMultiselectOpen(filter: any, context: string): boolean {
|
|
||||||
const filterId = `${context}-${filter.field}`;
|
|
||||||
return this.openMultiselects.has(filterId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get count of selected options for a multiselect filter
|
|
||||||
getSelectedOptionsCount(filter: any): number {
|
|
||||||
if (!filter.value) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(filter.value)) {
|
|
||||||
return filter.value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear all filters
|
|
||||||
clearAllFilters(): void {
|
|
||||||
// Clear base filters
|
|
||||||
if (this.baseFilters) {
|
|
||||||
this.baseFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear drilldown filters
|
|
||||||
if (this.drilldownFilters) {
|
|
||||||
this.drilldownFilters.forEach(filter => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear layer filters
|
|
||||||
if (this.drilldownLayers) {
|
|
||||||
this.drilldownLayers.forEach(layer => {
|
|
||||||
if (layer.filters) {
|
|
||||||
layer.filters.forEach((filter: any) => {
|
|
||||||
if (filter.type === 'multiselect') {
|
|
||||||
filter.value = [];
|
|
||||||
} else if (filter.type === 'date-range') {
|
|
||||||
filter.value = { start: null, end: null };
|
|
||||||
} else if (filter.type === 'toggle') {
|
|
||||||
filter.value = false;
|
|
||||||
} else {
|
|
||||||
filter.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all multiselect dropdowns
|
|
||||||
this.openMultiselects.clear();
|
|
||||||
|
|
||||||
// Refresh data
|
|
||||||
this.fetchToDoData();
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
|
||||||
// Unsubscribe from all subscriptions to prevent memory leaks
|
|
||||||
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
|
||||||
|
|
||||||
// Remove document click handler if it exists
|
|
||||||
this.removeDocumentClickHandler();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './unified-chart.component';
|
|
||||||
@@ -1,387 +0,0 @@
|
|||||||
<div class="chart-container" *ngIf="!noDataAvailable && !isLoading">
|
|
||||||
<!-- Back button for drilldown navigation -->
|
|
||||||
<div class="drilldown-back" *ngIf="currentDrilldownLevel > 0">
|
|
||||||
<button class="btn btn-sm btn-secondary" (click)="navigateBack()">
|
|
||||||
<clr-icon shape="arrow" dir="left"></clr-icon>
|
|
||||||
Back
|
|
||||||
</button>
|
|
||||||
<span class="drilldown-level">Level: {{ currentDrilldownLevel }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Chart title -->
|
|
||||||
<div class="chart-title" *ngIf="charttitle">
|
|
||||||
<h4>{{ charttitle }}</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Filter toggle icon -->
|
|
||||||
<div class="filter-toggle-icon" *ngIf="baseFilters && baseFilters.length > 0"
|
|
||||||
(click)="toggleFilters()"
|
|
||||||
style="cursor: pointer; text-align: right; padding: 5px;">
|
|
||||||
<clr-icon shape="filter" size="24"
|
|
||||||
[style.color]="showFilters ? '#007cba' : '#666'"
|
|
||||||
title="Toggle Filters">
|
|
||||||
</clr-icon>
|
|
||||||
<span style="margin-left: 5px; font-size: 12px; color: #666;">
|
|
||||||
{{ showFilters ? 'Hide Filters' : 'Show Filters' }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Render different chart types based on chartType input -->
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<!-- Bar Chart -->
|
|
||||||
<div *ngIf="chartType === 'bar'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[labels]="chartLabels"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'bar'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Line Chart -->
|
|
||||||
<div *ngIf="chartType === 'line'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[labels]="chartLabels"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'line'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pie Chart -->
|
|
||||||
<div *ngIf="chartType === 'pie'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[labels]="chartLabels"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'pie'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Doughnut Chart -->
|
|
||||||
<div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[labels]="chartLabels"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'doughnut'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bubble Chart -->
|
|
||||||
<div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="bubbleChartData"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'bubble'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Radar Chart -->
|
|
||||||
<div *ngIf="chartType === 'radar'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[labels]="chartLabels"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'radar'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Polar Area Chart -->
|
|
||||||
<div *ngIf="chartType === 'polar'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[labels]="chartLabels"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'polarArea'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Scatter Chart -->
|
|
||||||
<div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'scatter'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Default/Unknown Chart Type -->
|
|
||||||
<div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="chartData"
|
|
||||||
[labels]="chartLabels"
|
|
||||||
[options]="chartOptions"
|
|
||||||
[legend]="chartLegend"
|
|
||||||
[chartType]="'bar'"
|
|
||||||
(chartClick)="chartClicked($event)"
|
|
||||||
(chartHover)="chartHovered($event)">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collapsible Base Filters -->
|
|
||||||
<div class="filters-section" *ngIf="baseFilters && baseFilters.length > 0 && showFilters">
|
|
||||||
<h5>Filters</h5>
|
|
||||||
<div class="filters-container">
|
|
||||||
<div class="filter-item" *ngFor="let filter of baseFilters; let i = index">
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-text">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<input type="text" [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)"
|
|
||||||
class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<select [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)" class="form-control">
|
|
||||||
<option value="">Select {{ filter.field || 'value' }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">
|
|
||||||
{{ option }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multiselect Filter -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
|
||||||
<span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
|
|
||||||
<span *ngIf="filter.value && !Array.isArray(filter.value)">
|
|
||||||
{{ filter.value }}
|
|
||||||
</span>
|
|
||||||
<span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
|
|
||||||
{{ filter.value.length }} selected
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
|
||||||
<div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
id="base-{{ filter.field }}-{{ option }}">
|
|
||||||
<label [for]="'base-' + filter.field + '-' + option">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-date-range">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="date-range-inputs">
|
|
||||||
<input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)"
|
|
||||||
class="form-control" placeholder="Start Date">
|
|
||||||
<input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)"
|
|
||||||
class="form-control" placeholder="End Date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-toggle">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="toggle-switch">
|
|
||||||
<input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)"
|
|
||||||
id="toggle-{{ filter.field }}">
|
|
||||||
<label [for]="'toggle-' + filter.field" class="toggle-label">
|
|
||||||
<span class="toggle-slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Drilldown Filters -->
|
|
||||||
<div class="filters-section" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0 && showFilters">
|
|
||||||
<h5>Drilldown Filters</h5>
|
|
||||||
<div class="filters-container">
|
|
||||||
<div class="filter-item" *ngFor="let filter of drilldownFilters; let i = index">
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-text">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<input type="text" [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)"
|
|
||||||
class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<select [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)" class="form-control">
|
|
||||||
<option value="">Select {{ filter.field || 'value' }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">
|
|
||||||
{{ option }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multiselect Filter -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
|
||||||
<span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
|
|
||||||
<span *ngIf="filter.value && !Array.isArray(filter.value)">
|
|
||||||
{{ filter.value }}
|
|
||||||
</span>
|
|
||||||
<span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
|
|
||||||
{{ filter.value.length }} selected
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
|
||||||
<div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
id="drilldown-{{ filter.field }}-{{ option }}">
|
|
||||||
<label [for]="'drilldown-' + filter.field + '-' + option">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-date-range">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="date-range-inputs">
|
|
||||||
<input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)"
|
|
||||||
class="form-control" placeholder="Start Date">
|
|
||||||
<input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)"
|
|
||||||
class="form-control" placeholder="End Date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-toggle">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="toggle-switch">
|
|
||||||
<input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)"
|
|
||||||
id="drilldown-toggle-{{ filter.field }}">
|
|
||||||
<label [for]="'drilldown-toggle-' + filter.field" class="toggle-label">
|
|
||||||
<span class="toggle-slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layer Filters -->
|
|
||||||
<div class="filters-section" *ngIf="hasActiveLayerFilters() && showFilters">
|
|
||||||
<h5>Layer Filters</h5>
|
|
||||||
<div class="filters-container">
|
|
||||||
<div class="filter-item" *ngFor="let filter of getActiveLayerFilters(); let i = index">
|
|
||||||
<!-- Text Filter -->
|
|
||||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-text">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<input type="text" [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)"
|
|
||||||
class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
|
||||||
<div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<select [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)" class="form-control">
|
|
||||||
<option value="">Select {{ filter.field || 'value' }}</option>
|
|
||||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">
|
|
||||||
{{ option }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multiselect Filter -->
|
|
||||||
<div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="multiselect-container">
|
|
||||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
|
||||||
<span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
|
|
||||||
<span *ngIf="filter.value && !Array.isArray(filter.value)">
|
|
||||||
{{ filter.value }}
|
|
||||||
</span>
|
|
||||||
<span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
|
|
||||||
{{ filter.value.length }} selected
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
|
||||||
<div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(filter, option)"
|
|
||||||
(change)="onMultiSelectChange(filter, option, $event)"
|
|
||||||
id="layer-{{ filter.field }}-{{ option }}">
|
|
||||||
<label [for]="'layer-' + filter.field + '-' + option">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
|
||||||
<div *ngIf="filter.type === 'date-range'" class="filter-date-range">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="date-range-inputs">
|
|
||||||
<input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)"
|
|
||||||
class="form-control" placeholder="Start Date">
|
|
||||||
<input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)"
|
|
||||||
class="form-control" placeholder="End Date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
|
||||||
<div *ngIf="filter.type === 'toggle'" class="filter-toggle">
|
|
||||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
|
||||||
<div class="toggle-switch">
|
|
||||||
<input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)"
|
|
||||||
id="layer-toggle-{{ filter.field }}">
|
|
||||||
<label [for]="'layer-toggle-' + filter.field" class="toggle-label">
|
|
||||||
<span class="toggle-slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Clear Filters Button -->
|
|
||||||
<div class="clear-filters" *ngIf="hasActiveFilters() && showFilters">
|
|
||||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">
|
|
||||||
Clear All Filters
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- No Data Available Message -->
|
|
||||||
<div class="no-data-message" *ngIf="noDataAvailable && !isLoading">
|
|
||||||
<p>No data available for the selected filters.</p>
|
|
||||||
<button class="btn btn-sm btn-primary" (click)="fetchChartData()">Retry</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Loading Indicator -->
|
|
||||||
<div class="loading-indicator" *ngIf="isLoading">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<p>Loading chart data...</p>
|
|
||||||
</div>
|
|
||||||
@@ -1,307 +0,0 @@
|
|||||||
.chart-container {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drilldown-back {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.drilldown-level {
|
|
||||||
margin-left: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin: 0;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-wrapper {
|
|
||||||
position: relative;
|
|
||||||
height: calc(100% - 100px);
|
|
||||||
min-height: 400px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-canvas-container {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-toggle-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
clr-icon {
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #007cba !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover span {
|
|
||||||
color: #007cba;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-section {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
flex: 1 1 200px;
|
|
||||||
min-width: 150px;
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-text,
|
|
||||||
.filter-dropdown,
|
|
||||||
.filter-date-range {
|
|
||||||
.form-control {
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range-inputs {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-multiselect {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-display {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 36px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
z-index: 1000;
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-option {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin: 0;
|
|
||||||
font-weight: normal;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.toggle-switch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 50px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-switch input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #ccc;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-slider {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
left: 4px;
|
|
||||||
bottom: 4px;
|
|
||||||
background-color: white;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .toggle-label {
|
|
||||||
background-color: #2196F3;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .toggle-label .toggle-slider {
|
|
||||||
transform: translateX(26px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear-filters {
|
|
||||||
margin-top: 15px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-data-message {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 300px;
|
|
||||||
text-align: center;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-indicator {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 300px;
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: 4px solid #f3f3f3;
|
|
||||||
border-top: 4px solid #3498db;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.filters-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-wrapper {
|
|
||||||
min-height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-canvas-container {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { UnifiedChartComponent } from './unified-chart.component';
|
|
||||||
|
|
||||||
describe('UnifiedChartComponent', () => {
|
|
||||||
let component: UnifiedChartComponent;
|
|
||||||
let fixture: ComponentFixture<UnifiedChartComponent>;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [UnifiedChartComponent]
|
|
||||||
});
|
|
||||||
fixture = TestBed.createComponent(UnifiedChartComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -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,46 +42,41 @@ 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});
|
||||||
}
|
}
|
||||||
// for runner line navigation
|
goToEdit(id:number)
|
||||||
// goToEditData(id: number){
|
{
|
||||||
// this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
|
this.router.navigate(['../dashrunner/'+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() {
|
||||||
@@ -89,28 +84,29 @@ 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;
|
{
|
||||||
console.log("in delete " + id);
|
this.modalDelete = false;
|
||||||
this.dashboardService.deleteField(id).subscribe((data) => {
|
console.log("in delete "+id);
|
||||||
|
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()
|
||||||
// {
|
// {
|
||||||
|
|||||||
@@ -1,73 +1,64 @@
|
|||||||
|
<!-- Display Mode - No configuration UI in runner -->
|
||||||
<div class="compact-filter">
|
<div class="compact-filter">
|
||||||
<div class="filter-header" (click)="toggleFilter()">
|
<div class="filter-header">
|
||||||
<span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
|
<span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
|
||||||
<span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
|
<span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
|
||||||
<span class="filter-type">({{ filterType }})</span>
|
<span class="filter-type">({{ filterType }})</span>
|
||||||
<clr-icon shape="caret down" class="expand-icon" *ngIf="!isExpanded"></clr-icon>
|
</div>
|
||||||
<clr-icon shape="caret up" class="expand-icon" *ngIf="isExpanded"></clr-icon>
|
|
||||||
|
<!-- Text Filter -->
|
||||||
|
<div class="filter-control" *ngIf="filterType === 'text'">
|
||||||
|
<input type="text"
|
||||||
|
[(ngModel)]="filterValue"
|
||||||
|
(ngModelChange)="onFilterValueChange($event)"
|
||||||
|
[placeholder]="filterLabel || filterKey"
|
||||||
|
class="clr-input compact-input">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-content" *ngIf="isExpanded">
|
<!-- Dropdown Filter -->
|
||||||
<!-- Text Filter -->
|
<div class="filter-control" *ngIf="filterType === 'dropdown'">
|
||||||
<div class="filter-control" *ngIf="filterType === 'text'">
|
<select [(ngModel)]="filterValue"
|
||||||
<input type="text"
|
(ngModelChange)="onFilterValueChange($event)"
|
||||||
[(ngModel)]="filterValue"
|
class="clr-select compact-select">
|
||||||
(ngModelChange)="onFilterValueChange($event)"
|
<option value="">{{ filterLabel || filterKey }}</option>
|
||||||
[placeholder]="filterLabel || filterKey"
|
<option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
|
||||||
class="clr-input compact-input">
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Dropdown Filter -->
|
<!-- Multi-Select Filter -->
|
||||||
<div class="filter-control" *ngIf="filterType === 'dropdown'">
|
<div class="filter-control" *ngIf="filterType === 'multiselect'">
|
||||||
<select [(ngModel)]="filterValue"
|
<div class="checkbox-group">
|
||||||
(ngModelChange)="onFilterValueChange($event)"
|
<div *ngFor="let option of filterOptions" class="checkbox-item">
|
||||||
class="clr-select compact-select">
|
<input type="checkbox"
|
||||||
<option value="">{{ filterLabel || filterKey }}</option>
|
[checked]="filterValue && filterValue.includes(option)"
|
||||||
<option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
|
(change)="onMultiSelectChange(option, $event)"
|
||||||
</select>
|
[id]="'checkbox-' + option">
|
||||||
</div>
|
<label [for]="'checkbox-' + option">{{ option }}</label>
|
||||||
|
|
||||||
<!-- Multi-Select Filter -->
|
|
||||||
<div class="filter-control" *ngIf="filterType === 'multiselect'">
|
|
||||||
<div class="multiselect-container">
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
|
|
||||||
<input type="checkbox"
|
|
||||||
[checked]="isOptionSelected(option)"
|
|
||||||
(change)="onMultiSelectChange(option, $event)"
|
|
||||||
[id]="'checkbox-' + filterKey + '-' + i"
|
|
||||||
class="clr-checkbox">
|
|
||||||
<label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Date Range Filter -->
|
<!-- Date Range Filter -->
|
||||||
<div class="filter-control date-range" *ngIf="filterType === 'date-range'">
|
<div class="filter-control date-range" *ngIf="filterType === 'date-range'">
|
||||||
<div class="date-input-group">
|
<input type="date"
|
||||||
<input type="date"
|
[(ngModel)]="filterValue.start"
|
||||||
[(ngModel)]="filterValue.start"
|
(ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
|
||||||
(ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
|
placeholder="Start Date"
|
||||||
placeholder="Start Date"
|
class="clr-input compact-date">
|
||||||
class="clr-input compact-date">
|
<input type="date"
|
||||||
<span class="date-separator">to</span>
|
[(ngModel)]="filterValue.end"
|
||||||
<input type="date"
|
(ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
|
||||||
[(ngModel)]="filterValue.end"
|
placeholder="End Date"
|
||||||
(ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
|
class="clr-input compact-date">
|
||||||
placeholder="End Date"
|
</div>
|
||||||
class="clr-input compact-date">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Filter -->
|
<!-- Toggle Filter -->
|
||||||
<div class="filter-control toggle" *ngIf="filterType === 'toggle'">
|
<div class="filter-control toggle" *ngIf="filterType === 'toggle'">
|
||||||
<input type="checkbox"
|
<input type="checkbox"
|
||||||
[(ngModel)]="filterValue"
|
[(ngModel)]="filterValue"
|
||||||
(ngModelChange)="onToggleChange($event)"
|
(ngModelChange)="onToggleChange($event)"
|
||||||
clrToggle
|
clrToggle
|
||||||
class="clr-toggle">
|
class="clr-toggle">
|
||||||
<label class="toggle-label">{{ filterLabel || filterKey }}</label>
|
<label class="toggle-label">{{ filterLabel || filterKey }}</label>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1,149 +1,74 @@
|
|||||||
.compact-filter {
|
.compact-filter {
|
||||||
display: block;
|
padding: 10px;
|
||||||
min-width: 200px;
|
border: 1px solid #ddd;
|
||||||
max-width: 300px;
|
|
||||||
margin: 8px;
|
|
||||||
padding: 0;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #d7d7d7;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 14px;
|
margin-bottom: 10px;
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
background-color: #f8f8f8;
|
||||||
|
|
||||||
.filter-header {
|
.filter-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 12px 15px;
|
margin-bottom: 10px;
|
||||||
cursor: pointer;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-bottom: 1px solid #eaeaea;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label, .filter-key {
|
.filter-label, .filter-key {
|
||||||
font-weight: 500;
|
font-weight: bold;
|
||||||
color: #333333;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-type {
|
.filter-type {
|
||||||
font-size: 12px;
|
font-size: 0.8em;
|
||||||
color: #666666;
|
color: #666;
|
||||||
margin: 0 8px;
|
|
||||||
background: #eaeaea;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
color: #666666;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-content {
|
.filter-control {
|
||||||
padding: 15px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
.filter-control {
|
.compact-input, .compact-select, .compact-date {
|
||||||
margin-bottom: 12px;
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-multiselect {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
&:last-child {
|
.checkbox-item {
|
||||||
margin-bottom: 0;
|
margin: 5px 0;
|
||||||
}
|
|
||||||
|
input[type="checkbox"] {
|
||||||
&.date-range {
|
margin-right: 5px;
|
||||||
.date-input-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.date-separator {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.date-range {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
&.toggle {
|
.compact-date {
|
||||||
display: flex;
|
flex: 1;
|
||||||
align-items: center;
|
}
|
||||||
gap: 8px;
|
}
|
||||||
|
|
||||||
|
&.toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.clr-toggle {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-label {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact-input,
|
|
||||||
.compact-select,
|
|
||||||
.compact-date {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid #d7d7d7;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #ffffff;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #0072ce;
|
|
||||||
box-shadow: 0 0 0 1px #0072ce;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compact-select {
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-container {
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid #d7d7d7;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.clr-checkbox {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clr-toggle {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Host styling
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
@@ -20,24 +20,20 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
|||||||
availableFilters: Filter[] = [];
|
availableFilters: Filter[] = [];
|
||||||
availableKeys: string[] = [];
|
availableKeys: string[] = [];
|
||||||
availableValues: string[] = [];
|
availableValues: string[] = [];
|
||||||
isExpanded: boolean = false; // Add expansion state
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private filterService: FilterService
|
private filterService: FilterService
|
||||||
) {
|
) { }
|
||||||
console.log('=== COMPACT FILTER RUNNER CONSTRUCTOR CALLED ===');
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
console.log('=== COMPACT FILTER RUNNER DEBUG INFO ===');
|
console.log('CompactFilterRunnerComponent initialized with inputs:', {
|
||||||
console.log('Component initialized with inputs:');
|
filterKey: this.filterKey,
|
||||||
console.log('- filterKey:', this.filterKey);
|
filterType: this.filterType,
|
||||||
console.log('- filterType:', this.filterType);
|
filterOptions: this.filterOptions,
|
||||||
console.log('- filterOptions:', this.filterOptions);
|
filterLabel: this.filterLabel,
|
||||||
console.log('- filterLabel:', this.filterLabel);
|
apiUrl: this.apiUrl,
|
||||||
console.log('- apiUrl:', this.apiUrl);
|
connection: this.connection
|
||||||
console.log('- connection:', this.connection);
|
});
|
||||||
console.log('========================================');
|
|
||||||
|
|
||||||
// Register this filter with the filter service
|
// Register this filter with the filter service
|
||||||
this.registerFilter();
|
this.registerFilter();
|
||||||
@@ -45,35 +41,24 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
|||||||
// Subscribe to filter definitions to get available filters
|
// Subscribe to filter definitions to get available filters
|
||||||
this.filterService.filters$.subscribe(filters => {
|
this.filterService.filters$.subscribe(filters => {
|
||||||
this.availableFilters = filters;
|
this.availableFilters = filters;
|
||||||
console.log('Available filters updated:', filters);
|
|
||||||
this.updateSelectedFilter();
|
this.updateSelectedFilter();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Subscribe to filter state changes
|
// Subscribe to filter state changes
|
||||||
this.filterService.filterState$.subscribe(state => {
|
this.filterService.filterState$.subscribe(state => {
|
||||||
console.log('Filter state updated:', state);
|
|
||||||
if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
|
if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
|
||||||
this.filterValue = state[this.selectedFilter.id];
|
this.filterValue = state[this.selectedFilter.id];
|
||||||
console.log('Filter value updated for', this.selectedFilter.id, ':', this.filterValue);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
console.log('=== COMPACT FILTER RUNNER CHANGES DEBUG ===');
|
console.log('CompactFilterRunnerComponent inputs changed:', changes);
|
||||||
console.log('Component inputs changed:', changes);
|
|
||||||
|
|
||||||
// If filterKey or filterType changes, re-register the filter
|
// If filterKey or filterType changes, re-register the filter
|
||||||
if (changes.filterKey || changes.filterType || changes.filterOptions) {
|
if (changes.filterKey || changes.filterType || changes.filterOptions) {
|
||||||
console.log('Re-registering filter due to input changes');
|
|
||||||
this.registerFilter();
|
this.registerFilter();
|
||||||
}
|
}
|
||||||
console.log('==========================================');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle filter expansion
|
|
||||||
toggleFilter(): void {
|
|
||||||
this.isExpanded = !this.isExpanded;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Register this filter with the filter service
|
// Register this filter with the filter service
|
||||||
@@ -83,7 +68,6 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
|||||||
if (this.filterKey) {
|
if (this.filterKey) {
|
||||||
// Get current filter values from the service
|
// Get current filter values from the service
|
||||||
const currentFilterValues = this.filterService.getFilterValues();
|
const currentFilterValues = this.filterService.getFilterValues();
|
||||||
console.log('Current filter values from service:', currentFilterValues);
|
|
||||||
|
|
||||||
// Create a filter definition for this compact filter
|
// Create a filter definition for this compact filter
|
||||||
const filterDef: Filter = {
|
const filterDef: Filter = {
|
||||||
@@ -99,11 +83,9 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
|||||||
|
|
||||||
// Get current filters
|
// Get current filters
|
||||||
const currentFilters = this.filterService.getFilters();
|
const currentFilters = this.filterService.getFilters();
|
||||||
console.log('Current filters from service:', currentFilters);
|
|
||||||
|
|
||||||
// Check if this filter is already registered
|
// Check if this filter is already registered
|
||||||
const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
|
const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
|
||||||
console.log('Existing filter index:', existingFilterIndex);
|
|
||||||
|
|
||||||
if (existingFilterIndex >= 0) {
|
if (existingFilterIndex >= 0) {
|
||||||
// Preserve the existing filter configuration
|
// Preserve the existing filter configuration
|
||||||
@@ -148,20 +130,15 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
|||||||
// Update the selected filter reference
|
// Update the selected filter reference
|
||||||
this.selectedFilter = filterDef;
|
this.selectedFilter = filterDef;
|
||||||
console.log('Selected filter set to:', this.selectedFilter);
|
console.log('Selected filter set to:', this.selectedFilter);
|
||||||
} else {
|
|
||||||
console.log('No filterKey provided, skipping filter registration');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updateSelectedFilter(): void {
|
updateSelectedFilter(): void {
|
||||||
console.log('Updating selected filter. Filter key:', this.filterKey, 'Available filters:', this.availableFilters);
|
|
||||||
if (this.filterKey && this.availableFilters.length > 0) {
|
if (this.filterKey && this.availableFilters.length > 0) {
|
||||||
this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
|
this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
|
||||||
console.log('Found selected filter:', this.selectedFilter);
|
|
||||||
if (this.selectedFilter) {
|
if (this.selectedFilter) {
|
||||||
// Get current value for this filter from the service
|
// Get current value for this filter from the service
|
||||||
const currentState = this.filterService.getFilterValues();
|
const currentState = this.filterService.getFilterValues();
|
||||||
console.log('Current state from service:', currentState);
|
|
||||||
const filterValue = currentState[this.selectedFilter.id];
|
const filterValue = currentState[this.selectedFilter.id];
|
||||||
if (filterValue !== undefined) {
|
if (filterValue !== undefined) {
|
||||||
this.filterValue = filterValue;
|
this.filterValue = filterValue;
|
||||||
@@ -226,20 +203,4 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
|||||||
// Emit the change
|
// Emit the change
|
||||||
this.onFilterValueChange(this.filterValue);
|
this.onFilterValueChange(this.filterValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add method to check if an option is selected for checkboxes (needed for proper UI rendering)
|
|
||||||
isOptionSelected(option: string): boolean {
|
|
||||||
console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue);
|
|
||||||
if (!this.filterValue) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ensure filterValue is an array for multiselect
|
|
||||||
if (!Array.isArray(this.filterValue)) {
|
|
||||||
this.filterValue = [];
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.filterValue.includes(option);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -26,9 +26,6 @@
|
|||||||
<!-- <span><button class="btn btn-primary" (click)="Export(item.name)">Export</button></span> -->
|
<!-- <span><button class="btn btn-primary" (click)="Export(item.name)">Export</button></span> -->
|
||||||
<!-- <span><app-line-runner (buttonClicked)="generatePDFFile()"></app-line-runner></span> -->
|
<!-- <span><app-line-runner (buttonClicked)="generatePDFFile()"></app-line-runner></span> -->
|
||||||
<!-- <h4 style="margin-top: 10px; margin-left: 10px;">{{ item.charttitle }}</h4> -->
|
<!-- <h4 style="margin-top: 10px; margin-left: 10px;">{{ item.charttitle }}</h4> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<ndc-dynamic class="no-drag"
|
<ndc-dynamic class="no-drag"
|
||||||
[ndcDynamicComponent]="item.component"
|
[ndcDynamicComponent]="item.component"
|
||||||
[ndcDynamicInputs]="getComponentInputs(item)"
|
[ndcDynamicInputs]="getComponentInputs(item)"
|
||||||
|
|||||||
@@ -311,18 +311,12 @@ dashboard_name = "Dashtest";
|
|||||||
|
|
||||||
// Compact Filter specific inputs
|
// Compact Filter specific inputs
|
||||||
if (item.name === 'Compact Filter') {
|
if (item.name === 'Compact Filter') {
|
||||||
console.log('=== COMPACT FILTER INPUTS DEBUG ===');
|
|
||||||
console.log('Item data for compact filter:', item);
|
|
||||||
|
|
||||||
if (item.filterKey !== undefined) inputs.filterKey = item.filterKey;
|
if (item.filterKey !== undefined) inputs.filterKey = item.filterKey;
|
||||||
if (item.filterType !== undefined) inputs.filterType = item.filterType;
|
if (item.filterType !== undefined) inputs.filterType = item.filterType;
|
||||||
if (item.filterLabel !== undefined) inputs.filterLabel = item.filterLabel;
|
if (item.filterLabel !== undefined) inputs.filterLabel = item.filterLabel;
|
||||||
if (item.filterOptions !== undefined) inputs.filterOptions = item.filterOptions;
|
if (item.filterOptions !== undefined) inputs.filterOptions = item.filterOptions;
|
||||||
if (item.table !== undefined) inputs.apiUrl = item.table; // Use table as API URL for compact filter
|
if (item.table !== undefined) inputs.apiUrl = item.table; // Use table as API URL for compact filter
|
||||||
if (item.connection !== undefined) inputs.connection = item.connection ? parseInt(item.connection, 10) : undefined;
|
if (item.connection !== undefined) inputs.connection = item.connection ? parseInt(item.connection, 10) : undefined;
|
||||||
|
|
||||||
console.log('Final inputs for compact filter:', inputs);
|
|
||||||
console.log('==============================');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Grid View specific inputs
|
// Grid View specific inputs
|
||||||
|
|||||||
@@ -254,7 +254,7 @@ export class ReportbuildqueryComponent implements OnInit {
|
|||||||
name;
|
name;
|
||||||
databaseName;
|
databaseName;
|
||||||
databasename(val) {
|
databasename(val) {
|
||||||
console.log('connection ', val);
|
console.log(val);
|
||||||
this.databaseName = val.name;
|
this.databaseName = val.name;
|
||||||
this.selecteddatabase = val.conn_string;
|
this.selecteddatabase = val.conn_string;
|
||||||
console.log(this.selecteddatabase);
|
console.log(this.selecteddatabase);
|
||||||
|
|||||||
@@ -23,18 +23,6 @@
|
|||||||
<label for="workflow_name">{{'ACTIVE'| translate}}</label>
|
<label for="workflow_name">{{'ACTIVE'| translate}}</label>
|
||||||
<input type="checkbox" formControlName="active" clrToggle value="billable" name="billable" />
|
<input type="checkbox" formControlName="active" clrToggle value="billable" name="billable" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SureConnect Dropdown -->
|
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
|
||||||
<label for="sureConnectId">SureConnect Connection</label>
|
|
||||||
<select formControlName="sureConnectId" class="clr-select">
|
|
||||||
<option value="">-- Select SureConnect --</option>
|
|
||||||
<option *ngFor="let conn of sureconnectData" [value]="conn.id">
|
|
||||||
{{conn.connection_name || conn.id}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
<div class="clr-col-md-4 clr-col-sm-12">
|
||||||
<label for="url">Get URL</label>
|
<label for="url">Get URL</label>
|
||||||
@@ -88,4 +76,4 @@
|
|||||||
<button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid" (click)="onSubmit()">{{'SUBMIT' | translate}}</button>
|
<button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid" (click)="onSubmit()">{{'SUBMIT' | translate}}</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,8 +4,6 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
|||||||
import { ActivatedRoute, Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { ToastrService } from 'ngx-toastr';
|
import { ToastrService } from 'ngx-toastr';
|
||||||
import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
|
import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
|
||||||
import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.service';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-report-build2add',
|
selector: 'app-report-build2add',
|
||||||
templateUrl: './report-build2add.component.html',
|
templateUrl: './report-build2add.component.html',
|
||||||
@@ -13,12 +11,8 @@ import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.s
|
|||||||
})
|
})
|
||||||
export class ReportBuild2addComponent implements OnInit {
|
export class ReportBuild2addComponent implements OnInit {
|
||||||
public entryForm: FormGroup;
|
public entryForm: FormGroup;
|
||||||
// Add sureconnect data property
|
|
||||||
sureconnectData: any[] = [];
|
|
||||||
|
|
||||||
constructor(private _fb: FormBuilder, private router: Router,private toastr: ToastrService,
|
constructor(private _fb: FormBuilder, private router: Router,private toastr: ToastrService,
|
||||||
private route: ActivatedRoute,private reportBuilderService: ReportBuilderService,
|
private route: ActivatedRoute,private reportBuilderService: ReportBuilderService) { }
|
||||||
private sureconnectService: SureconnectService) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.entryForm = this._fb.group({
|
this.entryForm = this._fb.group({
|
||||||
@@ -26,23 +20,9 @@ export class ReportBuild2addComponent implements OnInit {
|
|||||||
description:[null],
|
description:[null],
|
||||||
active:[null],
|
active:[null],
|
||||||
isSql:[false],
|
isSql:[false],
|
||||||
// Add sureConnectId field to the form
|
|
||||||
sureConnectId: [null],
|
|
||||||
Rpt_builder2_lines: this._fb.array([this.initLinesFormReport()]),
|
Rpt_builder2_lines: this._fb.array([this.initLinesFormReport()]),
|
||||||
});
|
});
|
||||||
|
|
||||||
// Load sureconnect data
|
|
||||||
this.loadSureconnectData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add method to load sureconnect data
|
|
||||||
loadSureconnectData() {
|
|
||||||
this.sureconnectService.getAll().subscribe((data: any[]) => {
|
|
||||||
this.sureconnectData = data;
|
|
||||||
console.log('Sureconnect data loaded:', this.sureconnectData);
|
|
||||||
}, (error) => {
|
|
||||||
console.log('Error loading sureconnect data:', error);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
initLinesFormReport() {
|
initLinesFormReport() {
|
||||||
@@ -88,4 +68,4 @@ export class ReportBuild2addComponent implements OnInit {
|
|||||||
this.router.navigate(["../all"], { relativeTo: this.route });
|
this.router.navigate(["../all"], { relativeTo: this.route });
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,87 +6,70 @@
|
|||||||
|
|
||||||
<div class="dg-wrapper">
|
<div class="dg-wrapper">
|
||||||
<div class="clr-row">
|
<div class="clr-row">
|
||||||
<div class="clr-col-4">
|
<div class="clr-col-4">
|
||||||
<h3><b>{{'REPORT_BUILDER_2' | translate}}</b></h3>
|
<h3><b>{{'REPORT_BUILDER_2' | translate}}</b></h3>
|
||||||
|
</div>
|
||||||
|
<div class="clr-col-8" style="text-align: right;">
|
||||||
|
<button id="add" class="btn btn-primary" (click)="gotorunner()">
|
||||||
|
<clr-icon shape="grid-view"></clr-icon>{{'REPORT_RUNNER' | translate}}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||||
|
<clr-icon shape="plus"></clr-icon>{{'ADD' | translate}}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="clr-col-8" style="text-align: right;">
|
</div>
|
||||||
<button id="add" class="btn btn-primary" (click)="gotorunner()">
|
|
||||||
<clr-icon shape="grid-view"></clr-icon>{{'REPORT_RUNNER' | translate}}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
<clr-datagrid [clrDgLoading]="loading">
|
||||||
<clr-icon shape="plus"></clr-icon>{{'ADD' | translate}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<clr-datagrid [clrDgLoading]="loading">
|
|
||||||
<clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING' | translate}}</clr-spinner></ng-template>
|
<clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING' | translate}}</clr-spinner></ng-template>
|
||||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
<div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
|
||||||
</clr-dg-placeholder>
|
|
||||||
|
|
||||||
|
|
||||||
<clr-dg-column [clrDgField]="''"><ng-container *clrDgHideableColumn="{hidden: false}">
|
<clr-dg-column [clrDgField]="''"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||||
{{'GO_TO' | translate}}
|
{{'GO_TO' | translate}}
|
||||||
</ng-container></clr-dg-column>
|
</ng-container></clr-dg-column>
|
||||||
|
<clr-dg-column [clrDgField]="'name'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||||
<clr-dg-column [clrDgField]="'name'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
{{'REPORT_NAME' | translate}}
|
||||||
{{'REPORT_NAME' | translate}}
|
</ng-container></clr-dg-column>
|
||||||
</ng-container></clr-dg-column>
|
<clr-dg-column [clrDgField]="'description'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||||
<clr-dg-column [clrDgField]="'description'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
{{'REPORT_DESCRIPTION' | translate}}
|
||||||
{{'REPORT_DESCRIPTION' | translate}}
|
</ng-container></clr-dg-column>
|
||||||
</ng-container></clr-dg-column>
|
<clr-dg-column [clrDgField]="'active'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||||
|
{{'ACTIVE' | translate}}
|
||||||
<clr-dg-column [clrDgField]="''"><ng-container *clrDgHideableColumn="{hidden: false}">
|
</ng-container></clr-dg-column>
|
||||||
Sureconnect
|
<clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||||
</ng-container></clr-dg-column>
|
<clr-icon shape="bars"></clr-icon>{{'ACTION' | translate}}
|
||||||
|
</ng-container></clr-dg-column>
|
||||||
<clr-dg-column [clrDgField]="'active'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
|
||||||
{{'ACTIVE' | translate}}
|
<clr-dg-row *clrDgItems="let user of gridData?.slice()?.reverse();" [clrDgItem]="user">
|
||||||
</ng-container></clr-dg-column>
|
<clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;" (click)="goToLines(user)"> {{'SET_UP' | translate}}</span></clr-dg-cell>
|
||||||
|
<clr-dg-cell id="word">{{user.reportName}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell id="word">{{user.description}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell id="word">{{user.active}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>
|
||||||
<clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">
|
<a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-top-left">
|
||||||
<clr-icon shape="bars"></clr-icon>{{'ACTION' | translate}}
|
<span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
|
||||||
</ng-container></clr-dg-column>
|
<span class="tooltip-content"> {{'DELETE' | translate}}</span>
|
||||||
|
</a>
|
||||||
<clr-dg-row *clrDgItems="let user of gridData?.slice()?.reverse();" [clrDgItem]="user">
|
<clr-signpost>
|
||||||
<clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;"
|
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||||
(click)="goToLines(user)"> {{'SET_UP' | translate}}</span></clr-dg-cell>
|
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||||
<clr-dg-cell id="word">{{user.reportName}}</clr-dg-cell>
|
<h5 style="margin-top: 0">{{'WHO_COLUMN' | translate}}</h5>
|
||||||
<clr-dg-cell id="word">{{user.description}}</clr-dg-cell>
|
<div>{{'ACCOUNT_ID' | translate}}: <code class="clr-code">{{user.accountId}}</code></div>
|
||||||
|
<div>{{'CREATED_AT' | translate}}: <code class="clr-code">{{user.createdAt | date}}</code></div>
|
||||||
<clr-dg-cell id="word">{{user.sureconnect_name}}</clr-dg-cell>
|
<div>{{'CREATED_BY' | translate}}: <code class="clr-code">{{user.createdBy}}</code></div>
|
||||||
<clr-dg-cell id="word">{{user.active}}</clr-dg-cell>
|
<div>{{'UPDATED_AT' | translate}}: <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||||
<clr-dg-cell>
|
<div>{{'UPDATED_BY' | translate}}: <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||||
<a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true"
|
</clr-signpost-content>
|
||||||
class="tooltip tooltip-sm tooltip-top-left">
|
</clr-signpost>
|
||||||
<span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error"
|
|
||||||
style="color: red;"></clr-icon></span>
|
<!-- <span style="cursor: pointer;"><clr-icon shape="form" (click)="goToLines(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
|
||||||
<span class="tooltip-content"> {{'DELETE' | translate}}</span>
|
</clr-dg-cell>
|
||||||
</a>
|
<clr-dg-action-overflow>
|
||||||
<clr-signpost>
|
<!-- <button class="action-item" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button> -->
|
||||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
|
</clr-dg-action-overflow>
|
||||||
style="color: rgb(0, 130, 236);"></clr-icon></span>
|
|
||||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
<!-- <clr-dg-row-detail *clrIfExpanded >
|
||||||
<h5 style="margin-top: 0">{{'WHO_COLUMN' | translate}}</h5>
|
|
||||||
<div>{{'ACCOUNT_ID' | translate}}: <code class="clr-code">{{user.accountId}}</code></div>
|
|
||||||
<div>{{'CREATED_AT' | translate}}: <code class="clr-code">{{user.createdAt | date}}</code></div>
|
|
||||||
<div>{{'CREATED_BY' | translate}}: <code class="clr-code">{{user.createdBy}}</code></div>
|
|
||||||
<div>{{'UPDATED_AT' | translate}}: <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
|
||||||
<div>{{'UPDATED_BY' | translate}}: <code class="clr-code">{{user.updatedBy}}</code></div>
|
|
||||||
</clr-signpost-content>
|
|
||||||
</clr-signpost>
|
|
||||||
|
|
||||||
<!-- <span style="cursor: pointer;"><clr-icon shape="form" (click)="goToLines(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
|
|
||||||
</clr-dg-cell>
|
|
||||||
<clr-dg-action-overflow>
|
|
||||||
<!-- <button class="action-item" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button> -->
|
|
||||||
</clr-dg-action-overflow>
|
|
||||||
|
|
||||||
<!-- <clr-dg-row-detail *clrIfExpanded >
|
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="td-title">actionName: </td>
|
<td class="td-title">actionName: </td>
|
||||||
@@ -94,26 +77,26 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</clr-dg-row-detail> -->
|
</clr-dg-row-detail> -->
|
||||||
</clr-dg-row>
|
</clr-dg-row>
|
||||||
|
|
||||||
<clr-dg-footer>
|
<clr-dg-footer>
|
||||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'USERS_PER_PAGE' | translate}}</clr-dg-page-size>
|
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'USERS_PER_PAGE' | translate}}</clr-dg-page-size>
|
||||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||||
of {{pagination.totalItems}} users
|
of {{pagination.totalItems}} users
|
||||||
</clr-dg-pagination>
|
</clr-dg-pagination>
|
||||||
</clr-dg-footer>
|
</clr-dg-footer>
|
||||||
</clr-datagrid>
|
</clr-datagrid>
|
||||||
</div>
|
|
||||||
|
|
||||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
|
||||||
|
|
||||||
<div class="modal-body" *ngIf="rowSelected.id">
|
|
||||||
<h1 class="delete">{{'DELETE_CONFIRMATION' | translate}}</h1>
|
|
||||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">{{'CANCEL' | translate}}</button>
|
|
||||||
<button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">{{'DELETE' | translate}}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</clr-modal>
|
|
||||||
|
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||||
|
|
||||||
|
<div class="modal-body" *ngIf="rowSelected.id">
|
||||||
|
<h1 class="delete">{{'DELETE_CONFIRMATION' | translate}}</h1>
|
||||||
|
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-outline" (click)="modaldelete = false">{{'CANCEL' | translate}}</button>
|
||||||
|
<button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{'DELETE' | translate}}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</clr-modal>
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<h3 style="font-weight: 300;display: inline;"><b>REPORT SET UP - Project Details Report ({{ReportData.id}})</b></h3>
|
<h3 style="font-weight: 300;display: inline;"><b>REPORT SET UP - Project Details Report ({{ReportData.id}})</b></h3>
|
||||||
<span class="label label-light-blue" style="display: inline;margin-left: 10px;">Edit Mode</span>
|
<span class="label label-light-blue" style="display: inline;margin-left: 10px;">Edit Mode</span>
|
||||||
<hr />
|
<hr />
|
||||||
<form [formGroup]="entryForm">
|
<form [formGroup]="entryForm">
|
||||||
<div class="clr-row">
|
<div class="clr-row">
|
||||||
<div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12">
|
<div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12">
|
||||||
<div>
|
<div>
|
||||||
<div class="clr-row">
|
<div class="clr-row">
|
||||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||||
<div class="clr-col-sm-12">
|
<div class="clr-col-sm-12">
|
||||||
<label for="projectName">Connection Name</label>
|
<label for="projectName">Connection Name</label>
|
||||||
<select formControlName="conn_name" name="conn_name" [(ngModel)]="nodeEditProperties.conn_name" id="service" class="clr-dropdown">
|
<select formControlName="conn_name" name="conn_name" [(ngModel)]="nodeEditProperties.conn_name" id="service" class="clr-dropdown">
|
||||||
@@ -24,70 +24,55 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
<div class="clr-col-md-4 clr-col-sm-12">
|
||||||
<label for="url">Get URL</label>
|
<label for="url">Get URL</label>
|
||||||
<div> <input type="text" class="clr-input" formControlName="url" name="url"
|
<div> <input type="text" class="clr-input" formControlName="url" name="url" [(ngModel)]="nodeEditProperties.url" placeholder="Enter Url" style="width: 76%"> <span><button class="btn btn-icon btn-primary" (click)="getkeys()">
|
||||||
[(ngModel)]="nodeEditProperties.url" placeholder="Enter Url" style="width: 76%"> <span><button
|
<clr-icon shape="view-list"></clr-icon>
|
||||||
class="btn btn-icon btn-primary" (click)="getkeys()">
|
</button></span></div>
|
||||||
<clr-icon shape="view-list"></clr-icon>
|
</div>
|
||||||
</button></span></div>
|
<div class="clr-col-md-4 clr-col-sm-12">
|
||||||
</div>
|
<label for="workflow_name">Include Date filter</label>
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
<input type="checkbox" formControlName="date_param_req" name="date_param_req" [(ngModel)]="nodeEditProperties.date_param_req" clrToggle />
|
||||||
<label for="workflow_name">Include Date filter</label>
|
</div>
|
||||||
<input type="checkbox" formControlName="date_param_req" name="date_param_req"
|
<div class="clr-col-md-4 clr-col-sm-12">
|
||||||
[(ngModel)]="nodeEditProperties.date_param_req" clrToggle />
|
<label>Standard Parameters</label>
|
||||||
</div>
|
<clr-combobox-container style="margin-top: 0; padding-top: 0;">
|
||||||
|
<!-- <label style="padding-bottom: 5px; padding-top:0px; font-weight: lighter;" class="p1">Select Left Side Filter</label> -->
|
||||||
<!-- SureConnect Dropdown -->
|
<clr-combobox formControlName="std_param_html" name="std_param_html" [(ngModel)]="nodeEditProperties.std_param_html" clrMulti="true"
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
required>
|
||||||
<label for="sureConnectId">SureConnect Connection</label>
|
<ng-container *clrOptionSelected="let selected">
|
||||||
<select formControlName="sureConnectId" class="clr-select">
|
{{selected}}
|
||||||
<option value="">-- Select SureConnect --</option>
|
</ng-container>
|
||||||
<option *ngFor="let conn of sureconnectData" [value]="conn.id">
|
<clr-options>
|
||||||
{{conn.name || conn.id}}
|
<clr-option *clrOptionItems="let state of keysfromurl" [clrValue]="state">
|
||||||
</option>
|
{{state}}
|
||||||
</select>
|
</clr-option>
|
||||||
</div>
|
</clr-options>
|
||||||
|
</clr-combobox>
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
</clr-combobox-container>
|
||||||
<label>Standard Parameters</label>
|
|
||||||
<clr-combobox-container style="margin-top: 0; padding-top: 0;">
|
</div>
|
||||||
<!-- <label style="padding-bottom: 5px; padding-top:0px; font-weight: lighter;" class="p1">Select Left Side Filter</label> -->
|
<div class="clr-col-md-4 clr-col-sm-12">
|
||||||
<clr-combobox formControlName="std_param_html" name="std_param_html"
|
<label>List</label>
|
||||||
[(ngModel)]="nodeEditProperties.std_param_html" clrMulti="true" required>
|
<select>
|
||||||
<ng-container *clrOptionSelected="let selected">
|
<option value="">Choose from list</option>
|
||||||
{{selected}}
|
<option></option>
|
||||||
</ng-container>
|
</select>
|
||||||
<clr-options>
|
|
||||||
<clr-option *clrOptionItems="let state of keysfromurl" [clrValue]="state">
|
</div>
|
||||||
{{state}}
|
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||||
</clr-option>
|
|
||||||
</clr-options>
|
|
||||||
</clr-combobox>
|
|
||||||
</clr-combobox-container>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
|
||||||
<label>List</label>
|
|
||||||
<select>
|
|
||||||
<option value="">Choose from list</option>
|
|
||||||
<option></option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
|
||||||
<div class="clr-col-sm-12">
|
<div class="clr-col-sm-12">
|
||||||
<label for="description" class="d1">Adhoc Parameter String (html)</label>
|
<label for="description" class="d1">Adhoc Parameter String (html)</label>
|
||||||
<textarea id="t1" cols="10" rows="3" formControlName="adhoc_param_html" placeholder="Enter Description" name="adhoc_param_html" [(ngModel)]="nodeEditProperties.adhoc_param_html" style="width:100%">
|
<textarea id="t1" cols="10" rows="3" formControlName="adhoc_param_html" placeholder="Enter Description" name="adhoc_param_html" [(ngModel)]="nodeEditProperties.adhoc_param_html" style="width:100%">
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<br>
|
||||||
</div>
|
<!-- <div class="clr-row" style="padding-left:10px;">
|
||||||
<br>
|
|
||||||
<!-- <div class="clr-row" style="padding-left:10px;">
|
|
||||||
<div class="clr-col-md-4 clr-col-sm-12">
|
<div class="clr-col-md-4 clr-col-sm-12">
|
||||||
<label for="description" class="d1">Column String (html)</label>
|
<label for="description" class="d1">Column String (html)</label>
|
||||||
<textarea id="t1" cols="10" rows="3" formControlName="column_str" placeholder="Enter Description" name="column_str" [(ngModel)]="nodeEditProperties.column_str" style="width:100%">
|
<textarea id="t1" cols="10" rows="3" formControlName="column_str" placeholder="Enter Description" name="column_str" [(ngModel)]="nodeEditProperties.column_str" style="width:100%">
|
||||||
@@ -100,10 +85,11 @@
|
|||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<br>
|
<br>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<button type="button" class="btn btn-outline" (click)="back()">BACK</button>
|
<button type="button" class="btn btn-outline" (click)="back()">BACK</button>
|
||||||
<button type="submit" form-control class="btn btn-primary" (click)="onSubmit()">UPDATE</button>
|
<button type="submit" form-control class="btn btn-primary" (click)="onSubmit()">UPDATE</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -3,7 +3,6 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
|||||||
import { ActivatedRoute, Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { ToastrService } from 'ngx-toastr';
|
import { ToastrService } from 'ngx-toastr';
|
||||||
import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
|
import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
|
||||||
import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.service';
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@@ -14,87 +13,67 @@ import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.s
|
|||||||
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:'',
|
||||||
// Add sureConnectId property
|
|
||||||
sureConnectId: null,
|
|
||||||
|
|
||||||
};
|
|
||||||
// Add sureconnect data property
|
|
||||||
sureconnectData: any[] = [];
|
|
||||||
|
|
||||||
|
};
|
||||||
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) { }
|
||||||
private sureconnectService: SureconnectService) { }
|
|
||||||
|
|
||||||
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],
|
||||||
// Add sureConnectId to form
|
});
|
||||||
sureConnectId: [null],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Load sureconnect data first, then load report data
|
|
||||||
this.loadSureconnectData();
|
|
||||||
this.getById(this.id);
|
this.getById(this.id);
|
||||||
this.listoddatabase();
|
this.listoddatabase();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add method to load sureconnect data
|
|
||||||
loadSureconnectData() {
|
|
||||||
this.sureconnectService.getAll().subscribe((data: any[]) => {
|
|
||||||
this.sureconnectData = data;
|
|
||||||
console.log('Sureconnect data loaded:', this.sureconnectData);
|
|
||||||
}, (error) => {
|
|
||||||
console.log('Error loading sureconnect data:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
||||||
@@ -103,11 +82,6 @@ export class ReportBuild2editComponent implements OnInit {
|
|||||||
// this.nodeEditProperties.conn_name = this.builderLineData.conn_name;
|
// this.nodeEditProperties.conn_name = this.builderLineData.conn_name;
|
||||||
this.nodeEditProperties.date_param_req = this.builderLineData[0].date_param_req;
|
this.nodeEditProperties.date_param_req = this.builderLineData[0].date_param_req;
|
||||||
this.nodeEditProperties.url = this.builderLineData[0].url;
|
this.nodeEditProperties.url = this.builderLineData[0].url;
|
||||||
// Set sureConnectId if it exists in the data
|
|
||||||
this.nodeEditProperties.sureConnectId = this.builderLineData[0].sureConnectId || null;
|
|
||||||
|
|
||||||
// Update form with loaded data
|
|
||||||
this.entryForm.patchValue(this.nodeEditProperties);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
(err) => {
|
(err) => {
|
||||||
@@ -118,56 +92,51 @@ 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('coloum list data ', data);
|
console.log(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,
|
||||||
date_param_req: this.nodeEditProperties.date_param_req,
|
date_param_req: this.nodeEditProperties.date_param_req,
|
||||||
url: this.nodeEditProperties.url,
|
url: this.nodeEditProperties.url,
|
||||||
// Add sureConnectId to the data
|
|
||||||
sureConnectId: this.nodeEditProperties.sureConnectId,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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;
|
||||||
this.builderLineData[0].url = this.nodeEditProperties.url;
|
this.builderLineData[0].url = this.nodeEditProperties.url;
|
||||||
// Add sureConnectId to the data
|
|
||||||
this.builderLineData[0].sureConnectId = this.nodeEditProperties.sureConnectId;
|
|
||||||
|
|
||||||
console.log(this.builderLineData);
|
console.log(this.builderLineData);
|
||||||
// this.builderLineData.splice(1);
|
// this.builderLineData.splice(1);
|
||||||
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 } });
|
||||||
},
|
},
|
||||||
@@ -180,8 +149,6 @@ export class ReportBuild2editComponent implements OnInit {
|
|||||||
|
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
this.updated = true;
|
this.updated = true;
|
||||||
// Update nodeEditProperties with form values including sureConnectId
|
|
||||||
Object.assign(this.nodeEditProperties, this.entryForm.value);
|
|
||||||
this.update();
|
this.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -189,4 +156,4 @@ export class ReportBuild2editComponent implements OnInit {
|
|||||||
this.router.navigate(["../../all"], { relativeTo: this.route });
|
this.router.navigate(["../../all"], { relativeTo: this.route });
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -39,14 +39,6 @@
|
|||||||
</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">
|
||||||
@@ -130,27 +122,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>
|
||||||
|
|||||||
@@ -1,26 +1,3 @@
|
|||||||
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';
|
||||||
@@ -105,17 +82,6 @@ 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';
|
||||||
@@ -123,9 +89,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';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -159,13 +125,11 @@ 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 },
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
@@ -179,9 +143,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] } },
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -224,12 +188,6 @@ 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,
|
||||||
@@ -278,20 +236,8 @@ 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
|
||||||
|
|
||||||
@@ -324,186 +270,18 @@ 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 },
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,25 +1,3 @@
|
|||||||
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';
|
||||||
@@ -96,9 +74,6 @@ 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';
|
||||||
@@ -116,9 +91,6 @@ 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';
|
||||||
@@ -134,34 +106,18 @@ 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 Shield Dashboard Module
|
// import { QueryComponent } from './superadmin/query/query.component';
|
||||||
import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module';
|
// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
|
||||||
|
// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@@ -172,58 +128,71 @@ import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-das
|
|||||||
UsermaintanceaddComponent, UsermaintanceeditComponent,
|
UsermaintanceaddComponent, UsermaintanceeditComponent,
|
||||||
SubmenuComponent, ModulesComponent, SessionloggerComponent,
|
SubmenuComponent, ModulesComponent, SessionloggerComponent,
|
||||||
DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
|
DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
|
||||||
CommonFilterComponent, ChartWrapperComponent, CompactFilterComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
|
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, AllapiregisteryComponent, AddapiregisteryComponent, EditapiregisteryComponent,
|
AddextensionComponent, EditextensionComponent, ApiregisteryComponent,
|
||||||
|
DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent,
|
||||||
ApiregisterylineComponent,
|
MappingruleallComponent, MappingruleaddComponent, MappingruleeditComponent,
|
||||||
DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
|
ThemeCustomizationComponent,
|
||||||
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,
|
||||||
@@ -243,9 +212,6 @@ import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-das
|
|||||||
NgChartsModule,
|
NgChartsModule,
|
||||||
NgxChartsModule,
|
NgxChartsModule,
|
||||||
DynamicModule,
|
DynamicModule,
|
||||||
FieldTypesModule,
|
|
||||||
SharedModule,
|
|
||||||
ShieldDashboardModule,
|
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
CookieService,
|
CookieService,
|
||||||
|
|||||||
@@ -1,252 +0,0 @@
|
|||||||
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 { }
|
|
||||||
@@ -69,13 +69,4 @@ export class AlertsService {
|
|||||||
}
|
}
|
||||||
return this.apiRequest.get(apiUrl);
|
return this.apiRequest.get(apiUrl);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get values for a specific key from API
|
|
||||||
public getValuesFromUrl(url: string, sureId: number | undefined, key: string): Observable<any> {
|
|
||||||
let apiUrl = `chart/getValue?apiUrl=${url}&key=${key}`;
|
|
||||||
if (sureId) {
|
|
||||||
apiUrl += `&sureId=${sureId}`;
|
|
||||||
}
|
|
||||||
return this.apiRequest.get(apiUrl);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user