Componente

Dashboard Grid

Tiles de dashboard arrastrables y redimensionables con columnas responsivas y eventos de cambio de layout

import { NeuDashboardGridComponent } from '@neural-ui/core/dashboard-grid';

Grid de 2 columnas con tiles grandes

Gráfico de ventas

Resumen

Acciones rápidas

Grid de 3 columnas (arrastra para reordenar)

Usuarios activos

Ingresos

Pedidos

Tasa conversión

Sesiones

Rebote

Orden users, revenue, orders, conversion, sessions, bounce

import { NeuDashboardGridComponent } from '@neural-ui/core/dashboard-grid';
import { NeuDashboardTileConfig } from '@neural-ui/core/dashboard-grid';

@Component({
  imports: [NeuDashboardGridComponent],
  template: `
    <neu-dashboard-grid
      [tiles]="tiles()"
      [columns]="3"
      (orderChange)="tiles.set($event)"
    >
      @for (tile of tiles(); track tile.id) {
        <div [attr.data-tile-id]="tile.id" class="tile-card">
          <h3>{{ tile.title }}</h3>
          <!-- métricas, gráficos, etc. / metrics, charts, etc. -->
        </div>
      }
    </neu-dashboard-grid>
  `
})
export class DashboardComponent {
  tiles = signal<NeuDashboardTileConfig[]>([
    { id: 'sales',   title: 'Sales' },
    { id: 'orders',  title: 'Orders' },
    { id: 'users',   title: 'Users' },
  ]);
}