# PieLayout, PieSlice, and PieLabel

`PieLayout` calculates geometry and label placements before rendering its function
children once per source row. Import these components from `@pibbl/core/viz`.

Pass `data`, `value`, optional `keyBy`, and a `label(slice)` callback returning
single-line text. Style accepts numeric `cx`, `cy`, `radius`, `innerRadius`, and `labelGap`,
plus a Canvas font string `labelFont`; defaults use the current allocation. `bounds` defaults to that local
allocation. Bounds constrain labels, not paint; compose core Clip if needed.

`placement` is `outside` (default), `inside`, or `auto`. Inside labels must fit
in the sector and bounds; otherwise they are hidden. Auto moves non-fitting
labels outside. Outside labels occupy separate left/right lanes, stay outside
the whole disk, and preserve vertical anchor order. Leaders fan out immediately
from slice midpoints, ending with a short horizontal segment beside the text.
Each half packs labels away from the equator, respecting the circle tangent so
leaders do not cross the pie. Labels that cannot fit are omitted deterministically. No font
shrinking, sorting of data, or aggregation is implicit.

Each callback receives a `PieLayoutSlice`: original `PieSliceGeometry` fields,
center, outer `radius`, `innerRadius`, and optional `label`. Labels expose `status: "placed"` with their
box, baseline, and leader points, or `status: "hidden"` with reason `empty`,
`inside-fit`, or `space`. Applications can provide a legend or other fallback.

`PieSlice` takes `slice`, normal Pibbl events/focus props, paint style, and optional
children. `PieLabel` takes the same slice and renders its coordinated label and
leader. Label font belongs to the chart's measurement inputs; its paint style
accepts `fill`, `leaderStroke`, and `leaderWidth`. Labels are decorative by
default. Set `pointerEvents="auto"` and provide event handlers to make a label
box selectable. Slice hit geometry never expands to include its label.

## Donuts and label containment

`innerRadius` defaults to zero. For a nonzero radius require finite
`0 <= innerRadius < radius`; a zero radius permits only a zero inner radius.
`PieSlice` paints and targets the same annular path. Its hole lets input reach
underlying content, and the inner edge participates in ordinary stroke geometry.

The inside candidate lies on the angular bisector at
`innerRadius + 0.65 * (radius - innerRadius)`. The complete measured label box
must fit the bounds, outer disk and conservative angular region, and its closest
point to the center must remain outside the hole. Testing corners against the
hole alone is insufficient. Tangency is allowed. The angular region uses at
most a half-disk, so a wide slice can omit a label that a more expensive placement
search might fit. No search, shrinking, clipping or movement into the hole is
performed. Failed `inside` placement reports `inside-fit`; `auto` tries the
outside lanes and reports `space` if those fail. Empty text or geometry reports
`empty`. Outside leaders remain anchored to the outer radius.

## Updates, caching and ownership

Data and chart style inputs accept core signals. By default, each PieLayout
component evaluation reevaluates data/value/key/label callbacks; their stable
identities do not prove their results unchanged. Plain mutation alone does not
schedule Pibbl work. Signal reads inside callbacks are tracked dynamically.
Callbacks cannot call hooks; return components for hooks.

Optional `revision` accepts a signal-capable nonnegative safe integer and opts
into cached preprocessing. Change it whenever mutable data or nonreactive
callback dependencies change, including captured variables, external lookup
tables or loaded font metrics. Setting a data signal to the same array can be
equality-suppressed; an independently changed revision signal schedules work.
Data/accessor replacement and tracked signal changes also invalidate relevant
work. Layout additionally depends on center/radii, bounds, font, gap, placement
and label callback. Stable revision plus unchanged dependencies allows paint-only
selection changes to reuse geometry and measurements.

```tsx
import { signal } from "@pibbl/core";
import {
  PieLayout,
  PieSlice,
  PieLabel,
  type PieSliceGeometry,
} from "@pibbl/core/viz";

const rows = [
  { amount: 2, name: "North" },
  { amount: 3, name: "South" },
];
const label = (slice: PieSliceGeometry<(typeof rows)[number]>) =>
  slice.datum.name;
const revision = signal(0);
<PieLayout
  data={rows}
  value="amount"
  revision={revision}
  label={label}
  style={{ radius: 100, innerRadius: 55 }}
>
  {(slice) => (
    <PieSlice slice={slice}>
      <PieLabel slice={slice} />
    </PieSlice>
  )}
</PieLayout>;
// After an in-place edit outside render:
revision.update((value) => value + 1);
```

Geometry and label work is mount-owned and released on removal/disposal.
A rebuild never publishes partial layout. Slice geometry is O(n); inside checks
are O(1) per label, with outside packing O(n log n) sorting plus linear sweeps.
The root still repaints ordinary paths. There is no separate renderer, frame
loop, global cache or retained paint cache.

The label renderer supports single-line text. Load custom fonts before mounting
or change revision when their metrics change. Multiline/custom label content
and automatic legend generation remain separate capabilities.

## API details from source

<span id="api-PieLayout"></span>

### PieLayout

Computes pie geometry and label placement, then renders children for each resolved slice.

```ts
PieLayout: <D>(props: PieLayoutProps<D>) => JSX.Element[]
```

Related API: [PieLayout](/reference/components/pie-layout/), [PieLayoutProps](/reference/components/pie-layout/), [JSX](/reference/overview/).

#### Parameters

- **`props`** — Data, pie geometry, label policy, and child renderer. See [PieLayoutProps](/reference/components/pie-layout/).

#### Returns

Pibbl content arranged as pie slices.

#### See also

[PieLayoutProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-layout.tsx:38](/source/packages/core/src/features/viz/lib/pie-layout-tsx/#L38)

<span id="api-PieSlice"></span>

### PieSlice

Draws a resolved pie slice using wedge geometry and the supplied paint style.

```ts
PieSlice: <D>({ slice, style: input, children, ...events }: PieSliceProps<D>) => JSX.Element
```

Related API: [PieSlice](/reference/components/pie-layout/), [PieSliceProps](/reference/components/pie-layout/), [JSX](/reference/overview/).

#### Parameters

- **`props`** — Slice geometry, appearance, handlers, and children. See [PieSliceProps](/reference/components/pie-layout/).

#### Returns

Pibbl nodes drawing one pie slice and its children.

#### See also

[PieSliceProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-layout.tsx:186](/source/packages/core/src/features/viz/lib/pie-layout-tsx/#L186)

<span id="api-PieLabel"></span>

### PieLabel

Draws a resolved slice label and optional leader line; decorative labels ignore pointer
targeting
by default.

```ts
PieLabel: <D>({ slice, style: input, pointerEvents, ...events }: PieLabelProps<D>) => JSX.Element | null
```

Related API: [PieLabel](/reference/components/pie-layout/), [PieLabelProps](/reference/components/pie-layout/), [JSX](/reference/overview/).

#### Parameters

- **`props`** — Slice geometry, label appearance, and interaction options. See
[PieLabelProps](/reference/components/pie-layout/) .

#### Returns

Pibbl content drawing the slice label, or null when the label was not placed.

#### See also

[PieLabelProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-layout.tsx:352](/source/packages/core/src/features/viz/lib/pie-layout-tsx/#L352)

<span id="api-PieLayoutProps"></span>

### PieLayoutProps

Authored inputs for PieLayout, including the declared data and presentation options.

```ts
interface PieLayoutProps<D> extends PieOptions<D>
```

Related API: [PieLayoutProps](/reference/components/pie-layout/), [PieOptions](/reference/functions/pie-slices/).

#### See also

[PieOptions](/reference/functions/pie-slices/)

[SignalValue](/reference/types/signal-inputs/#signalvalue)

[PieSliceGeometry](/reference/functions/pie-slices/)

[PieLabelPlacement](/reference/components/pie-layout/)

[HoverBounds](/reference/components/hover-card/)

`SignalStyle`

[PieLayoutStyle](/reference/components/pie-layout/)

[PieLayoutSlice](/reference/components/pie-layout/)

[PibblNode](/reference/types/elements-components/#pibblnode)

[View source — packages/core/src/features/viz/lib/pie-types.ts:127](/source/packages/core/src/features/viz/lib/pie-types-ts/#L127)

#### Properties and methods

<span id="api-PieLayoutProps-data"></span>
<details>
<summary>data</summary>


```ts
readonly data: SignalValue<readonly D[]>
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

Application data supplied to the component or reported by the event. See SignalValue.

[View source — packages/core/src/features/viz/lib/pie-types.ts:131](/source/packages/core/src/features/viz/lib/pie-types-ts/#L131)

</details>

<span id="api-PieLayoutProps-revision"></span>
<details>
<summary>revision (optional)</summary>


```ts
readonly revision?: SignalValue<number> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

Opts into cached geometry for mutable inputs; advance after nonreactive changes.

[View source — packages/core/src/features/viz/lib/pie-types.ts:133](/source/packages/core/src/features/viz/lib/pie-types-ts/#L133)

</details>

<span id="api-PieLayoutProps-label"></span>
<details>
<summary>label (optional)</summary>


```ts
readonly label?: ((slice: PieSliceGeometry<D>) => string) | undefined
```

Related API: [PieSliceGeometry](/reference/functions/pie-slices/).

Formats the text associated with a pie slice. See PieSliceGeometry.

##### Parameters

- **`slice`** — Slice whose label text is needed. See [PieSliceGeometry](/reference/functions/pie-slices/).

##### Returns

Label text for the slice.

[View source — packages/core/src/features/viz/lib/pie-types.ts:139](/source/packages/core/src/features/viz/lib/pie-types-ts/#L139)

</details>

<span id="api-PieLayoutProps-placement"></span>
<details>
<summary>placement (optional)</summary>


```ts
readonly placement?: SignalValue<PieLabelPlacement> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue), [PieLabelPlacement](/reference/components/pie-layout/).

Preferred placement relative to the anchor or containing geometry. See SignalValue,
PieLabelPlacement.

[View source — packages/core/src/features/viz/lib/pie-types.ts:144](/source/packages/core/src/features/viz/lib/pie-types-ts/#L144)

</details>

<span id="api-PieLayoutProps-bounds"></span>
<details>
<summary>bounds (optional)</summary>


```ts
readonly bounds?: SignalValue<HoverBounds> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue), [HoverBounds](/reference/components/hover-card/).

Logical region constraining the content or query. See SignalValue,
HoverBounds.

[View source — packages/core/src/features/viz/lib/pie-types.ts:149](/source/packages/core/src/features/viz/lib/pie-types-ts/#L149)

</details>

<span id="api-PieLayoutProps-style"></span>
<details>
<summary>style (optional)</summary>


```ts
readonly style?: SignalValue<Readonly<{ readonly cx?: SignalValue<number | undefined>; readonly cy?: SignalValue<number | undefined>; readonly radius?: SignalValue<number | undefined>; readonly innerRadius?: SignalValue<number | undefined>; readonly labelFont?: SignalValue<string | undefined>; readonly labelGap?: SignalValue<number | undefined>; }>> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

Declared presentation and layout properties. See SignalValue, SignalStyle,
PieLayoutStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:154](/source/packages/core/src/features/viz/lib/pie-types-ts/#L154)

</details>

<span id="api-PieLayoutProps-children"></span>
<details>
<summary>children</summary>


```ts
readonly children: (slice: PieLayoutSlice<D>) => PibblNode
```

Related API: [PieLayoutSlice](/reference/components/pie-layout/), [PibblNode](/reference/types/elements-components/#pibblnode).

Descendant content or the callback that supplies it. See PieLayoutSlice,
PibblNode.

##### Parameters

- **`slice`** — Slice geometry and layout metadata. See [PieLayoutSlice](/reference/components/pie-layout/).

##### Returns

Pibbl content representing the slice. See [PibblNode](/reference/types/elements-components/#pibblnode).

[View source — packages/core/src/features/viz/lib/pie-types.ts:161](/source/packages/core/src/features/viz/lib/pie-types-ts/#L161)

</details>

<span id="api-PieLayoutProps-value"></span>
<details>
<summary>value</summary>


```ts
readonly value: LineAccessor<D>
```

Related API: [LineAccessor](/reference/components/line-series/).

Value associated with this sample, input, or result. See LineAccessor.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:16](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L16)

</details>

<span id="api-PieLayoutProps-keyBy"></span>
<details>
<summary>keyBy (optional)</summary>


```ts
readonly keyBy?: PlotKeyAccessor<D> | undefined
```

Related API: [PlotKeyAccessor](/reference/components/plot-series/).

Property or callback supplying stable identity for each datum. See PlotKeyAccessor.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:18](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L18)

</details>

<span id="api-PieLayoutStyle"></span>

### PieLayoutStyle

Supported geometry and presentation properties for PieLayout.

```ts
interface PieLayoutStyle
```

Related API: [PieLayoutStyle](/reference/components/pie-layout/).

#### See also

[PieLayoutProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:100](/source/packages/core/src/features/viz/lib/pie-types-ts/#L100)

#### Properties and methods

<span id="api-PieLayoutStyle-cx"></span>
<details>
<summary>cx (optional)</summary>


```ts
readonly cx?: number | undefined
```

Horizontal coordinate of the center. See PieLayoutStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:102](/source/packages/core/src/features/viz/lib/pie-types-ts/#L102)

</details>

<span id="api-PieLayoutStyle-cy"></span>
<details>
<summary>cy (optional)</summary>


```ts
readonly cy?: number | undefined
```

Vertical coordinate of the center. See PieLayoutStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:104](/source/packages/core/src/features/viz/lib/pie-types-ts/#L104)

</details>

<span id="api-PieLayoutStyle-radius"></span>
<details>
<summary>radius (optional)</summary>


```ts
readonly radius?: number | undefined
```

Radius in the coordinate system of this geometry or effect. See PieLayoutStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:106](/source/packages/core/src/features/viz/lib/pie-types-ts/#L106)

</details>

<span id="api-PieLayoutStyle-innerRadius"></span>
<details>
<summary>innerRadius (optional)</summary>


```ts
readonly innerRadius?: number | undefined
```

Radius of the inner boundary. See PieLayoutStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:108](/source/packages/core/src/features/viz/lib/pie-types-ts/#L108)

</details>

<span id="api-PieLayoutStyle-labelFont"></span>
<details>
<summary>labelFont (optional)</summary>


```ts
readonly labelFont?: string | undefined
```

Canvas font used when measuring pie labels. See PieLayoutStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:110](/source/packages/core/src/features/viz/lib/pie-types-ts/#L110)

</details>

<span id="api-PieLayoutStyle-labelGap"></span>
<details>
<summary>labelGap (optional)</summary>


```ts
readonly labelGap?: number | undefined
```

Clearance between pie geometry and its labels. See PieLayoutStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:112](/source/packages/core/src/features/viz/lib/pie-types-ts/#L112)

</details>

<span id="api-PieLayoutSlice"></span>

### PieLayoutSlice

Pie-slice data extended with center, radii, and optional label placement.

```ts
interface PieLayoutSlice<D> extends PieSliceGeometry<D>
```

Related API: [PieLayoutSlice](/reference/components/pie-layout/), [PieSliceGeometry](/reference/functions/pie-slices/).

#### See also

[PieSliceGeometry](/reference/functions/pie-slices/)

[PieLabelLayout](/reference/components/pie-layout/)

[PieLayoutProps](/reference/components/pie-layout/)

[PieSliceProps](/reference/components/pie-layout/)

[PieLabelProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:83](/source/packages/core/src/features/viz/lib/pie-types-ts/#L83)

#### Properties and methods

<span id="api-PieLayoutSlice-cx"></span>
<details>
<summary>cx</summary>


```ts
readonly cx: number
```

Horizontal coordinate of the center. See PieLayoutSlice.

[View source — packages/core/src/features/viz/lib/pie-types.ts:85](/source/packages/core/src/features/viz/lib/pie-types-ts/#L85)

</details>

<span id="api-PieLayoutSlice-cy"></span>
<details>
<summary>cy</summary>


```ts
readonly cy: number
```

Vertical coordinate of the center. See PieLayoutSlice.

[View source — packages/core/src/features/viz/lib/pie-types.ts:87](/source/packages/core/src/features/viz/lib/pie-types-ts/#L87)

</details>

<span id="api-PieLayoutSlice-radius"></span>
<details>
<summary>radius</summary>


```ts
readonly radius: number
```

Radius in the coordinate system of this geometry or effect. See PieLayoutSlice.

[View source — packages/core/src/features/viz/lib/pie-types.ts:89](/source/packages/core/src/features/viz/lib/pie-types-ts/#L89)

</details>

<span id="api-PieLayoutSlice-innerRadius"></span>
<details>
<summary>innerRadius</summary>


```ts
readonly innerRadius: number
```

Radius of the inner boundary. See PieLayoutSlice.

[View source — packages/core/src/features/viz/lib/pie-types.ts:91](/source/packages/core/src/features/viz/lib/pie-types-ts/#L91)

</details>

<span id="api-PieLayoutSlice-label"></span>
<details>
<summary>label (optional)</summary>


```ts
readonly label?: PieLabelLayout | undefined
```

Related API: [PieLabelLayout](/reference/components/pie-layout/).

Resolved label placement, or a reason that the label is hidden. See PieLabelLayout.

[View source — packages/core/src/features/viz/lib/pie-types.ts:93](/source/packages/core/src/features/viz/lib/pie-types-ts/#L93)

</details>

<span id="api-PieLayoutSlice-datum"></span>
<details>
<summary>datum</summary>


```ts
readonly datum: D
```

The original data item selected by this result. See PieSliceGeometry.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:30](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L30)

</details>

<span id="api-PieLayoutSlice-index"></span>
<details>
<summary>index</summary>


```ts
readonly index: number
```

Index of the selected datum in its source data. See PieSliceGeometry.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:32](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L32)

</details>

<span id="api-PieLayoutSlice-key"></span>
<details>
<summary>key</summary>


```ts
readonly key: string
```

Stable identity used by the containing protocol. See PieSliceGeometry.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:34](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L34)

</details>

<span id="api-PieLayoutSlice-value"></span>
<details>
<summary>value</summary>


```ts
readonly value: number
```

Value associated with this sample, input, or result. See PieSliceGeometry.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:36](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L36)

</details>

<span id="api-PieLayoutSlice-fraction"></span>
<details>
<summary>fraction</summary>


```ts
readonly fraction: number
```

Normalized share or position represented by this value. See PieSliceGeometry.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:38](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L38)

</details>

<span id="api-PieLayoutSlice-startAngle"></span>
<details>
<summary>startAngle</summary>


```ts
readonly startAngle: number
```

Angle at which the arc or slice begins. See PieSliceGeometry.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:40](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L40)

</details>

<span id="api-PieLayoutSlice-endAngle"></span>
<details>
<summary>endAngle</summary>


```ts
readonly endAngle: number
```

Angle at which the arc or slice ends. See PieSliceGeometry.

[View source — packages/core/src/features/viz/lib/pie-slices.ts:42](/source/packages/core/src/features/viz/lib/pie-slices-ts/#L42)

</details>

<span id="api-PieLabelPlacement"></span>

### PieLabelPlacement

Places pie labels inside, outside, or automatically according to available space.

```ts
type PieLabelPlacement = "inside" | "outside" | "auto"
```

Related API: [PieLabelPlacement](/reference/components/pie-layout/).

#### See also

[PieLayoutProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:20](/source/packages/core/src/features/viz/lib/pie-types-ts/#L20)

<span id="api-PieLabelLayout"></span>

### PieLabelLayout

A placed label with text geometry and optional leader, or a hidden label with its reason.

<details>
<summary>Full type declaration</summary>

```ts
type PieLabelLayout = | Readonly<{
      /** The literal "hidden" identifying this variant. See {@link PieLabelLayout}. */
      status: "hidden";
      /** Reason the operation could not produce its ordinary result. See {@link PieLabelLayout}. */
      reason: "empty" | "inside-fit" | "space";
      /** Text displayed by the placed label. See {@link PieLabelLayout}. */
      text: string;
    }>
  | Readonly<{
      /** The literal "placed" identifying this variant. See {@link PieLabelLayout}. */
      status: "placed";
      /**
       * Preferred placement relative to the anchor or containing geometry. See
       * {@link PieLabelLayout}.
       */
      placement: "inside" | "outside";
      /** Text displayed by the placed label. See {@link PieLabelLayout}. */
      text: string;
      /** Canvas font string used to draw or measure text. See {@link PieLabelLayout}. */
      font: string;
      /**
       * Horizontal coordinate or displacement in the containing coordinate system. See
       * {@link PieLabelLayout}.
       */
      x: number;
      /**
       * Vertical coordinate or displacement in the containing coordinate system. See
       * {@link PieLabelLayout}.
       */
      y: number;
      /**
       * Horizontal extent in the units of the containing geometry or surface. See
       * {@link PieLabelLayout}.
       */
      width: number;
      /**
       * Vertical extent in the units of the containing geometry or surface. See
       * {@link PieLabelLayout}.
       */
      height: number;
      /** Horizontal origin used to paint the placed label text. See {@link PieLabelLayout}. */
      textX: number;
      /** Vertical origin used to paint the placed label text. See {@link PieLabelLayout}. */
      textY: number;
      /** Ordered logical points of the label's leader line. See {@link PieLabelLayout}. */
      leader?: readonly (readonly [number, number])[];
    }>
```

</details>

Related API: [PieLabelLayout](/reference/components/pie-layout/), [Text](/reference/components/text/), [Canvas](/reference/types/canvas-runtime/#canvas), [displacement](/reference/types/filters/#displacement), [extent](/reference/functions/utc-domains/).

#### See also

[PieLayoutSlice](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:26](/source/packages/core/src/features/viz/lib/pie-types-ts/#L26)

#### Properties and methods

<span id="api-PieLabelLayout-status"></span>
<details>
<summary>status</summary>


```ts
status: "hidden" | "placed"
```

The literal "hidden" identifying this variant. See PieLabelLayout.
The literal "placed" identifying this variant. See PieLabelLayout.

[View source — packages/core/src/features/viz/lib/pie-types.ts:29](/source/packages/core/src/features/viz/lib/pie-types-ts/#L29)

</details>

<span id="api-PieLabelLayout-text"></span>
<details>
<summary>text</summary>


```ts
text: string
```

Text displayed by the placed label. See PieLabelLayout.

[View source — packages/core/src/features/viz/lib/pie-types.ts:33](/source/packages/core/src/features/viz/lib/pie-types-ts/#L33)

</details>

<span id="api-PieSliceProps"></span>

### PieSliceProps

Authored inputs for PieSlice, including the declared data and presentation options.

```ts
interface PieSliceProps<D> extends WedgeProps
```

Related API: [PieSliceProps](/reference/components/pie-layout/), [WedgeProps](/reference/types/elements-components/#wedgeprops).

#### See also

[WedgeProps](/reference/types/elements-components/#wedgeprops)

[PieLayoutSlice](/reference/components/pie-layout/)

[SignalValue](/reference/types/signal-inputs/#signalvalue)

`SignalStyle`

[PieSliceStyle](/reference/components/pie-layout/)

[PibblNode](/reference/types/elements-components/#pibblnode)

[PieSlice](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:184](/source/packages/core/src/features/viz/lib/pie-types-ts/#L184)

#### Properties and methods

<span id="api-PieSliceProps-slice"></span>
<details>
<summary>slice</summary>


```ts
readonly slice: PieLayoutSlice<D>
```

Related API: [PieLayoutSlice](/reference/components/pie-layout/).

Resolved pie geometry and label placement to present. See PieLayoutSlice.

[View source — packages/core/src/features/viz/lib/pie-types.ts:186](/source/packages/core/src/features/viz/lib/pie-types-ts/#L186)

</details>

<span id="api-PieSliceProps-style"></span>
<details>
<summary>style (optional)</summary>


<details>
<summary>Full type declaration</summary>

```ts
readonly style?: SignalValue<Readonly<{ left?: SignalValue<number | `${number}%` | undefined>; top?: SignalValue<number | `${number}%` | undefined>; width?: SignalValue<Length | undefined>; height?: SignalValue<Length | undefined>; minWidth?: SignalValue<number | `${number}%` | undefined>; maxWidth?: SignalValue<number | `${number}%` | undefined>; minHeight?: SignalValue<number | `${number}%` | undefined>; maxHeight?: SignalValue<number | `${number}%` | undefined>; padding?: SignalValue<EdgeValues | undefined>; overflow?: SignalValue<"clip" | "visible" | undefined>; alignSelf?: SignalValue<"auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined>; justifySelf?: SignalValue<"auto" | "center" | "end" | "start" | "stretch" | undefined>; flexBasis?: SignalValue<Length | undefined>; flexGrow?: SignalValue<number | undefined>; flexShrink?: SignalValue<number | undefined>; gridColumnStart?: SignalValue<number | undefined>; gridColumnSpan?: SignalValue<number | undefined>; gridRowStart?: SignalValue<number | undefined>; gridRowSpan?: SignalValue<number | undefined>; fill?: SignalValue<FillStyle | undefined>; stroke?: SignalValue<StrokeStyle | undefined>; strokeWidth?: SignalValue<number | undefined>; opacity?: SignalValue<number | undefined>; cursor?: SignalValue<string | undefined>; transition?: SignalValue<PibblTransitionBinding | undefined>; custom?: unknown; filter?: SignalValue<PibblFilter | readonly PibblFilter[] | undefined>; lineInteractionWidth?: SignalValue<number | undefined>; }>> | undefined
```

</details>

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue), [Length](/reference/types/layout/#length), [EdgeValues](/reference/types/layout/#edgevalues), [FillStyle](/reference/types/styles/#fillstyle), [StrokeStyle](/reference/types/styles/#strokestyle), [opacity](/reference/types/filters/#opacity), [PibblTransitionBinding](/reference/hooks/use-visibility-transition/), [PibblFilter](/reference/types/filters/#pibblfilter).

Declared presentation and layout properties. See SignalValue, SignalStyle,
PieSliceStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:191](/source/packages/core/src/features/viz/lib/pie-types-ts/#L191)

</details>

<span id="api-PieSliceProps-children"></span>
<details>
<summary>children (optional)</summary>


```ts
readonly children?: PibblNode
```

Related API: [PibblNode](/reference/types/elements-components/#pibblnode).

Descendant content or the callback that supplies it. See PibblNode.

[View source — packages/core/src/features/viz/lib/pie-types.ts:193](/source/packages/core/src/features/viz/lib/pie-types-ts/#L193)

</details>

<span id="api-PieSliceProps-pointerEvents"></span>
<details>
<summary>pointerEvents (optional)</summary>


```ts
readonly pointerEvents?: PibblPointerEvents | undefined
```

Related API: [PibblPointerEvents](/reference/types/events/#pibblpointerevents).

Whether this content participates in pointer targeting. See PibblPointerEvents.

[View source — packages/core/src/lib/events/types.ts:126](/source/packages/core/src/lib/events/types-ts/#L126)

</details>

<span id="api-PieSliceProps-keyboardFocusable"></span>
<details>
<summary>keyboardFocusable (optional)</summary>


```ts
readonly keyboardFocusable?: boolean | undefined
```

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

[View source — packages/core/src/lib/events/types.ts:137](/source/packages/core/src/lib/events/types-ts/#L137)

</details>

<span id="api-PieSliceProps-keyboardNavigationBounds"></span>
<details>
<summary>keyboardNavigationBounds (optional)</summary>


```ts
readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined
```

Related API: [LayoutBox](/reference/types/layout/#layoutbox).

Logical rectangle used for directional keyboard navigation. See LayoutBox.

[View source — packages/core/src/lib/events/types.ts:139](/source/packages/core/src/lib/events/types-ts/#L139)

</details>

<span id="api-PieSliceProps-physics"></span>
<details>
<summary>physics (optional)</summary>


```ts
readonly physics?: PibblPhysicsAttachment2D | undefined
```

Related API: [PibblPhysicsAttachment2D](/reference/types/physics-2d/#pibblphysicsattachment2d).



[View source — packages/core/src/features/physics/lib/2d/types.ts:321](/source/packages/core/src/features/physics/lib/2d/types-ts/#L321)

</details>

<span id="api-PieSliceStyle"></span>

### PieSliceStyle

Supported geometry and presentation properties for PieSlice.

```ts
type PieSliceStyle = Omit<
  WedgeStyle,
  "cx" | "cy" | "radius" | "startAngle" | "endAngle" | "counterclockwise"
>
```

Related API: [PieSliceStyle](/reference/components/pie-layout/), [WedgeStyle](/reference/types/styles/#wedgestyle).

#### See also

[WedgeStyle](/reference/types/styles/#wedgestyle)

[PieSliceProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:169](/source/packages/core/src/features/viz/lib/pie-types-ts/#L169)

#### Properties and methods

<span id="api-PieSliceStyle-left"></span>
<details>
<summary>left (optional)</summary>


```ts
left?: number | `${number}%` | undefined
```

Left edge coordinate or inset. See Length.

[View source — packages/core/src/lib/style/positioning.ts:127](/source/packages/core/src/lib/style/positioning-ts/#L127)

</details>

<span id="api-PieSliceStyle-top"></span>
<details>
<summary>top (optional)</summary>


```ts
top?: number | `${number}%` | undefined
```

Top edge value or top envelope guide. See Length.

[View source — packages/core/src/lib/style/positioning.ts:129](/source/packages/core/src/lib/style/positioning-ts/#L129)

</details>

<span id="api-PieSliceStyle-width"></span>
<details>
<summary>width (optional)</summary>


```ts
width?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Horizontal extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:81](/source/packages/core/src/lib/style/types-ts/#L81)

</details>

<span id="api-PieSliceStyle-height"></span>
<details>
<summary>height (optional)</summary>


```ts
height?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Vertical extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:83](/source/packages/core/src/lib/style/types-ts/#L83)

</details>

<span id="api-PieSliceStyle-minWidth"></span>
<details>
<summary>minWidth (optional)</summary>


```ts
minWidth?: number | `${number}%` | undefined
```

Minimum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:85](/source/packages/core/src/lib/style/types-ts/#L85)

</details>

<span id="api-PieSliceStyle-maxWidth"></span>
<details>
<summary>maxWidth (optional)</summary>


```ts
maxWidth?: number | `${number}%` | undefined
```

Maximum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:87](/source/packages/core/src/lib/style/types-ts/#L87)

</details>

<span id="api-PieSliceStyle-minHeight"></span>
<details>
<summary>minHeight (optional)</summary>


```ts
minHeight?: number | `${number}%` | undefined
```

Minimum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:89](/source/packages/core/src/lib/style/types-ts/#L89)

</details>

<span id="api-PieSliceStyle-maxHeight"></span>
<details>
<summary>maxHeight (optional)</summary>


```ts
maxHeight?: number | `${number}%` | undefined
```

Maximum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:91](/source/packages/core/src/lib/style/types-ts/#L91)

</details>

<span id="api-PieSliceStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See EdgeValues.

[View source — packages/core/src/lib/style/types.ts:93](/source/packages/core/src/lib/style/types-ts/#L93)

</details>

<span id="api-PieSliceStyle-overflow"></span>
<details>
<summary>overflow (optional)</summary>


```ts
overflow?: "clip" | "visible" | undefined
```

Selects `"visible"`, `"clip"` for overflow. See BoxStyle.

[View source — packages/core/src/lib/style/types.ts:95](/source/packages/core/src/lib/style/types-ts/#L95)

</details>

<span id="api-PieSliceStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:121](/source/packages/core/src/lib/style/types-ts/#L121)

</details>

<span id="api-PieSliceStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:123](/source/packages/core/src/lib/style/types-ts/#L123)

</details>

<span id="api-PieSliceStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-PieSliceStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-PieSliceStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-PieSliceStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:131](/source/packages/core/src/lib/style/types-ts/#L131)

</details>

<span id="api-PieSliceStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:133](/source/packages/core/src/lib/style/types-ts/#L133)

</details>

<span id="api-PieSliceStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:135](/source/packages/core/src/lib/style/types-ts/#L135)

</details>

<span id="api-PieSliceStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:137](/source/packages/core/src/lib/style/types-ts/#L137)

</details>

<span id="api-PieSliceStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

[View source — packages/core/src/lib/style/types.ts:193](/source/packages/core/src/lib/style/types-ts/#L193)

</details>

<span id="api-PieSliceStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

[View source — packages/core/src/lib/style/types.ts:195](/source/packages/core/src/lib/style/types-ts/#L195)

</details>

<span id="api-PieSliceStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

[View source — packages/core/src/lib/style/types.ts:197](/source/packages/core/src/lib/style/types-ts/#L197)

</details>

<span id="api-PieSliceStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

Related API: [opacity](/reference/types/filters/#opacity).

Opacity of the painted result. See PaintStyle.

[View source — packages/core/src/lib/style/types.ts:199](/source/packages/core/src/lib/style/types-ts/#L199)

</details>

<span id="api-PieSliceStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

[View source — packages/core/src/lib/style/types.ts:212](/source/packages/core/src/lib/style/types-ts/#L212)

</details>

<span id="api-PieSliceStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-PieSliceStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-PieSliceStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-PieSliceStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
WedgeStyle.

[View source — packages/core/src/lib/components/wedge.ts:73](/source/packages/core/src/lib/components/wedge-ts/#L73)

</details>

<span id="api-PieLabelProps"></span>

### PieLabelProps

Authored inputs for PieLabel, including the declared data and presentation options.

```ts
interface PieLabelProps<D> extends PibblEventHandlers, PibblEventParticipationOptions
```

Related API: [PieLabelProps](/reference/components/pie-layout/), [PibblEventHandlers](/reference/types/events/#pibbleventhandlers), [PibblEventParticipationOptions](/reference/types/events/#pibbleventparticipationoptions).

#### See also

[PibblEventHandlers](/reference/types/events/#pibbleventhandlers)

[PibblEventParticipationOptions](/reference/types/events/#pibbleventparticipationoptions)

[PieLayoutSlice](/reference/components/pie-layout/)

[SignalValue](/reference/types/signal-inputs/#signalvalue)

`SignalStyle`

[PieLabelStyle](/reference/components/pie-layout/)

[PieLabel](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:221](/source/packages/core/src/features/viz/lib/pie-types-ts/#L221)

#### Properties and methods

<span id="api-PieLabelProps-slice"></span>
<details>
<summary>slice</summary>


```ts
readonly slice: PieLayoutSlice<D>
```

Related API: [PieLayoutSlice](/reference/components/pie-layout/).

Resolved pie geometry and label placement to present. See PieLayoutSlice.

[View source — packages/core/src/features/viz/lib/pie-types.ts:223](/source/packages/core/src/features/viz/lib/pie-types-ts/#L223)

</details>

<span id="api-PieLabelProps-style"></span>
<details>
<summary>style (optional)</summary>


```ts
readonly style?: SignalValue<Readonly<{ readonly fill?: SignalValue<FillStyle | undefined>; readonly leaderStroke?: SignalValue<StrokeStyle | undefined>; readonly leaderWidth?: SignalValue<number | undefined>; }>> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue), [FillStyle](/reference/types/styles/#fillstyle), [StrokeStyle](/reference/types/styles/#strokestyle).

Declared presentation and layout properties. See SignalValue, SignalStyle,
PieLabelStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:228](/source/packages/core/src/features/viz/lib/pie-types-ts/#L228)

</details>

<span id="api-PieLabelProps-pointerEvents"></span>
<details>
<summary>pointerEvents (optional)</summary>


```ts
readonly pointerEvents?: PibblPointerEvents | undefined
```

Related API: [PibblPointerEvents](/reference/types/events/#pibblpointerevents).

Whether this content participates in pointer targeting. See PibblPointerEvents.

[View source — packages/core/src/lib/events/types.ts:126](/source/packages/core/src/lib/events/types-ts/#L126)

</details>

<span id="api-PieLabelStyle"></span>

### PieLabelStyle

Supported geometry and presentation properties for PieLabel.

```ts
interface PieLabelStyle
```

Related API: [PieLabelStyle](/reference/components/pie-layout/).

#### See also

[FillStyle](/reference/types/styles/#fillstyle)

[StrokeStyle](/reference/types/styles/#strokestyle)

[PieLabelProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/pie-types.ts:202](/source/packages/core/src/features/viz/lib/pie-types-ts/#L202)

#### Properties and methods

<span id="api-PieLabelStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
readonly fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:204](/source/packages/core/src/features/viz/lib/pie-types-ts/#L204)

</details>

<span id="api-PieLabelStyle-leaderStroke"></span>
<details>
<summary>leaderStroke (optional)</summary>


```ts
readonly leaderStroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for a pie label's leader line. See StrokeStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:206](/source/packages/core/src/features/viz/lib/pie-types-ts/#L206)

</details>

<span id="api-PieLabelStyle-leaderWidth"></span>
<details>
<summary>leaderWidth (optional)</summary>


```ts
readonly leaderWidth?: number | undefined
```

Stroke width of a pie label's leader line. See PieLabelStyle.

[View source — packages/core/src/features/viz/lib/pie-types.ts:208](/source/packages/core/src/features/viz/lib/pie-types-ts/#L208)

</details>

## Implementation guidance for agents

Read the [Data visualization companion](/agents/topics/visualization/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Pie chart composition](/minimal-examples/viz/pie/): Compute pie geometry and render labeled donut slices. [Plain source](/minimal/viz/pie.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.