@close-by/clay 0.2.13 → 0.2.14
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/docs/api.md +14 -3
- package/docs/elements.md +3 -3
- package/package.json +5 -5
- package/src/index.ts +3 -0
package/docs/api.md
CHANGED
|
@@ -1052,7 +1052,7 @@ ui.stat([
|
|
|
1052
1052
|
|
|
1053
1053
|
#### `ui.areaChart(props)`
|
|
1054
1054
|
|
|
1055
|
-
Stacked area chart (Recharts). Optional card chrome via `title` / `description`. Set `interactive: true` with ISO date `xKey` values for client-side period tabs (default 7d / 30d / 90d; override with `periods`). Optional `headline: { value, trend?, trendDirection? }` for a KPI row above the chart; `loading: true` shows a skeleton. Legend is
|
|
1055
|
+
Stacked area chart (Recharts). Optional card chrome via `title` / `description`. Set `interactive: true` with ISO date `xKey` values for client-side period tabs (default 7d / 30d / 90d; override with `periods`). Optional `headline: { value, trend?, trendDirection? }` for a KPI row above the chart; `loading: true` shows a skeleton. Legend is shown by default; pass `showLegend: false` to hide. Pass `stacked: false` to overlay series instead of stacking (default `true`).
|
|
1056
1056
|
|
|
1057
1057
|
```typescript
|
|
1058
1058
|
ui.areaChart({
|
|
@@ -1071,7 +1071,7 @@ ui.areaChart({
|
|
|
1071
1071
|
|
|
1072
1072
|
#### `ui.barChart(props)`
|
|
1073
1073
|
|
|
1074
|
-
Bar chart with the same cartesian props as area (`data`, `xKey`, `series`, title/description/height/interactive, `headline`, `periods`, `loading`). Optional `stacked` (default `false`) and `layout: 'vertical' | 'horizontal'` (default `'vertical'` — category on X).
|
|
1074
|
+
Bar chart with the same cartesian props as area (`data`, `xKey`, `series`, title/description/height/interactive, `headline`, `periods`, `loading`, `showLegend?`). Optional `stacked` (default `false`) and `layout: 'vertical' | 'horizontal'` (default `'vertical'` — category on X).
|
|
1075
1075
|
|
|
1076
1076
|
```typescript
|
|
1077
1077
|
ui.barChart({
|
|
@@ -1089,11 +1089,22 @@ ui.barChart({
|
|
|
1089
1089
|
|
|
1090
1090
|
#### `ui.lineChart(props)`
|
|
1091
1091
|
|
|
1092
|
-
Line chart with the same cartesian props as area (including interactive date ranges, headline, periods, loading).
|
|
1092
|
+
Line chart with the same cartesian props as area (including interactive date ranges, headline, periods, loading, `showLegend?`). Line styling:
|
|
1093
|
+
|
|
1094
|
+
| Prop | Default | Description |
|
|
1095
|
+
|------|---------|-------------|
|
|
1096
|
+
| `curve` | `'monotone'` | Recharts interpolation: `'linear'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`, `'basis'` |
|
|
1097
|
+
| `strokeWidth` | `2` | Line thickness in px |
|
|
1098
|
+
| `dots` | `false` | Show point markers |
|
|
1099
|
+
| `strokeDasharray` / `dashed` | — | Dashed stroke; `dashed: true` → `'4 4'` |
|
|
1100
|
+
| `variant` | `'default'` | `'minimal'` hides the grid for a cleaner plot |
|
|
1093
1101
|
|
|
1094
1102
|
```typescript
|
|
1095
1103
|
ui.lineChart({
|
|
1096
1104
|
title: 'Traffic trend',
|
|
1105
|
+
showLegend: false,
|
|
1106
|
+
curve: 'step',
|
|
1107
|
+
dots: true,
|
|
1097
1108
|
data: monthly,
|
|
1098
1109
|
xKey: 'month',
|
|
1099
1110
|
series: [
|
package/docs/elements.md
CHANGED
|
@@ -102,9 +102,9 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
|
|
|
102
102
|
| `upload` | `upload` | File picker / dropzone → `POST /upload` (progress/abort) → WS `upload` / `progress` / `error` / `abort` |
|
|
103
103
|
| `stat` | `stat` | Grid of metric cards (optional per-item `sparkline`) |
|
|
104
104
|
| `sparkline` | `sparkline` | KPI card with inline area/line mini chart (`headline`, `value`/`trend` shorthand) |
|
|
105
|
-
| `areaChart` | `areachart` | Recharts stacked area (+ legend, optional interactive periods, `headline`, `loading`, `stacked?`) |
|
|
106
|
-
| `barChart` | `barchart` | Recharts bar (`stacked?`, `layout?: 'vertical' \| 'horizontal'`, shared cartesian chrome) |
|
|
107
|
-
| `lineChart` | `linechart` | Recharts line (+
|
|
105
|
+
| `areaChart` | `areachart` | Recharts stacked area (+ legend, optional interactive periods, `headline`, `loading`, `stacked?`, `showLegend?`) |
|
|
106
|
+
| `barChart` | `barchart` | Recharts bar (`stacked?`, `layout?: 'vertical' \| 'horizontal'`, shared cartesian chrome, `showLegend?`) |
|
|
107
|
+
| `lineChart` | `linechart` | Recharts line (+ interactive periods, headline, loading, `curve`/`strokeWidth`/`dots`/`dashed`/`variant`, `showLegend?`) |
|
|
108
108
|
| `pieChart` | `piechart` | Recharts pie/donut (`nameKey`/`valueKey` or `series`, `innerRadius?`) |
|
|
109
109
|
| `radarChart` | `radarchart` | Recharts radar (`angleKey` + `series`, optional `fillOpacity`) |
|
|
110
110
|
| `radialChart` | `radialchart` | Recharts radial bar (`nameKey`/`valueKey` or stacked `series`, optional center text / angles) |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@close-by/clay",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.14",
|
|
4
4
|
"description": "NiceGUI-like ui.* facade for Clay apps",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@close-by/clay-compiler": "0.2.
|
|
41
|
-
"@close-by/clay-core": "0.2.
|
|
42
|
-
"@close-by/clay-components": "0.2.
|
|
43
|
-
"@close-by/clay-server": "0.2.
|
|
40
|
+
"@close-by/clay-compiler": "0.2.14",
|
|
41
|
+
"@close-by/clay-core": "0.2.14",
|
|
42
|
+
"@close-by/clay-components": "0.2.14",
|
|
43
|
+
"@close-by/clay-server": "0.2.14",
|
|
44
44
|
"@tailwindcss/cli": "^4.3.3",
|
|
45
45
|
"tailwindcss": "^4.3.3"
|
|
46
46
|
}
|
package/src/index.ts
CHANGED