Angular 17 na Prática: Construindo um Dashboard Reativo com Signals, D3.js e @defer

Prepare o café e bora codar!

A revolução do Angular 17 e o nosso setup

Preparando o terreno com velocidade

ng new dashboard-interativo --standalone --style=scss

• Vite e esbuild por padrão: se você piscou, talvez tenha perdido o build inicial. O Angular agora usa Vite para o servidor de desenvolvimento e esbuild para o build de produção. O resultado? Uma melhoria de mais de 67% na velocidade de build. Seu projeto agora fica pronto antes mesmo de você conseguir pegar um café. Essa mudança não apenas acelera o ciclo de desenvolvimento, mas também diminui a barreira de entrada, tornando o ecossistema mais amigável e competitivo.

• Standalone components por padrão: diga adeus à necessidade de declarar cada componente em um NgModule. Com componentes standalone como padrão, a estrutura do projeto fica mais limpa e intuitiva. Cada peça da sua aplicação é mais independente e reutilizável, removendo uma camada de abstração que historicamente era uma fonte de confusão para muitos desenvolvedores. O framework está, de forma consciente, melhorando sua própria ergonomia, focando não só na performance da aplicação, mas no bem-estar de quem a desenvolve.

D3.js: mago da matemática, não o chefe do DOM!

A regra de ouro da integração

O D3.js calcula, o Angular renderiza.

Configuração e nosso primeiro componente

npm install d3
npm install @types/d3 --save-dev

ng generate component bar-chart

Construindo o gráfico com o novo controle de fluxo

Definindo dados e escalas

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-bar-chart',
  standalone: true,
  imports: [],
  templateUrl: './bar-chart.component.html',
  styleUrl: './bar-chart.component.scss'
})
export class BarChartComponent implements OnInit {
  private data = [
    { month: 'Jan', sales: 120 },
    { month: 'Fev', sales: 150 },
    { month: 'Mar', sales: 200 },
    { month: 'Abr', sales: 80 },
    { month: 'Mai', sales: 250 },
  ];

  public processedData: any = [];
  public width = 500;
  public height = 300;

  ngOnInit(): void {
    // 1. Configurar escalas
    const xScale = d3.scaleBand()
     .domain(this.data.map(d => d.month))
     .range([0, this.width])
     .padding(0.1);

	const yScale = d3.scaleLinear()
	   .domain([0, d3.max(filteredData, d => d.sales) || 0])
	   .range([this.height, 0]);

    // 2. Processar os dados para o template
    this.processedData = this.data.map(d => ({
      month: d.month,
      x: xScale(d.month),
      y: yScale(d.sales),
      width: xScale.bandwidth(),
      height: this.height - yScale(d.sales)
    }));
  }
}

A bruxaria do @for e a importância do track

<svg [attr.width]="width" [attr.height]="height">
  <g>
    @for (bar of processedData; track bar.month) {
      <rect 
        [attr.x]="bar.x" 
        [attr.y]="bar.y" 
        [attr.width]="bar.width" 
        [attr.height]="bar.height"
        fill="steelblue" 
      />
    }
  </g>
</svg>

Lidando com listas vazias elegantemente

<svg [attr.width]="width" [attr.height]="height">
  <g>
    @for (bar of processedData; track bar.month) {
      } @empty {
      <text x="50%" y="50%" text-anchor="middle" fill="gray">
        Sem dados para exibir. Que tal um café?
      </text>
    }
  </g>
</svg>

Dando vida ao dashboard com a reatividade dos signals

O coração da interatividade: signal()

import { Component, computed, signal } from '@angular/core';
//...

export class BarChartComponent {
  // Estado reativo com Signals
  data = signal([
    { year: 2024, month: 'Jan', sales: 120 },
    { year: 2024, month: 'Fev', sales: 150 },
    //... mais dados de 2024
    { year: 2025, month: 'Jan', sales: 180 },
    { year: 2025, month: 'Fev', sales: 220 },
    //... mais dados de 2025
  ]);
  
  selectedYear = signal(2024);

  public width = 500;
  public height = 300;

  //...
}

Derivação de estado: computed()

// Dentro da classe BarChartComponent

processedData = computed(() => {
  const year = this.selectedYear();
  const filteredData = this.data().filter(d => d.year === year);

  if (filteredData.length === 0) {
    return;
  }

  const xScale = d3.scaleBand()
   .domain(filteredData.map(d => d.month))
   .range([0, this.width])
   .padding(0.1);

  const yScale = d3.scaleLinear()
   .domain()
   .range([this.height, 0]);

  return filteredData.map(d => ({
    month: d.month,
    x: xScale(d.month),
    y: yScale(d.sales),
    width: xScale.bandwidth(),
    height: this.height - yScale(d.sales)
  }));
});

Fechando o ciclo reativo

@for (bar of processedData(); track bar.month) {
  } @empty {
  }

<div>
  <button (click)="chart.changeYear(2024)">2024</button>
  <button (click)="chart.changeYear(2025)">2025</button>
</div>
<app-bar-chart #chart />

public changeYear(year: number) {
  this.selectedYear.set(year);
}

O gran finale: otimização com carregamento deferido (@defer)

@defer em ação

<app-bar-chart />

@defer (on viewport) {
  <app-details-table />
}

@defer (on viewport) {
  <app-heavy-chart />
} @placeholder {
  <div class="chart-placeholder">Carregando gráfico...</div>
} @loading(after 500ms; minimum 1s) {
  <app-spinner />
} @error {
  <p>Oops! Falha ao carregar o gráfico. Tente novamente.</p>
}

A evolução da legibilidade

Seu próximo nível…