Cartão de Gráfico de Ordens

Um ano de pedidos mensais como barras, este ano ao lado do ano passado para cada mês, por isso a comparação é a barra de leitura para barra. O título conta até o total com um chip delta, e pairando um mês troca- o pela figura desse mês e o que era um ano antes. O mesmo quadro e cabeçalho que o Cartão de Gráfico de Receita, então os dois compartilham uma linha. Grátis, construído em Recharts.

Orders

25,162

+20%

20,968 last year

This year
Last year

Instalação

Adicione o gráfico de pedidos 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 orders-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 hover são derivados deles. título define o rótulo do título em repouso.

import {  OrdersChartCard,  type OrdersPoint,} from "@/components/application/dashboard/orders-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 orders: OrdersPoint[] = [  { label: "Jan", current: 1680, previous: 1510 },  { label: "Feb", current: 1740, previous: 1480 },  // ...  { label: "Dec", current: 2342, previous: 1798 },];
<OrdersChartCard data={orders} title="Paid orders" />

Em linha

Ambas as cartas de gráficos livres são flex-1 E 344px de altura, então dividiram uma fileira uniformemente, como no painel do bate-papo.

{/* Two free charts in a row; both are 344px tall by default */}<div className="flex flex-col gap-4 xl:flex-row">  <RevenueChartCard />  <OrdersChartCard /></div>