Mixins / foldkit-mixins-ui

Chart

namespace · packages/mixins-ui/src/chart.ts:1

export * as Chart from './chart.js'

In the guides

Members

Chart.CartesianChart

interface · packages/mixins-ui/src/chart.ts:182

interface CartesianChart<ParentMessage> extends ChartCommon<ParentMessage> {
  readonly kind: 'bar' | 'line' | 'area'
  readonly categories: ReadonlyArray<string>
  readonly series: ReadonlyArray<Series>
  readonly categoryLabel?: string | undefined
}

Bars side by side per category, a line, or a line with the area under it filled.

Chart.ChartColor

type · packages/mixins-ui/src/chart.ts:86

type ChartColor = 1 | 2 | 3 | 4 | 5

One of the five chart colors, chart-1 to chart-5.

Chart.ChartSlots

const · packages/mixins-ui/src/chart.ts:26

const ChartSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly title: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly description: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly legend: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly legendItem: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly swatch: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<" …;

A chart, after shadcn's over Recharts: bars, a line, an area or a donut, with a value axis whose ticks are round values the axis reaches, the categories along the bottom, gridlines, a legend, and a tooltip with every series' value at the point the pointer or the keys are on. The plot is drawn in percentages of its box, so it fills any width without measuring.

The data is the application's, and so is which point is lit: keep this module's Model and fold the chart's Messages into it with update. The plot takes the focus; the arrows, Home and End move through the points, and a polite status says each one's values. The drawing is hidden from assistive technology, which reads the same data from a table, visually hidden unless table: 'shown'. Series take chart-1 to chart-5 in order, as data-color on every mark; a series that a filter may remove names its own color, so the others keep theirs.

Chart.ChartView

type · packages/mixins-ui/src/chart.ts:203

type ChartView<ParentMessage> =
  CartesianChart<ParentMessage> | DonutChart<ParentMessage>

Chart.DonutChart

interface · packages/mixins-ui/src/chart.ts:193

interface DonutChart<ParentMessage> extends ChartCommon<ParentMessage> {
  readonly kind: 'donut'
  readonly slices: ReadonlyArray<Slice>
  readonly totalLabel?: string | undefined
  readonly valueLabel?: string | undefined
}

Parts of a whole, as a ring.

Chart.init

function · packages/mixins-ui/src/chart.ts:127

function init(): Model

Chart.Message

const · packages/mixins-ui/src/chart.ts:113

const Message: MessageUnion<{
  readonly Pointed: { readonly point: Schema.Number }
  readonly Left: {}
  readonly Stepped: {
    readonly step: Schema.Literals<
      readonly ['next', 'previous', 'first', 'last']
    >
    readonly count: Schema.Number
  }
  readonly Focused: { readonly count: Schema.Number }
  readonly Cleared: {}
}>

Chart.Model

const · packages/mixins-ui/src/chart.ts:102

const Model: Schema.Struct<{
  readonly point: Schema.Option<Schema.Number>
  readonly keyed: Schema.Boolean
}>

Chart.Series

interface · packages/mixins-ui/src/chart.ts:88

interface Series {
  readonly name: string
  readonly values: ReadonlyArray<number>
  readonly color?: ChartColor | undefined
}

Chart.Slice

interface · packages/mixins-ui/src/chart.ts:96

interface Slice {
  readonly name: string
  readonly value: number
  readonly color?: ChartColor | undefined
}

Chart.Step

const · packages/mixins-ui/src/chart.ts:110

const Step: Schema.Literals<readonly ['next', 'previous', 'first', 'last']>

Chart.update

function · packages/mixins-ui/src/chart.ts:138

function update(model: Model, message: Message): Return<Model, Message>

The chart after message; the same Model when nothing changes.

Chart.view

function · packages/mixins-ui/src/chart.ts:235

function view<ParentMessage>(
  options: ChartView<ParentMessage>,
  h: HtmlBuilder<ParentMessage>,
): Html