Barcode Stack
A category breakdown drawn as a stacked progress bar of hairlines.
$149 once · every Pro piece
Each category is a run of thin vertical strokes in the grey ladder, what is left of the limit is a run of ghost strokes, and strokes past the target run hot. On mount the strokes rise in a wave from left to right. The pointer drags a comb through the bar: strokes near it stretch up on a spring and settle behind it. Point at a run, or Tab in and use the arrow keys, to isolate it; the readout rolls from total spend to that category and a panel gives its share. Labels above the runs thin themselves so none collide. As one stacked bar, or one barcode row per category.
Install
npx shadcn@latest add @obsyde/barcode-stackNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { BarcodeStack } from '@/components/obsyde/ember/barcode-stack/BarcodeStack';
export function Example() {
return (
<BarcodeStack layout="stack" target={0.7} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/barcode-stack/BarcodeStack.tsxcomponentember/barcode-stack/barcode-stack.cssstylesember/barcode-stack/BarcodeStackDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/state-messages.tsxsharedember/viz-kit/stage.tsxsharedember/viz-kit/stage.csssharedember/viz-kit/Legend.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
layoutLayout | 'stack' | 'rows' | 'stack' |
textureTexture | 'hairline' | 'dense' | 'dashed' | 'hairline' |
categoriesCategories | number | 5 |
spentSpent | number | 0.78 |
targetTarget | number | 0.7 |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
seedSeed | number | 4 |