templating sorted out in flask

FlaskTest/app.py

@@ -3,8 +3,49 @@ app = Flask (__name__)
 
 @app.route("/dashboard")
 def dashboard():
-    return render_template("dashboard.html")
+
+	data= {
+		"main_repo_name" : "Main Project Name",
+		"main_repo_summary" : "Summary: This project is about making Zebra really fast and efficient",
+		"main_repo_description" : "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+		"heatmap" : {
+			"divID" : "heatmap",
+			"title" : "Commits by Hour of Week - dummy data",
+			"data_path1" : "../static/data/data_dummy.tsv",
+			"data_path2" : "../static/data/data2_dummy.tsv",
+			"summary" : "This data shows cool stuff",
+			"description" : "As you van see, this data focuses on business hours",
+			"timestamp" : "System last updated at 11:34am"
+		},
+		"barchart" : {
+			"divID" : "day_of_week",
+			"title" : "# Commits by day - real data",
+			"data_path" : "../static/data/day_of_week_copy.tsv",
+			"summary" : "Bar Chart",
+			"description" : "What week is this from? 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+			"timestamp" : "System last updated at 11:34am"
+		},
+		"linegraph1" : {
+			"divID" : "lineChart1",
+			"title" : "Commits per Author - real data",
+			"data_path" : "../static/data/commits_by_author_copy.tsv",
+			"summary" : "Multi Series Line Chart",
+			"description" : "Theres a few authors on this project but 1 stands out",
+			"timestamp" : "System last updated at 11:34am"
+		},
+		"linegraph2" : {
+			"divID" : "lineChart2",
+			"title" : "Commits per Author - real data",
+			"data_path" : "../static/data/lines_of_code_by_author_copy.tsv",
+			"summary" : "Multi Series Line Chart",
+			"description" : "Theres a few authors on this project but 1 stands out",
+			"timestamp" : "System last updated at 11:34am"
+		}
+	}
+	return render_template("dashboard.html", data=data )
+
+
 
 if __name__ == "__main__":
-    app.run()
+	app.run()
 

FlaskTest/static/js/script.js

@@ -4,156 +4,161 @@ $("#leftside-navigation .sub-menu > a").click(function(e) {
   e.stopPropagation()
 });
 
-
-// heatmap SVG
-const margin = { top: 50, right: 0, bottom: 100, left: 30 },
-  width =520 - margin.left - margin.right,
-  height = 320 - margin.top - margin.bottom,
-  gridSize = Math.floor(width / 24),
-  legendElementWidth = gridSize*2,
-  buckets = 9,
-
-  // blue colors
-  // colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
-  
-  // orange colors
-  // colors = ['#fff5eb','#fee6ce','#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#a63603','#7f2704'],
-
-  // yellow colors
-  colors =["#ECE622","#D5CF22","#BEB922","#A7A222","#908C22","#797522","#625F22","#625F22","#4B4822","#343222"],
-
-  days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
-  times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];
-  datasets = ["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"];
-
-const svg = d3.select("#chart").append("svg")
-  .attr("width", width + margin.left + margin.right)
-  .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-
-const dayLabels = svg.selectAll(".dayLabel")
-  .data(days)
-  .enter().append("text")
-    .text(function (d) { return d; })
-    .attr("x", 0)
-    .attr("y", (d, i) => i * gridSize)
-    .style("text-anchor", "end")
-    .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
-    .attr("class", (d, i) => ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"));
-
-const timeLabels = svg.selectAll(".timeLabel")
-  .data(times)
-  .enter().append("text") 
-    .text((d) => d)
-    .attr("x", (d, i) => i * gridSize)
-    .attr("y", 0)
-    .style("text-anchor", "middle")
-    .attr("transform", "translate(" + gridSize / 2 + ", -6)")
-    .attr("class", (d, i) => ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"));
-
-const type = (d) => {
-  return {
-    day: +d.day,
-    hour: +d.hour,
-    value: +d.value
+// generateHeatMap(["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"], "#chart");
+
+function generateHeatMap(datasets, divID){
+  // heatmap SVG
+  const margin = { top: 50, right: 0, bottom: 100, left: 30 },
+    width =520 - margin.left - margin.right,
+    height = 320 - margin.top - margin.bottom,
+    gridSize = Math.floor(width / 24),
+    legendElementWidth = gridSize*2,
+    buckets = 9,
+
+    // blue colors
+    // colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
+    
+    // orange colors
+    // colors = ['#fff5eb','#fee6ce','#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#a63603','#7f2704'],
+
+    // yellow colors
+    colors =["#ECE622","#D5CF22","#BEB922","#A7A222","#908C22","#797522","#625F22","#625F22","#4B4822","#343222"],
+
+    days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+    times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];
+    
+    // datasets = ["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"];
+
+  const svg = d3.select(divID).append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+  const dayLabels = svg.selectAll(".dayLabel")
+    .data(days)
+    .enter().append("text")
+      .text(function (d) { return d; })
+      .attr("x", 0)
+      .attr("y", (d, i) => i * gridSize)
+      .style("text-anchor", "end")
+      .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
+      .attr("class", (d, i) => ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"));
+
+  const timeLabels = svg.selectAll(".timeLabel")
+    .data(times)
+    .enter().append("text") 
+      .text((d) => d)
+      .attr("x", (d, i) => i * gridSize)
+      .attr("y", 0)
+      .style("text-anchor", "middle")
+      .attr("transform", "translate(" + gridSize / 2 + ", -6)")
+      .attr("class", (d, i) => ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"));
+
+  const type = (d) => {
+    return {
+      day: +d.day,
+      hour: +d.hour,
+      value: +d.value
+    };
   };
-};
-
-const heatmapChart = function(tsvFile) {
-d3.tsv(tsvFile, type, (error, data) => {
-
-  var div = d3.select("body").append("div")
-    .attr("class", "tooltip")
-    .style("opacity", 0);
-
-  const colorScale = d3.scaleQuantile()
-    .domain([0, buckets - 1, d3.max(data, (d) => d.value)])
-    .range(colors);
-
-  const cards = svg.selectAll(".hour")
-    .data(data, (d) => d.day+':'+d.hour);
-
-  cards.append("title");
-
-  cards.enter().append("rect")
-  .attr("x", (d) => (d.hour - 1) * gridSize)
-  .attr("y", (d) => (d.day - 1) * gridSize)
-  .attr("rx", 4)
-  .attr("ry", 4)  
-  .attr("class", "hour bordered")
-  .attr("width", gridSize)
-  .attr("height", gridSize)
-  .style("fill", colors[0])
-  .on("mouseover", function(d) {
-    div.transition()
-      .duration(200)
-      .style("opacity", .9);
-    div.html("Day: " +days[d.day-1]+ "<br>Hour: " +times[d.hour-1]+ "<br>Commits: " +d.value+ "")
-      .style("left", (d3.event.pageX + 20) + "px")
-      .style("top", (d3.event.pageY - 20) + "px");
-    })
-  .on("mouseout", function(d) {
-    div.transition()
-      .duration(500)
-      .style("opacity", 0);
-    })
-  .merge(cards)
-    .transition()
-    .duration(1000)
-    .style("fill", (d) => colorScale(d.value));
-
-  // cards.select("title").text((d) => d.value);  
 
-  cards.exit().remove();
+  const heatmapChart = function(tsvFile) {
+  d3.tsv(tsvFile, type, (error, data) => {
 
-  const legend = svg.selectAll(".legend")
-    .data([0].concat(colorScale.quantiles()), (d) => d);
-
-  const legend_g = legend.enter().append("g")
-    .attr("class", "legend");
-
-  legend_g.append("rect")
-    .attr("x", (d, i) => legendElementWidth * i)
-    .attr("y", height)
-    .attr("width", legendElementWidth)
-    .attr("height", gridSize / 2)
-    .style("fill", (d, i) => colors[i]);
+    var div = d3.select("body").append("div")
+      .attr("class", "tooltip")
+      .style("opacity", 0);
 
-  legend_g.append("text")
-    .attr("class", "mono")
-    .text((d) => "≥ " + Math.round(d))
-    .attr("x", (d, i) => legendElementWidth * i)
-    .attr("y", height + gridSize);
+    const colorScale = d3.scaleQuantile()
+      .domain([0, buckets - 1, d3.max(data, (d) => d.value)])
+      .range(colors);
+
+    const cards = svg.selectAll(".hour")
+      .data(data, (d) => d.day+':'+d.hour);
+
+    cards.append("title");
+
+    cards.enter().append("rect")
+    .attr("x", (d) => (d.hour - 1) * gridSize)
+    .attr("y", (d) => (d.day - 1) * gridSize)
+    .attr("rx", 4)
+    .attr("ry", 4)  
+    .attr("class", "hour bordered")
+    .attr("width", gridSize)
+    .attr("height", gridSize)
+    .style("fill", colors[0])
+    .on("mouseover", function(d) {
+      div.transition()
+        .duration(200)
+        .style("opacity", .9);
+      div.html("Day: " +days[d.day-1]+ "<br>Hour: " +times[d.hour-1]+ "<br>Commits: " +d.value+ "")
+        .style("left", (d3.event.pageX + 20) + "px")
+        .style("top", (d3.event.pageY - 20) + "px");
+      })
+    .on("mouseout", function(d) {
+      div.transition()
+        .duration(500)
+        .style("opacity", 0);
+      })
+    .merge(cards)
+      .transition()
+      .duration(1000)
+      .style("fill", (d) => colorScale(d.value));
+
+    // cards.select("title").text((d) => d.value);  
+
+    cards.exit().remove();
+
+    const legend = svg.selectAll(".legend")
+      .data([0].concat(colorScale.quantiles()), (d) => d);
+
+    const legend_g = legend.enter().append("g")
+      .attr("class", "legend");
+
+    legend_g.append("rect")
+      .attr("x", (d, i) => legendElementWidth * i)
+      .attr("y", height)
+      .attr("width", legendElementWidth)
+      .attr("height", gridSize / 2)
+      .style("fill", (d, i) => colors[i]);
+
+    legend_g.append("text")
+      .attr("class", "mono")
+      .text((d) => "≥ " + Math.round(d))
+      .attr("x", (d, i) => legendElementWidth * i)
+      .attr("y", height + gridSize);
+
+    legend.exit().remove();
+  });
+  };
 
-  legend.exit().remove();
-});
-};
+  // use first dataset by default
+  heatmapChart(datasets[0]);
 
-// use first dataset by default
-heatmapChart(datasets[0]);
+  // dataset buttons
+  const datasetpicker = d3.select("#dataset-picker")
+    .selectAll(".btn btn-primary")
+    .data(datasets);
 
-// dataset buttons
-const datasetpicker = d3.select("#dataset-picker")
-  .selectAll(".btn btn-primary")
-  .data(datasets);
+  // dataset picking button
+  datasetpicker.enter()
+    .append("input")
+    .attr("value", (d) => "Dataset " + d)
+    .attr("type", "button")
+    .attr("class", "btn-sm btn-primary")
+    .on("click", (d) => heatmapChart(d));
 
-// dataset picking button
-datasetpicker.enter()
-  .append("input")
-  .attr("value", (d) => "Dataset " + d)
-  .attr("type", "button")
-  .attr("class", "btn-sm btn-primary")
-  .on("click", (d) => heatmapChart(d));
 
+}
 
 
 
 
 
 
-generateBarChart("../static/data/day_of_week_copy.tsv", "#day_of_week");
+// generateBarChart("../static/data/day_of_week_copy.tsv", "#day_of_week");
 
 function generateBarChart (pathToTSV,divID){
   // Bar chart, see function 'main' for main execution wheel
@@ -173,6 +178,7 @@ function generateBarChart (pathToTSV,divID){
       var svg = d3.select(divID).append("svg")
       var axisLayer = svg.append("g").classed("axisLayer", true)
       var chartLayer = svg.append("g").classed("chartLayer", true)
+      var margin = {top:50, right:0, bottom:100,  left:30}
       
       var xScale = d3.scaleBand()
       var yScale = d3.scaleLinear()
@@ -189,7 +195,6 @@ function generateBarChart (pathToTSV,divID){
       
       function setSize() {
 
-          var margin = {top:50, right:0, bottom:100,  left:30}
           chartWidth = width - margin.left - margin.right,
           chartHeight = height - margin.top - margin.bottom,        
           
@@ -291,8 +296,12 @@ function generateBarChart (pathToTSV,divID){
 
 } //end of generateBarChart
 
-generateLineChart("../static/data/commits_by_author_copy.tsv", "#lineChart");
-generateLineChart("../static/data/lines_of_code_by_author_copy.tsv", "#lineChart2");
+// generateLineChart("../static/data/commits_by_author_copy.tsv", "#lineChart");
+// generateLineChart("../static/data/lines_of_code_by_author_copy.tsv", "#lineChart2");
+
+
+
+
 
 function generateLineChart(pathToTSV, divID){
 

FlaskTest/templates/base.html

@@ -5,6 +5,16 @@
      <link rel="stylesheet" href="../static/css/style.css">
      
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+
+
+
+
+
+
+
+
+
+
   </head>
   <body class="bg-faded">
 
@@ -13,7 +23,7 @@
 	<nav class="navbar black sticky-top">
 	  <a class="navbar-brand nav_text" href="#" style="color: white">
 	    <img src="../static/img/zebra_white.png" alt="Zebra Logo" class="zebra_img" class="d-inline-block align-top">
-	    EMC Engineering Tools &amp; Process News Letter
+	    EMC Engineering Code Statistics
 	  </a>
 	</nav>
 
@@ -26,13 +36,13 @@
 	      </li>
 
 	      <li class="sub-menu">
-	        <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>Projects</span><i class="arrow fa fa-angle-right pull-right"></i></a>
+	        <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>Sub-Repos</span><i class="arrow fa fa-angle-right pull-right"></i></a>
 	        <ul>
-	          <li><a href="#">Shim's cool project</a>
+	          <li><a href="#">Mini Repo 1</a>
 	          </li>
-	          <li><a href="#">Tony's cool project</a>  
+	          <li><a href="#">Mini Repo 2</a>  
 	          </li>
-	          <li><a href="#">Greg's intern project</a>
+	          <li><a href="#">Mini Repo 3</a>
 	          </li>
 	        </ul>
 	      </li>
@@ -53,7 +63,6 @@
 
   	{% block content %}{% endblock %}
 
-
     <!-- bootstrap -->
     <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
@@ -67,5 +76,31 @@
     <script src="http://d3js.org/d3.v4.js"></script>
     <script src="../static/js/script.js" type="text/javascript"></script>
 
+    <script type="text/javascript">
+
+ //    generateHeatMap(["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"], "#chart");
+ //    generateBarChart("../static/data/day_of_week_copy.tsv", "#day_of_week");
+
+ //    generateLineChart("../static/data/commits_by_author_copy.tsv", "#lineChart");
+	// generateLineChart("../static/data/lines_of_code_by_author_copy.tsv", "#lineChart2");
+
+	generateHeatMap(['{{data.heatmap.data_path1}}', '{{data.heatmap.data_path2}}'], "#{{data.heatmap.divID}}");
+	
+    generateBarChart('{{data.barchart.data_path}}', "#{{data.barchart.divID}}");
+
+    generateLineChart('{{data.linegraph1.data_path}}', "#{{data.linegraph1.divID}}");
+	generateLineChart('{{data.linegraph2.data_path}}', "#{{data.linegraph2.divID}}");
+
+
+
+
+
+     </script>
+
+
+
+
+    
+
   </body>
 </html>

FlaskTest/templates/dashboard.html

@@ -2,35 +2,30 @@
 
 {% block content %}
 
+
 <!-- Main Dashboard -->
 <!-- Summary -->
 <div class="main_dash">
   <div class="container-fluid">
     <div class="card drop-shadow">
       <div class="card-block">
-        <h1> Cool Project Name Here </h1>
+        <h1> {{data.main_repo_name}} </h1>
         <br>
-        <h6> Summary: This project is about making Zebra really fast and efficient </h6>
+        <h6> {{data.main_repo_summary}} </h6>
         <br>
-       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. Duis aute irure dolor in reprehenderit in voluptate velit esse
-       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
+        <p> {{data.main_repo_description}}</p>
       </div>
     </div>
 
     <div class="row top_spacer">
 
-      <!-- Metric 1, half screen-->
+      <!-- Metric 1, half screen, heatmap-->
       <div class="col-md-6">
         <div class="card drop-shadow">
           <div class="card-block">
             <h4 class="card-title">Commits by Hour of Week-dummy data </h4>
             <div class="metric">
-              <div id="chart"></div>
+              <div id="{{data.heatmap.divID}}"></div>
               <div id="dataset-picker"></div>
             </div>
             <div class="details_spacer">
@@ -44,14 +39,14 @@
         </div>
       </div>
 
-      <!-- Metric 2, half screen-->
+      <!-- Metric 2, half screen, bar chart-->
       <div class="col-md-6">
         <div class="card drop-shadow">
           <div class="card-block">
             <h4 class="card-title"># Commits by day - real data </h4>
             <div class="metric">
 
-              <div id="day_of_week"></div>
+              <div id="{{data.barchart.divID}}"></div>
 
             </div>
             <div class="details_spacer">
@@ -72,7 +67,7 @@
 
     </div> 
 
-    <!-- Metric 3, full width -->
+    <!-- Metric 3, full width, line chart -->
     <div class="row top_spacer">
 
       <div class="col-md-12">
@@ -81,7 +76,7 @@
             <h4 class="card-title">Commits per Author - real data</h4>
             <div class="metric">
 
-              <div id ="lineChart"></div>
+              <div id ="{{data.linegraph1.divID}}"></div>
               
             </div>
             <div class="details_spacer">
@@ -97,7 +92,7 @@
 
     </div>
 
-    <!-- Another test metric -->
+    <!-- Another test metric, line chart -->
     <div class="row top_spacer">
 
       <div class="col-md-12">
@@ -106,7 +101,7 @@
             <h4 class="card-title">Cumulative Added Lines by Author - real data</h4>
             <div class="metric">
 
-              <div id ="lineChart2"></div>
+              <div id ="{{data.linegraph2.divID}}"></div>
 
             </div>
             <div class="details_spacer">