<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mattrothenberg/pen/VbQLJa?q=dashboard&order=popularity&depth=everything&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'><link rel='stylesheet prefetch' href='https://unpkg.com/tachyons@4.7.1/css/tachyons.css'>
<style class="cp-pen-styles">body {
font-family: 'Roboto';
-webkit-font-smoothing: antialiased;
}
.bg-green {
background: #1BC98E;
}
.bg-red {
background: #E64759;
}
.bg-purple {
background: #9F86FF;
}
.divide:before {
background: rgba(0, 0, 0, 0.1);
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 8px;
width: 100%;
z-index: -1;
}
</style></head><body>
<main>
<div class="mw8 center pv4 ph3" id="dashboard">
<section class="flex-m flex-l nl3-m nr3-m nl3-l nr3-l">
<nav class="w-100 w-25-m w-25-l mb4 mb0-l ph3-m ph3-l">
<header class="mb2">
<i class="material-icons f2 black-70">dashboard</i>
</header>
<form class="mb4 w-100 w-70-m w-80-l">
<input type="text" placeholder="Search" class="input-reset ba b--black-20 pa1 br2 f5 w-100" />
</form>
<h2 class="ttu mt0 mb2 f6 fw5 silver">Dashboards</h2>
<ul class="list pl0 mt0 mb4">
<li class="mb2">
<a href="#" class="block link dim blue">Overview</a>
</li>
<li class="mb2">
<a href="#" class="block link dim blue">Order History</a>
</li>
<li class="mb2">
<a href="#" class="block link dim blue">Fluid Layout</a>
</li>
<li>
<a href="#" class="block link dim blue">Icon Nav</a>
</li>
</ul>
<h2 class="ttu mt0 mb2 f6 fw5 silver">More</h2>
<ul class="list pl0 mt0 mb2">
<li class="mb2">
<a href="#" class="block link dim blue">Toolkit Docs</a>
</li>
<li class="mb2">
<a href="#" class="block link dim blue">Bootstrap Docs</a>
</li>
<li class="mb2">
<a href="#" class="block link dim blue">Dark UI</a>
</li>
<li>
<a href="#" class="block link dim blue">Example Modal</a>
</li>
</ul>
</nav>
<article class="w-100 w-75-m w-75-l ph3-m ph3-l">
<header class="mb3">
<h2 class="ttu mt0 mb1 f6 fw5 silver">Dashboards</h2>
<h1 class="fw3 dark-gray mt0 mb0">Overview</h1>
</header>
<hr class="o-20" />
<div class="flex-m flex-l flex-wrap items-center justify-between nl3 nr3 pt4 mb4">
<div class="w-100 w-50-m w-33-l ph3 tc mb4 mb0-l">
<div class="w-50 w-50-m w-75-l center">
<doughnut :labels="newVsReturning.labels" :data="newVsReturning.data"></doughnut>
</div>
<h3 class="mt3 mb1 f6 fw5 silver">Traffic</h3>
<h4 class="dark-gray f3 fw3 mv0">New vs. Returning</h4>
</div>
<div class="w-100 w-50-m w-33-l ph3 tc mb4 mb0-l">
<div class="w-50 w-50-m w-75-l center">
<doughnut :labels="newVsRecurring.labels" :data="newVsRecurring.data"></doughnut>
</div>
<h3 class="mt3 mb1 f6 fw5 silver">Revenue</h3>
<h4 class="dark-gray f3 fw3 mv0">New vs. Recurring</h4>
</div>
<div class="w-100 w-50-m w-33-l ph3 tc mb4 mb0-l">
<div class="w-50 w-50-m w-75-l center">
<doughnut :labels="directVsReferrals.labels" :data="directVsReferrals.data"></doughnut>
</div>
<h3 class="mt3 mb1 f6 fw5 silver">Traffic</h3>
<h4 class="dark-gray f3 fw3 mv0">Direct vs. Referral</h4>
</div>
</div>
<div class="divide tc relative">
<h5 class="fw4 ttu mv0 dib bg-white ph3">Quick Stats</h5>
</div>
<div class="flex flex-wrap mt3 nl3 nr3">
<div class="w-50 w-25-l mb4 mb0-l relative flex flex-column ph3">
<sparkline title="Page Views" class="bg-green" value="1,293"></sparkline>
</div>
<div class="w-50 w-25-l mb4 mb0-l relative flex flex-column ph3">
<sparkline title="Downloads" class="bg-red" value="758"></sparkline>
</div>
<div class="w-50 w-25-l mb4 mb0-l relative flex flex-column ph3">
<sparkline title="Sign-Ups" class="bg-purple" value="1,293"></sparkline>
</div>
<div class="w-50 w-25-l mb4 mb0-l relative flex flex-column ph3">
<sparkline title="Downloads" class="bg-blue" value="758"></sparkline>
</div>
</div>
<hr class="o-20 mt4" />
<div class="flex flex-wrap pt3 nl3 nr3">
<div class="w-100 w-50-l ph3 mb3 mb0-l">
<div class="bt bl br b--black-10 br2">
<div class="pa3 bb b--black-10">
<h4 class="mv0">Countries</h4>
</div>
<metric-list-item v-for="(country, index) in countryData" :key="index" :show-bar="country.showBar" :name="country.name" :value="country.value">
</metric-list-item>
</div>
<a href="#" class="no-underline fw5 mt3 br2 ph3 pv2 dib ba b--blue blue bg-white hover-bg-blue hover-white">All Countries</a>
</div>
<div class="w-100 w-50-l ph3 mb3 mb0-l">
<div class="bt bl br b--black-10 br2">
<div class="pa3 bb b--black-10">
<h4 class="mv0">Most Visited Pages</h4>
</div>
<metric-list-item v-for="(page, index) in pageData" :key="index" :show-bar="page.showBar" :name="page.name" :value="page.value">
</metric-list-item>
</div>
<a href="#" class="no-underline fw5 mt3 br2 ph3 pv2 dib ba b--blue blue bg-white hover-bg-blue hover-white">All Pages</a>
</div>
</div>
<div class="mt4">
<div class="w-100 mb3 mb0-l">
<div class="bt bl br b--black-10 br2">
<div class="pa3 bb b--black-10">
<h4 class="mv0">Devices and Resolutions</h4>
</div>
<metric-list-item v-for="(device, index) in deviceData" :key="index" :show-bar="device.showBar" :name="device.name" :value="device.value">
</metric-list-item>
</div>
<a href="#" class="no-underline fw5 mt3 br2 ph3 pv2 dib ba b--blue blue bg-white hover-bg-blue hover-white">All Devices</a>
</div>
</div>
</article>
</section>
</div>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
<script >Vue.component("doughnut", {
props: ["data", "labels"],
data: function data() {
ctx: null;
},
template: "\n <canvas></canvas>\n ",
mounted: function mounted() {
var self = this;
this.ctx = this.$el.getContext("2d");
new Chart(this.ctx, {
type: "doughnut",
options: {
cutoutPercentage: 80
},
data: {
labels: self.labels,
datasets: [{
data: self.data,
backgroundColor: ["#1BC98E", "#1CA8DD"],
hoverBackgroundColor: ["#1BC98E", "#1CA8DD"]
}]
}
});
}
});
Vue.component("sparkline", {
props: ["title", "value"],
data: function data() {
ctx: null;
},
template: "\n <div class=\"br2\">\n <div class=\"pa3 flex-auto bb b--white-10\">\n <h3 class=\"mt0 mb1 f6 ttu white o-70\">{{ title }}</h3>\n <h2 class=\"mv0 f2 fw5 white\">{{ value }}</h2>\n </div>\n <div class=\"pt2\">\n <canvas></canvas>\n </div>\n </div>\n ",
mounted: function mounted() {
this.ctx = this.$el.querySelector("canvas").getContext("2d");
var sparklineGradient = this.ctx.createLinearGradient(0, 0, 0, 135);
sparklineGradient.addColorStop(0, "rgba(255,255,255,0.35)");
sparklineGradient.addColorStop(1, "rgba(255,255,255,0)");
var data = {
labels: ["A", "B", "C", "D", "E", "F"],
datasets: [{
backgroundColor: sparklineGradient,
borderColor: "#FFFFFF",
data: [2, 4, 6, 4, 8, 10]
}]
};
Chart.Line(this.ctx, {
data: data,
options: {
elements: {
point: {
radius: 0
}
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
}
}
});
}
});
Vue.component("metric-list-item", {
props: ["name", "value", "showBar"],
computed: {
barWidth: function barWidth() {
return this.value + "%";
}
},
template: "\n <a href=\"#\" class=\"link dark-gray flex justify-between relative pa3 bb b--black-10 hover-bg-near-white\">\n <span v-if=\"showBar\" class=\"absolute top-0 left-0 right-0 bottom-0 h-100 bg-near-white\" v-bind:style=\"{ width: barWidth, zIndex: -1 }\"></span>\n <span>{{ name }}</span>\n <span>{{ value }}</span>\n </a>\n "
});
new Vue({
el: "#dashboard",
data: {
newVsReturning: {
data: [130, 230],
labels: ["New", "Returning"]
},
newVsRecurring: {
data: [30, 330],
labels: ["New", "Recurring"]
},
directVsReferrals: {
data: [260, 160],
labels: ["Direct", "Referrals"]
},
countryData: [{
name: "United States",
value: "62.4",
showBar: true
}, {
name: "India",
value: "15",
showBar: true
}, {
name: "United Kingdom",
value: "5",
showBar: true
}, {
name: "Canada",
value: "5",
showBar: true
}, {
name: "Russia",
value: "4.5",
showBar: true
}, {
name: "Mexico",
value: "2.3",
showBar: true
}, {
name: "Spain",
value: "1.7",
showBar: true
}],
pageData: [{
name: "/ (Logged out)",
value: "3,929,481",
showBar: false
}, {
name: "/ (Logged in)",
value: "1,143,393",
showBar: false
}, {
name: "/tour",
value: "938,287",
showBar: false
}, {
name: "/features/something",
value: "749,393",
showBar: false
}, {
name: "/features/another-thing",
value: "695,912",
showBar: false
}, {
name: "/users/username",
value: "501,938",
showBar: false
}, {
name: "/page-title",
value: "392,842",
showBar: false
}],
deviceData: [{
name: "Desktop (1920x1080)",
value: "3,929,481",
showBar: false
}, {
name: "Desktop (1366x768)",
value: "1,143,393",
showBar: false
}, {
name: "Desktop (1440x900)",
value: "938,287",
showBar: false
}, {
name: "Desktop (1280x800)",
value: "749,393",
showBar: false
}, {
name: "Tablet (1024x768)",
value: "695,912",
showBar: false
}, {
name: "Tablet (768x1024)",
value: "501,938",
showBar: false
}, {
name: "Phone (320x480)",
value: "392,842",
showBar: false
}, {
name: "Phone (720x450)",
value: "298,183",
showBar: false
}, {
name: "Desktop (2560x1080)",
value: "193,129",
showBar: false
}, {
name: "Desktop (2560x1600)",
value: "93,382",
showBar: false
}]
},
created: function created() {
Chart.defaults.global.legend.display = false;
}
});
//# sourceURL=pen.js
</script>
</body></html>
