# HierarchyMorph

> One hierarchy, two views.

Source: https://ui.jcsoftdev.com/docs/components/hierarchy-morph

One hierarchy, two views. Switching between treemap rectangles and
sunburst rings morphs every shape: each is sampled as a polygon in both
layouts and the points glide from one to the other, so the eye follows a
branch instead of re-reading the chart.

## Import

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

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

## Usage

```tsx
<HierarchyMorph
  title="Ventas por categoría y servicio"
  data={sales}
  valueFormat="currency"
  defaultMode="treemap"
  levels={2}
  showSwitch
  height={400}
  gap={2}
  sort
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `data` * | `HierarchyDatum` |  | Root of the tree; its total is shown in the tooltip share. |
| `mode` | `"treemap" \| "sunburst"` |  | Controlled view. |
| `defaultMode` | `"treemap" \| "sunburst"` | `"treemap"` | Initial view when uncontrolled. |
| `onModeChange` | `((mode: HierarchyMorphMode) => void)` |  |  |
| `levels` | `1 \| 2` | `2` | Levels drawn below the root (1 or 2). |
| `showSwitch` | `boolean` | `true` | Hide the built-in switch (drive `mode` from outside). |
| `height` | `number \| "fill"` | `380` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `gap` | `number` | `2` | Gap between shapes in pixels. |
| `sort` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `animate` | `boolean` | `true` | Morph duration in ms; 0 or `false` swaps instantly. |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<HierarchyMorphLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-hierarchymorph--default)
- [Starts As Sunburst](/storybook/?path=/story/charts-hierarchymorph--starts-as-sunburst)
- [One Level](/storybook/?path=/story/charts-hierarchymorph--one-level)
- [Controlled](/storybook/?path=/story/charts-hierarchymorph--controlled)
- [Loading](/storybook/?path=/story/charts-hierarchymorph--loading)
- [Empty](/storybook/?path=/story/charts-hierarchymorph--empty)
- [Narrow](/storybook/?path=/story/charts-hierarchymorph--narrow)

## Source

`packages/ui/src/charts/hierarchy-morph/hierarchy-morph.tsx`