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