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.

Install

pnpm add @fractaldesign/machines-ui

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

Preview

+- - - - - - - - - [ COST ]- - - - - - - - -+
|                                           |
|  Tool calls             Time              |
|  - - - - - - - - - - - - - - - - - - - -  |
|  AST parse           120     16m          |
|  MDsveX compile      164     16m          |
|  Rune optimization   112     18m          |
|  - - - - - - - - - - - - - - - - - - - -  |
|  Total               396     ~50m         |
|                                           |
+- - - - - - - - - - - - - - - - - - - - - -+

<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

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

API

class forwarded to the outer element

Types

Name	Kind	Description
MetricRow	interface

Theming

CSS custom properties this component reads.

--border
--graph-accent
--text-primary
--text-secondary

src/lib/components/diagram/MetricsTableDiagram.svelte