@tuicomponents/gauge 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +147 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# @tuicomponents/gauge
|
|
2
|
+
|
|
3
|
+
Renders meters with threshold zones for status display
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @tuicomponents/gauge
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { createGauge } from "@tuicomponents/gauge";
|
|
17
|
+
import { createRenderContext } from "@tuicomponents/core";
|
|
18
|
+
|
|
19
|
+
const component = createGauge();
|
|
20
|
+
const context = createRenderContext();
|
|
21
|
+
|
|
22
|
+
const result = component.render(
|
|
23
|
+
{
|
|
24
|
+
value: 65,
|
|
25
|
+
max: 100,
|
|
26
|
+
},
|
|
27
|
+
context
|
|
28
|
+
);
|
|
29
|
+
console.log(result.output);
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Examples
|
|
33
|
+
|
|
34
|
+
### basic
|
|
35
|
+
|
|
36
|
+
Simple gauge
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
<details>
|
|
41
|
+
<summary>Input</summary>
|
|
42
|
+
|
|
43
|
+
```json
|
|
44
|
+
{
|
|
45
|
+
"value": 65,
|
|
46
|
+
"max": 100
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
</details>
|
|
51
|
+
|
|
52
|
+
### disk-usage
|
|
53
|
+
|
|
54
|
+
Disk usage gauge with zones
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
<details>
|
|
59
|
+
<summary>Input</summary>
|
|
60
|
+
|
|
61
|
+
```json
|
|
62
|
+
{
|
|
63
|
+
"value": 78,
|
|
64
|
+
"max": 100,
|
|
65
|
+
"label": "Disk",
|
|
66
|
+
"showValue": true,
|
|
67
|
+
"unit": "%",
|
|
68
|
+
"zones": [
|
|
69
|
+
{
|
|
70
|
+
"threshold": 70,
|
|
71
|
+
"color": "success"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"threshold": 90,
|
|
75
|
+
"color": "warning"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"threshold": 100,
|
|
79
|
+
"color": "error"
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
</details>
|
|
86
|
+
|
|
87
|
+
### memory
|
|
88
|
+
|
|
89
|
+
Memory usage gauge
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
<details>
|
|
94
|
+
<summary>Input</summary>
|
|
95
|
+
|
|
96
|
+
```json
|
|
97
|
+
{
|
|
98
|
+
"value": 45,
|
|
99
|
+
"max": 100,
|
|
100
|
+
"label": "RAM",
|
|
101
|
+
"showValue": true,
|
|
102
|
+
"unit": "%"
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
</details>
|
|
107
|
+
|
|
108
|
+
## Configuration Options
|
|
109
|
+
|
|
110
|
+
| Property | Type | Required | Default | Description |
|
|
111
|
+
| ----------- | ---------- | ---------- | --------- | ----------- | --- | --- |
|
|
112
|
+
| `value` | `number` | ✓ | - | - |
|
|
113
|
+
| `min` | `number` | | - | - |
|
|
114
|
+
| `max` | `number` | | - | - |
|
|
115
|
+
| `zones` | `object[]` | | - | - |
|
|
116
|
+
| `width` | `number` | | - | - |
|
|
117
|
+
| `style` | `"bar" | "segments" | "blocks"` | | - | - |
|
|
118
|
+
| `label` | `string` | | - | - |
|
|
119
|
+
| `showValue` | `boolean` | | - | - |
|
|
120
|
+
| `unit` | `string` | | - | - |
|
|
121
|
+
|
|
122
|
+
## Render Modes
|
|
123
|
+
|
|
124
|
+
The component supports two render modes:
|
|
125
|
+
|
|
126
|
+
- **ANSI**: Rich terminal output with colors and Unicode characters
|
|
127
|
+
- **Markdown**: Plain text suitable for AI assistants and documentation
|
|
128
|
+
|
|
129
|
+
You can specify the render mode when creating the context:
|
|
130
|
+
|
|
131
|
+
```typescript
|
|
132
|
+
import { createRenderContext } from "@tuicomponents/core";
|
|
133
|
+
|
|
134
|
+
// ANSI mode (default)
|
|
135
|
+
const ansiContext = createRenderContext({ renderMode: "ansi" });
|
|
136
|
+
|
|
137
|
+
// Markdown mode
|
|
138
|
+
const mdContext = createRenderContext({ renderMode: "markdown" });
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## API
|
|
142
|
+
|
|
143
|
+
For detailed API documentation, see the [API docs](../../docs/gauge.md).
|
|
144
|
+
|
|
145
|
+
## License
|
|
146
|
+
|
|
147
|
+
UNLICENSED
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuicomponents/gauge",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Gauge meter component with threshold zones for TUI",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"zod": "^3.25.56",
|
|
34
34
|
"zod-to-json-schema": "^3.24.5",
|
|
35
|
-
"@tuicomponents/core": "0.1.
|
|
35
|
+
"@tuicomponents/core": "0.1.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@types/node": "^22.0.0"
|