Cartão Gráfico de Receitas

Um ano de receita mensal desenhado contra o ano anterior: o ano atual como uma área macia e linha sólida, no ano passado como uma linha tracejada atrás dela, de modo que o intervalo entre eles é a história. O título conta até o total com um chip delta, e pairando um mês troca- o pela figura daquele mês e o que era um ano antes. O mesmo quadro que as cartas de estatísticas e as cartas de gráfico Pro, então ele cai em qualquer linha de painel. Livre, construído em Recharts.

Revenue

$152,314

+16%

$131,304 last year

This year
Last year

Instalação

Adicione o gráfico de receita com o CLI, que também instala Recharts e o chip que ele compõe, ou copie o arquivo:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add revenue-chart-card

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Os seus próprios números

Passar data como doze pontos com um current e a anterior Os totais, o delta e a leitura do hover são derivados, então não há mais nada para manter em sincronia. título define o rótulo do título em repouso.

import {  RevenueChartCard,  type RevenuePoint,} from "@/components/application/dashboard/revenue-chart-card";
// Twelve points, one per month. `current` is this year, `previous` the same// month a year earlier; the headline and the delta are computed from them.const revenue: RevenuePoint[] = [  { label: "Jan", current: 9840, previous: 8210 },  { label: "Feb", current: 10120, previous: 8460 },  // ...  { label: "Dec", current: 14703, previous: 11924 },];
<RevenueChartCard data={revenue} title="Net revenue" />

Em linha

O cartão é flex-1 e 344px de altura por padrão, então ele compartilha uma linha com o cartão de gráfico de pedidos ou qualquer outro cartão, como no painel do iniciador de bate-papo.

{/* Fills a dashboard row beside another card; the default height is 344px */}<div className="flex flex-col gap-4 xl:flex-row">  <RevenueChartCard />  <OrdersChartCard /></div>