Skip to content

Commit e19a89d

Browse files
author
Lasim
committed
docs: add background jobs system documentation and integrate into architecture overview
1 parent 85e3286 commit e19a89d

4 files changed

Lines changed: 804 additions & 1 deletion

File tree

‎docs/development/frontend/ui-design-charts.mdx‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
---
2+
title: Charts with Vue ECharts
3+
description: Guide to using Apache ECharts for data visualization in DeployStack frontend
4+
sidebar: Charts
5+
---
6+
7+
# Charts with Vue ECharts
8+
9+
DeployStack uses [vue-echarts](https://github.com/ecomfe/vue-echarts) for data visualization, providing powerful and performant charts with Apache ECharts integration for Vue 3.
10+
11+
## Chart Components
12+
13+
The chart components are available in `/components/ui/chart/` following the shadcn/vue pattern with CVA variants.
14+
15+
### LineChart Component
16+
17+
The `LineChart` component provides a simplified API for time-series data visualization, perfect for displaying metrics like HTTP calls, user activity, or any trend data.
18+
19+
```vue
20+
<script setup lang="ts">
21+
import { ref, onMounted } from 'vue'
22+
import { LineChart } from '@/components/ui/chart'
23+
import { McpServerService } from '@/services/mcpServerService'
24+
25+
const httpCalls = ref<number[]>([])
26+
const labels = ref<string[]>([])
27+
const isLoading = ref(true)
28+
29+
async function fetchMetrics() {
30+
isLoading.value = true
31+
try {
32+
const data = await McpServerService.getUsageMetrics(serverId)
33+
httpCalls.value = data.map(d => d.calls)
34+
labels.value = data.map(d => d.hour)
35+
} catch (error) {
36+
console.error('Failed to fetch metrics:', error)
37+
} finally {
38+
isLoading.value = false
39+
}
40+
}
41+
42+
onMounted(() => {
43+
fetchMetrics()
44+
})
45+
</script>
46+
47+
<template>
48+
<div class="space-y-4">
49+
<div>
50+
<h3 class="text-lg font-semibold">HTTP Call Usage</h3>
51+
<p class="text-sm text-muted-foreground">
52+
Requests per hour for the selected period
53+
</p>
54+
</div>
55+
56+
<LineChart
57+
:data="httpCalls"
58+
:labels="labels"
59+
name="HTTP Calls"
60+
size="lg"
61+
:loading="isLoading"
62+
/>
63+
</div>
64+
</template>
65+
```
66+
67+
### LineChart Props
68+
69+
| Prop | Type | Default | Description |
70+
|------|------|---------|-------------|
71+
| `data` | `number[]` | required | Array of data points |
72+
| `labels` | `string[]` | required | Array of x-axis labels |
73+
| `name` | `string` | `'Data'` | Series name for tooltip |
74+
| `smooth` | `boolean` | `true` | Enable smooth line interpolation |
75+
| `showArea` | `boolean` | `true` | Show area fill under line |
76+
| `color` | `string` | `'#0f766e'` | Line color (DeployStack teal) |
77+
| `areaColor` | `string` | `'rgba(15, 118, 110, 0.3)'` | Area gradient color |
78+
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Chart height |
79+
| `loading` | `boolean` | `false` | Show loading state |
80+
| `autoresize` | `boolean` | `true` | Auto-resize with container |
81+
82+
### Size Variants
83+
84+
```vue
85+
<!-- Small: 200px height -->
86+
<LineChart :data="data" :labels="labels" size="sm" />
87+
88+
<!-- Medium: 300px height (default) -->
89+
<LineChart :data="data" :labels="labels" size="md" />
90+
91+
<!-- Large: 400px height -->
92+
<LineChart :data="data" :labels="labels" size="lg" />
93+
94+
<!-- Extra Large: 500px height -->
95+
<LineChart :data="data" :labels="labels" size="xl" />
96+
```
97+
98+
### Custom Styling
99+
100+
```html
101+
<!-- Custom colors -->
102+
<LineChart
103+
:data="data"
104+
:labels="labels"
105+
color="#dc2626"
106+
area-color="rgba(220, 38, 38, 0.3)"
107+
/>
108+
109+
<!-- No area fill -->
110+
<LineChart
111+
:data="data"
112+
:labels="labels"
113+
:show-area="false"
114+
/>
115+
116+
<!-- Sharp lines (no smoothing) -->
117+
<LineChart
118+
:data="data"
119+
:labels="labels"
120+
:smooth="false"
121+
/>
122+
```
123+
124+
## Advanced Usage: Base Chart Component
125+
126+
For full control over chart configuration, use the base `Chart` component with custom ECharts options:
127+
128+
```html
129+
<script setup lang="ts">
130+
import { ref } from 'vue'
131+
import { use } from 'echarts/core'
132+
import { BarChart } from 'echarts/charts'
133+
import { GridComponent, TooltipComponent } from 'echarts/components'
134+
import { CanvasRenderer } from 'echarts/renderers'
135+
import { Chart } from '@/components/ui/chart'
136+
import type { EChartsOption } from 'echarts'
137+
138+
// Register required ECharts components
139+
use([
140+
GridComponent,
141+
TooltipComponent,
142+
BarChart,
143+
CanvasRenderer
144+
])
145+
146+
const option = ref<EChartsOption>({
147+
tooltip: {
148+
trigger: 'axis'
149+
},
150+
grid: {
151+
left: '3%',
152+
right: '4%',
153+
bottom: '3%',
154+
containLabel: true
155+
},
156+
xAxis: {
157+
type: 'category',
158+
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
159+
},
160+
yAxis: {
161+
type: 'value'
162+
},
163+
series: [
164+
{
165+
type: 'bar',
166+
data: [120, 200, 150, 80, 70, 110, 130],
167+
itemStyle: {
168+
color: '#0f766e'
169+
}
170+
}
171+
]
172+
})
173+
</script>
174+
175+
<template>
176+
<Chart
177+
:option="option"
178+
variant="bar"
179+
size="lg"
180+
/>
181+
</template>
182+
```
183+
184+
## Best Practices
185+
186+
1. **Use LineChart for simple cases** - The simplified API reduces boilerplate
187+
2. **Use Chart for complex visualizations** - When you need full ECharts control
188+
3. **Set explicit height** - Always use size prop for consistent layouts
189+
4. **Enable autoresize** - Charts automatically adapt to container size changes
190+
5. **Handle loading states** - Use the `loading` prop for better UX
191+
6. **Use CanvasRenderer** - Better performance for most use cases
192+
193+
## Resources
194+
195+
- [GitHub Repository](https://github.com/ecomfe/vue-echarts)
196+
- [Apache ECharts Documentation](https://echarts.apache.org/)
197+
- [Chart Examples](https://echarts.apache.org/examples/)

‎docs/development/satellite/architecture.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Satellites operate as edge workers similar to GitHub Actions runners, providing:
2222
- **OAuth 2.1 Resource Server**: Token introspection with Backend (implemented)
2323
- **Backend Polling Communication**: Outbound-only, firewall-friendly (implemented)
2424
- **Process Lifecycle Management**: Spawn, monitor, terminate MCP servers (ready for implementation)
25+
- **Background Jobs System**: Cron-like recurring tasks with automatic error handling (implemented)
2526

2627
## Current Implementation Architecture
2728

@@ -474,3 +475,6 @@ The satellite service has completed **Phase 1: MCP Transport Implementation** an
474475
- **Logging System**: Pino with structured logging
475476
- **Build Pipeline**: TypeScript compilation and bundling
476477
- **Development Workflow**: Hot reload and code quality tools
478+
- **Background Jobs System**: Cron-like job management for recurring tasks
479+
480+
For details on the background jobs system, see [Background Jobs System](/development/satellite/background-jobs).

0 commit comments

Comments
 (0)