Data

Compare values and records. Give numbers as numbers, never as text, so a renderer can align, format and chart them.

import { DemoBlock } from '../shared/intelligent-ui.tsx';
import { ui } from '../shared/intelligent-ui-tree.ts';

export default function DataDemo() {
    return (
        <DemoBlock
            nodes={[
                ui(
                    'Stats',
                    {},
                    ui('Stat', { label: 'Cold start', value: 1.42, previous: 1.9, unit: 's', tone: 'success' }),
                    ui('Stat', { label: 'Bundle', value: 812, unit: 'kB' })
                ),
                ui('EntityList', {}, ui('Entry', { label: 'Branch' }, 'main'), ui('Entry', { label: 'Runner' }, 'macOS arm64')),
                ui(
                    'Table',
                    {
                        rows: [
                            { file: 'src/app.ts', size: 48213, time: 1250 },
                            { file: 'src/chat.ts', size: 31877, time: 830 }
                        ]
                    },
                    ui('Column', { key: 'file', title: 'File', as: 'file' }),
                    ui('Column', { key: 'size', title: 'Size', as: 'bytes' }),
                    ui('Column', { key: 'time', title: 'Build time', as: 'duration' })
                ),
                ui('Chart', {
                    kind: 'bar',
                    unit: 's',
                    data: [
                        { label: 'Mon', build: 41, test: 63 },
                        { label: 'Tue', build: 38, test: 59 },
                        { label: 'Wed', build: 44, test: 71 }
                    ]
                })
            ]}
        />
    );
}

<Stats>
<Stat label="Cold start" value={1.42} previous={1.9} unit="s" tone="success"/>
<Stat label="Bundle" value={812} unit="kB"/>
</Stats>
<EntityList>
<Entry label="Branch">main</Entry>
<Entry label="Runner">macOS arm64</Entry>
</EntityList>
<Table rows={[{"file": "src/app.ts", "size": 48213, "time": 1250}, {"file": "src/chat.ts", "size": 31877, "time": 830}]}>
<Column key="file" title="File" as="file"/>
<Column key="size" title="Size" as="bytes"/>
<Column key="time" title="Build time" as="duration"/>
</Table>
<Chart kind="bar" unit="s" data={[{"label": "Mon", "build": 41, "test": 63}, {"label": "Tue", "build": 38, "test": 59}, {"label": "Wed", "build": 44, "test": 71}]}/>

Stats and Stat

A small set of key numbers. Stats has no props and holds only Stat. A Stat stands only inside Stats and has no children.

Prop	Type	Required	Notes
label	string	Yes
value	number	Yes
previous	number	No	The value to compare with; the tile shows the change
unit	string	No	Written after the number, a percent sign without a space
tone	UiTone	No	Colors the change; without it the change stays neutral

EntityList and Entry

Labeled facts about one thing. EntityList has no props and holds only Entry. An Entry stands only inside EntityList; its children are the value.

Prop	Type	Required	Notes
label	string	Yes

Table and Column

Rows with named columns. Table holds only Column, which describes a field of the rows and draws nothing itself. Without Columns, the table shows the keys of the rows.

Prop	Type	Required	Notes
rows	array of records	Yes	At most 1,000 rows

Column prop	Type	Required	Notes
key	string	Yes	The field of each row, 1 to 256 characters
title	string	No	The heading; the key without one
unit	string	No	Written after each number
as	string	No	text, number, bytes, duration, date, file or tag

A duration is in milliseconds. A date is milliseconds since the epoch or an ISO string. A file is a path in mono text. A value of the wrong kind reads as text, and a missing one as nothing.

Chart

Labeled numeric series. Each row of data has a label and up to six numeric series by name. Chart has no children.

Prop	Type	Required	Notes
kind	string	Yes	bar, hbar (horizontal), stacked or line
data	array of records	Yes	At most 1,000 rows of scalars
unit	string	No	Written after each value

A renderer draws only the series it can use. A value that is not a finite number is a gap, and a chart without one usable series draws as its data.

$weeks = [{"label": "W1", "opened": 12, "closed": 9}, {"label": "W2", "opened": 8, "closed": 14}]
<Chart kind="stacked" data={$weeks}/>