UnitGlyph

One icon of a unit chart, centered in a square cell. A partial unit draws the track silhouette and clips the colored copy, so 0.6 of a person is exactly 60% of its width. The outer group carries data-unit and a fill-box origin, so entry animations can scale it in place.

Import

import { UnitGlyph } from "@jcsoftdev/ui/charts";

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

Usage

export const Default: Story = { render: (args) => <GlyphRow {...args} /> };

Source of the Storybook story.

Props

Prop	Type	Default	Description
shape *	ResolvedUnitShape
x *	number		Top-left corner of the square cell, in pixels.
y *	number
size *	number		Side of the square cell.
fill *	number		0 to 1: how much of the unit is filled (the rest shows the track).
color *	string
track	boolean	true	Draw the unfilled part in the track color.
clipId *	string		Unique id for the clip of a partial unit.
direction	"up" | "right"	"right"	Partial units fill left to right (“right”) or bottom to top (“up”).

* marks a required prop.

Storybook stories

• Default
• Fills Up
• Scissors
• Without Track

Source

packages/ui/src/charts/core/unit-glyph.tsx