Skip to content

P
portal-apps-manage
Commit ddbcfa1f by Ooh-Ao
Options

icon

parent eed0a650
Showing with 51 additions and 99 deletions
src/app/portal-manage/dashboard-management/dashboard-management.component.html
......@@ -138,7 +138,14 @@
</div>
<div class="dashboard-content">
<div *ngIf="!panels || panels.length === 0" class="flex flex-col justify-center items-center h-full text-center text-gray-500 bg-gray-50 rounded-lg">
<i class="bi bi-kanban text-6xl text-gray-300"></i>
<h3 class="mt-4 text-xl font-semibold text-gray-700">Empty Dashboard</h3>
<p class="mt-2 max-w-md">To get started, select a dashboard from the dropdown above or create a new one. Then, click on a widget from the sidebar on the left to add it to this canvas.</p>
</div>
<ejs-dashboardlayout
*ngIf="panels.length > 0"
id="dashboard_default"
[columns]="6"
[cellSpacing]="cellSpacing"
......@@ -182,85 +189,6 @@
></ng-container>
</ng-template>
</e-panel>
<!-- <e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="3">
<ng-template #header>
<div>Last year Sales Comparison</div>
</ng-template>
<ng-template #content>
<div id="line">
<ejs-chart
id="lineChart"
height="162px"
[primaryXAxis]="primaryXAxis"
>
<e-series-collection>
<e-series
[dataSource]="lineData"
xName="x"
yName="y"
type="Line"
>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</ng-template>
</e-panel>
<e-panel [sizeX]="3" [sizeY]="2" [row]="2" [col]="0">
<ng-template #header>
<div>Sales increase percentage 1</div>
</ng-template>
<ng-template #content>
<div id="pie">
<ejs-accumulationchart
id="pieChart"
height="162px"
[legendSettings]="legendSettings"
[tooltip]="tooltip"
>
<e-accumulation-series-collection>
<e-accumulation-series
[dataSource]="piechart"
xName="x"
yName="y"
innerRadius="20%"
name="Browser"
[dataLabel]="datalabel"
>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</ng-template>
</e-panel>
<e-panel [sizeX]="3" [sizeY]="2" [row]="2" [col]="3">
<ng-template #header>
<div>Sales increase percentage 2</div>
</ng-template>
<ng-template #content>
<div id="pie1">
<ejs-accumulationchart
id="pieChart1"
[enableAnimation]="false"
height="162px"
[tooltip]="tooltip"
[legendSettings]="legendSettings"
>
<e-accumulation-series-collection>
<e-accumulation-series
[dataSource]="piechart1"
xName="x"
yName="y"
radius="70%"
name="Browser"
[dataLabel]="datalabel"
>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</ng-template>
</e-panel> -->
</e-panels>
</ejs-dashboardlayout>
</div>
......
src/app/portal-manage/dashboard-management/widget-config/widget-config.component.html
......@@ -558,6 +558,10 @@
<div *ngIf="widgetType === 'SimpleKpiWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Value Field</mat-label>
<mat-select [(ngModel)]="currentConfig.valueField" name="valueField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
......@@ -575,8 +579,13 @@
<input matInput [(ngModel)]="currentConfig.unit" name="unit">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
<mat-label>Icon (e.g., 'person-fill')</mat-label>
<input matInput [(ngModel)]="currentConfig.icon" name="icon">
<mat-hint>Find icons at icons.getbootstrap.com</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Icon Color</mat-label>
<input matInput type="color" [(ngModel)]="currentConfig.color" name="color" class="h-[40px]">
</mat-form-field>
</div>
......
src/app/portal-manage/services/widget-config-generator.service.ts
......@@ -45,12 +45,18 @@ export class WidgetConfigGeneratorService {
newConfig.yField = col2;
break;
case 'SimpleKpiWidgetComponent':
case 'GaugeChartWidgetComponent':
newConfig.title = widget.thName;
newConfig.valueField = col1;
break;
case 'SimpleKpiWidgetComponent':
newConfig.title = widget.thName;
newConfig.valueField = col1;
newConfig.icon = 'info-circle-fill';
newConfig.color = '#000000';
break;
case 'SlicerWidgetComponent':
newConfig.title = widget.thName;
newConfig.optionsField = col1;
......
src/app/portal-manage/widgets/simple-kpi-widget/simple-kpi-widget.component.html
......@@ -23,23 +23,28 @@
<!-- Content -->
<div *ngIf="!isLoading && !hasError" class="text-center">
<div class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900">
{{ value }}
<span *ngIf="unit" class="text-xl sm:text-2xl font-medium text-gray-400 ml-1">{{ unit }}</span>
</div>
<div *ngIf="trendValue" class="flex items-center justify-center text-sm sm:text-base mt-2">
<span *ngIf="trend === 'up'" class="text-green-500 flex items-center font-semibold">
<i class="bi bi-arrow-up-right mr-1"></i>
{{ trendValue }}
</span>
<span *ngIf="trend === 'down'" class="text-red-500 flex items-center font-semibold">
<i class="bi bi-arrow-down-right mr-1"></i>
{{ trendValue }}
</span>
<span *ngIf="trend === 'neutral' && trendValue" class="text-gray-500 font-medium">
{{ trendValue }}
</span>
</div>
<div class="flex justify-center items-center gap-4">
<i *ngIf="icon" [style.color]="color" [class]="'bi bi-' + icon + ' text-5xl sm:text-6xl md:text-7xl'"></i>
<div>
<div class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900">
{{ value }}
<span *ngIf="unit" class="text-xl sm:text-2xl font-medium text-gray-400 ml-1">{{ unit }}</span>
</div>
<div *ngIf="trendValue" class="flex items-center justify-center text-sm sm:text-base mt-2">
<span *ngIf="trend === 'up'" class="text-green-500 flex items-center font-semibold">
<i class="bi bi-arrow-up-right mr-1"></i>
{{ trendValue }}
</span>
<span *ngIf="trend === 'down'" class="text-red-500 flex items-center font-semibold">
<i class="bi bi-arrow-down-right mr-1"></i>
{{ trendValue }}
</span>
<span *ngIf="trend === 'neutral' && trendValue" class="text-gray-500 font-medium">
{{ trendValue }}
</span>
</div>
</div>
</div>
</div>
</div>
......
src/app/portal-manage/widgets/simple-kpi-widget/simple-kpi-widget.component.ts
......@@ -16,6 +16,8 @@ export class SimpleKpiWidgetComponent extends BaseWidgetComponent {
public unit: string = '';
public trend: 'up' | 'down' | 'neutral' = 'neutral';
public trendValue: string = '';
public icon: string = '';
public color: string = '#000000';
constructor(protected override dashboardStateService: DashboardStateService) {
super(dashboardStateService);
......@@ -26,6 +28,8 @@ export class SimpleKpiWidgetComponent extends BaseWidgetComponent {
this.unit = this.config.unit || '';
this.trend = this.config.trend || 'neutral';
this.trendValue = this.config.trendValue || '';
this.icon = this.config.icon || 'info';
this.color = this.config.color || '#000000';
this.value = '-'; // Initial state before data loads
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment