From a209f7b905cd4ada970aa0f85e9bc76d3fb20b69 Mon Sep 17 00:00:00 2001
From: Bo Zheng <cool_zb@outlook.com>
Date: Tue, 21 Jul 2020 11:29:42 -0500
Subject: [PATCH 1/3] Add web option

---
 scripts/flaskdemo/__init__.py            |  5 ++
 scripts/flaskdemo/routes.py              | 50 ++++++++++++++
 scripts/flaskdemo/static/css/main.css    | 25 +++++++
 scripts/flaskdemo/static/js/lineChart.js | 66 ++++++++++++++++++
 scripts/flaskdemo/static/js/main.js      |  7 ++
 scripts/flaskdemo/templates/base.html    | 30 ++++++++
 scripts/flaskdemo/templates/home.html    |  4 ++
 scripts/flaskdemo/templates/tmp.html     | 87 ++++++++++++++++++++++++
 scripts/runweb.py                        |  4 ++
 9 files changed, 278 insertions(+)
 create mode 100644 scripts/flaskdemo/__init__.py
 create mode 100644 scripts/flaskdemo/routes.py
 create mode 100644 scripts/flaskdemo/static/css/main.css
 create mode 100644 scripts/flaskdemo/static/js/lineChart.js
 create mode 100644 scripts/flaskdemo/static/js/main.js
 create mode 100644 scripts/flaskdemo/templates/base.html
 create mode 100644 scripts/flaskdemo/templates/home.html
 create mode 100644 scripts/flaskdemo/templates/tmp.html
 create mode 100644 scripts/runweb.py

diff --git a/scripts/flaskdemo/__init__.py b/scripts/flaskdemo/__init__.py
new file mode 100644
index 0000000..12638ca
--- /dev/null
+++ b/scripts/flaskdemo/__init__.py
@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from flaskdemo import routes
diff --git a/scripts/flaskdemo/routes.py b/scripts/flaskdemo/routes.py
new file mode 100644
index 0000000..1dd18e8
--- /dev/null
+++ b/scripts/flaskdemo/routes.py
@@ -0,0 +1,50 @@
+from flask import jsonify, render_template
+from flaskdemo import app
+import json
+import pathlib
+import time
+
+
+def find_latest(directory_name):
+    list_of_paths = pathlib.Path(directory_name).glob("*")
+    list_of_dirs = []
+    for path in list_of_paths:
+        if path.is_dir():
+            list_of_dirs.append(path)
+    latest_dir = max(list_of_dirs, key=lambda p: p.stat().st_ctime)
+
+    return latest_dir, latest_dir / "events.jsonl"
+
+
+def load(directory_name):
+    directory, path = find_latest(directory_name)
+    output_dic = []
+
+    clock = 0
+    while not path.exists():
+        clock += 1
+        time.sleep(1)
+        if clock >= 60:
+            raise FileExistsError(f"{path} is not found!")
+
+    with path.open("r") as json_file:
+        json_list = list(json_file)
+    for json_str in json_list:
+        item = json.loads(json_str)
+        tmp = {}
+        for key in item.keys():
+            tmp[key.replace(".", "_")] = item[key]
+        output_dic.append(tmp)
+
+    return output_dic, directory
+
+
+@app.route("/get_linechart_data")
+def get_linechart_data():
+    output, directory = load("../output")
+    return jsonify(output)
+
+
+@app.route("/")
+def index():
+    return render_template("home.html")
diff --git a/scripts/flaskdemo/static/css/main.css b/scripts/flaskdemo/static/css/main.css
new file mode 100644
index 0000000..6780dab
--- /dev/null
+++ b/scripts/flaskdemo/static/css/main.css
@@ -0,0 +1,25 @@
+
+#pieChart {    
+	position:relative;
+	top:40%;
+	left:10px;
+	width:400px;
+    height: 400px; 
+    display: inline-block;
+}
+
+
+#barChart {
+	position:relative;
+	top:40%;
+    height: 400px;
+    display: inline-block;
+}
+
+.slice {
+   font-size: 12pt;
+   font-family: Verdana;
+   fill: white;
+   font-weight: bold;	
+   cursor: pointer;
+}
diff --git a/scripts/flaskdemo/static/js/lineChart.js b/scripts/flaskdemo/static/js/lineChart.js
new file mode 100644
index 0000000..077b65f
--- /dev/null
+++ b/scripts/flaskdemo/static/js/lineChart.js
@@ -0,0 +1,66 @@
+function d3lineChart(data) {
+    // set the dimensions and margins of the graph
+    var margin = {top: 10, right: 30, bottom: 30, left: 60},
+        width = 460 - margin.left - margin.right,
+        height = 400 - margin.top - margin.bottom;
+
+    // append the svg object to the body of the page
+    var svg = d3.select("#lineChart")
+      .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 + ")");
+
+    var x = d3.scaleLinear()
+      .domain([0, d3.max(data, function(d) { return d._runtime; }) + 5])
+      .range([ 0, width ]);
+    svg.append("g")
+      .attr("transform", "translate(0," + height + ")")
+      .call(d3.axisBottom(x));
+    // Add Y axis
+    var y = d3.scaleLinear()
+      .domain([d3.min(data, function(d) { return d.system_cpu; }) - 2, d3.max(data, function(d) { return d.system_cpu; }) + 2])
+      .range([ height, 0 ]);
+    svg.append("g")
+      .call(d3.axisLeft(y));
+
+    // Add X axis label:
+    svg.append("text")
+        .attr("text-anchor", "end")
+        .attr("x", width)
+        .attr("y", height + margin.top + 20)
+        .text("Time(minutes)");
+
+    // Y axis label:
+    svg.append("text")
+        .attr("text-anchor", "end")
+        .attr("transform", "rotate(-90)")
+        .attr("y", -margin.left + 20)
+        .attr("x", -margin.top)
+        .text("CPU Utilization (%)");
+
+
+    // Add the line
+    svg.append("path")
+      .datum(data)
+      .attr("fill", "none")
+      .attr("stroke", "#69b3a2")
+      .attr("stroke-width", 1.5)
+      .attr("d", d3.line()
+        .x(function(d) { return x(d._runtime) })
+        .y(function(d) { return y(d.system_cpu) })
+        );
+
+    // Add the points
+    svg.append("g")
+      .selectAll("dot")
+      .data(data)
+      .enter()
+      .append("circle")
+        .attr("cx", function(d) { return x(d._runtime) } )
+        .attr("cy", function(d) { return y(d.system_cpu) } )
+        .attr("r", 5)
+        .attr("fill", "#69b3a2");
+}
\ No newline at end of file
diff --git a/scripts/flaskdemo/static/js/main.js b/scripts/flaskdemo/static/js/main.js
new file mode 100644
index 0000000..eb8d336
--- /dev/null
+++ b/scripts/flaskdemo/static/js/main.js
@@ -0,0 +1,7 @@
+queue()
+	.defer(d3.json, lineChartDataUrl)
+    .await(ready);
+
+function ready(error, dataset) {
+    d3lineChart(dataset);
+}
\ No newline at end of file
diff --git a/scripts/flaskdemo/templates/base.html b/scripts/flaskdemo/templates/base.html
new file mode 100644
index 0000000..d23fabc
--- /dev/null
+++ b/scripts/flaskdemo/templates/base.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>Home page</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css" />
+    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
+  </head>
+  <body>
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-sm-10 mx-auto">
+                    {% block content %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
+    <script src="https://d3js.org/d3.v4.min.js"></script>
+    <script src="https://d3js.org/queue.v1.min.js"></script>
+    <script>
+        var lineChartDataUrl = "{{url_for('get_linechart_data')}}";
+    </script>
+    <script src="{{ url_for('static', filename='js/lineChart.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/scripts/flaskdemo/templates/home.html b/scripts/flaskdemo/templates/home.html
new file mode 100644
index 0000000..1add758
--- /dev/null
+++ b/scripts/flaskdemo/templates/home.html
@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% block content %}
+<div id="lineChart"></div>
+{% endblock content %}
\ No newline at end of file
diff --git a/scripts/flaskdemo/templates/tmp.html b/scripts/flaskdemo/templates/tmp.html
new file mode 100644
index 0000000..c629376
--- /dev/null
+++ b/scripts/flaskdemo/templates/tmp.html
@@ -0,0 +1,87 @@
+
+<!-- Code from d3-graph-gallery.com -->
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<!-- Load d3.js -->
+<script src="https://d3js.org/d3.v4.js"></script>
+
+<!-- Create a div where the graph will take place -->
+<div id="my_dataviz"></div>
+
+
+<script>
+
+// set the dimensions and margins of the graph
+var margin = {top: 30, right: 0, bottom: 30, left: 50},
+    width = 210 - margin.left - margin.right,
+    height = 210 - margin.top - margin.bottom;
+
+//Read the data
+d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv", function(data) {
+
+  // group the data: I want to draw one line per group
+  var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
+    .key(function(d) { return d.name;})
+    .entries(data);
+
+  // What is the list of groups?
+  allKeys = sumstat.map(function(d){return d.key})
+
+  // Add an svg element for each group. The will be one beside each other and will go on the next row when no more room available
+  var svg = d3.select("#my_dataviz")
+    .selectAll("uniqueChart")
+    .data(sumstat)
+    .enter()
+    .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 + ")");
+
+  // Add X axis --> it is a date format
+  var x = d3.scaleLinear()
+    .domain(d3.extent(data, function(d) { return d.year; }))
+    .range([ 0, width ]);
+  svg
+    .append("g")
+    .attr("transform", "translate(0," + height + ")")
+    .call(d3.axisBottom(x).ticks(3));
+
+  //Add Y axis
+  var y = d3.scaleLinear()
+    .domain([0, d3.max(data, function(d) { return +d.n; })])
+    .range([ height, 0 ]);
+  svg.append("g")
+    .call(d3.axisLeft(y).ticks(5));
+
+  // color palette
+  var color = d3.scaleOrdinal()
+    .domain(allKeys)
+    .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])
+
+  // Draw the line
+  svg
+    .append("path")
+      .attr("fill", "none")
+      .attr("stroke", function(d){ return color(d.key) })
+      .attr("stroke-width", 1.9)
+      .attr("d", function(d){
+        return d3.line()
+          .x(function(d) { return x(d.year); })
+          .y(function(d) { return y(+d.n); })
+          (d.values)
+      })
+
+  // Add titles
+  svg
+    .append("text")
+    .attr("text-anchor", "start")
+    .attr("y", -5)
+    .attr("x", 0)
+    .text(function(d){ return(d.key)})
+    .style("fill", function(d){ return color(d.key) })
+
+})
+</script>
\ No newline at end of file
diff --git a/scripts/runweb.py b/scripts/runweb.py
new file mode 100644
index 0000000..5ef3259
--- /dev/null
+++ b/scripts/runweb.py
@@ -0,0 +1,4 @@
+from flaskdemo import app
+
+if __name__ == "__main__":
+    app.run(debug=True)

From 8f1f6057d358cf00898267ec1ddc6b69caf4a480 Mon Sep 17 00:00:00 2001
From: Bo Zheng <cool_zb@outlook.com>
Date: Wed, 22 Jul 2020 17:49:59 -0500
Subject: [PATCH 2/3] Support multiple plots

---
 scripts/flaskdemo/static/js/lineChart.js | 120 +++++++++++++----------
 1 file changed, 67 insertions(+), 53 deletions(-)

diff --git a/scripts/flaskdemo/static/js/lineChart.js b/scripts/flaskdemo/static/js/lineChart.js
index 077b65f..f641042 100644
--- a/scripts/flaskdemo/static/js/lineChart.js
+++ b/scripts/flaskdemo/static/js/lineChart.js
@@ -4,63 +4,77 @@ function d3lineChart(data) {
         width = 460 - margin.left - margin.right,
         height = 400 - margin.top - margin.bottom;
 
-    // append the svg object to the body of the page
-    var svg = d3.select("#lineChart")
-      .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 + ")");
+    var arr = [];
+    if (data.length >= 1) {
+        arr = Object.keys(data[0]);
+    }
 
-    var x = d3.scaleLinear()
-      .domain([0, d3.max(data, function(d) { return d._runtime; }) + 5])
-      .range([ 0, width ]);
-    svg.append("g")
-      .attr("transform", "translate(0," + height + ")")
-      .call(d3.axisBottom(x));
-    // Add Y axis
-    var y = d3.scaleLinear()
-      .domain([d3.min(data, function(d) { return d.system_cpu; }) - 2, d3.max(data, function(d) { return d.system_cpu; }) + 2])
-      .range([ height, 0 ]);
-    svg.append("g")
-      .call(d3.axisLeft(y));
+    for (let i = 0; i < arr.length; ++i) {
+        if(arr[i] === "_runtime" || arr[i] === "_timestamp") {
+            continue;
+        }
 
-    // Add X axis label:
-    svg.append("text")
-        .attr("text-anchor", "end")
-        .attr("x", width)
-        .attr("y", height + margin.top + 20)
-        .text("Time(minutes)");
+        // append the svg object to the body of the page
 
-    // Y axis label:
-    svg.append("text")
-        .attr("text-anchor", "end")
-        .attr("transform", "rotate(-90)")
-        .attr("y", -margin.left + 20)
-        .attr("x", -margin.top)
-        .text("CPU Utilization (%)");
+        var svg = d3.select("#lineChart")
+          .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 + ")");
 
+        var x = d3.scaleLinear()
+          .domain([0, d3.max(data, function(d) { return d._runtime; }) + 5])
+          .range([ 0, width ]);
+        svg.append("g")
+          .attr("transform", "translate(0," + height + ")")
+          .call(d3.axisBottom(x));
+        // Add Y axis
+        var y = d3.scaleLinear()
+          .domain([d3.min(data, function(d) { return Reflect.get(d, arr[i]); }) - 2, d3.max(data, function(d) { return Reflect.get(d, arr[i]); }) + 2])
+          .range([ height, 0 ]);
+        svg.append("g")
+          .call(d3.axisLeft(y));
 
-    // Add the line
-    svg.append("path")
-      .datum(data)
-      .attr("fill", "none")
-      .attr("stroke", "#69b3a2")
-      .attr("stroke-width", 1.5)
-      .attr("d", d3.line()
-        .x(function(d) { return x(d._runtime) })
-        .y(function(d) { return y(d.system_cpu) })
-        );
+        // Add X axis label:
+        svg.append("text")
+            .attr("text-anchor", "end")
+            .attr("x", width)
+            .attr("y", height + margin.top + 20)
+            .text("Time(minutes)");
+
+        // Y axis label:
+        svg.append("text")
+            .attr("text-anchor", "end")
+            .attr("transform", "rotate(-90)")
+            .attr("transform", "rotate(-90)")
+            .attr("y", -margin.left + 20)
+            .attr("x", -margin.top)
+            .text(arr[i]);
+
+
+        // Add the line
+        svg.append("path")
+          .datum(data)
+          .attr("fill", "none")
+          .attr("stroke", "#69b3a2")
+          .attr("stroke-width", 1.5)
+          .attr("d", d3.line()
+            .x(function(d) { return x(d._runtime) })
+            .y(function(d) { return y(Reflect.get(d, arr[i])) })
+            );
+
+        // Add the points
+        svg.append("g")
+          .selectAll("dot")
+          .data(data)
+          .enter()
+          .append("circle")
+            .attr("cx", function(d) { return x(d._runtime) } )
+            .attr("cy", function(d) { return y(Reflect.get(d, arr[i])) } )
+            .attr("r", 5)
+            .attr("fill", "#69b3a2");
+    }
 
-    // Add the points
-    svg.append("g")
-      .selectAll("dot")
-      .data(data)
-      .enter()
-      .append("circle")
-        .attr("cx", function(d) { return x(d._runtime) } )
-        .attr("cy", function(d) { return y(d.system_cpu) } )
-        .attr("r", 5)
-        .attr("fill", "#69b3a2");
 }
\ No newline at end of file

From a994dc86402d82c11465fd1a8d26864dfefae121 Mon Sep 17 00:00:00 2001
From: Bo Zheng <cool_zb@outlook.com>
Date: Tue, 28 Jul 2020 11:17:39 -0500
Subject: [PATCH 3/3] Add colors

---
 scripts/flaskdemo/routes.py              | 2 +-
 scripts/flaskdemo/static/css/main.css    | 6 +-----
 scripts/flaskdemo/static/js/lineChart.js | 5 +++--
 scripts/runweb.py                        | 2 +-
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/scripts/flaskdemo/routes.py b/scripts/flaskdemo/routes.py
index 1dd18e8..5b83718 100644
--- a/scripts/flaskdemo/routes.py
+++ b/scripts/flaskdemo/routes.py
@@ -41,7 +41,7 @@ def load(directory_name):
 
 @app.route("/get_linechart_data")
 def get_linechart_data():
-    output, directory = load("../output")
+    output, directory = load("./output/run_20200727_159587_7ft4i98n")
     return jsonify(output)
 
 
diff --git a/scripts/flaskdemo/static/css/main.css b/scripts/flaskdemo/static/css/main.css
index 6780dab..8a686d2 100644
--- a/scripts/flaskdemo/static/css/main.css
+++ b/scripts/flaskdemo/static/css/main.css
@@ -1,5 +1,4 @@
-
-#pieChart {    
+#pieChart {
 	position:relative;
 	top:40%;
 	left:10px;
@@ -7,15 +6,12 @@
     height: 400px; 
     display: inline-block;
 }
-
-
 #barChart {
 	position:relative;
 	top:40%;
     height: 400px;
     display: inline-block;
 }
-
 .slice {
    font-size: 12pt;
    font-family: Verdana;
diff --git a/scripts/flaskdemo/static/js/lineChart.js b/scripts/flaskdemo/static/js/lineChart.js
index f641042..3c341f3 100644
--- a/scripts/flaskdemo/static/js/lineChart.js
+++ b/scripts/flaskdemo/static/js/lineChart.js
@@ -8,6 +8,7 @@ function d3lineChart(data) {
     if (data.length >= 1) {
         arr = Object.keys(data[0]);
     }
+    var color = ['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999', '#e41623', '#3d6eb8'];
 
     for (let i = 0; i < arr.length; ++i) {
         if(arr[i] === "_runtime" || arr[i] === "_timestamp") {
@@ -58,7 +59,7 @@ function d3lineChart(data) {
         svg.append("path")
           .datum(data)
           .attr("fill", "none")
-          .attr("stroke", "#69b3a2")
+          .attr("stroke", color[i])
           .attr("stroke-width", 1.5)
           .attr("d", d3.line()
             .x(function(d) { return x(d._runtime) })
@@ -74,7 +75,7 @@ function d3lineChart(data) {
             .attr("cx", function(d) { return x(d._runtime) } )
             .attr("cy", function(d) { return y(Reflect.get(d, arr[i])) } )
             .attr("r", 5)
-            .attr("fill", "#69b3a2");
+            .attr("fill", color[i]);
     }
 
 }
\ No newline at end of file
diff --git a/scripts/runweb.py b/scripts/runweb.py
index 5ef3259..bf3047e 100644
--- a/scripts/runweb.py
+++ b/scripts/runweb.py
@@ -1,4 +1,4 @@
 from flaskdemo import app
 
 if __name__ == "__main__":
-    app.run(debug=True)
+    app.run()