Skip to content

Commit

Permalink
Facelift for the front page
Browse files Browse the repository at this point in the history
  • Loading branch information
@misterGF
misterGF committed Oct 31, 2016
1 parent 9f5ca8b commit 9341d39
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 37 deletions.
153 changes: 116 additions & 37 deletions src/components/dash/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,19 +67,34 @@
</div>
<!-- /.row -->

<div class='row'>
<div class='col-md-12 text-center'>
<canvas id="canvas" height="300" width="800"></canvas>
<div>

<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-md-6 col-xs-12"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="width: 100%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></iframe>
<p class="text-center">
<strong>Web Traffic Overview</strong>
</p>
<canvas id="trafficBar" ></canvas>
</div>
<hr class="visible-xs">
<div class="col-md-6 col-xs-12"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="width: 100%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></iframe>
<p class="text-center">
<strong>Language Overview</strong>
</p>
<canvas id="languagePie"></canvas>
</div>
</div>
</div>
<small class="space"><b>Pro Tip</b> Don't forget to start us on github!</small>
</div>
</div>
<!-- /.row -->

<!-- Main row -->
<div class='row'>
<div class='col-md-6'>
<div class='col-md-3 col-sm-6'>
<div class='info-box bg-yellow'>
<span class='info-box-icon'><i class='ion ion-ios-pricetag-outline'></i></span>

Expand All @@ -91,13 +106,13 @@
<div class='progress-bar' style='width: 50%'></div>
</div>
<span class='progress-description'>
50% Increase in 30 Days
50% Increase
</span>
</div>
<!-- /.info-box-content -->
</div>
</div>
<div class='col-md-6'>
<div class='col-md-3 col-sm-6'>
<div class='info-box bg-green'>
<span class='info-box-icon'><i class='ion ion-ios-heart-outline'></i></span>

Expand All @@ -109,13 +124,13 @@
<div class='progress-bar' style='width: 20%'></div>
</div>
<span class='progress-description'>
20% Increase in 30 Days
20% Increase
</span>
</div>
<!-- /.info-box-content -->
</div>
</div>
<div class='col-md-6'>
<div class='col-md-3 col-sm-6'>
<div class='info-box bg-red'>
<span class='info-box-icon'><i class='ion ion-ios-cloud-download-outline'></i></span>

Expand All @@ -127,13 +142,13 @@
<div class='progress-bar' style='width: 70%'></div>
</div>
<span class='progress-description'>
70% Increase in 30 Days
70% Increase
</span>
</div>
<!-- /.info-box-content -->
</div>
</div>
<div class='col-md-6'>
<div class='col-md-3 col-sm-6'>
<div class='info-box bg-aqua'>
<span class='info-box-icon'><i class='ion-ios-chatbubble-outline'></i></span>

Expand All @@ -145,7 +160,7 @@
<div class='progress-bar' style='width: 40%'></div>
</div>
<span class='progress-description'>
40% Increase in 30 Days
40% Increase
</span>
</div>
<!-- /.info-box-content -->
Expand All @@ -161,37 +176,101 @@
import Chart from 'chart.js'
module.exports = {
data: function () {
return {
generateRandomNumbers: function (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: function () {
return this.generateRandomNumbers(12, 1000000, 10000)
},
personalNumbers: function () {
return this.generateRandomNumbers(12, 1000000, 10000)
}
},
mounted: function () {
this.$nextTick(function () {
var ctx = document.getElementById('canvas').getContext('2d')
var data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fillColor: 'rgba(220,220,220,0.2)',
strokeColor: 'rgba(220,220,220,1)',
pointColor: 'rgba(220,220,220,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data: [65, 59, 80, 81, 56, 55, 40]
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: false,
legend: {
position: 'bottom',
display: true
},
{
label: 'My Second dataset',
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,1)',
data: [28, 48, 40, 19, 86, 27, 90]
tooltips: {
mode: 'label',
xPadding: 10,
yPadding: 10,
bodySpacing: 10
}
]
}
}
new Chart(ctx).Line(data, {responsive: false})
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: false,
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>
Binary file added static/img/banner.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/screenshotv2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9341d39

Please sign in to comment.