--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Widgets Rising</title>
+ <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.ui/1.11.2/themes/base/minified/jquery-ui.min.css">
+ <link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.1/css/bootstrap.min.css">
+ <link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.1/css/bootstrap-theme.min.css">
+ <link rel="stylesheet" href="nv.d3.css" />
+ </head>
+ <style>
+ #content {
+ max-width: 860px;
+ }
+ nav {
+ margin-bottom: 20px;
+ }
+
+ table .progress {
+ margin: 0;
+ }
+
+ /* A somewhat intense way to relatively scale the charts
+ while preserving a chosen aspect ratio */
+ #sumpie {
+ position: relative;
+ }
+ #sumpie:before{
+ content: "";
+ display: block;
+ padding-top: 100%; /* 1:1 */
+ }
+ #sumpie > svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ #sumlines {
+ position: relative;
+ }
+ #sumlines:before{
+ content: "";
+ display: block;
+ padding-top: 50%;
+ }
+ #sumlines > svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+ <body>
+ <nav class="navbar-static-top navbar-default">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <a class="navbar-brand" href="#">Widget Admin</a>
+ </div>
+ <ul class="nav navbar-nav navbar-left">
+ <li><a href="#">Add widget</a></li>
+ <li><a href="#">Billing</a></li>
+ <li><a href="#">Help</a></li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li><p class="navbar-text">Logged in as Syndicated Incorporated</p></li>
+ <li><a href="#">Logout</a></li>
+ </ul>
+ </div>
+ </nav>
+
+ <div id="content" class="container">
+ <div class="col-sm-12"><div class="panel panel-default">
+ <div class="panel-heading"><h3 class="panel-title">Summary</h3></div>
+ <div class="panel-body">
+ <div class="row">
+ <div class="col-sm-7">
+ <h3>Widgets configured: 3<h3>
+ <h3>Widgets active: 2</h3>
+ <h3>Total clicks this month: 3058</h3>
+ </div>
+ <div id="sumpie" class="col-sm-5">
+ <svg></svg>
+ </div>
+ </div>
+ <div class="row">
+ <div id="sumlines" class='with-3d-shadow with-transitions'>
+ <svg></svg>
+ </div>
+ </div>
+ </div>
+ </div></div>
+
+ <div class="col-sm-12"><div class="panel panel-default">
+ <div class="panel-heading"><h3 class="panel-title">Widgets</h3></div>
+ <table class="table">
+ <tr>
+ <th>Widget</th>
+ <th>Actions</th>
+ <th>Monthly clicks</th>
+ <th>Budget</th>
+ </tr>
+ <tr>
+ <td>Widget 1</td>
+ <td>
+ <a class="edit-widget" href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
+ <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
+ <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
+ </td>
+ <td>363</td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">$48.00 / $80.00</div></div>
+ </td>
+ </tr>
+ <tr>
+ <td>Reference</td>
+ <td>
+ <a class="edit-widget" href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
+ <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
+ <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
+ </td>
+ <td>210</td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">$35.00 / $70.00</div></div>
+ </td>
+ </tr>
+ <tr>
+ <td>Historical image</td>
+ <td>
+ <a class="edit-widget" href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
+ <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
+ <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
+ </td>
+ <td>471</td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">$95.00 / $100.00</div></div>
+ </td>
+ </tr>
+ </table>
+ </div></div>
+ </div>
+ <script src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
+ <script src="http://cdn.jsdelivr.net/jquery.ui/1.11.2/jquery-ui.min.js"></script>
+ <script src="http://cdn.jsdelivr.net/bootstrap/3.3.1/js/bootstrap.min.js"></script>
+ <script src="http://cdn.jsdelivr.net/d3js/3.5.2/d3.min.js"></script>
+ <script src="nv.d3.js"></script>
+ <script>
+ // Summary pie chart
+ var obj = [{label: "Spent this month", value: 102.65}, {label: "Remaining budget", value: 47.35}];
+ nv.addGraph(function() {
+ var chart = nv.models.pieChart()
+ .x(function(d) { return d.label })
+ .y(function(d) { return d.value })
+ .showLabels(true) //Display pie labels
+ .pieLabelsOutside(false)
+ .labelThreshold(.05) //Configure the minimum slice size for labels to show up
+ .labelType("value") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
+ .donut(true) //Turn on Donut mode. Makes pie chart look tasty!
+ .donutRatio(0.35) //Configure how big you want the donut hole size to be.
+ .title("January");
+ ;
+
+ d3.select("#sumpie > svg")
+ .datum(obj)
+ .transition().duration(350)
+ .call(chart);
+
+ return chart;
+ });
+
+ function genLine() {
+ var line = [];
+ for (var i = 1; i < 13; i++) {
+ var obj = {};
+ obj.x = i;
+ obj.y = Math.floor(Math.random()*500);
+ line.push(obj);
+ }
+ return line;
+ }
+
+ var obj2 = [
+ {key:"Widget 1", values:genLine()},
+ {key:"Reference", values:genLine()},
+ {key:"Historical image", values:genLine()}
+ ];
+ nv.addGraph(function() {
+ var chart = nv.models.lineWithFocusChart();
+ chart.xAxis.tickFormat(d3.format(',f'));
+ chart.x2Axis.tickFormat(d3.format(',f'));
+ chart.yAxis.tickFormat(d3.format(',f'));
+ chart.yAxis.axisLabel("Clicks");
+ chart.y2Axis.tickFormat(d3.format(',f'));
+ d3.select('#sumlines > svg')
+ .datum(obj2)
+ .call(chart);
+ nv.utils.windowResize(chart.update);
+ return chart;
+ });
+
+ </script>
+ </body>
+</html>
projects / mkws-moved-to-github.git / blobdiff