Skip to content

Commit bffae6f

Browse files
Copilothotlong
andcommitted
refactor(ui): create unified chart type taxonomy
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 7d3df10 commit bffae6f

File tree

15 files changed

+547
-95
lines changed

15 files changed

+547
-95
lines changed
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Chart
3+
description: Chart protocol schemas
4+
---
5+
6+
# Chart
7+
8+
<Callout type="info">
9+
**Source:** `packages/spec/src/ui/chart.zod.ts`
10+
</Callout>
11+
12+
## TypeScript Usage
13+
14+
```typescript
15+
import { ChartConfigSchema, ChartTypeSchema } from '@objectstack/spec/ui';
16+
import type { ChartConfig, ChartType } from '@objectstack/spec/ui';
17+
18+
// Validate data
19+
const result = ChartConfigSchema.parse(data);
20+
```
21+
22+
---
23+
24+
## ChartConfig
25+
26+
### Properties
27+
28+
| Property | Type | Required | Description |
29+
| :--- | :--- | :--- | :--- |
30+
| **type** | `Enum<'bar' \| 'horizontal-bar' \| 'column' \| 'grouped-bar' \| 'stacked-bar' \| 'line' \| 'area' \| 'stacked-area' \| 'step-line' \| 'pie' \| 'donut' \| 'funnel' \| 'scatter' \| 'bubble' \| 'treemap' \| 'sunburst' \| 'sankey' \| 'gauge' \| 'metric' \| 'kpi' \| 'choropleth' \| 'bubble-map' \| 'heatmap' \| 'radar' \| 'waterfall' \| 'box-plot' \| 'violin' \| 'table' \| 'pivot'>` || |
31+
| **title** | `string` | optional | Chart title |
32+
| **description** | `string` | optional | Chart description |
33+
| **showLegend** | `boolean` | optional | Display legend |
34+
| **showDataLabels** | `boolean` | optional | Display data labels on chart |
35+
| **colors** | `string[]` | optional | Custom color palette |
36+
37+
---
38+
39+
## ChartType
40+
41+
### Allowed Values
42+
43+
* `bar`
44+
* `horizontal-bar`
45+
* `column`
46+
* `grouped-bar`
47+
* `stacked-bar`
48+
* `line`
49+
* `area`
50+
* `stacked-area`
51+
* `step-line`
52+
* `pie`
53+
* `donut`
54+
* `funnel`
55+
* `scatter`
56+
* `bubble`
57+
* `treemap`
58+
* `sunburst`
59+
* `sankey`
60+
* `gauge`
61+
* `metric`
62+
* `kpi`
63+
* `choropleth`
64+
* `bubble-map`
65+
* `heatmap`
66+
* `radar`
67+
* `waterfall`
68+
* `box-plot`
69+
* `violin`
70+
* `table`
71+
* `pivot`
72+

content/docs/references/ui/dashboard.mdx

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,38 +12,15 @@ description: Dashboard protocol schemas
1212
## TypeScript Usage
1313

1414
```typescript
15-
import { ChartTypeSchema, DashboardSchema, DashboardWidgetSchema } from '@objectstack/spec/ui';
16-
import type { ChartType, Dashboard, DashboardWidget } from '@objectstack/spec/ui';
15+
import { DashboardSchema, DashboardWidgetSchema } from '@objectstack/spec/ui';
16+
import type { Dashboard, DashboardWidget } from '@objectstack/spec/ui';
1717

1818
// Validate data
19-
const result = ChartTypeSchema.parse(data);
19+
const result = DashboardSchema.parse(data);
2020
```
2121

2222
---
2323

24-
## ChartType
25-
26-
### Allowed Values
27-
28-
* `metric`
29-
* `bar`
30-
* `line`
31-
* `pie`
32-
* `donut`
33-
* `gauge`
34-
* `funnel`
35-
* `radar`
36-
* `scatter`
37-
* `heatmap`
38-
* `pivot`
39-
* `table`
40-
* `list`
41-
* `text`
42-
* `image`
43-
* `frame`
44-
45-
---
46-
4724
## Dashboard
4825

4926
### Properties
@@ -64,7 +41,8 @@ const result = ChartTypeSchema.parse(data);
6441
| Property | Type | Required | Description |
6542
| :--- | :--- | :--- | :--- |
6643
| **title** | `string` | optional | Widget title |
67-
| **type** | `Enum<'metric' \| 'bar' \| 'line' \| 'pie' \| 'donut' \| 'gauge' \| 'funnel' \| 'radar' \| 'scatter' \| 'heatmap' \| 'pivot' \| 'table' \| 'list' \| 'text' \| 'image' \| 'frame'>` | optional | Visualization type |
44+
| **type** | `Enum<'bar' \| 'horizontal-bar' \| 'column' \| 'grouped-bar' \| 'stacked-bar' \| 'line' \| 'area' \| 'stacked-area' \| 'step-line' \| 'pie' \| 'donut' \| 'funnel' \| 'scatter' \| 'bubble' \| 'treemap' \| 'sunburst' \| 'sankey' \| 'gauge' \| 'metric' \| 'kpi' \| 'choropleth' \| 'bubble-map' \| 'heatmap' \| 'radar' \| 'waterfall' \| 'box-plot' \| 'violin' \| 'table' \| 'pivot'>` | optional | Visualization type |
45+
| **chartConfig** | `object` | optional | Chart visualization configuration |
6846
| **object** | `string` | optional | Data source object name |
6947
| **filter** | `any` | optional | Data filter criteria |
7048
| **categoryField** | `string` | optional | Field for grouping (X-Axis) |

content/docs/references/ui/index.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ This section contains all protocol schemas for the ui layer of ObjectStack.
1010
<Cards>
1111
<Card href="./action" title="Action" description="Source: packages/spec/src/ui/action.zod.ts" />
1212
<Card href="./app" title="App" description="Source: packages/spec/src/ui/app.zod.ts" />
13+
<Card href="./chart" title="Chart" description="Source: packages/spec/src/ui/chart.zod.ts" />
1314
<Card href="./component" title="Component" description="Source: packages/spec/src/ui/component.zod.ts" />
1415
<Card href="./dashboard" title="Dashboard" description="Source: packages/spec/src/ui/dashboard.zod.ts" />
1516
<Card href="./page" title="Page" description="Source: packages/spec/src/ui/page.zod.ts" />

content/docs/references/ui/meta.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"pages": [
44
"action",
55
"app",
6+
"chart",
67
"component",
78
"dashboard",
89
"page",

content/docs/references/ui/report.mdx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,15 @@ const result = ReportSchema.parse(data);
4646

4747
| Property | Type | Required | Description |
4848
| :--- | :--- | :--- | :--- |
49-
| **type** | `Enum<'bar' \| 'column' \| 'line' \| 'pie' \| 'donut' \| 'scatter' \| 'funnel'>` || Chart type |
50-
| **title** | `string` | optional | |
51-
| **showLegend** | `boolean` | optional | |
49+
| **type** | `Enum<'bar' \| 'horizontal-bar' \| 'column' \| 'grouped-bar' \| 'stacked-bar' \| 'line' \| 'area' \| 'stacked-area' \| 'step-line' \| 'pie' \| 'donut' \| 'funnel' \| 'scatter' \| 'bubble' \| 'treemap' \| 'sunburst' \| 'sankey' \| 'gauge' \| 'metric' \| 'kpi' \| 'choropleth' \| 'bubble-map' \| 'heatmap' \| 'radar' \| 'waterfall' \| 'box-plot' \| 'violin' \| 'table' \| 'pivot'>` || |
50+
| **title** | `string` | optional | Chart title |
51+
| **description** | `string` | optional | Chart description |
52+
| **showLegend** | `boolean` | optional | Display legend |
53+
| **showDataLabels** | `boolean` | optional | Display data labels on chart |
54+
| **colors** | `string[]` | optional | Custom color palette |
5255
| **xAxis** | `string` || Grouping field for X-Axis |
5356
| **yAxis** | `string` || Summary field for Y-Axis |
57+
| **groupBy** | `string` | optional | Additional grouping field |
5458

5559
---
5660

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
{
2+
"$ref": "#/definitions/ChartConfig",
3+
"definitions": {
4+
"ChartConfig": {
5+
"type": "object",
6+
"properties": {
7+
"type": {
8+
"type": "string",
9+
"enum": [
10+
"bar",
11+
"horizontal-bar",
12+
"column",
13+
"grouped-bar",
14+
"stacked-bar",
15+
"line",
16+
"area",
17+
"stacked-area",
18+
"step-line",
19+
"pie",
20+
"donut",
21+
"funnel",
22+
"scatter",
23+
"bubble",
24+
"treemap",
25+
"sunburst",
26+
"sankey",
27+
"gauge",
28+
"metric",
29+
"kpi",
30+
"choropleth",
31+
"bubble-map",
32+
"heatmap",
33+
"radar",
34+
"waterfall",
35+
"box-plot",
36+
"violin",
37+
"table",
38+
"pivot"
39+
]
40+
},
41+
"title": {
42+
"type": "string",
43+
"description": "Chart title"
44+
},
45+
"description": {
46+
"type": "string",
47+
"description": "Chart description"
48+
},
49+
"showLegend": {
50+
"type": "boolean",
51+
"default": true,
52+
"description": "Display legend"
53+
},
54+
"showDataLabels": {
55+
"type": "boolean",
56+
"default": false,
57+
"description": "Display data labels on chart"
58+
},
59+
"colors": {
60+
"type": "array",
61+
"items": {
62+
"type": "string"
63+
},
64+
"description": "Custom color palette"
65+
}
66+
},
67+
"required": [
68+
"type"
69+
],
70+
"additionalProperties": false
71+
}
72+
},
73+
"$schema": "http://json-schema.org/draft-07/schema#"
74+
}

packages/spec/json-schema/ui/ChartType.json

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,35 @@
44
"ChartType": {
55
"type": "string",
66
"enum": [
7-
"metric",
87
"bar",
8+
"horizontal-bar",
9+
"column",
10+
"grouped-bar",
11+
"stacked-bar",
912
"line",
13+
"area",
14+
"stacked-area",
15+
"step-line",
1016
"pie",
1117
"donut",
12-
"gauge",
1318
"funnel",
14-
"radar",
1519
"scatter",
20+
"bubble",
21+
"treemap",
22+
"sunburst",
23+
"sankey",
24+
"gauge",
25+
"metric",
26+
"kpi",
27+
"choropleth",
28+
"bubble-map",
1629
"heatmap",
17-
"pivot",
30+
"radar",
31+
"waterfall",
32+
"box-plot",
33+
"violin",
1834
"table",
19-
"list",
20-
"text",
21-
"image",
22-
"frame"
35+
"pivot"
2336
]
2437
}
2538
},

packages/spec/json-schema/ui/Dashboard.json

Lines changed: 90 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,108 @@
2929
"type": {
3030
"type": "string",
3131
"enum": [
32-
"metric",
3332
"bar",
33+
"horizontal-bar",
34+
"column",
35+
"grouped-bar",
36+
"stacked-bar",
3437
"line",
38+
"area",
39+
"stacked-area",
40+
"step-line",
3541
"pie",
3642
"donut",
37-
"gauge",
3843
"funnel",
39-
"radar",
4044
"scatter",
45+
"bubble",
46+
"treemap",
47+
"sunburst",
48+
"sankey",
49+
"gauge",
50+
"metric",
51+
"kpi",
52+
"choropleth",
53+
"bubble-map",
4154
"heatmap",
42-
"pivot",
55+
"radar",
56+
"waterfall",
57+
"box-plot",
58+
"violin",
4359
"table",
44-
"list",
45-
"text",
46-
"image",
47-
"frame"
60+
"pivot"
4861
],
4962
"default": "metric",
5063
"description": "Visualization type"
5164
},
65+
"chartConfig": {
66+
"type": "object",
67+
"properties": {
68+
"type": {
69+
"type": "string",
70+
"enum": [
71+
"bar",
72+
"horizontal-bar",
73+
"column",
74+
"grouped-bar",
75+
"stacked-bar",
76+
"line",
77+
"area",
78+
"stacked-area",
79+
"step-line",
80+
"pie",
81+
"donut",
82+
"funnel",
83+
"scatter",
84+
"bubble",
85+
"treemap",
86+
"sunburst",
87+
"sankey",
88+
"gauge",
89+
"metric",
90+
"kpi",
91+
"choropleth",
92+
"bubble-map",
93+
"heatmap",
94+
"radar",
95+
"waterfall",
96+
"box-plot",
97+
"violin",
98+
"table",
99+
"pivot"
100+
]
101+
},
102+
"title": {
103+
"type": "string",
104+
"description": "Chart title"
105+
},
106+
"description": {
107+
"type": "string",
108+
"description": "Chart description"
109+
},
110+
"showLegend": {
111+
"type": "boolean",
112+
"default": true,
113+
"description": "Display legend"
114+
},
115+
"showDataLabels": {
116+
"type": "boolean",
117+
"default": false,
118+
"description": "Display data labels on chart"
119+
},
120+
"colors": {
121+
"type": "array",
122+
"items": {
123+
"type": "string"
124+
},
125+
"description": "Custom color palette"
126+
}
127+
},
128+
"required": [
129+
"type"
130+
],
131+
"additionalProperties": false,
132+
"description": "Chart visualization configuration"
133+
},
52134
"object": {
53135
"type": "string",
54136
"description": "Data source object name"

0 commit comments

Comments
 (0)