Data

BarList

A ranking in rows: where the money went, which pages people read. Each label sits in full on its own bar, which is as long as its share of the largest, and the value stands at the end. Largest first, the first few with the rest added up. No chart library and no JavaScript of its own, so a server page renders it whole. Past five slices, it reads better than a donut.

view .md

Preview

where it wentseptember

home$1,243.80
out$365.00
groceries$320.50
learning$152.00
Others (1)$103.20

most read7 days

/4,820
/docs/installation2,380
/docs/components/data-table1,210
/docs/themes640

Installation

terminal

bash

npx @entrepta/cli@latest add bar-list

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

bar-list.tsx

tsx

import { BarList } from "@/components/entrepta/bar-list"

<BarList
  items={[
    { label: "home", value: 192380, color: "chart-1", href: "/categories/home" },
    { label: "groceries", value: 32050, color: "chart-3" },
    { label: "learning", value: 6200, color: "chart-5" },
  ]}
  max={5}
  showOthers
  format="money"
  linkComponent={Link}
/>

Props

Prop	Type	Default	Description
items	{ label, value, color?, href? }[]	-	color is a palette key or a CSS color
max	number	-	Show the first this many, largest first
showOthers	boolean	false	Add up the rest in one row
format	"number" \| "money" \| "percent"	"number"	Money from minor units, through Amount
color	palette key	"chart-1"	Bars without their own
keepOrder	boolean	false	Keep the order given
linkComponent	ElementType	"a"	For rows with href
labels	{ others? }	-	The last row's name, "Others (3)"