Initial commit: dashboard-elements-ui library
Angular library providing dashboard components including grid layout, drag-and-drop widgets, resize handles, toolbar, config panel, layout presets, and persistence services.
This commit is contained in:
Giuliano Silvestro
462
demo/src/app/app.component.ts
Normal file
462
demo/src/app/app.component.ts
Normal file
@@ -0,0 +1,462 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
DbDashboardComponent,
|
||||
DbWidgetContentDefDirective,
|
||||
type DbDashboard,
|
||||
type DbWidgetType,
|
||||
} from '@sda/dashboard-elements-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule, DbDashboardComponent, DbWidgetContentDefDirective],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<db-dashboard
|
||||
[dashboard]="dashboard()"
|
||||
[widgetTypes]="widgetTypes"
|
||||
[showToolbar]="true"
|
||||
title="Analytics Dashboard"
|
||||
(widgetAdd)="onWidgetAdd($event)"
|
||||
(widgetRemove)="onWidgetRemove($event)"
|
||||
(widgetMove)="onWidgetMove($event)"
|
||||
(dashboardSave)="onSave($event)"
|
||||
>
|
||||
<ng-template dbWidgetContentDef="stats" let-widget>
|
||||
<div class="widget-stats">
|
||||
<div class="stat-value">{{ widget.config?.['value'] ?? 0 }}</div>
|
||||
<div class="stat-label">{{ widget.config?.['label'] ?? 'Metric' }}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template dbWidgetContentDef="chart" let-widget>
|
||||
<div class="widget-chart">
|
||||
<div class="chart-title">{{ widget.title }}</div>
|
||||
<div class="chart-placeholder">
|
||||
<svg viewBox="0 0 400 200" class="chart-svg">
|
||||
<polyline
|
||||
points="0,150 50,120 100,140 150,80 200,100 250,60 300,90 350,40 400,70"
|
||||
fill="none"
|
||||
stroke="#3b82f6"
|
||||
stroke-width="3"
|
||||
/>
|
||||
<polyline
|
||||
points="0,150 50,120 100,140 150,80 200,100 250,60 300,90 350,40 400,70"
|
||||
fill="url(#gradient)"
|
||||
opacity="0.2"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.8" />
|
||||
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template dbWidgetContentDef="table" let-widget>
|
||||
<div class="widget-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Sales</th>
|
||||
<th>Status</th>
|
||||
<th>Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Product A</strong></td>
|
||||
<td>$12,450</td>
|
||||
<td><span class="status status--success">Active</span></td>
|
||||
<td class="positive">+12.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Product B</strong></td>
|
||||
<td>$8,320</td>
|
||||
<td><span class="status status--success">Active</span></td>
|
||||
<td class="positive">+8.3%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Product C</strong></td>
|
||||
<td>$5,680</td>
|
||||
<td><span class="status status--warning">Pending</span></td>
|
||||
<td class="negative">-3.2%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Product D</strong></td>
|
||||
<td>$4,120</td>
|
||||
<td><span class="status status--success">Active</span></td>
|
||||
<td class="positive">+15.7%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template dbWidgetContentDef="list" let-widget>
|
||||
<div class="widget-list">
|
||||
@for (item of sampleListItems; track item.initial) {
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon">
|
||||
<div class="avatar">{{ item.initial }}</div>
|
||||
</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">{{ item.title }}</div>
|
||||
<div class="list-item__subtitle">{{ item.subtitle }}</div>
|
||||
</div>
|
||||
<div class="list-item__meta">{{ item.time }}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</ng-template>
|
||||
</db-dashboard>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.demo-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Stats Widget */
|
||||
.widget-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Chart Widget */
|
||||
.widget-chart {
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
/* Table Widget */
|
||||
.widget-table {
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f9fafb;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status--success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status--warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #059669;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: #dc2626;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* List Widget */
|
||||
.widget-list {
|
||||
padding: 0.5rem 0;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
gap: 0.75rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.list-item__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-item__title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.list-item__subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.list-item__meta {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
`],
|
||||
})
|
||||
export class AppComponent {
|
||||
dashboard = signal<DbDashboard>({
|
||||
id: 'demo-dashboard',
|
||||
title: 'Analytics Dashboard',
|
||||
layouts: [
|
||||
{
|
||||
breakpoint: 'lg',
|
||||
columns: 12,
|
||||
rowHeight: 80,
|
||||
gap: 16,
|
||||
widgets: [
|
||||
{ id: 'widget-1', col: 1, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
{ id: 'widget-2', col: 4, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
{ id: 'widget-3', col: 7, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
{ id: 'widget-4', col: 10, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
{ id: 'widget-5', col: 1, row: 3, colSpan: 8, rowSpan: 4 },
|
||||
{ id: 'widget-6', col: 9, row: 3, colSpan: 4, rowSpan: 4 },
|
||||
],
|
||||
},
|
||||
],
|
||||
widgets: [
|
||||
{
|
||||
id: 'widget-1',
|
||||
type: 'stats',
|
||||
title: 'Total Users',
|
||||
icon: 'users',
|
||||
layout: { id: 'widget-1', col: 1, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
config: { value: '2,845', label: 'Total Users' },
|
||||
},
|
||||
{
|
||||
id: 'widget-2',
|
||||
type: 'stats',
|
||||
title: 'Revenue',
|
||||
icon: 'dollar-sign',
|
||||
layout: { id: 'widget-2', col: 4, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
config: { value: '$54.2K', label: 'Monthly Revenue' },
|
||||
},
|
||||
{
|
||||
id: 'widget-3',
|
||||
type: 'stats',
|
||||
title: 'Conversion',
|
||||
icon: 'trending-up',
|
||||
layout: { id: 'widget-3', col: 7, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
config: { value: '28.5%', label: 'Conversion Rate' },
|
||||
},
|
||||
{
|
||||
id: 'widget-4',
|
||||
type: 'stats',
|
||||
title: 'Active Now',
|
||||
icon: 'activity',
|
||||
layout: { id: 'widget-4', col: 10, row: 1, colSpan: 3, rowSpan: 2 },
|
||||
config: { value: '124', label: 'Active Sessions' },
|
||||
},
|
||||
{
|
||||
id: 'widget-5',
|
||||
type: 'chart',
|
||||
title: 'Revenue Trend',
|
||||
icon: 'bar-chart-2',
|
||||
layout: { id: 'widget-5', col: 1, row: 3, colSpan: 8, rowSpan: 4 },
|
||||
},
|
||||
{
|
||||
id: 'widget-6',
|
||||
type: 'list',
|
||||
title: 'Recent Activity',
|
||||
icon: 'activity',
|
||||
layout: { id: 'widget-6', col: 9, row: 3, colSpan: 4, rowSpan: 4 },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
widgetTypes: DbWidgetType[] = [
|
||||
{
|
||||
type: 'stats',
|
||||
label: 'Stats Card',
|
||||
icon: 'bar-chart',
|
||||
description: 'Display key metrics and statistics',
|
||||
category: 'analytics',
|
||||
defaultLayout: {
|
||||
colSpan: 3,
|
||||
rowSpan: 2,
|
||||
minColSpan: 2,
|
||||
minRowSpan: 2,
|
||||
maxColSpan: 4,
|
||||
maxRowSpan: 3,
|
||||
},
|
||||
component: class {},
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
label: 'Chart',
|
||||
icon: 'line-chart',
|
||||
description: 'Visualize data with charts',
|
||||
category: 'analytics',
|
||||
defaultLayout: {
|
||||
colSpan: 6,
|
||||
rowSpan: 4,
|
||||
minColSpan: 4,
|
||||
minRowSpan: 3,
|
||||
},
|
||||
component: class {},
|
||||
},
|
||||
{
|
||||
type: 'table',
|
||||
label: 'Data Table',
|
||||
icon: 'table',
|
||||
description: 'Display tabular data',
|
||||
category: 'data',
|
||||
defaultLayout: {
|
||||
colSpan: 6,
|
||||
rowSpan: 4,
|
||||
minColSpan: 4,
|
||||
minRowSpan: 3,
|
||||
},
|
||||
component: class {},
|
||||
},
|
||||
{
|
||||
type: 'list',
|
||||
label: 'Activity List',
|
||||
icon: 'list',
|
||||
description: 'Show recent activities or notifications',
|
||||
category: 'data',
|
||||
defaultLayout: {
|
||||
colSpan: 4,
|
||||
rowSpan: 4,
|
||||
minColSpan: 3,
|
||||
minRowSpan: 3,
|
||||
},
|
||||
component: class {},
|
||||
},
|
||||
];
|
||||
|
||||
sampleListItems = [
|
||||
{ initial: 'JD', title: 'John Doe completed a task', subtitle: 'Project Alpha', time: '2m ago' },
|
||||
{ initial: 'SM', title: 'Sarah Miller uploaded a file', subtitle: 'Document.pdf', time: '15m ago' },
|
||||
{ initial: 'RJ', title: 'Robert Johnson commented', subtitle: 'Great work on this!', time: '1h ago' },
|
||||
{ initial: 'EW', title: 'Emily White created an issue', subtitle: 'Bug #234', time: '2h ago' },
|
||||
{ initial: 'MC', title: 'Michael Chen merged PR #45', subtitle: 'Feature: Add dashboard', time: '3h ago' },
|
||||
];
|
||||
|
||||
onWidgetAdd(event: any) {
|
||||
console.log('Widget added:', event);
|
||||
const newWidgets = [...this.dashboard().widgets, event.widget];
|
||||
this.dashboard.update(d => ({ ...d, widgets: newWidgets }));
|
||||
}
|
||||
|
||||
onWidgetRemove(event: any) {
|
||||
console.log('Widget removed:', event);
|
||||
const filtered = this.dashboard().widgets.filter((w: any) => w.id !== event.widget.id);
|
||||
this.dashboard.update(d => ({ ...d, widgets: filtered }));
|
||||
}
|
||||
|
||||
onWidgetMove(event: any) {
|
||||
console.log('Widget moved:', event);
|
||||
}
|
||||
|
||||
onSave(event: any) {
|
||||
console.log('Dashboard saved:', event);
|
||||
alert('Dashboard saved successfully!');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user