Initial import
This commit is contained in:
commit
89d2f1bbc7
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
dist/
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log
|
||||||
BIN
.main.js.swp
Normal file
BIN
.main.js.swp
Normal file
Binary file not shown.
118
css/style.css
Normal file
118
css/style.css
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
#report dl {
|
||||||
|
size: 0px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
#report dl dd {
|
||||||
|
max-height: 0px;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
left: inherit;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
label span::after {
|
||||||
|
content: "\1f250";
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #da4453;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
background: #25262d;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
.menu h2 {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: lighter;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.menu ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.menu ul li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.menu ul li:first-child {
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #555;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.menu ul li a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: lighter;
|
||||||
|
padding: 5px 20px;
|
||||||
|
}
|
||||||
|
.menu ul li a.active {
|
||||||
|
background: #1e2025;
|
||||||
|
}
|
||||||
|
.menu ul li a.active::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 5px;
|
||||||
|
background: #5c9df5;
|
||||||
|
}
|
||||||
|
.content .container {
|
||||||
|
width: initial;
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
.content .container h1 {
|
||||||
|
font-weight: normal;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.content .container h4 {
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
.content .container p {
|
||||||
|
font-weight: lighter;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
input[type="checkbox"]:checked ~ .menu {
|
||||||
|
left: -100% !important;
|
||||||
|
}
|
||||||
|
input[type="checkbox"]:checked ~ label span {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
label span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar rect {
|
||||||
|
fill: #4682b4;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
.bar text {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
.axis path,
|
||||||
|
.axis line {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 0rem;
|
||||||
|
}
|
||||||
|
.accordion .accordion-navigation > a {
|
||||||
|
padding: 0rem;
|
||||||
|
}
|
||||||
|
.accordion .accordion dd > a a {
|
||||||
|
padding: 0rem;
|
||||||
|
}
|
||||||
195
index.html
Normal file
195
index.html
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Dashboard 3</title>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
|
||||||
|
<link rel='stylesheet prefetch' href='http://cdn.foundation5.zurb.com/foundation.css'>
|
||||||
|
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/css/dataTables.foundation.css'>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<div class="parallax">
|
||||||
|
<input id="menu-toggle" type="checkbox" class="hidden"/>
|
||||||
|
<label for="menu-toggle"><span class="glyphicon"></span></label>
|
||||||
|
<div class="menu">
|
||||||
|
<h2>Dashboard</h2>
|
||||||
|
<ul>
|
||||||
|
<li>FILTERS</li>
|
||||||
|
<li><a href="javascript:void(0)" id="a_report" class="active">Reports</a></li>
|
||||||
|
<li><a href="javascript:void(0)" id="a_doc">Documents</a></li>
|
||||||
|
<li><a href="javascript:void(0)" id="a_review">Reviews</a></li>
|
||||||
|
<li><a href="javascript:void(0)" id="a_msg">Messages</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<h1>Consectetur adipiscing</h1>
|
||||||
|
<hr/>
|
||||||
|
</div>
|
||||||
|
<!-- /.col-md-12-->
|
||||||
|
<div id="report">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<dl data-tab="" class="tabs">
|
||||||
|
<dd role="presentation" class="tab-title active"><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" aria-controls="panel2-1">Tab 1</a></dd>
|
||||||
|
<dd role="presentation" class="tab-title"><a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" aria-controls="panel2-2">Tab 2</a></dd>
|
||||||
|
<dd role="presentation" class="tab-title"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" aria-controls="panel2-4">Tab 4</a></dd>
|
||||||
|
</dl>
|
||||||
|
<div class="tabs-content">
|
||||||
|
<div id="panel2-1" class="content active">
|
||||||
|
<ul data-accordion="" class="accordion">
|
||||||
|
<li class="accordion-navigation"><a href="#panel_1a">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p id="hist1" class="chart"></p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p id="line1" class="chart"></p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p align="center">8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>545</p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>545</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></a>
|
||||||
|
<div id="panel_1a" class="content active">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-1 columns">
|
||||||
|
<p> </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-10 columns">
|
||||||
|
<p>
|
||||||
|
<table id="tttable" width="100%" class="display"></table>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="accordion-navigation"><a href="#panel_2a">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p id="hist2" class="chart"></p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p id="line2" class="chart"></p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p align="center">8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>545</p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>545</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></a>
|
||||||
|
<div id="panel_2a" class="content">Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
||||||
|
</li>
|
||||||
|
<li class="accordion-navigation"><a href="#panel_3a">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p id="hist3" class="chart"></p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p id="line3" class="chart"></p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<p align="center">8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>545</p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>8888 </p>
|
||||||
|
</div>
|
||||||
|
<div class="small-6 columns">
|
||||||
|
<p>545</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></a>
|
||||||
|
<div id="panel_3a" class="content">Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="panel2-2" class="content">
|
||||||
|
<ul data-accordion="" class="accordion">
|
||||||
|
<li class="accordion-navigation"><a href="#panel1a">Accordion 1</a>
|
||||||
|
<div id="panel1a" class="content active">Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
||||||
|
</li>
|
||||||
|
<li class="accordion-navigation"><a href="#panel2a">Accordion 2</a>
|
||||||
|
<div id="panel2a" class="content">Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
||||||
|
</li>
|
||||||
|
<li class="accordion-navigation"><a href="#panel3a">Accordion 3</a>
|
||||||
|
<div id="panel3a" class="content">Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="panel2-3" class="content">
|
||||||
|
<p>Third panel content goes here...</p>
|
||||||
|
</div>
|
||||||
|
<div id="panel2-4" class="content">
|
||||||
|
<p>Fourth panel content goes here...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /.container-->
|
||||||
|
</div>
|
||||||
|
<!-- /.content-->
|
||||||
|
</div>
|
||||||
|
<!-- /.parallax-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||||
|
<script src='http://cdn.foundation5.zurb.com/foundation.js'></script>
|
||||||
|
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js'></script>
|
||||||
|
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
index.jade
Normal file
18
index.jade
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
doctype html
|
||||||
|
html(lang="en")
|
||||||
|
head
|
||||||
|
title= pageTitle
|
||||||
|
link(rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
|
||||||
|
link(rel='stylesheet prefetch' href='http://cdn.foundation5.zurb.com/foundation.css')
|
||||||
|
link(rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/css/dataTables.foundation.css')
|
||||||
|
link(rel="stylesheet" href="css/style.css")
|
||||||
|
|
||||||
|
|
||||||
|
script(src='http://code.jquery.com/jquery-1.11.3.min.js' onload="window.$ = window.jQuery = module.exports;")
|
||||||
|
script(src='http://cdn.foundation5.zurb.com/foundation.js')
|
||||||
|
script(src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js')
|
||||||
|
script(src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js')
|
||||||
|
script(src='js/index.js')
|
||||||
|
|
||||||
|
include ./page.jade
|
||||||
|
|
||||||
247
js/index.js
Normal file
247
js/index.js
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
var dataSet = [
|
||||||
|
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
|
||||||
|
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
|
||||||
|
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
|
||||||
|
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
|
||||||
|
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
|
||||||
|
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
|
||||||
|
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
|
||||||
|
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
|
||||||
|
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
|
||||||
|
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
|
||||||
|
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
|
||||||
|
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
|
||||||
|
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
|
||||||
|
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
|
||||||
|
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
|
||||||
|
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
|
||||||
|
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
|
||||||
|
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
|
||||||
|
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
|
||||||
|
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
|
||||||
|
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
|
||||||
|
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
|
||||||
|
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
|
||||||
|
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
|
||||||
|
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
|
||||||
|
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
|
||||||
|
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
|
||||||
|
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
|
||||||
|
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
|
||||||
|
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
|
||||||
|
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
|
||||||
|
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
|
||||||
|
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
|
||||||
|
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
|
||||||
|
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
|
||||||
|
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
//$(document).foundation();
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('#a_report').click( function() {
|
||||||
|
$(".menu a").removeClass('active');
|
||||||
|
$('#a_report').addClass("active");
|
||||||
|
$(".content").removeClass('active');
|
||||||
|
$("#panel2-1").addClass("active");
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#a_doc').click( function() {
|
||||||
|
$(".menu a").removeClass('active');
|
||||||
|
$('#a_doc').addClass("active");
|
||||||
|
$(".content").removeClass('active');
|
||||||
|
$("#panel2-2").addClass("active");
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#a_review').click( function() {
|
||||||
|
$(".menu a").removeClass('active');
|
||||||
|
$('#a_review').addClass("active");
|
||||||
|
$(".content").removeClass('active');
|
||||||
|
$("#panel2-3").addClass("active");
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
$('#a_msg').click( function() {
|
||||||
|
$(".menu a").removeClass('active');
|
||||||
|
$('#a_msg').addClass("active");
|
||||||
|
$(".content").removeClass('active');
|
||||||
|
$("#panel2-4").addClass("active");
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
var line_plot = function (elt, data){
|
||||||
|
|
||||||
|
var height = $(elt).parent().height()
|
||||||
|
var width = $(elt).parent().width()
|
||||||
|
var margin = {top: 1, right: 3,
|
||||||
|
bottom: 3, left: 3},
|
||||||
|
width = width - margin.left - margin.right,
|
||||||
|
height = 50 - margin.top - margin.bottom;
|
||||||
|
|
||||||
|
|
||||||
|
var parseDate = d3.time.format("%d-%b-%y").parse;
|
||||||
|
|
||||||
|
var x = d3.time.scale()
|
||||||
|
.range([0, width]);
|
||||||
|
|
||||||
|
var y = d3.scale.linear()
|
||||||
|
.range([height, 0]);
|
||||||
|
|
||||||
|
var xAxis = d3.svg.axis()
|
||||||
|
.scale(x)
|
||||||
|
.orient("bottom");
|
||||||
|
|
||||||
|
var yAxis = d3.svg.axis()
|
||||||
|
.scale(y)
|
||||||
|
.orient("left");
|
||||||
|
|
||||||
|
var line = d3.svg.line()
|
||||||
|
.x(function(d) { return x(d.date); })
|
||||||
|
.y(function(d) { return y(d.close); });
|
||||||
|
|
||||||
|
var svg = d3.select(elt).append("svg")
|
||||||
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.attr("viewBox","0 0 "+ width + " "+ height)
|
||||||
|
.attr("preserveAspectRatio","xMidYMid")
|
||||||
|
.append("g")
|
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//data.forEach(function(d) {
|
||||||
|
// d.date = d.date;
|
||||||
|
// d.close = +d.close;
|
||||||
|
|
||||||
|
x.domain(d3.extent(data, function(d) { return d.date; }));
|
||||||
|
y.domain(d3.extent(data, function(d) { return d.close; }));
|
||||||
|
|
||||||
|
|
||||||
|
svg.append("path")
|
||||||
|
.datum(data)
|
||||||
|
.attr("class", "line")
|
||||||
|
.attr("d", line);
|
||||||
|
// });
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var make_hist = function(elt, values ){
|
||||||
|
|
||||||
|
|
||||||
|
// A formatter for counts.
|
||||||
|
var formatCount = d3.format(",.0f");
|
||||||
|
|
||||||
|
var height = $(elt).parent().height()
|
||||||
|
var width = $(elt).parent().width()
|
||||||
|
var margin = {top: 1, right: 3, bottom: 3, left: 3},
|
||||||
|
width = width - margin.left - margin.right,
|
||||||
|
height = 50 - margin.top - margin.bottom;
|
||||||
|
|
||||||
|
var x = d3.scale.linear()
|
||||||
|
.domain([0, 1])
|
||||||
|
.range([0, width]);
|
||||||
|
|
||||||
|
// Generate a histogram using twenty uniformly-spaced bins.
|
||||||
|
var data = d3.layout.histogram()
|
||||||
|
.bins(x.ticks(20))
|
||||||
|
(values);
|
||||||
|
|
||||||
|
var y = d3.scale.linear()
|
||||||
|
.domain([0, d3.max(data, function(d) { return d.y; })])
|
||||||
|
.range([height, 0]);
|
||||||
|
|
||||||
|
var xAxis = d3.svg.axis()
|
||||||
|
.scale(x)
|
||||||
|
.orient("bottom");
|
||||||
|
|
||||||
|
var svg = d3.select(elt).append("svg")
|
||||||
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.attr("viewBox","0 0 "+ width + " "+ height)
|
||||||
|
.attr("preserveAspectRatio","xMidYMid")
|
||||||
|
.append("g")
|
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
var bar = svg.selectAll(".bar")
|
||||||
|
.data(data)
|
||||||
|
.enter().append("g")
|
||||||
|
.attr("class", "bar")
|
||||||
|
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
|
||||||
|
|
||||||
|
bar.append("rect")
|
||||||
|
.attr("x", 1)
|
||||||
|
.attr("width", x(data[0].dx) - 1)
|
||||||
|
.attr("height", function(d) { return height - y(d.y); });
|
||||||
|
|
||||||
|
}
|
||||||
|
//make_hist('body')
|
||||||
|
//document.make_hist = make_hist
|
||||||
|
var generate_hist = function(elt){
|
||||||
|
var values = d3.range(1000).map(d3.random.bates(10));
|
||||||
|
|
||||||
|
make_hist(elt, values)
|
||||||
|
}
|
||||||
|
var generate_line= function(elt){
|
||||||
|
var end_ts = new Date().getTime();
|
||||||
|
var range = 60000;
|
||||||
|
|
||||||
|
var start_ts = end_ts - range;
|
||||||
|
var n = 30,
|
||||||
|
random = d3.random.normal(0, .2),
|
||||||
|
data = d3.range(n).map(function(i) {
|
||||||
|
return { date:new Date(end_ts - (n*1000) + i*1000), close:random() };
|
||||||
|
});
|
||||||
|
|
||||||
|
line_plot(elt, data)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var chart_update = function(elt){
|
||||||
|
var chart = $(elt);
|
||||||
|
console.log(chart.parent().width() )
|
||||||
|
chart.attr("width", chart.parent().width())
|
||||||
|
|
||||||
|
}
|
||||||
|
$(window).on("resize", function() {
|
||||||
|
console.log("resize")
|
||||||
|
chart_update("#chart1")
|
||||||
|
chart_update("#chart2")
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(document).foundation();
|
||||||
|
|
||||||
|
var hists = $('[id*=hist]')//.forEach(item, fucntio)
|
||||||
|
|
||||||
|
$.each(hists, function(e,v){
|
||||||
|
|
||||||
|
generate_hist("#"+v.id)
|
||||||
|
})
|
||||||
|
|
||||||
|
var lines = $('[id*=line]')
|
||||||
|
|
||||||
|
$.each(lines, function(e,v){
|
||||||
|
generate_line("#"+v.id)
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#tttable').DataTable( {
|
||||||
|
data: dataSet,
|
||||||
|
searching: false,
|
||||||
|
ordering: false,
|
||||||
|
paging: false,
|
||||||
|
columns: [
|
||||||
|
{ title: "Name" },
|
||||||
|
{ title: "Position" },
|
||||||
|
{ title: "Office" },
|
||||||
|
{ title: "Extn." },
|
||||||
|
{ title: "Start date" },
|
||||||
|
{ title: "Salary" }
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
41
main.js
Normal file
41
main.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
var app = require('app'); // Module to control application life.
|
||||||
|
var locals = {/* ...*/};
|
||||||
|
var j = require('electron-jade')({pretty: true}, locals);
|
||||||
|
var BrowserWindow = require('browser-window'); // Module to create native browser window.
|
||||||
|
|
||||||
|
// Report crashes to our server.
|
||||||
|
require('crash-reporter').start();
|
||||||
|
|
||||||
|
// Keep a global reference of the window object, if you don't, the window will
|
||||||
|
// be closed automatically when the JavaScript object is garbage collected.
|
||||||
|
var mainWindow = null;
|
||||||
|
|
||||||
|
// Quit when all windows are closed.
|
||||||
|
app.on('window-all-closed', function() {
|
||||||
|
// On OS X it is common for applications and their menu bar
|
||||||
|
// to stay active until the user quits explicitly with Cmd + Q
|
||||||
|
if (process.platform != 'darwin') {
|
||||||
|
app.quit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// This method will be called when Electron has finished
|
||||||
|
// initialization and is ready to create browser windows.
|
||||||
|
app.on('ready', function() {
|
||||||
|
// Create the browser window.
|
||||||
|
mainWindow = new BrowserWindow({width: 1024, height: 768});
|
||||||
|
|
||||||
|
// and load the index.html of the app.
|
||||||
|
mainWindow.loadUrl('file://' + __dirname + '/index.jade');
|
||||||
|
|
||||||
|
// Open the DevTools.
|
||||||
|
//mainWindow.openDevTools();
|
||||||
|
|
||||||
|
// Emitted when the window is closed.
|
||||||
|
mainWindow.on('closed', function() {
|
||||||
|
// Dereference the window object, usually you would store windows
|
||||||
|
// in an array if your app supports multi windows, this is the time
|
||||||
|
// when you should delete the corresponding element.
|
||||||
|
mainWindow = null;
|
||||||
|
});
|
||||||
|
});
|
||||||
10
package.json
Normal file
10
package.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "your-app",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"main": "main.js",
|
||||||
|
"dependencies": {
|
||||||
|
"electron-jade": "^1.2.2",
|
||||||
|
"jade": "^1.11.0",
|
||||||
|
"jquery": "^2.1.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
115
page.jade
Normal file
115
page.jade
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
mixin summary_line(id)
|
||||||
|
.row
|
||||||
|
.small-3.columns
|
||||||
|
p(id='hist'+id class="chart")
|
||||||
|
.small-3.columns
|
||||||
|
p(id='line'+id class="chart")
|
||||||
|
.small-3.columns
|
||||||
|
p(align="center") 8888
|
||||||
|
.small-3.columns
|
||||||
|
.small-6.columns
|
||||||
|
p 8888
|
||||||
|
.small-6.columns
|
||||||
|
p 545
|
||||||
|
.small-6.columns
|
||||||
|
p 8888
|
||||||
|
.small-6.columns
|
||||||
|
p 545
|
||||||
|
|
||||||
|
|
||||||
|
mixin summary
|
||||||
|
ul.accordion(data-accordion='')
|
||||||
|
li.accordion-navigation
|
||||||
|
a(href='#panel1a') Accordion 1
|
||||||
|
#panel1a.content.active
|
||||||
|
| Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
li.accordion-navigation
|
||||||
|
a(href='#panel2a') Accordion 2
|
||||||
|
#panel2a.content
|
||||||
|
| Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
li.accordion-navigation
|
||||||
|
a(href='#panel3a') Accordion 3
|
||||||
|
#panel3a.content
|
||||||
|
| Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
|
||||||
|
mixin dopage
|
||||||
|
|
||||||
|
ul.accordion(data-accordion='')
|
||||||
|
li.accordion-navigation
|
||||||
|
a(href='#panel_1a' )
|
||||||
|
|
||||||
|
+summary_line(1)
|
||||||
|
|
||||||
|
#panel_1a.content.active
|
||||||
|
.row
|
||||||
|
.small-1.columns
|
||||||
|
p
|
||||||
|
|
||||||
|
.small-10.columns
|
||||||
|
p
|
||||||
|
table(id="tttable" class="display" width="100%")
|
||||||
|
li.accordion-navigation
|
||||||
|
a(href='#panel_2a')
|
||||||
|
+summary_line(2)
|
||||||
|
#panel_2a.content
|
||||||
|
| Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
li.accordion-navigation
|
||||||
|
a(href='#panel_3a')
|
||||||
|
+summary_line(3)
|
||||||
|
#panel_3a.content
|
||||||
|
| Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body
|
||||||
|
.parallax
|
||||||
|
input#menu-toggle.hidden(type='checkbox')
|
||||||
|
label(for='menu-toggle')
|
||||||
|
span.glyphicon
|
||||||
|
.menu
|
||||||
|
h2 Dashboard
|
||||||
|
ul
|
||||||
|
li FILTERS
|
||||||
|
li
|
||||||
|
a.active(href='javascript:void(0)' id="a_report") Reports
|
||||||
|
li
|
||||||
|
a(href='javascript:void(0)' id="a_doc") Documents
|
||||||
|
li
|
||||||
|
a(href='javascript:void(0)' id="a_review") Reviews
|
||||||
|
li
|
||||||
|
a(href='javascript:void(0)' id="a_msg") Messages
|
||||||
|
|
||||||
|
.content
|
||||||
|
.container
|
||||||
|
.row
|
||||||
|
.col-md-12
|
||||||
|
h1 Consectetur adipiscing
|
||||||
|
hr
|
||||||
|
// /.col-md-12
|
||||||
|
#report
|
||||||
|
.col-sm-12
|
||||||
|
dl.tabs(data-tab='')
|
||||||
|
dd.tab-title.active(role='presentation')
|
||||||
|
a(href='#panel2-1', role='tab', tabindex='0', aria-selected='true', aria-controls='panel2-1') Tab 1
|
||||||
|
dd.tab-title(role='presentation')
|
||||||
|
a(href='#panel2-2', role='tab', tabindex='0', aria-selected='false', aria-controls='panel2-2') Tab 2
|
||||||
|
dd.tab-title(role='presentation')
|
||||||
|
a(href='#panel2-3', role='tab', tabindex='0', aria-selected='false', aria-controls='panel2-4') Tab 4
|
||||||
|
.tabs-content
|
||||||
|
|
||||||
|
#panel2-1.content.active
|
||||||
|
+dopage
|
||||||
|
#panel2-2.content
|
||||||
|
+summary
|
||||||
|
#panel2-3.content
|
||||||
|
p Third panel content goes here...
|
||||||
|
#panel2-4.content
|
||||||
|
p Fourth panel content goes here...
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// /.container
|
||||||
|
// /.content
|
||||||
|
// /.parallax
|
||||||
Loading…
Reference in New Issue
Block a user