commit 89d2f1bbc7aa42f93582bdbcf199ad64c21d9f35 Author: pg Date: Sat Oct 10 01:36:35 2015 +0200 Initial import diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a6ae2b5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +dist/ +node_modules/ +npm-debug.log diff --git a/.main.js.swp b/.main.js.swp new file mode 100644 index 0000000..3238653 Binary files /dev/null and b/.main.js.swp differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..1a01983 --- /dev/null +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..42e0323 --- /dev/null +++ b/index.html @@ -0,0 +1,195 @@ + + + + + Dashboard 3 + + + + + + + + + + + + + + + + + + + +
+ + +
+

Dashboard

+ +
+
+
+
+
+

Consectetur adipiscing

+
+
+ +
+
+
+ + + +
+
+
+ +
+
+
    +
  • Accordion 1 +
    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.
    +
    • +
  • Accordion 2 +
    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.
    +
    • +
  • Accordion 3 +
    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.
    +
    • +
+
+
+

Third panel content goes here...

+
+
+

Fourth panel content goes here...

+
+
+
+
+
+
+ +
+ +
+ + + + + + + + + + + + + + + diff --git a/index.jade b/index.jade new file mode 100644 index 0000000..ac41b71 --- /dev/null +++ b/index.jade @@ -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 + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..9397c12 --- /dev/null +++ b/js/index.js @@ -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" } + ] + } ); + + +}) diff --git a/main.js b/main.js new file mode 100644 index 0000000..4089fc3 --- /dev/null +++ b/main.js @@ -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; + }); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..a7354f0 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/page.jade b/page.jade new file mode 100644 index 0000000..e4d3cff --- /dev/null +++ b/page.jade @@ -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