Chart Area
An area chart card for delivered vs received packages over time.
Paquetes recibidos vs entregados
Installation
pnpm dlx shadcn@latest add @ecodeliver/chart-areaUsage
Each data item follows the Order shape. The chart only plots delivered.amount and received.amount. Axis and tooltip dates are formatted in Spanish with date-fns.
Series labels are fixed: Entregas (delivered) and Devoluciones (received).
import { ChartArea } from "@/components/registry/chart-area";
export function Example() {
const data = [
{
date: new Date(),
expired: 0,
deliveryTime: 0,
incidents: 0,
toReceive: 0,
toDeliver: 0,
atPudo: 0,
delivered: { amount: 25, ratioEuros: 0 },
received: { amount: 10, ratioEuros: 0 },
comissionSales: { amount: 0, ratioEuros: 0 },
shopToShop: { amount: 0, ratioEuros: 0 },
returns: 0,
},
];
return <ChartArea title="Entregas vs devoluciones" data={data} />;
}API Reference
ChartArea
The ChartArea component plots two series on an area chart.
| Prop | Type | Default |
|---|---|---|
title | string | - |
data | object[] | - |
data item
| Prop | Type | Default |
|---|---|---|
date | Date | - |
delivered | { amount: number; ratioEuros: number } | - |
received | { amount: number; ratioEuros: number } | - |
expired | number | - |
deliveryTime | number | - |
incidents | number | - |
toReceive | number | - |
toDeliver | number | - |
atPudo | number | - |
comissionSales | { amount: number; ratioEuros: number } | - |
shopToShop | { amount: number; ratioEuros: number } | - |
returns | number | - |