Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.deploystack.io/llms.txt

Use this file to discover all available pages before exploring further.

DeployStack uses vue-echarts for data visualization, providing powerful and performant charts with Apache ECharts integration for Vue 3.

​
Chart Components

The chart components are available in /components/ui/chart/ following the shadcn/vue pattern with CVA variants.

​
LineChart Component

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. 
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { LineChart } from '@/components/ui/chart'
import { McpServerService } from '@/services/mcpServerService'

const httpCalls = ref<number[]>([])
const labels = ref<string[]>([])
const isLoading = ref(true)

async function fetchMetrics() {
  isLoading.value = true
  try {
    const data = await McpServerService.getUsageMetrics(serverId)
    httpCalls.value = data.map(d => d.calls)
    labels.value = data.map(d => d.hour)
  } catch (error) {
    console.error('Failed to fetch metrics:', error)
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  fetchMetrics()
})
</script>

<template>
  <div class="space-y-4">
    <div>
      <h3 class="text-lg font-semibold">HTTP Call Usage</h3>
      <p class="text-sm text-muted-foreground">
        Requests per hour for the selected period
      </p>
    </div>

    <LineChart 
      :data="httpCalls"
      :labels="labels"
      name="HTTP Calls"
      size="lg"
      :loading="isLoading"
    />
  </div>
</template>

​
LineChart Props

PropTypeDefaultDescription
datanumber[]requiredArray of data points
labelsstring[]requiredArray of x-axis labels
namestring'Data'Series name for tooltip
smoothbooleantrueEnable smooth line interpolation
showAreabooleantrueShow area fill under line
colorstring'#0f766e'Line color (DeployStack teal)
areaColorstring'rgba(15, 118, 110, 0.3)'Area gradient color
size'sm' | 'md' | 'lg' | 'xl''md'Chart height
loadingbooleanfalseShow loading state
autoresizebooleantrueAuto-resize with container

​
Size Variants

<!-- Small: 200px height -->
<LineChart :data="data" :labels="labels" size="sm" />

<!-- Medium: 300px height (default) -->
<LineChart :data="data" :labels="labels" size="md" />

<!-- Large: 400px height -->
<LineChart :data="data" :labels="labels" size="lg" />

<!-- Extra Large: 500px height -->
<LineChart :data="data" :labels="labels" size="xl" />

​
Custom Styling

<!-- Custom colors -->
<LineChart 
  :data="data"
  :labels="labels"
  color="#dc2626"
  area-color="rgba(220, 38, 38, 0.3)"
/>

<!-- No area fill -->
<LineChart 
  :data="data"
  :labels="labels"
  :show-area="false"
/>

<!-- Sharp lines (no smoothing) -->
<LineChart 
  :data="data"
  :labels="labels"
  :smooth="false"
/>

​
Advanced Usage: Base Chart Component

For full control over chart configuration, use the base Chart component with custom ECharts options: 
<script setup lang="ts">
import { ref } from 'vue'
import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { Chart } from '@/components/ui/chart'
import type { EChartsOption } from 'echarts'

// Register required ECharts components
use([
  GridComponent,
  TooltipComponent,
  BarChart,
  CanvasRenderer
])

const option = ref<EChartsOption>({
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
      itemStyle: {
        color: '#0f766e'
      }
    }
  ]
})
</script>

<template>
  <Chart 
    :option="option"
    variant="bar"
    size="lg"
  />
</template>

​
Best Practices

  1. Use LineChart for simple cases - The simplified API reduces boilerplate
  2. Use Chart for complex visualizations - When you need full ECharts control
  3. Set explicit height - Always use size prop for consistent layouts
  4. Enable autoresize - Charts automatically adapt to container size changes
  5. Handle loading states - Use the loading prop for better UX
  6. Use CanvasRenderer - Better performance for most use cases

​
Resources