chart finished

xsaweb/main.py

@@ -29,6 +29,34 @@ def step1():
     roottypefields=roottypefields, roottypefieldsjson=roottypefieldsjson)
 
 
+@app.route("/set_chart_field", methods=["GET"])
+def set_chart_field():
+    from xsa.chart import count_substrings
+    from xsa.datatypereader import get_field_key_by_label
+    import json
+
+    field_label = request.args.get("f")
+    field_key = get_field_key_by_label(state["roottype"], field_label)
+
+    strings = []
+    for r in state["results"]:
+        strings.append(r[field_key])
+
+    substrings = request.args.get("s").split(',')
+
+    data_dict=[]
+    for c in count_substrings(substrings, strings):
+        new_dict = {}
+        new_dict['count'] = c[1]
+        new_dict['label'] = c[0]
+        data_dict.append(new_dict)
+    data_json = json.dumps(data_dict)
+
+    width=request.args.get("w")
+
+    return render_template("chart.html", chart_data=data_json, chart_max=len(state["results"]), chart_width=width)
+
+
 @app.route("/set_root_type", methods=["GET"])
 def set_root_type():
     state["roottype"] = request.args.get("t")

xsaweb/templates/chart.html

+<!-- based on http://bl.ocks.org/mbostock/3885304 -->
+
+<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script>
+
+  var create_chart = function(data, c_width){
+    $("#chart").html("");
+
+    var margin = {top: 20, right: 20, bottom: 30, left: 40},
+        width = c_width - margin.left - margin.right,
+        height = 500 - margin.top - margin.bottom;
+
+    var x = d3.scale.ordinal()
+        .rangeRoundBands([0, width], .1);
+
+    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")
+        .ticks(10, "");
+
+    var 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 + ")");
+
+    x.domain(data.map(function(d) { return d.label; }));
+    y.domain([0, d3.max(data, function(d) { return d.count; })]);
+
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(xAxis);
+
+    svg.append("g")
+        .attr("class", "y axis")
+        .call(yAxis)
+      .append("text")
+        .attr("transform", "rotate(-90)")
+        .attr("y", 6)
+        .attr("dy", ".71em")
+        .style("text-anchor", "end")
+        .text("Counts");
+
+    svg.selectAll(".bar")
+        .data(data)
+      .enter().append("rect")
+        .attr("class", "bar")
+        .attr("x", function(d) { return x(d.label); })
+        .attr("width", x.rangeBand())
+        .attr("y", function(d) { return y(d.count); })
+        .attr("height", function(d) { return height - y(d.count); })
+        .append("title")
+        .text(function(d) {
+         return d.count;});
+
+  };
+
+</script>
+<script>
+  var model = {{chart_data|safe}};
+  var c_width = {{chart_width|safe}};
+  var max = {{chart_max|safe}};
+  create_chart(model, c_width);
+</script>

xsaweb/templates/results.html

@@ -19,11 +19,8 @@
     <link href="static/dashboard.css" rel="stylesheet">
 
     <style type="text/css">
-      .boxes {
-         height: 150px;
-         overflow: auto;
-         width: 400px;
-      }
+      #ig_field { margin-bottom: 1em; }
+      input {margin-right: 0.5em;}
 
       .bar {
         fill: steelblue;
@@ -50,95 +47,58 @@
     }
   </style>
 
-    <script>
-      var getadddata = function() {
-        $.ajax("/get_adddata", { success: function(data) { console.log(data);
-          var newDoc = document.open("text/html", "replace");
-          newDoc.write(data);
-          newDoc.close();
-          window.history.pushState("", $("title").text(), "/get_adddata");
-          },
-        data:{}, method:"POST" });
-      };
-
-      var set_field = function(sel_field){
-        console.log(sel_field)
-        $("#chart_field button").html(sel_field + '<span class="caret"></span>');
-        create_chart([{"count": 56, "label": "foo" }, {"count": 88, "label": "bar" }]);
-      };
-
-      selectTab = function(tabname, idx) {
-        $(tabname).addClass("hidden");
-        $(tabname+":eq(" + idx+ ")").removeClass("hidden");
-        $(tabname+"-menu > li").removeClass("active");
-        $(tabname+"-menu > li:eq(" + idx+ ")").addClass("active");
-      };
-
-    </script>
-
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script>
-
-    var create_chart = function(data){
-      $("#chart").html("");
-
-      var margin = {top: 20, right: 20, bottom: 30, left: 40},
-          width = 960 - margin.left - margin.right,
-          height = 500 - margin.top - margin.bottom;
-
-      var x = d3.scale.ordinal()
-          .rangeRoundBands([0, width], .1);
-
-      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")
-          .ticks(10, "");
-
-      var 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 + ")");
-
-      console.log(data);
-
-      x.domain(data.map(function(d) { return d.label; }));
-      y.domain([0, d3.max(data, function(d) { return d.count; })]);
-
-      svg.append("g")
-          .attr("class", "x axis")
-          .attr("transform", "translate(0," + height + ")")
-          .call(xAxis);
-
-      svg.append("g")
-          .attr("class", "y axis")
-          .call(yAxis)
-        .append("text")
-          .attr("transform", "rotate(-90)")
-          .attr("y", 6)
-          .attr("dy", ".71em")
-          .style("text-anchor", "end")
-          .text("Counts");
-
-      svg.selectAll(".bar")
-          .data(data)
-        .enter().append("rect")
-          .attr("class", "bar")
-          .attr("x", function(d) { return x(d.label); })
-          .attr("width", x.rangeBand())
-          .attr("y", function(d) { return y(d.count); })
-          .attr("height", function(d) { return height - y(d.count); });
+  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+
+  <script>
+    var getadddata = function() {
+      $.ajax("/get_adddata", { success: function(data) {
+        var newDoc = document.open("text/html", "replace");
+        newDoc.write(data);
+        newDoc.close();
+        window.history.pushState("", $("title").text(), "/get_adddata");
+        },
+      data:{}, method:"POST" });
     };
 
+    var selected_field = "";
+    var update_chart = function(sel_field){
+      if (sel_field === undefined) {
+        sel_field=selected_field;
+      }
+      else{
+        selected_field=sel_field;
+      }
+      if(sel_field === ""){
+        return;
+      }
+      var subs = [];
+      var c_width = $("#chart").width();
+      $('input[type="text"]').each(function(){ subs.push($(this).val()) });
+      $("#chart_field button").html(sel_field + '<span class="caret"></span>');
+      $('#chart').load("/set_chart_field?f="+sel_field+"&s="+ subs+"&w="+c_width);
+    };
+
+    selectTab = function(tabname, idx) {
+      $(tabname).addClass("hidden");
+      $(tabname+":eq(" + idx+ ")").removeClass("hidden");
+      $(tabname+"-menu > li").removeClass("active");
+      $(tabname+"-menu > li:eq(" + idx+ ")").addClass("active");
+    };
 
-    </script>
+    var add = function(removeable){
+      var child=document.createElement("p");
+      var parent=document.getElementById("subs_con");
+      parent.appendChild(child);
+
+      $("<input placeholder='substring' type='text'></input>").on("keyup",function(){ update_chart(); }).appendTo(child);
+      if (removeable){ $("<a href='Javascript:'>X</a>").on("click", remove_cb).appendTo(child);}
+    };
+
+    var remove_cb = function(){
+      $(this).parents('p').remove();
+      update_chart();
+    };
+  </script>
 
 </head>
 
@@ -165,8 +125,8 @@
     </div>
 
     <ul class="nav nav-tabs tabbed1-menu">
-      <li role="presentation" class="active" onclick="selectTab('.tabbed1',0)"><a>Table</a></li>
-      <li role="presentation" onclick="selectTab('.tabbed1',1)"><a>Chart</a></li>
+      <li role="presentation" class="active" onclick="selectTab('.tabbed1',0)"><a href='Javascript:'>Table</a></li>
+      <li role="presentation" onclick="selectTab('.tabbed1',1)"><a href='Javascript:'>Chart</a></li>
     </ul>
 
     <div class="tabbed1">
@@ -175,7 +135,7 @@
 
       <div class="btn-group" style="margin-top: 1em; margin-bottom:2em;" role="group" aria-label="...">
         {% if rest_adddata%}
-          <button type="button" class="btn btn-lg btn-primary" onclick="getadddata()">Get Additional Data</button>
+          <button type="button" class="btn btn-lg btn-default" onclick="getadddata()">Get Additional Data</button>
         {% endif %}
         <a href="/downl_csv"><button type="button" class="btn btn-lg btn-default">Export as CSV</button></a>
       </div>
@@ -212,43 +172,51 @@
       </div>
   </div>
 
-
   <div class="tabbed1 hidden">
     <h2 class="sub-header">Chart</h2>
 
-    <div class="input-group">
-      <span class="input-group-addon">Field</span>
 
-      <div class="btn-group" role="group" id="chart_field">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-          Choose a field!
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" role="menu">
-          {% for field in roottypefields %}
-            <li role="presentation"><a role="menuitem" tabindex="-1" onclick="set_field('{{field["label"]}}') ">{{field["label"]}}</a></li>
-          {% endfor %}
+    <div class="row">
 
-        </ul>
-      </div>
-    </div>
+    	<div class="col-md-3">
 
+    		<div id="ig_field" class="input-group">
+          <span class="input-group-addon">Field</span>
 
-    <div id="chart"></div>
-    <script>
-    create_chart([{"count": 100, "label": "foo" }, {"count": 50, "label": "bar" }]);
-    </script>
+          <div class="btn-group" role="group" id="chart_field">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+              Choose a field!
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu">
+              {% for field in roottypefields %}
+                <li role="presentation"><a role="menuitem" tabindex="-1" onclick="update_chart('{{field["label"]}}') ">{{field["label"]}}</a></li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
 
+        <div id="subs_con">
+          <script> add(false);</script>
+        </div>
+        <button onclick="add(true)">+</button>
 
+    	</div>
 
+      <div id="chart" class="col-md-9"></div>
 
-  </div>
+  	</div>
 
-</div>
 
 
 
 
+
+
+  </div>
+
+</div>
+
 </body>