@tuicomponents/gauge

Renders meters with threshold zones for status display

Installation

pnpm add @tuicomponents/gauge

Quick Start

import { createGauge } from "@tuicomponents/gauge";
import { createRenderContext } from "@tuicomponents/core";

const component = createGauge();
const context = createRenderContext();

const result = component.render(
  {
    value: 65,
    max: 100,
  },
  context
);
console.log(result.output);

Examples

basic

Simple gauge

{
  "value": 65,
  "max": 100
}

disk-usage

Disk usage gauge with zones

{
  "value": 78,
  "max": 100,
  "label": "Disk",
  "showValue": true,
  "unit": "%",
  "zones": [
    {
      "threshold": 70,
      "color": "success"
    },
    {
      "threshold": 90,
      "color": "warning"
    },
    {
      "threshold": 100,
      "color": "error"
    }
  ]
}

memory

Memory usage gauge

{
  "value": 45,
  "max": 100,
  "label": "RAM",
  "showValue": true,
  "unit": "%"
}

Configuration Options

| Property | Type | Required | Default | Description | | ----------- | ---------- | ---------- | --------- | ----------- | --- | --- | | value | number | ✓ | - | - | | min | number | | - | - | | max | number | | - | - | | zones | object[] | | - | - | | width | number | | - | - | | style | "bar" | "segments" | "blocks" | | - | - | | label | string | | - | - | | showValue | boolean | | - | - | | unit | string | | - | - |

Render Modes

The component supports three render modes:

• ANSI: Rich terminal output with colors and Unicode characters
• Markdown: Plain text suitable for AI assistants and documentation
• Grayscale: ANSI output without colors (for terminals that don't support color)

You can specify the render mode when creating the context:

import { createRenderContext } from "@tuicomponents/core";

// ANSI mode (default)
const ansiContext = createRenderContext({ renderMode: "ansi" });

// Markdown mode
const mdContext = createRenderContext({ renderMode: "markdown" });

// Grayscale mode
const grayscaleContext = createRenderContext({ renderMode: "grayscale" });

API

For detailed API documentation, see the API docs.

License

UNLICENSED