Gauge Components Demo
'horizontal_demo',
'title' => 'Horizontal Progress Bar',
'subtitle' => 'The original bar gauges, restyled to share the same card and token language as the new arc gauges.',
'layout' => 'horizontal',
'style' => 'flex:1 1 24rem',
'listen' => true,
'markers' => [
'zero' => [
'value' => 0,
'label' => 'Zero',
'color' => 'var(--bg-color)',
],
'high' => [
'value' => 100,
'label' => 'High',
],
],
'items' => [
'cpu' => [
'value' => 45,
'min' => 0,
'max' => 200,
'label' => 'CPU',
'tooltip' => 'CPU Usage',
'color' => [
['from' => -50, 'to' => 20, 'color' => 'var(--text-muted)'],
['from' => 20, 'to' => 80, 'color' => 'var(--primary)'],
['from' => 80, 'to' => 100, 'color' => 'var(--warning)'],
],
],
'memory' => [
'value' => 92,
'min' => -50,
'max' => 100,
'label' => 'Memory',
'tooltip' => 'Memory Usage',
],
'disk' => [
'value' => 28,
'min' => 0,
'max' => 100,
'label' => 'Disk I/O',
'tooltip' => 'Disk I/O',
],
],
]) ?>
'vertical_demo',
'title' => 'Vertical Progress Bar',
'subtitle' => 'Same abstraction, but stacked as compact KPI cards.',
'layout' => 'vertical',
'style' => 'flex:1 1 24rem',
'height' => 350,
'listen' => true,
'markers' => [
'zero' => [
'value' => 0,
'label' => 'Zero',
'color' => 'var(--bg-color)',
],
'high' => [
'value' => 100,
'label' => 'High',
],
],
'items' => [
'cpu' => [
'value' => 45,
'min' => 0,
'max' => 200,
'label' => 'CPU',
'tooltip' => 'CPU Usage',
],
'memory' => [
'value' => 92,
'min' => -50,
'max' => 100,
'label' => 'RAM',
'tooltip' => 'Memory Usage',
],
'disk' => [
'value' => 28,
'min' => 0,
'max' => 100,
'label' => 'I/O',
'tooltip' => 'Disk I/O',
],
],
]) ?>
'Needle Gauge',
'subtitle' => 'The original analog gauge now uses the same elevated panels, typography, and theme-token palette as the arc gauges.',
'style' => 'flex:1 1 24rem',
'listen' => true,
'label' => 'CPU',
'tooltip' => 'CPU Usage',
'scale' => [
'angle_start' => -1.2*pi(),
'angle_end' => 0.2*pi(),
'max' => 100,
'unit' => '%',
'ticks-every' => 10,
'value-labels-every' => 20,
'tick-color' => 'var(--text-muted)',
'color' => [
['from' => -50, 'to' => 10, 'color' => 'var(--primary)'],
['from' => 10, 'to' => 70, 'color' => 'var(--text-muted)'],
['from' => 70, 'to' => 90, 'color' => 'var(--warning)'],
['from' => 90, 'to' => 200, 'color' => 'var(--error)'],
],
],
'items' => [
'cpu' => [
'max' => 200,
'value' => 45,
'label' => 'CPU',
],
'memory' => [
'value' => 92,
'min' => -50,
'label' => 'Memory',
'tooltip' => 'Memory Usage',
],
'disk' => [
'value' => 28,
'label' => 'Disk I/O',
'tooltip' => 'Disk I/O',
],
],
]) ?>
'arc_demo',
'title' => 'SVG Arc Gauges',
'subtitle' => 'Backported from the llm2 overview as reusable KPI-style gauges with optional watermark tracking.',
'style' => 'flex: 2 1 36rem',
'listen' => true,
'items' => [
'load' => [
'label' => 'System Load',
'value' => 1.8,
'max' => 8,
'precision' => 1,
'caption' => 'LOAD 1M',
'meta' => '4 cores available',
'watermark_prefix' => 'loadDemo',
'color' => [
['from' => 0, 'to' => 3.5, 'color' => 'var(--success, #10b981)'],
['from' => 3.5, 'to' => 6, 'color' => 'var(--warning, #f59e0b)'],
['from' => 6, 'to' => 8, 'color' => 'var(--error, #ef4444)'],
],
],
'memory_arc' => [
'label' => 'Memory',
'value' => 62,
'max' => 100,
'precision' => 0,
'unit' => '%',
'caption' => 'MEMORY',
'meta' => '9.9 / 16 GB',
'watermark_prefix' => 'memoryDemo',
],
'network' => [
'label' => 'Network',
'value' => 18,
'max' => 100,
'precision' => 0,
'unit' => ' MB/s',
'caption' => 'THROUGHPUT',
'meta' => 'Inbound + outbound',
'watermark_prefix' => 'networkDemo',
],
],
]) ?>