# UnitGlyph

> One icon of a unit chart, centered in a square cell.

Source: https://ui.jcsoftdev.com/docs/components/unit-glyph

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

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

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

## Usage

```tsx
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](/storybook/?path=/story/charts-primitives-unitglyph--default)
- [Fills Up](/storybook/?path=/story/charts-primitives-unitglyph--fills-up)
- [Scissors](/storybook/?path=/story/charts-primitives-unitglyph--scissors)
- [Without Track](/storybook/?path=/story/charts-primitives-unitglyph--without-track)

## Source

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