Charts with Vue ECharts

<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>

<!-- 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 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"
/>

<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>