This commit is contained in:
string 2025-10-27 17:04:36 +05:30
parent f654b233f6
commit 8dbeedba89
13 changed files with 357 additions and 23 deletions

View File

@ -28,6 +28,7 @@ export class BarRunnerComponent implements OnInit {
JsonData;
barData;
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -95,6 +96,7 @@ export class BarRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.barChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -139,7 +141,7 @@ export class BarRunnerComponent implements OnInit {
console.log('BarRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bar Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bar Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.barChartData = this.JsonData.barChartData;

View File

@ -29,6 +29,7 @@ export class BubbleRunnerComponent implements OnInit {
JsonData;
lineChartNoLabels: [] = [];
ChartLegend = false;
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -128,6 +129,7 @@ export class BubbleRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.ChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -172,7 +174,7 @@ export class BubbleRunnerComponent implements OnInit {
console.log('BubbleRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bubble Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bubble Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.bubbleChartData = this.JsonData.bubbleChartData;

View File

@ -0,0 +1,64 @@
<!-- Display Mode - No configuration UI in runner -->
<div class="compact-filter">
<div class="filter-header">
<span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
<span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
<span class="filter-type">({{ filterType }})</span>
</div>
<!-- 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>
<!-- Dropdown Filter -->
<div class="filter-control" *ngIf="filterType === 'dropdown'">
<select [(ngModel)]="filterValue"
(ngModelChange)="onFilterValueChange($event)"
class="clr-select compact-select">
<option value="">{{ filterLabel || filterKey }}</option>
<option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
</select>
</div>
<!-- Multi-Select Filter -->
<div class="filter-control" *ngIf="filterType === 'multiselect'">
<div class="checkbox-group">
<div *ngFor="let option of filterOptions" class="checkbox-item">
<input type="checkbox"
[checked]="filterValue && filterValue.includes(option)"
(change)="onMultiSelectChange(option, $event)"
[id]="'checkbox-' + option">
<label [for]="'checkbox-' + option">{{ option }}</label>
</div>
</div>
</div>
<!-- Date Range Filter -->
<div class="filter-control date-range" *ngIf="filterType === 'date-range'">
<input type="date"
[(ngModel)]="filterValue.start"
(ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
placeholder="Start Date"
class="clr-input compact-date">
<input type="date"
[(ngModel)]="filterValue.end"
(ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
placeholder="End Date"
class="clr-input compact-date">
</div>
<!-- Toggle Filter -->
<div class="filter-control toggle" *ngIf="filterType === 'toggle'">
<input type="checkbox"
[(ngModel)]="filterValue"
(ngModelChange)="onToggleChange($event)"
clrToggle
class="clr-toggle">
<label class="toggle-label">{{ filterLabel || filterKey }}</label>
</div>
</div>

View File

@ -0,0 +1,74 @@
.compact-filter {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
background-color: #f8f8f8;
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.filter-label, .filter-key {
font-weight: bold;
}
.filter-type {
font-size: 0.8em;
color: #666;
}
}
.filter-control {
margin-bottom: 10px;
.compact-input, .compact-select, .compact-date {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.compact-multiselect {
width: 100%;
height: 100px;
}
.checkbox-group {
display: flex;
flex-direction: column;
.checkbox-item {
margin: 5px 0;
input[type="checkbox"] {
margin-right: 5px;
}
}
}
&.date-range {
display: flex;
gap: 10px;
.compact-date {
flex: 1;
}
}
&.toggle {
display: flex;
align-items: center;
.clr-toggle {
margin-right: 10px;
}
.toggle-label {
margin: 0;
}
}
}
}

View File

@ -0,0 +1,173 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FilterService, Filter } from '../../../dashboardnew/common-filter/filter.service';
@Component({
selector: 'app-compact-filter-runner',
templateUrl: './compact-filter-runner.component.html',
styleUrls: ['./compact-filter-runner.component.scss']
})
export class CompactFilterRunnerComponent implements OnInit {
@Input() filterKey: string = '';
@Input() filterType: string = 'text';
@Input() filterOptions: string[] = [];
@Input() filterLabel: string = '';
@Input() apiUrl: string = '';
@Input() connection: number | undefined; // Changed from connectionId to match DashboardContentModel
@Output() filterChange = new EventEmitter<any>();
selectedFilter: Filter | null = null;
filterValue: any = '';
availableFilters: Filter[] = [];
availableKeys: string[] = [];
availableValues: string[] = [];
constructor(
private filterService: FilterService
) { }
ngOnInit(): void {
// Register this filter with the filter service
this.registerFilter();
// Subscribe to filter definitions to get available filters
this.filterService.filters$.subscribe(filters => {
this.availableFilters = filters;
this.updateSelectedFilter();
});
// Subscribe to filter state changes
this.filterService.filterState$.subscribe(state => {
if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
this.filterValue = state[this.selectedFilter.id];
}
});
}
// Register this filter with the filter service
registerFilter(): void {
if (this.filterKey) {
// Get current filter values from the service
const currentFilterValues = this.filterService.getFilterValues();
// Create a filter definition for this compact filter
const filterDef: Filter = {
id: `${this.filterKey}`,
field: this.filterKey,
label: this.filterLabel || this.filterKey,
type: this.filterType as any,
options: this.filterOptions,
value: this.filterValue // Use the current filter value
};
// Get current filters
const currentFilters = this.filterService.getFilters();
// Check if this filter is already registered
const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
if (existingFilterIndex >= 0) {
// Preserve the existing filter configuration
const existingFilter = currentFilters[existingFilterIndex];
// Preserve the existing filter value if it exists in the service
if (currentFilterValues.hasOwnProperty(existingFilter.id)) {
filterDef.value = currentFilterValues[existingFilter.id];
this.filterValue = filterDef.value; // Update local value
} else if (existingFilter.value !== undefined) {
// Fallback to existing filter's value if no service value
filterDef.value = existingFilter.value;
this.filterValue = filterDef.value;
}
// Preserve other configuration properties
filterDef.label = existingFilter.label;
filterDef.options = existingFilter.options || this.filterOptions;
// Update existing filter
currentFilters[existingFilterIndex] = filterDef;
} else {
// For new filters, check if there's already a value in the service
if (currentFilterValues.hasOwnProperty(filterDef.id)) {
filterDef.value = currentFilterValues[filterDef.id];
this.filterValue = filterDef.value; // Update local value
}
// Add new filter
currentFilters.push(filterDef);
}
// Update the filter service with the new filter list
this.filterService.setFilters(currentFilters);
// Update the selected filter reference
this.selectedFilter = filterDef;
}
}
updateSelectedFilter(): void {
if (this.filterKey && this.availableFilters.length > 0) {
this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
if (this.selectedFilter) {
// Get current value for this filter from the service
const currentState = this.filterService.getFilterValues();
const filterValue = currentState[this.selectedFilter.id];
if (filterValue !== undefined) {
this.filterValue = filterValue;
} else if (this.selectedFilter.value !== undefined) {
// Use the filter's default value if no service value
this.filterValue = this.selectedFilter.value;
} else {
// Use the current filter value as fallback
this.filterValue = this.filterValue || '';
}
}
}
}
onFilterValueChange(value: any): void {
if (this.selectedFilter) {
this.filterValue = value;
this.filterService.updateFilterValue(this.selectedFilter.id, value);
this.filterChange.emit({ filterId: this.selectedFilter.id, value: value });
// Update the filter definition in the service to reflect the new value
const currentFilters = this.filterService.getFilters();
const filterIndex = currentFilters.findIndex(f => f.id === this.selectedFilter.id);
if (filterIndex >= 0) {
currentFilters[filterIndex].value = value;
this.filterService.setFilters(currentFilters);
}
}
}
onToggleChange(checked: boolean): void {
this.onFilterValueChange(checked);
}
onDateRangeChange(dateRange: { start: string | null, end: string | null }): void {
this.onFilterValueChange(dateRange);
}
// Handle multi-select changes
onMultiSelectChange(option: string, event: any): void {
const checked = event.target.checked;
// Initialize filterValue as array if it's not already
if (!Array.isArray(this.filterValue)) {
this.filterValue = [];
}
if (checked) {
// Add option to array if not already present
if (!this.filterValue.includes(option)) {
this.filterValue.push(option);
}
} else {
// Remove option from array
this.filterValue = this.filterValue.filter((item: string) => item !== option);
}
// Emit the change
this.onFilterValueChange(this.filterValue);
}
}

View File

@ -19,6 +19,8 @@ import { PolarRunnerComponent } from './polar-runner/polar-runner.component';
import { RadarRunnerComponent } from './radar-runner/radar-runner.component';
// Add FilterService import
import { FilterService } from '../../dashboardnew/common-filter/filter.service';
// Add CompactFilterRunnerComponent import
import { CompactFilterRunnerComponent } from './compact-filter-runner/compact-filter-runner.component';
@Component({
selector: 'app-dashrunnerline',
@ -46,6 +48,7 @@ export class DashrunnerlineComponent implements OnInit {
{ name: "Radar Chart", componentInstance: RadarRunnerComponent },
{ name: "Grid View", componentInstance: GridRunnerComponent },
{ name: "To Do Chart", componentInstance: TodoRunnerComponent },
{ name: "Compact Filter", componentInstance: CompactFilterRunnerComponent }, // Add Compact Filter Runner
];
constructor(private Dashtestservive:DashrunnerService, private dashboardService: Dashboard3Service,private route: ActivatedRoute,

View File

@ -37,6 +37,7 @@ export class DoughnutRunnerComponent implements OnInit {
"chartLabels": ["Project", "Repository", "Wireframe"]
}
doughnutChartType: ChartType = 'doughnut';
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -87,6 +88,7 @@ export class DoughnutRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.doughnutChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -131,7 +133,7 @@ export class DoughnutRunnerComponent implements OnInit {
console.log('DoughnutRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Doughnut Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Doughnut Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.doughnutChartData = this.JsonData.chartData;

View File

@ -58,6 +58,7 @@ export class LineRunnerComponent implements OnInit {
lineChartLegend = false;
lineChartPlugins = [];
lineChartType = 'line';
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -108,6 +109,7 @@ export class LineRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.lineChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -172,7 +174,7 @@ export class LineRunnerComponent implements OnInit {
console.log('LineRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Line Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Line Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.lineChartData = this.JsonData.chartData;

View File

@ -27,6 +27,7 @@ export class PieRunnerComponent implements OnInit {
showlabel;
JsonData;
lineChartNoLabels: any[] = [];
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -82,6 +83,7 @@ export class PieRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.ChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -126,7 +128,7 @@ export class PieRunnerComponent implements OnInit {
console.log('PieRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Pie Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Pie Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.pieChartData = this.JsonData.pieChartData;

View File

@ -27,6 +27,7 @@ export class PolarRunnerComponent implements OnInit {
showlabel;
JsonData;
lineChartNoLabels: any[] = [];
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -82,6 +83,7 @@ export class PolarRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.ChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -126,7 +128,7 @@ export class PolarRunnerComponent implements OnInit {
console.log('PolarRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "PolarArea Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "PolarArea Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.polarAreaChartData = this.JsonData.polarAreaChartData;

View File

@ -28,6 +28,7 @@ export class RadarRunnerComponent implements OnInit {
JsonData;
lineChartNoLabels: any[] = [];
ChartLegend = false;
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -91,6 +92,7 @@ export class RadarRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.ChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -135,7 +137,7 @@ export class RadarRunnerComponent implements OnInit {
console.log('RadarRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Radar Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Radar Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.radarChartData = this.JsonData.radarChartData;

View File

@ -29,6 +29,7 @@ export class ScatterRunnerComponent implements OnInit {
JsonData;
lineChartNoLabels: any[] = [];
ChartLegend = false;
ConnectionId: number; // Add ConnectionId property
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
@ -110,6 +111,7 @@ export class ScatterRunnerComponent implements OnInit {
this.YAxis = ChartObject[i].yAxis;
this.showlabel = ChartObject[i].showlabel;
this.ChartLegend = ChartObject[i].chartlegend;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchChartData();
@ -154,7 +156,7 @@ export class ScatterRunnerComponent implements OnInit {
console.log('ScatterRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Scatter Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Scatter Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.JsonData = Ldata;
this.scatterChartData = this.JsonData.scatterChartData;

View File

@ -19,21 +19,18 @@ export class TodoRunnerComponent implements OnInit {
// Add subscriptions to unsubscribe on destroy
private subscriptions: Subscription[] = [];
constructor( private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
private router : Router,
// Add FilterService to constructor
private filterService: FilterService) { }
loading = false;
givendata;
error;
XAxis;
YAxis;
editId;
public DashtestboardArray: DashboardContentModel[] = [];
workflowLine;
TableName;
loading = false;
givendata;
error;
XAxis;
YAxis;
editId;
public DashtestboardArray: DashboardContentModel[] = [];
workflowLine;
TableName;
ConnectionId: number; // Add ConnectionId property
list;
data: any;
@ -43,6 +40,12 @@ export class TodoRunnerComponent implements OnInit {
listName: "title123",
List:['todo 1','todo 2'],
}
constructor( private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
private router : Router,
// Add FilterService to constructor
private filterService: FilterService) { }
ngOnInit(): void {
this.editId = this.route.snapshot.params.id;
console.log(this.editId);
@ -80,6 +83,7 @@ export class TodoRunnerComponent implements OnInit {
this.TableName = ChartObject[i].table;
this.XAxis = ChartObject[i].xAxis;
this.YAxis = ChartObject[i].yAxis;
this.ConnectionId = ChartObject[i].connection; // Add connection ID
console.log(this.TableName);
// Fetch data with filters
this.fetchTodoData();
@ -143,7 +147,7 @@ fetchTodoData(): void {
console.log('TodoRunner: Final filter object to send to API:', filterObj);
// Fetch data from the dashboard service with filters
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Todo List", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
this.Dashtestservive.getChartDataWithFilters(this.TableName, "Todo List", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
console.log(Ldata);
this.todoList.listName = Ldata.listName;
this.todoList.List = Ldata.List;