355 lines
13 KiB
Vue
355 lines
13 KiB
Vue
<template>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
|
|
<!-- Info boxes -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<info-box color-class="bg-aqua"
|
|
:icon-classes="['ion', 'ion-ios-gear-outline']"
|
|
text="CPU Traffic"
|
|
number="90%"></info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<info-box color-class="bg-red"
|
|
:icon-classes="['fa', 'fa-google-plus']"
|
|
text="Likes"
|
|
number="41,410"></info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
|
|
<!-- fix for small devices only -->
|
|
<div class="clearfix visible-sm-block"></div>
|
|
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<info-box color-class="bg-green"
|
|
:icon-classes="['ion', 'ion-ios-cart-outline']"
|
|
text="Sales"
|
|
number="760"></info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<info-box color-class="bg-yellow"
|
|
:icon-classes="['ion', 'ion-ios-people-outline']"
|
|
text="New Members"
|
|
number="2,000"></info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="row center-block">
|
|
<h2>Data tables</h2>
|
|
<div class="col-md-12">
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Data Table With Full Features</h3>
|
|
</div>
|
|
<!-- /.box-header -->
|
|
<div class="box-body">
|
|
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div id="example1_length" class="dataTables_length">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 table-responsive">
|
|
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
|
|
<thead>
|
|
<tr role="row">
|
|
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
|
|
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
|
|
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
|
|
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
|
|
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="even" role="row">
|
|
<td class="sorting_1">Blink</td>
|
|
<td>Iridium 54.0</td>
|
|
<td>GNU/Linux</td>
|
|
<td>54</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="odd" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Firefox 1.0</td>
|
|
<td>Win 98+ / OSX.2+</td>
|
|
<td>1.7</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="even" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Firefox 1.5</td>
|
|
<td>Win 98+ / OSX.2+</td>
|
|
<td>1.8</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="odd" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Firefox 2.0</td>
|
|
<td>Win 98+ / OSX.2+</td>
|
|
<td>1.8</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="even" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Firefox 3.0</td>
|
|
<td>Win 2k+ / OSX.3+</td>
|
|
<td>1.9</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="odd" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Camino 1.0</td>
|
|
<td>OSX.2+</td>
|
|
<td>1.8</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="even" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Camino 1.5</td>
|
|
<td>OSX.3+</td>
|
|
<td>1.8</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="odd" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Netscape 7.2</td>
|
|
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
|
<td>1.7</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="even" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Netscape Browser 8</td>
|
|
<td>Win 98SE+</td>
|
|
<td>1.7</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="odd" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Netscape Navigator 9</td>
|
|
<td>Win 98+ / OSX.2+</td>
|
|
<td>1.8</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr class="even" role="row">
|
|
<td class="sorting_1">Gecko</td>
|
|
<td>Mozilla 1.0</td>
|
|
<td>Win 95+ / OSX.1+</td>
|
|
<td>1</td>
|
|
<td>A</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th colspan="1" rowspan="1">Rendering engine</th>
|
|
<th colspan="1" rowspan="1">Browser</th>
|
|
<th colspan="1" rowspan="1">Platform(s)</th>
|
|
<th colspan="1" rowspan="1">Engine version</th>
|
|
<th colspan="1" rowspan="1">CSS grade</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.box-body -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
<div class="col-xs-12">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title"></h3>
|
|
<div class="box-body">
|
|
<div class="col-sm-6 col-xs-12">
|
|
<p class="text-center">
|
|
<strong>Web Traffic Overview</strong>
|
|
</p>
|
|
<canvas id="trafficBar" ></canvas>
|
|
</div>
|
|
<hr class="visible-xs-block">
|
|
<div class="col-sm-6 col-xs-12">
|
|
<p class="text-center">
|
|
<strong>Language Overview</strong>
|
|
</p>
|
|
<canvas id="languagePie"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="text-center">
|
|
<small><b>Pro Tip</b> Don't forget to star us on github!</small>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
<!-- Main row -->
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<process-info-box color-class="bg-yellow"
|
|
:icon-classes="['ion', 'ion-ios-pricetag-outline']"
|
|
text="Inventory"
|
|
number="5,200"
|
|
:progress="50"
|
|
description="50% increase since May"></process-info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<process-info-box color-class="bg-green"
|
|
:icon-classes="['ion', 'ion-ios-heart-outline']"
|
|
text="Mentions"
|
|
number="92,050"
|
|
:progress="20"
|
|
description="20% increase in 30 days"></process-info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<process-info-box color-class="bg-red"
|
|
:icon-classes="['ion', 'ion-ios-cloud-download-outline']"
|
|
text="Downloads"
|
|
number="114,381"
|
|
:progress="70"
|
|
description="70% increase since yesterday"></process-info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<process-info-box color-class="bg-aqua"
|
|
:icon-classes="['ion', 'ion-ios-chatbubble-outline']"
|
|
text="Direct Messages"
|
|
number="163,921"
|
|
:progress="40"
|
|
description="40% increase compared to last year"></process-info-box>
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</section>
|
|
<!-- /.content -->
|
|
</template>
|
|
|
|
<script>
|
|
import Chart from 'chart.js'
|
|
import Alert from '../widgets/Alert'
|
|
import InfoBox from '../widgets/InfoBox'
|
|
import ProcessInfoBox from '../widgets/ProcessInfoBox'
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
components: {
|
|
Alert,
|
|
InfoBox,
|
|
ProcessInfoBox
|
|
},
|
|
data () {
|
|
return {
|
|
generateRandomNumbers (numbers, max, min) {
|
|
var a = []
|
|
for (var i = 0; i < numbers; i++) {
|
|
a.push(Math.floor(Math.random() * (max - min + 1)) + max)
|
|
}
|
|
return a
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
coPilotNumbers () {
|
|
return this.generateRandomNumbers(12, 1000000, 10000)
|
|
},
|
|
personalNumbers () {
|
|
return this.generateRandomNumbers(12, 1000000, 10000)
|
|
},
|
|
isMobile () {
|
|
return (window.innerWidth <= 800 && window.innerHeight <= 600)
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$nextTick(() => {
|
|
var ctx = document.getElementById('trafficBar').getContext('2d')
|
|
var config = {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
|
datasets: [{
|
|
label: 'CoPilot',
|
|
fill: false,
|
|
borderColor: '#284184',
|
|
pointBackgroundColor: '#284184',
|
|
backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
data: this.coPilotNumbers
|
|
}, {
|
|
label: 'Personal Site',
|
|
borderColor: '#4BC0C0',
|
|
pointBackgroundColor: '#4BC0C0',
|
|
backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
data: this.personalNumbers
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: !this.isMobile,
|
|
legend: {
|
|
position: 'bottom',
|
|
display: true
|
|
},
|
|
tooltips: {
|
|
mode: 'label',
|
|
xPadding: 10,
|
|
yPadding: 10,
|
|
bodySpacing: 10
|
|
}
|
|
}
|
|
}
|
|
|
|
new Chart(ctx, config) // eslint-disable-line no-new
|
|
|
|
var pieChartCanvas = document.getElementById('languagePie').getContext('2d')
|
|
var pieConfig = {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['HTML', 'JavaScript', 'CSS'],
|
|
datasets: [{
|
|
data: [56.6, 37.7, 4.1],
|
|
backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
|
|
hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: !this.isMobile,
|
|
legend: {
|
|
position: 'bottom',
|
|
display: true
|
|
}
|
|
}
|
|
}
|
|
|
|
new Chart(pieChartCanvas, pieConfig) // eslint-disable-line no-new
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.info-box {
|
|
cursor: pointer;
|
|
}
|
|
.info-box-content {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
display: inherit;
|
|
}
|
|
.fullCanvas {
|
|
width: 100%;
|
|
}
|
|
</style>
|