ソースを参照

routing setup

Schultz 8 年 前
コミット
b71c362fd7
共有5 個のファイルを変更した334 個の追加89 個の削除を含む
  1. 156
    40
      FlaskTest/app.py
  2. 3
    0
      FlaskTest/static/js/script.js
  3. 9
    41
      FlaskTest/templates/base.html
  4. 39
    8
      FlaskTest/templates/dashboard.html
  5. 127
    0
      FlaskTest/templates/main_dash.html

+ 156
- 40
FlaskTest/app.py ファイルの表示

@@ -1,49 +1,165 @@
1 1
 from flask import Flask, render_template
2 2
 app = Flask (__name__)
3 3
 
4
-@app.route("/dashboard")
5
-def dashboard():
6 4
 
7
-	data= {
8
-		"main_repo_name" : "Main Project Name",
9
-		"main_repo_summary" : "Summary: This project is about making Zebra really fast and efficient",
10
-		"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.",
11
-		"heatmap" : {
12
-			"divID" : "heatmap",
13
-			"title" : "Commits by Hour of Week - dummy data",
14
-			# NOTE these paths are relative to where the script.js file is
15
-			"data_path1" : "../static/data/data_dummy.tsv",
16
-			"data_path2" : "../static/data/data2_dummy.tsv",
17
-			"summary" : "This data shows cool stuff",
18
-			"description" : "As you van see, this data focuses on business hours",
19
-			"timestamp" : "System last updated at 11:34am"
20
-		},
21
-		"barchart" : {
22
-			"divID" : "day_of_week",
23
-			"title" : "# Commits by day - real data",
24
-			"data_path" : "../static/data/day_of_week_copy.tsv",
25
-			"summary" : "Bar Chart",
26
-			"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.",
27
-			"timestamp" : "System last updated at 11:34am"
28
-		},
29
-		"linegraph1" : {
30
-			"divID" : "lineChart1",
31
-			"title" : "Commits per Author - real data",
32
-			"data_path" : "../static/data/commits_by_author_copy.tsv",
33
-			"summary" : "Multi Series Line Chart",
34
-			"description" : "Theres a few authors on this project but 1 stands out",
35
-			"timestamp" : "System last updated at 11:34am"
5
+data= {
6
+	"main_repo" : 
7
+	[{
8
+		"name" : "Simul-scan",
9
+		"summary" : "Summary: This project is about making Zebra really fast and efficient",
10
+		"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.",
11
+		"visualizations" : 
12
+		[
13
+			{
14
+				"heatmap" : {
15
+					"divID" : "heatmap",
16
+					"title" : "Commits by Hour of Week - dummy data",
17
+					# NOTE these paths are relative to where the script.js file is
18
+					"data_path1" : "../static/data/data_dummy.tsv",
19
+					"data_path2" : "../static/data/data2_dummy.tsv",
20
+					"summary" : "This data shows cool stuff",
21
+					"description" : "As you van see, this data focuses on business hours",
22
+					"timestamp" : "System last updated at 11:34am"
23
+				},
24
+				"barchart" : {
25
+					"divID" : "day_of_week",
26
+					"title" : "# Commits by day - real data",
27
+					"data_path" : "../static/data/day_of_week_copy.tsv",
28
+					"summary" : "Bar Chart",
29
+					"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.",
30
+					"timestamp" : "System last updated at 11:34am"
31
+				},
32
+				"linegraph1" : {
33
+					"divID" : "lineChart1",
34
+					"title" : "Commits per Author - real data",
35
+					"data_path" : "../static/data/commits_by_author_copy.tsv",
36
+					"summary" : "Multi Series Line Chart",
37
+					"description" : "Theres a few authors on this project but 1 stands out",
38
+					"timestamp" : "System last updated at 11:34am"
39
+				},
40
+				"linegraph2" : {
41
+					"divID" : "lineChart2",
42
+					"title" : "Commits per Author - real data",
43
+					"data_path" : "../static/data/lines_of_code_by_author_copy.tsv",
44
+					"summary" : "Multi Series Line Chart",
45
+					"description" : "Theres a few authors on this project but 1 stands out",
46
+					"timestamp" : "System last updated at 11:34am"
47
+				}
48
+			}
49
+		]
50
+	}],
51
+
52
+	"sub_repos" : 
53
+	[
54
+		# each of these is going to be a sub-repo
55
+		{
56
+			"name" : "sub-1",
57
+			"summary" : "Test Summary1",
58
+			"description" : "Test Description 1",
59
+			"visualizations" : 
60
+			[
61
+				{
62
+					"heatmap" : {
63
+						"divID" : "heatmap",
64
+						"title" : "Commits by Hour of Week - dummy data",
65
+						# NOTE these paths are relative to where the script.js file is
66
+						"data_path1" : "../static/data/data_dummy.tsv",
67
+						"data_path2" : "../static/data/data2_dummy.tsv",
68
+						"summary" : "This data shows cool stuff",
69
+						"description" : "As you van see, this data focuses on business hours",
70
+						"timestamp" : "System last updated at 11:34am"
71
+					},
72
+					"barchart" : {
73
+						"divID" : "day_of_week",
74
+						"title" : "# Commits by day - real data",
75
+						"data_path" : "../static/data/day_of_week_copy.tsv",
76
+						"summary" : "Bar Chart",
77
+						"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.",
78
+						"timestamp" : "System last updated at 11:34am"
79
+					},
80
+					"linegraph1" : {
81
+						"divID" : "lineChart1",
82
+						"title" : "Commits per Author - real data",
83
+						"data_path" : "../static/data/commits_by_author_copy.tsv",
84
+						"summary" : "Multi Series Line Chart",
85
+						"description" : "Theres a few authors on this project but 1 stands out",
86
+						"timestamp" : "System last updated at 11:34am"
87
+					},
88
+					"linegraph2" : {
89
+						"divID" : "lineChart2",
90
+						"title" : "Commits per Author - real data",
91
+						"data_path" : "../static/data/lines_of_code_by_author_copy.tsv",
92
+						"summary" : "Multi Series Line Chart",
93
+						"description" : "Theres a few authors on this project but 1 stands out",
94
+						"timestamp" : "System last updated at 11:34am"
95
+					}
96
+				}
97
+			]
36 98
 		},
37
-		"linegraph2" : {
38
-			"divID" : "lineChart2",
39
-			"title" : "Commits per Author - real data",
40
-			"data_path" : "../static/data/lines_of_code_by_author_copy.tsv",
41
-			"summary" : "Multi Series Line Chart",
42
-			"description" : "Theres a few authors on this project but 1 stands out",
43
-			"timestamp" : "System last updated at 11:34am"
99
+		{
100
+			"name" : "sub-2",
101
+			"summary" : "Test Summary 2",
102
+			"description" : "Test Description 2",
103
+			"visualizations" : 
104
+			[
105
+				{
106
+					"heatmap" : {
107
+						"divID" : "heatmap",
108
+						"title" : "Commits by Hour of Week - dummy data",
109
+						# NOTE these paths are relative to where the script.js file is
110
+						"data_path1" : "../static/data/data_dummy.tsv",
111
+						"data_path2" : "../static/data/data2_dummy.tsv",
112
+						"summary" : "This data shows cool stuff",
113
+						"description" : "As you van see, this data focuses on business hours",
114
+						"timestamp" : "System last updated at 11:34am"
115
+					},
116
+					"barchart" : {
117
+						"divID" : "day_of_week",
118
+						"title" : "# Commits by day - real data",
119
+						"data_path" : "../static/data/day_of_week_copy.tsv",
120
+						"summary" : "Bar Chart",
121
+						"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.",
122
+						"timestamp" : "System last updated at 11:34am"
123
+					},
124
+					"linegraph1" : {
125
+						"divID" : "lineChart1",
126
+						"title" : "Commits per Author - real data",
127
+						"data_path" : "../static/data/commits_by_author_copy.tsv",
128
+						"summary" : "Multi Series Line Chart",
129
+						"description" : "Theres a few authors on this project but 1 stands out",
130
+						"timestamp" : "System last updated at 11:34am"
131
+					},
132
+					"linegraph2" : {
133
+						"divID" : "lineChart2",
134
+						"title" : "Commits per Author - real data",
135
+						"data_path" : "../static/data/lines_of_code_by_author_copy.tsv",
136
+						"summary" : "Multi Series Line Chart",
137
+						"description" : "Theres a few authors on this project but 1 stands out",
138
+						"timestamp" : "System last updated at 11:34am"
139
+					}
140
+				}
141
+			]
44 142
 		}
45
-	}
46
-	return render_template("dashboard.html", data=data )
143
+	]
144
+}
145
+
146
+@app.route('/dashboard/<repo>')	
147
+def sub_repo(repo):
148
+	global data
149
+	sub_repo_data= None
150
+	for sub_repo in data['sub_repos']:
151
+		print (sub_repo['name'], repo)
152
+		if sub_repo['name'] == repo:
153
+			#this should happen in one case, else this isnt a valid sub repo...
154
+			sub_repo_data=sub_repo
155
+	return render_template("dashboard.html", sub=sub_repo_data, nav=data)
156
+
157
+@app.route("/dashboard")
158
+def dashboard():
159
+	global data
160
+	main_repo=data['main_repo'][0]
161
+	return render_template("dashboard.html", sub=main_repo, nav=data )
162
+
47 163
 
48 164
 
49 165
 

+ 3
- 0
FlaskTest/static/js/script.js ファイルの表示

@@ -4,6 +4,9 @@ $("#leftside-navigation .sub-menu > a").click(function(e) {
4 4
   e.stopPropagation()
5 5
 });
6 6
 
7
+// cool load in the beginning
8
+$("#leftside-navigation .sub-menu > a").trigger("click");
9
+
7 10
 // generateHeatMap(["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"], "#chart");
8 11
 
9 12
 function generateHeatMap(datasets, divID){

+ 9
- 41
FlaskTest/templates/base.html ファイルの表示

@@ -5,6 +5,7 @@
5 5
      <link rel="stylesheet" href="../static/css/style.css">
6 6
      
7 7
      <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">
8
+     <title> {{sub.name}} - Dashboard </title>
8 9
 
9 10
   </head>
10 11
   <body class="bg-faded">
@@ -23,28 +24,27 @@
23 24
 	  <div id="leftside-navigation" class="nano">
24 25
 	    <ul class="nano-content">
25 26
 	      <li class="sub-menu">
26
-	        <a href="#"><i class="fa fa-home"></i><span>Home</span><i class="arrow fa"></i></a>
27
+	        <a href="{{url_for('dashboard')}}"><i class="fa fa-home"></i><span>{{nav.main_repo[0].name}}</span><i class="arrow fa"></i></a>
27 28
 	      </li>
28 29
 
29 30
 	      <li class="sub-menu">
30 31
 	        <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>
31 32
 	        <ul>
32
-	          <li><a href="#">Mini Repo 1</a>
33
-	          </li>
34
-	          <li><a href="#">Mini Repo 2</a>  
35
-	          </li>
36
-	          <li><a href="#">Mini Repo 3</a>
37
-	          </li>
33
+	        <!-- drop drown items are name of sub directories -->
34
+	        {% for sub_repo in nav.sub_repos %}
35
+		        <li> <a href ="{{url_for('dashboard')}}/{{sub_repo.name}}"> {{sub_repo.name}} </a></li>
36
+	        {% endfor %}
37
+
38 38
 	        </ul>
39 39
 	      </li>
40 40
 
41
-	      <li class="sub-menu">
41
+	    <!--   <li class="sub-menu">
42 42
 	        <a href="#"><i class="fa fa-terminal"></i><span>Lines</span><i class="arrow fa"></i></a>
43 43
 	      </li>
44 44
 
45 45
 	      <li class="sub-menu">
46 46
 	        <a href="#"><i class="fa fa-user"></i><span>Authors</span><i class="arrow fa "></i></a>
47
-	      </li>
47
+	      </li> -->
48 48
 
49 49
 	    </ul>
50 50
 
@@ -54,38 +54,6 @@
54 54
 
55 55
   	{% block content %}{% endblock %}
56 56
 
57
-    <!-- bootstrap -->
58
-    <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>
59
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
60
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
61
-
62
-    <!-- for nav bar accordion -->
63
-    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
64
-    <script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
65
-
66
-    <!-- for visualizations -->
67
-    <script src="http://d3js.org/d3.v4.js"></script>
68
-    <script src="../static/js/script.js" type="text/javascript"></script>
69
-
70
-    <script type="text/javascript">
71
-
72
- //    generateHeatMap(["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"], "#chart");
73
- //    generateBarChart("../static/data/day_of_week_copy.tsv", "#day_of_week");
74
-
75
- //    generateLineChart("../static/data/commits_by_author_copy.tsv", "#lineChart");
76
-	// generateLineChart("../static/data/lines_of_code_by_author_copy.tsv", "#lineChart2");
77
-
78
-		generateHeatMap(['{{data.heatmap.data_path1}}', '{{data.heatmap.data_path2}}'], "#{{data.heatmap.divID}}");
79
-
80
-	    generateBarChart('{{data.barchart.data_path}}', "#{{data.barchart.divID}}");
81
-
82
-	    generateLineChart('{{data.linegraph1.data_path}}', "#{{data.linegraph1.divID}}");
83
-		generateLineChart('{{data.linegraph2.data_path}}', "#{{data.linegraph2.divID}}");
84
-
85
-    </script>
86
-
87
-
88
-
89 57
 
90 58
     
91 59
 

+ 39
- 8
FlaskTest/templates/dashboard.html ファイルの表示

@@ -9,11 +9,11 @@
9 9
   <div class="container-fluid">
10 10
     <div class="card drop-shadow">
11 11
       <div class="card-block">
12
-        <h1> {{data.main_repo_name}} </h1>
12
+        <h1> {{sub.name}} </h1>
13 13
         <br>
14
-        <h6> {{data.main_repo_summary}} </h6>
14
+        <h6> {{sub.summary}} </h6>
15 15
         <br>
16
-        <p> {{data.main_repo_description}}</p>
16
+        <p> {{sub.description}}</p>
17 17
       </div>
18 18
     </div>
19 19
 
@@ -25,7 +25,7 @@
25 25
           <div class="card-block">
26 26
             <h4 class="card-title">Commits by Hour of Week-dummy data </h4>
27 27
             <div class="metric">
28
-              <div id="{{data.heatmap.divID}}"></div>
28
+              <div id="{{sub.visualizations[0].heatmap.divID}}"></div>
29 29
               <div id="dataset-picker"></div>
30 30
             </div>
31 31
             <div class="details_spacer">
@@ -46,7 +46,7 @@
46 46
             <h4 class="card-title"># Commits by day - real data </h4>
47 47
             <div class="metric">
48 48
 
49
-              <div id="{{data.barchart.divID}}"></div>
49
+              <div id="{{sub.visualizations[0].barchart.divID}}"></div>
50 50
 
51 51
             </div>
52 52
             <div class="details_spacer">
@@ -76,8 +76,7 @@
76 76
             <h4 class="card-title">Commits per Author - real data</h4>
77 77
             <div class="metric">
78 78
 
79
-              <div id ="{{data.linegraph1.divID}}"></div>
80
-              
79
+              <div id ="{{sub.visualizations[0].linegraph1.divID}}"></diva              
81 80
             </div>
82 81
             <div class="details_spacer">
83 82
               <div class="text_content">
@@ -101,7 +100,7 @@
101 100
             <h4 class="card-title">Cumulative Added Lines by Author - real data</h4>
102 101
             <div class="metric">
103 102
 
104
-              <div id ="{{data.linegraph2.divID}}"></div>
103
+              <div id ="{{sub.visualizations[0].linegraph2.divID}}"></div>
105 104
 
106 105
             </div>
107 106
             <div class="details_spacer">
@@ -123,5 +122,37 @@
123 122
   </div>
124 123
 </div>
125 124
 
125
+
126
+
127
+    <!-- bootstrap -->
128
+    <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>
129
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
130
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
131
+
132
+    <!-- for nav bar accordion -->
133
+    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
134
+    <script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
135
+
136
+    <!-- for visualizations -->
137
+    <script src="http://d3js.org/d3.v4.js"></script>
138
+    <script src="../static/js/script.js" type="text/javascript"></script>
139
+
140
+    <script type="text/javascript">
141
+
142
+ //    generateHeatMap(["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"], "#chart");
143
+ //    generateBarChart("../static/data/day_of_week_copy.tsv", "#day_of_week");
144
+
145
+ //    generateLineChart("../static/data/commits_by_author_copy.tsv", "#lineChart");
146
+  // generateLineChart("../static/data/lines_of_code_by_author_copy.tsv", "#lineChart2");
147
+
148
+    generateHeatMap(['{{sub.visualizations[0].heatmap.data_path1}}', '{{sub.visualizations[0].heatmap.data_path2}}'], "#{{sub.visualizations[0].heatmap.divID}}");
149
+
150
+      generateBarChart('{{sub.visualizations[0].barchart.data_path}}', "#{{sub.visualizations[0].barchart.divID}}");
151
+
152
+      generateLineChart('{{sub.visualizations[0].linegraph1.data_path}}', "#{{sub.visualizations[0].linegraph1.divID}}");
153
+    generateLineChart('{{sub.visualizations[0].linegraph2.data_path}}', "#{{sub.visualizations[0].linegraph2.divID}}");
154
+
155
+    </script>
156
+
126 157
 {% endblock %}
127 158
 

+ 127
- 0
FlaskTest/templates/main_dash.html ファイルの表示

@@ -0,0 +1,127 @@
1
+{% extends "base.html" %}
2
+
3
+{% block content %}
4
+
5
+
6
+<!-- Main Dashboard -->
7
+<!-- Summary -->
8
+<div class="main_dash">
9
+  <div class="container-fluid">
10
+    <div class="card drop-shadow">
11
+      <div class="card-block">
12
+        <h1> {{data.name}} </h1>
13
+        <br>
14
+        <h6> {{data.summary}} </h6>
15
+        <br>
16
+        <p> {{data.description}}</p>
17
+      </div>
18
+    </div>
19
+
20
+    <div class="row top_spacer">
21
+
22
+      <!-- Metric 1, half screen, heatmap-->
23
+      <div class="col-md-6">
24
+        <div class="card drop-shadow">
25
+          <div class="card-block">
26
+            <h4 class="card-title">Commits by Hour of Week-dummy data </h4>
27
+            <div class="metric">
28
+              <div id="{{data.visualizations[0].heatmap.divID}}"></div>
29
+              <div id="dataset-picker"></div>
30
+            </div>
31
+            <div class="details_spacer">
32
+              <div class="text_content">
33
+                <h5 class="card-text"> This data shows cool stuff </h5>
34
+                <p class="card-text"> As you can see, this data focuses on business hours </p>
35
+                <p class="card-text"> <small class="text-muted"> System last updated at 11:34am </small></p>
36
+              </div>
37
+            </div>
38
+          </div>
39
+        </div>
40
+      </div>
41
+
42
+      <!-- Metric 2, half screen, bar chart-->
43
+      <div class="col-md-6">
44
+        <div class="card drop-shadow">
45
+          <div class="card-block">
46
+            <h4 class="card-title"># Commits by day - real data </h4>
47
+            <div class="metric">
48
+
49
+              <div id="{{data.visualizations[0].barchart.divID}}"></div>
50
+
51
+            </div>
52
+            <div class="details_spacer">
53
+              <div class="text_content">
54
+                <h5 class="card-text"> Bar Chart</h5>
55
+                <p class="card-text"> What week is this from?  <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
56
+                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
57
+                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
58
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
59
+                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
60
+                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
61
+                <p class="card-text"> <small class="text-muted"> System last updated at 11:34am </small></p>
62
+              </div>
63
+            </div>
64
+          </div>
65
+        </div>
66
+      </div>
67
+
68
+    </div> 
69
+
70
+    <!-- Metric 3, full width, line chart -->
71
+    <div class="row top_spacer">
72
+
73
+      <div class="col-md-12">
74
+        <div class="card drop-shadow">
75
+          <div class="card-block">
76
+            <h4 class="card-title">Commits per Author - real data</h4>
77
+            <div class="metric">
78
+
79
+              <div id ="{{data.visualizations[0].linegraph1.divID}}"></div>
80
+              
81
+            </div>
82
+            <div class="details_spacer">
83
+              <div class="text_content">
84
+                <h5 class="card-text"> Multi Series Line Chart</h5>
85
+                <p class="card-text"> Theres a few authors on this project but 1 stands out </p>
86
+                <p class="card-text"> <small class="text-muted"> System last updated at 11:34am </small></p>
87
+              </div>
88
+            </div>
89
+          </div>
90
+        </div>
91
+      </div>
92
+
93
+    </div>
94
+
95
+    <!-- Another test metric, line chart -->
96
+    <div class="row top_spacer">
97
+
98
+      <div class="col-md-12">
99
+        <div class="card drop-shadow">
100
+          <div class="card-block">
101
+            <h4 class="card-title">Cumulative Added Lines by Author - real data</h4>
102
+            <div class="metric">
103
+
104
+              <div id ="{{data.visualizations[0].linegraph2.divID}}"></div>
105
+
106
+            </div>
107
+            <div class="details_spacer">
108
+              <div class="text_content">
109
+                <h5 class="card-text"> Multi Series Line Chart</h5>
110
+                <p class="card-text"> Theres a few authors on this project but 1 stands out </p>
111
+                <p class="card-text"> <small class="text-muted"> System last updated at 11:34am </small></p>
112
+              </div>
113
+            </div>
114
+          </div>
115
+        </div>
116
+      </div>
117
+
118
+    </div>
119
+
120
+    <!-- bottom for aesthetic spacing -->
121
+    <div class="top_spacer"></div>
122
+
123
+  </div>
124
+</div>
125
+
126
+{% endblock %}
127
+