KpiRow

Joined KPI tiles: two per row when narrow, four from 720 px of page container width. It is a named group, so give it an aria-label when the tiles are not introduced by a heading.

Import

import { KpiRow } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/dashboard.

Usage

export const Default: Story = {
  render: () => (
    <DashboardPage>
      <KpiRow aria-label="Cifras clave">
        <Kpi label="Matrícula" value="1 240" description="+32 este mes" />
        <Kpi label="Recaudación" value="86%" description="Meta 90%" />
        <Kpi label="Morosidad" value="S/ 18 400" description="42 familias" />
        <Kpi label="Asistencia" value="94%" description="Últimos 30 días" />
      </KpiRow>
      <CardGrid columns={2}>
        <ChartCard title="Recaudación" subtitle="Miles de soles por mes" height={260}>
          <Collected />
        </ChartCard>
        <ChartCard title="Recaudación (mes)" aside={<Chip tone="success">+8%</Chip>} height={260}>
          <Collected />
        </ChartCard>
      </CardGrid>
      <TableCard title="Últimos pagos" subtitle="Hoy">
        <Table>
          <TableHead>
            <TableRow>
              <TableHeaderCell>Familia</TableHeaderCell>
              <TableHeaderCell alignRight>Monto</TableHeaderCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Quispe</TableCell>
              <TableCell alignRight>S/ 450</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Huamán</TableCell>
              <TableCell alignRight>S/ 380</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableCard>
    </DashboardPage>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
aria-label	string		Accessible name of the group of figures, e.g. “Key figures”.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Three Columns
• Narrow

Source

packages/ui/src/containers/dashboard/dashboard.tsx