diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.html index 63edfd9..8d9331b 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.html @@ -1,13 +1,282 @@ -
- -
- Drilldown Level: {{currentDrilldownLevel}} - - +
+ +
+ +
+

Base Filters

+
+
+
{{ filter.field }} ({{ filter.type || 'text' }})
+ + +
+ +
+ + +
+ +
+ + +
+
+ {{ filter.field }} + + ({{ getSelectedOptionsCount(filter) }} selected) + + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + to + +
+
+ + +
+ + +
+
+
+
+ + +
+

Drilldown Filters

+
+
+
{{ filter.field }} ({{ filter.type || 'text' }})
+ + +
+ +
+ + +
+ +
+ + +
+
+ {{ filter.field }} + + ({{ getSelectedOptionsCount(filter) }} selected) + + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + to + +
+
+ + +
+ + +
+
+
+
+ + +
+

Layer Filters

+
+
+
{{ filter.field }} ({{ filter.type || 'text' }})
+ + +
+ +
+ + +
+ +
+ + +
+
+ {{ filter.field }} + + ({{ getSelectedOptionsCount(filter) }} selected) + + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + to + +
+
+ + +
+ + +
+
+
+
+ + +
+ +
+
+ + +
+
+

{{charttitle || 'Line Chart'}}

+
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+ + Drilldown Level: {{currentDrilldownLevel}} + + (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}}) + + +
+
+
+
@@ -16,12 +285,11 @@
-
+
= new Map(); // Map of filterId -> context + private documentClickHandler: ((event: MouseEvent) => void) | null = null; + private filtersInitialized: boolean = false; + constructor( private dashboardService: Dashboard3Service, private filterService: FilterService @@ -109,6 +114,12 @@ export class LineChartComponent implements OnInit, OnChanges { ngOnChanges(changes: SimpleChanges): void { 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 const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange; const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange; @@ -140,6 +151,318 @@ export class LineChartComponent implements OnInit, OnChanges { ngOnDestroy(): void { 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