feat: Visualization on webs

scripts/flaskdemo/__init__.py

@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from flaskdemo import routes

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/run_20200727_159587_7ft4i98n")
+    return jsonify(output)
+
+
+@app.route("/")
+def index():
+    return render_template("home.html")

scripts/flaskdemo/static/css/main.css

@@ -0,0 +1,21 @@
+#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;
+}

scripts/flaskdemo/static/js/lineChart.js

@@ -0,0 +1,81 @@
+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;
+
+    var arr = [];
+    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") {
+            continue;
+        }
+
+        // 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 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 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", color[i])
+          .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", color[i]);
+    }
+
+}

scripts/flaskdemo/static/js/main.js

@@ -0,0 +1,7 @@
+queue()
+	.defer(d3.json, lineChartDataUrl)
+    .await(ready);
+
+function ready(error, dataset) {
+    d3lineChart(dataset);
+}

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>

scripts/flaskdemo/templates/home.html

@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% block content %}
+<div id="lineChart"></div>
+{% endblock content %}

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>

scripts/runweb.py

@@ -0,0 +1,4 @@
+from flaskdemo import app
+
+if __name__ == "__main__":
+    app.run()