fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Diagram

MetricsTableDiagram

An ASCII ledger of cost: one row per tool with its call count and time, and a totaled summary row at the bottom.

All components Source

Install

MetricsTableDiagram is a Svelte 5 ASCII metrics table diagram component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import 
import '@fractaldesign/machines-ui/style.css';
import { MetricsTableDiagram } from '@fractaldesign/machines-ui';

Usage

Example 
<MetricsTableDiagram
  title="COST"
  rows={[
    { label: 'AST parse', calls: 120, time: '16m' },
    { label: 'MDsveX compile', calls: 164, time: '16m' },
    { label: 'Rune optimization', calls: 112, time: '18m' }
  ]}
  totalCalls={396}
  totalTime="~50m"
/>

Props

NameTypeDefault
title string Caption on the top edge, uppercased. Default "COST".'COST'
rows MetricRow[] One row per tool: its label, call count, and time.[ { label: 'AST parse', calls: 120, time: '16m' }, { label: 'MDsveX compile', calls: 164, time: '16m' }, { label: 'Rune optimization', calls: 112, time: '18m' } ]
totalCalls number | string Call count shown in the total row.396
totalTime string Time shown in the total row, e.g. "~50m".'~50m'
showTotal boolean Show the total row. Default true.true
class string ''

Related components

NestedRadiiDiagram An interactive ASCII diagram of nested border radii, showing inner = outer − inset and letting both values…PromptLoopDiagram An ASCII diagram of the prompt-feedback loop, stepping through a conversation and lighting each node and…AmplifierDiagram An ASCII amplifier: a small calm wave goes in, a gain slider scales it, and a large wave comes out — a…AsciiDiagram Framed ASCII or Unicode diagram text, with an optional label, a copy button, and accent highlighting of…DiagramEditor An interactive ASCII diagram editor with presets, glyph tools, alignment, and code export.