72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<LineChart
|
|
type="time"
|
|
title="Daily Usage"
|
|
:key="dailyUsageData"
|
|
:data="dailyUsageData"
|
|
unit="seconds"
|
|
:chartTheme="[$theme.colors.purple[500]]"
|
|
:loading="$resources.requestCounter.loading"
|
|
:error="$resources.requestCounter.error"
|
|
>
|
|
<template #actions>
|
|
<router-link
|
|
class="text-base text-gray-600 hover:text-gray-700"
|
|
:to="`/sites/${site.name}/analytics`"
|
|
>
|
|
All analytics →
|
|
</router-link>
|
|
</template>
|
|
</LineChart>
|
|
</template>
|
|
<script>
|
|
import { DateTime } from 'luxon';
|
|
import LineChart from '@/components/charts/LineChart.vue';
|
|
|
|
export default {
|
|
name: 'CPUUsage',
|
|
props: ['site'],
|
|
components: { LineChart },
|
|
resources: {
|
|
requestCounter() {
|
|
let localTimezone = DateTime.local().zoneName;
|
|
return {
|
|
url: 'jcloud.api.analytics.daily_usage',
|
|
params: { name: this.site?.name, timezone: localTimezone },
|
|
auto: true
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
dailyUsageData() {
|
|
let dailyUsageData = this.$resources.requestCounter.data?.data;
|
|
if (!dailyUsageData) return;
|
|
let plan_limit = this.$resources.requestCounter.data.plan_limit;
|
|
|
|
return {
|
|
datasets: [
|
|
dailyUsageData.map(d => [+new Date(d.date), d.value / 1000000])
|
|
],
|
|
// daily limit marker
|
|
markLine: {
|
|
data: [
|
|
{
|
|
name: 'Daily Compute Limit',
|
|
yAxis: plan_limit,
|
|
label: {
|
|
formatter: '{b}: {c} seconds',
|
|
position: 'middle'
|
|
},
|
|
lineStyle: {
|
|
color: '#f5222d'
|
|
}
|
|
}
|
|
],
|
|
symbol: ['none', 'none']
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|