You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
9.0 KiB
278 lines
9.0 KiB
6 years ago
|
<template>
|
||
|
<div class="content">
|
||
|
<div class="container-fluid">
|
||
|
<div class="row">
|
||
|
<div class="col-xl-3 col-md-6">
|
||
|
<stats-card>
|
||
|
<div slot="header" class="icon-warning">
|
||
|
<i class="nc-icon nc-chart text-warning"></i>
|
||
|
</div>
|
||
|
<div slot="content">
|
||
|
<p class="card-category">Capacity</p>
|
||
|
<h4 class="card-title">105GB</h4>
|
||
|
</div>
|
||
|
<div slot="footer">
|
||
|
<i class="fa fa-refresh"></i>Updated now
|
||
|
</div>
|
||
|
</stats-card>
|
||
|
</div>
|
||
|
|
||
|
<div class="col-xl-3 col-md-6">
|
||
|
<stats-card>
|
||
|
<div slot="header" class="icon-success">
|
||
|
<i class="nc-icon nc-light-3 text-success"></i>
|
||
|
</div>
|
||
|
<div slot="content">
|
||
|
<p class="card-category">Revenue</p>
|
||
|
<h4 class="card-title">$1,345</h4>
|
||
|
</div>
|
||
|
<div slot="footer">
|
||
|
<i class="fa fa-calendar-o"></i>Last day
|
||
|
</div>
|
||
|
</stats-card>
|
||
|
</div>
|
||
|
|
||
|
<div class="col-xl-3 col-md-6">
|
||
|
<stats-card>
|
||
|
<div slot="header" class="icon-danger">
|
||
|
<i class="nc-icon nc-vector text-danger"></i>
|
||
|
</div>
|
||
|
<div slot="content">
|
||
|
<p class="card-category">Errors</p>
|
||
|
<h4 class="card-title">23</h4>
|
||
|
</div>
|
||
|
<div slot="footer">
|
||
|
<i class="fa fa-clock-o"></i>Last day
|
||
|
</div>
|
||
|
</stats-card>
|
||
|
</div>
|
||
|
|
||
|
<div class="col-xl-3 col-md-6">
|
||
|
<stats-card>
|
||
|
<div slot="header" class="icon-info">
|
||
|
<i class="nc-icon nc-favourite-28 text-primary"></i>
|
||
|
</div>
|
||
|
<div slot="content">
|
||
|
<p class="card-category">Followers</p>
|
||
|
<h4 class="card-title">+45</h4>
|
||
|
</div>
|
||
|
<div slot="footer">
|
||
|
<i class="fa fa-refresh"></i>Updated now
|
||
|
</div>
|
||
|
</stats-card>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
<div class="row">
|
||
|
<div class="col-md-8">
|
||
|
<chart-card :chart-data="lineChart.data"
|
||
|
:chart-options="lineChart.options"
|
||
|
:responsive-options="lineChart.responsiveOptions">
|
||
|
<template slot="header">
|
||
|
<h4 class="card-title">Users Behavior</h4>
|
||
|
<p class="card-category">24 Hours performance</p>
|
||
|
</template>
|
||
|
<template slot="footer">
|
||
|
<div class="legend">
|
||
|
<i class="fa fa-circle text-info"></i> Open
|
||
|
<i class="fa fa-circle text-danger"></i> Click
|
||
|
<i class="fa fa-circle text-warning"></i> Click Second Time
|
||
|
</div>
|
||
|
<hr>
|
||
|
<div class="stats">
|
||
|
<i class="fa fa-history"></i> Updated 3 minutes ago
|
||
|
</div>
|
||
|
</template>
|
||
|
</chart-card>
|
||
|
</div>
|
||
|
|
||
|
<div class="col-md-4">
|
||
|
<chart-card :chart-data="pieChart.data" chart-type="Pie">
|
||
|
<template slot="header">
|
||
|
<h4 class="card-title">Email Statistics</h4>
|
||
|
<p class="card-category">Last Campaign Performance</p>
|
||
|
</template>
|
||
|
<template slot="footer">
|
||
|
<div class="legend">
|
||
|
<i class="fa fa-circle text-info"></i> Open
|
||
|
<i class="fa fa-circle text-danger"></i> Bounce
|
||
|
<i class="fa fa-circle text-warning"></i> Unsubscribe
|
||
|
</div>
|
||
|
<hr>
|
||
|
<div class="stats">
|
||
|
<i class="fa fa-clock-o"></i> Campaign sent 2 days ago
|
||
|
</div>
|
||
|
</template>
|
||
|
</chart-card>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="row">
|
||
|
<div class="col-md-6">
|
||
|
<chart-card
|
||
|
:chart-data="barChart.data"
|
||
|
:chart-options="barChart.options"
|
||
|
:chart-responsive-options="barChart.responsiveOptions"
|
||
|
chart-type="Bar">
|
||
|
<template slot="header">
|
||
|
<h4 class="card-title">2014 Sales</h4>
|
||
|
<p class="card-category">All products including Taxes</p>
|
||
|
</template>
|
||
|
<template slot="footer">
|
||
|
<div class="legend">
|
||
|
<i class="fa fa-circle text-info"></i> Tesla Model S
|
||
|
<i class="fa fa-circle text-danger"></i> BMW 5 Series
|
||
|
</div>
|
||
|
<hr>
|
||
|
<div class="stats">
|
||
|
<i class="fa fa-check"></i> Data information certified
|
||
|
</div>
|
||
|
</template>
|
||
|
</chart-card>
|
||
|
</div>
|
||
|
|
||
|
<div class="col-md-6">
|
||
|
<card>
|
||
|
<template slot="header">
|
||
|
<h5 class="title">Tasks</h5>
|
||
|
<p class="category">Backend development</p>
|
||
|
</template>
|
||
|
<l-table :data="tableData.data"
|
||
|
:columns="tableData.columns">
|
||
|
<template slot="columns"></template>
|
||
|
|
||
|
<template slot-scope="{row}">
|
||
|
<td>
|
||
|
<Checkbox v-model="row.checked"></Checkbox>
|
||
|
</td>
|
||
|
<td>{{row.title}}</td>
|
||
|
<td class="td-actions text-right">
|
||
|
<button type="button" class="btn-simple btn btn-xs btn-info" v-tooltip.top-center="editTooltip">
|
||
|
<i class="fa fa-edit"></i>
|
||
|
</button>
|
||
|
<button type="button" class="btn-simple btn btn-xs btn-danger" v-tooltip.top-center="deleteTooltip">
|
||
|
<i class="fa fa-times"></i>
|
||
|
</button>
|
||
|
</td>
|
||
|
</template>
|
||
|
</l-table>
|
||
|
<div class="footer">
|
||
|
<hr>
|
||
|
<div class="stats">
|
||
|
<i class="fa fa-history"></i> Updated 3 minutes ago
|
||
|
</div>
|
||
|
</div>
|
||
|
</card>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script>
|
||
|
import ChartCard from 'src/components/UIComponents/Cards/ChartCard.vue'
|
||
|
import StatsCard from 'src/components/UIComponents/Cards/StatsCard.vue'
|
||
|
import Card from 'src/components/UIComponents/Cards/Card.vue'
|
||
|
import LTable from 'src/components/UIComponents/Table.vue'
|
||
|
import Checkbox from 'src/components/UIComponents/Inputs/Checkbox.vue'
|
||
|
|
||
|
export default {
|
||
|
components: {
|
||
|
Checkbox,
|
||
|
Card,
|
||
|
LTable,
|
||
|
ChartCard,
|
||
|
StatsCard
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
editTooltip: 'Edit Task',
|
||
|
deleteTooltip: 'Remove',
|
||
|
pieChart: {
|
||
|
data: {
|
||
|
labels: ['40%', '20%', '40%'],
|
||
|
series: [40, 20, 40]
|
||
|
}
|
||
|
},
|
||
|
lineChart: {
|
||
|
data: {
|
||
|
labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
|
||
|
series: [
|
||
|
[287, 385, 490, 492, 554, 586, 698, 695],
|
||
|
[67, 152, 143, 240, 287, 335, 435, 437],
|
||
|
[23, 113, 67, 108, 190, 239, 307, 308]
|
||
|
]
|
||
|
},
|
||
|
options: {
|
||
|
low: 0,
|
||
|
high: 800,
|
||
|
showArea: false,
|
||
|
height: '245px',
|
||
|
axisX: {
|
||
|
showGrid: false
|
||
|
},
|
||
|
lineSmooth: true,
|
||
|
showLine: true,
|
||
|
showPoint: true,
|
||
|
fullWidth: true,
|
||
|
chartPadding: {
|
||
|
right: 50
|
||
|
}
|
||
|
},
|
||
|
responsiveOptions: [
|
||
|
['screen and (max-width: 640px)', {
|
||
|
axisX: {
|
||
|
labelInterpolationFnc (value) {
|
||
|
return value[0]
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
]
|
||
|
},
|
||
|
barChart: {
|
||
|
data: {
|
||
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||
|
series: [
|
||
|
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
|
||
|
[412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695]
|
||
|
]
|
||
|
},
|
||
|
options: {
|
||
|
seriesBarDistance: 10,
|
||
|
axisX: {
|
||
|
showGrid: false
|
||
|
},
|
||
|
height: '245px'
|
||
|
},
|
||
|
responsiveOptions: [
|
||
|
['screen and (max-width: 640px)', {
|
||
|
seriesBarDistance: 5,
|
||
|
axisX: {
|
||
|
labelInterpolationFnc (value) {
|
||
|
return value[0]
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
]
|
||
|
},
|
||
|
tableData: {
|
||
|
data: [
|
||
|
{title: 'Sign contract for "What are conference organizers afraid of?"', checked: false},
|
||
|
{title: 'Lines From Great Russian Literature? Or E-mails From My Boss?', checked: true},
|
||
|
{
|
||
|
title: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
|
||
|
checked: true
|
||
|
},
|
||
|
{title: 'Create 4 Invisible User Experiences you Never Knew About', checked: false},
|
||
|
{title: 'Read "Following makes Medium better"', checked: false},
|
||
|
{title: 'Unfollow 5 enemies from twitter', checked: false}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style>
|
||
|
|
||
|
</style>
|