"panel vue js"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: