|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="description" content="Dashboard">
|
|
|
|
|
<title>{{ $t('nav.dashboard') }}</title>
|
|
|
|
|
<style>
|
|
|
|
|
.dashboard-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
|
|
gap: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-card {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
box-shadow: var(--shadow-sm);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-title {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: var(--text-color-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-value {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart-container {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
box-shadow: var(--shadow-sm);
|
|
|
|
|
height: 400px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="dashboard-container">
|
|
|
|
|
<h1>{{ $t('nav.dashboard') }}</h1>
|
|
|
|
|
|
|
|
|
|
<div class="stats-grid">
|
|
|
|
|
<div class="stat-card" v-for="stat in stats">
|
|
|
|
|
<div class="stat-title">{{ stat.title }}</div>
|
|
|
|
|
<div class="stat-value">{{ stat.value }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="chart-container" id="main-chart"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script setup>
|
|
|
|
|
stats = [
|
|
|
|
|
{title: "Total Users", value: "1,234"},
|
|
|
|
|
{title: "Active Orgs", value: "56"},
|
|
|
|
|
{title: "API Calls", value: "89.2k"},
|
|
|
|
|
{title: "Revenue", value: "$12,340"}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Mock data fetch
|
|
|
|
|
fetchStats = async () => {
|
|
|
|
|
// In real app, call API
|
|
|
|
|
// const res = await $axios.get('/api/stats/dashboard');
|
|
|
|
|
// stats = res;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
initChart = () => {
|
|
|
|
|
const chartDom = $node.querySelector('#main-chart');
|
|
|
|
|
if (!chartDom) return;
|
|
|
|
|
|
|
|
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
|
const option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: 'Activity Trend'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value'
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
|
|
type: 'line',
|
|
|
|
|
smooth: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
|
|
|
|
// Resize chart on window resize
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
myChart.resize();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
// Run after mount
|
|
|
|
|
$data.initChart();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
