HBars

Horizontal comparison bars. The visual grid is aria-hidden; an sr-only table exposes name plus each series value as real text.

Import

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

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

Usage

<HBars
  variant="stacked"
  scaleMax={20}
  description="Cortes y barbas por barbero esta semana"
  nameHeader="Barbero"
  series={[
      { id: "cortes", label: "Cortes" },
      { id: "barbas", label: "Barbas" },
    ]}
  rows={[
      { id: "diego", name: "Diego Quispe", values: [12, 6] },
      { id: "mateo", name: "Mateo Flores", values: [9, 4] },
      { id: "camila", name: "Camila Rojas", values: [7, 3] },
      { id: "andres", name: "Andrés Paredes", values: [3, 1], tone: "danger" },
    ]}
  ticks={ticks}
/>

Props

Prop	Type	Default	Description
rows *	HBarRow[]
series *	HBarSeriesTuple
scaleMax *	number		Domain value that maps to 100% of the bar width.
ticks	HBarTick[]		Ticks of the bottom axis; the whole row is omitted when not passed.
threshold	number		Threshold line, in the same scale as scaleMax.
variant	"stacked" | "paired"	"stacked"	“stacked” (default): one fill per row split between series by flex. “paired”: each series draws its own independent fill so two metrics on the same scale can be compared.
description *	string		Accessible table caption exposing the same numbers as the visual grid.
nameHeader *	string		Header of the name column in the accessible table.
className	string

* marks a required prop.

Storybook stories

• Default
• Paired
• With Threshold
• Single Series Without Ticks

Source

packages/ui/src/containers/hbars/hbars.tsx