Changeset a3e35d2517223a6ca61f6f09b43a3dd88076899d

Timestamp:

04/28/09 22:49:46 (4 years ago)

Author:

Umar Farooq <umar@omniti.com>

git-committer:

Umar Farooq <umar@omniti.com> 1240958986 +0000

git-parent:

[b2e6f6c46ef217bab563f4952f6451d5109f53de]

git-author:

Umar Farooq <umar@omniti.com> 1240958986 +0000

Message:

stacking in flot now supported, user can add/edit stacks for a graph from the graph viewer, the old stacking method is still in the code, but commented out

Files:

• ui/web/htdocs/css/style.css (modified) (1 diff)
• ui/web/htdocs/graph_panel.inc (modified) (14 diffs)
• ui/web/htdocs/js/jquery.flot.js (modified) (19 diffs)
• ui/web/htdocs/js/recon.js (modified) (10 diffs)
• ui/web/lib/Reconnoiter_flot_Driver.php (modified) (2 diffs)

ui/web/htdocs/css/style.css

@@ -879 +879 @@
-padding:0 4px;
-font-weight: bold;
+color:#660000;
+}
+span.editStacks {
+padding-left:10px;
+float:right;
+color:#660000;
+}
+span.graphStacks {
+float:left;
+border:1px solid #DDDDDD;
-color:#660000;
-}

ui/web/htdocs/graph_panel.inc

@@ -25 +25 @@
-        $("input[@class='graphType']").attr("disabled", "true");
-        $("select[@name='derive']").attr("disabled", "true");
+        $("select[@class='av_stacks']").attr("disabled", "true");
-
-        $("h2#graphTitle").unbind();
@@ -35 +36 @@
-        $("input[@name='math2']").removeAttr("disabled");
-        $("input[@name='view']").removeAttr("disabled");
-
+//
-        $("select[@name='derive']").removeAttr("disabled");
+        $("select[@class='av_stacks']").removeAttr("disabled");
-
-        $("h2#graphTitle").editable(function(value, settings) { 
@@ -151 +153 @@
-         }, 'json');
-}
+
-function graph_add_datapoint(d) {
-  if(!graph_locked("Click 'Edit Graph' to unlock.")){
@@ -222 +225 @@
-    }
-  });
+
-  if(!d.hidden){o.find('input[@name="view"]').attr("checked","checked");}
-  o.find('input[@name="view"]').change(function(){
@@ -228 +232 @@
-  }).change();
-
+  o.find('select[@id="datastack"]').change(function(){
+      var si = find_in_stacks($(".av_stacks").index(this));
+       if(si != -1) graphinfo.stacks[si.i].splice(si.j, 1);
+
+       if(graphinfo.stacks[ $(this).val() ]) {
+         graphinfo.stacks[ $(this).val()].push($(".av_stacks").index(this));
+         graphinfo.stacks[ $(this).val()].sort(function(a,b){return a - b});
+       } 
+       update_current_graph(true);
+
+      $(".graphStacks").empty();
+
+      for(var i=0; i<graphinfo.stacks.length; i++) {
+        $(".graphStacks").append('<br>Stack '+i+': ');
+        for(var j=0; j<graphinfo.stacks[i].length; j++){
+            $(".graphStacks").append(graphinfo.datapoints[graphinfo.stacks[i][j]].name + ",");
+        }
+      }
+    }).change();
+
+
-  o.find('.deletedatapoint').click(function(){
-    if(!locked){
@@ -233 +258 @@
-         if(graphinfo.datapoints[i] == d) {
-           graphinfo.datapoints.splice(i,1);
+           var si = find_in_stacks(i);
+           if(si != -1) graphinfo.stacks[si.i].splice(si.j, 1);
-           break;
-         }
@@ -286 +313 @@
-  $("#gtool #dataPoints").append(o.children());
-}
+
+function find_in_stacks(dnum) {
+  for(var i=0; i<graphinfo.stacks.length; i++) {
+      for(var j=0; j<graphinfo.stacks[i].length; j++) {
+         if(graphinfo.stacks[i][j] == dnum) {            
+            var r = { i: i, j: j}; return r;
+         }        
+      }
+  }
+  return -1;
+}
+
-function refresh_graph_from_json(j) {
-  graphinfo = j;
+  if(graphinfo.stacks == undefined) graphinfo.stacks = Array();
-  if(graphinfo.datapoints == undefined) graphinfo.datapoints = Array();
-  $("h2#graphTitle").html(graphinfo.title ? graphinfo.title : 'Graph Title (click to edit)');
@@ -296 +336 @@
-    .attr("checked","checked");
-  $("#dataPoints").empty();
+
-  for(var i=0; i<graphinfo.datapoints.length; i++) {
-    gtool_add_datapoint(graphinfo.datapoints[i]);
-  }
+
+  $(".graphStacks").empty();
+  $('.av_stacks').find('option').remove().end().append('<option value="-1">select </option>')
+
+  for(var i=0; i<graphinfo.stacks.length; i++) {
+    $(".graphStacks").append('<br>Stack '+i+': ');      
+    $('.av_stacks').append('<option value="'+i+'">Stack '+i+'</option>');
+
+    for(var j=0; j<graphinfo.stacks[i].length; j++){
+        $(".graphStacks").append(graphinfo.datapoints[graphinfo.stacks[i][j]].name + ",");
+    }
+  }
+
+  $('select[@id="datastack"]').each( function()  {    
+    var si = find_in_stacks($(".av_stacks").index(this));
+    if(si != -1) $(this).val(si.i);
+  });
+
-  if(maingraph) {
-    if(graphinfo.id) 
-
+, stacks: graphinfo.stacks
-    else
-      maingraph.ReconGraphReset();
@@ -355 +414 @@
-        });
-
-
+
+
+
+
+
+
+
+
+
+
-        $(".streamData").click(function() {
-
-               if(!graph_locked("Unlock by clicking 'Edit Graph'.") && graphinfo.id) {            
-                    if(!gstreaming) {
@@ -419 +486 @@
-          $("#gtool-error").fadeOut("slow");
-        });
-span
+
-          if(!locked){
-            gtool_add_guide();
@@ -490 +557 @@
-        
-</div>
+<span class="graphStacks"></span>
+<div><span class="editStacks">Add Stack Set</span></div>
-<div style="float:right"><span class="addGuide">Add Guide</span></div>
-<br style="clear:right" />
@@ -498 +567 @@
-                
-                <th class="data">Data Points</th>
+                <th>Stacking</th>
-                <th>Color</th>
-                <th>Derivative</th>
@@ -512 +582 @@
-        <table>
-        <tbody id="guideeditor">
-
+           
-                <td><input name="view" type="checkbox" value="1" /></td>
-                <td class="data datatitle"></td>
@@ -536 +606 @@
-                <td><input name="view" type="checkbox" value="1"/></td>
-                <td class="data datatitle"></td>
+                <td><select id="datastack" class="av_stacks"><option value='na'>select</option></select></td>
-                <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
-                <td><select name="derive"><option value="false">no</option><option value="derive">derive</option><option value="counter">counter</option></select></td>

ui/web/htdocs/js/jquery.flot.js

@@ -10 +10 @@
-        // where series is either just the data as [ [x1, y1], [x2, y2], ... ]
-        // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label" }
-
+
+
-        var series = [],
-            options = {
@@ -120 +121 @@
-        this.highlight = highlight;
-        this.unhighlight = unhighlight;
- 
+
-        // initialize
-        parseOptions(options_);
@@ -130 +131 @@
-
-        function setData(d) {
+            orig_series = copyData(d);
+
-            series = parseData(d);
-
-
-
+
-            fillInSeriesOptions();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-                }
-            }
-
-
-
-
-
-
-
-
-
-
+
+
+
-            if(a[middle][0] > v) return binary_search(a, v, middle-1, low);
-            else if(a[middle][0] < v) return binary_search(a, v, high, middle+1);
@@ -169 +206 @@
-        }
-
+        //this will lerp to the y value at x=t using points p1 and p2
-        function interpolate(p1, p2, t) {
-            dx = p2[0] - p1[0]; dy = p2[1] - p1[1];
-            return (dy/dx)*(t-p1[0]) + p1[1];
-        }
+
-        
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-            var res = [];
-            for (var i = 0; i < d.length; ++i) {
@@ -186 +249 @@
-                else {
-                    s = { data: d[i] };
-
+              
-                res.push(s);
-            }
-
+
-            return res;
-        }
-
+
-        function parseOptions(o) {
-            $.extend(true, options, o);
@@ -888 +951 @@
-            axes.y2axis.scale = plotHeight / (axes.y2axis.max - axes.y2axis.min);
-        }
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        function draw() {
-            drawGrid();
+            
+            var b_series = null;
+
-            for (var i = 0; i < series.length; i++) {
-
+
+
+
+
-            }
-        }
@@ -1091 +1180 @@
-        }
-
-
+, b_series
-
-            //this module assumed we always want to show something, thus if nothing was set to show
-            //it plotted lines....sometimes, we dont wanna show anything
-            if (series.lines.show) // || (!series.bars.show && !series.points.show))
-
+, b_series
-            if (series.bars.show)
-                drawSeriesBars(series);
@@ -1103 +1192 @@
-        }
-        
-
+, b_series
-            function plotLine(data, offset, axisx, axisy, dataManip) {
-                var prev, cur = null, drawx = null, drawy = null;
@@ -1186 +1275 @@
-            }
-
-
+
+
-                var prev, cur = null;
-
+
+
+
-                var bottom = Math.min(Math.max(0, axisy.min), axisy.max);
-                var top, lastX = 0;
-
-                var areaOpen = false;
-
+
+
+
+
-                for (var i = 0; i < data.length; ++i) {
-                    prev = cur;
-                    cur = [data[i][0], data[i][1]];
+                    if(b_series){
+                        bprev = bcur;
+                        bcur = [parseFloat(b_series.data[i][0]), parseFloat(b_series.data[i][1])];
+                    }
+                    else {
+                        bprev = axisy.min;
+                        bcur = axisy.min;
+                    }
+                    
-                    if(dataManip) cur[1] = dataManip(cur[1]);
-
-
+
+
-                        // close area
-                        ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom));
@@ -1212 +1317 @@
-                    var x1 = prev[0], y1 = prev[1],
-                        x2 = cur[0], y2 = cur[1];
+                    var bx1 = bprev[0], by1 = bprev[1],
+                        bx2 = bcur[0], by2 = bcur[1];
+
-
-                    // clip x values
@@ -1246 +1354 @@
-                        // open area
-                        ctx.beginPath();
-
+
-                        areaOpen = true;
-                    }
@@ -1256 +1364 @@
-                        continue;
-                    }
+                    //if both points are below the ymin, clip the area by drawing only to ymin for both points
+                    //this should not be triggered for a stacked series
-                    else if (y1 <= axisy.min && y2 <= axisy.min) {
-                        ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
@@ -1270 +1380 @@
-                    
-                    // clip with ymin
+                    //this should not be triggered for a stacked series
-                    if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
-                        x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
-                        y1 = axisy.min;
-                    }
+                    //this should not be triggered for a stacked series
-                    else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
-                        x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
@@ -1292 +1404 @@
-                    // if the x value was changed we got a rectangle
-                    // to fill
+                    //this should not be triggered for a stacked series
+
-                    if (x1 != x1old) {
-                        if (y1 <= axisy.min)
@@ -1303 +1417 @@
-                    
-                    // fill the triangles
-
+ 
-                    ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
-
-                    // fill the other rectangle if it's there
+                    //this should not be triggered for a stacked series
-                    if (x2 != x2old) {
-                        if (y2 <= axisy.min)
@@ -1320 +1435 @@
-                }
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-            
-            ctx.save();
@@ -1348 +1474 @@
-            setFillStyle(series.lines, series.color);
-            if (series.lines.fill)
-
+, b_series
-            plotLine(series.data, 0, series.xaxis, series.yaxis, series.dataManip);
-            ctx.restore();
@@ -1629 +1755 @@
-        // Returns the data item the mouse is over, or null if none is found
-        function findNearbyItem(mouseX, mouseY) {
+            
-            var items = []
-            var maxDistance = options.grid.mouseActiveRadius,
@@ -1655 +1782 @@
-                    barLeft = series[i].bars.align == "left" ? 0 : -series[i].bars.barWidth/2,
-                    barRight = barLeft + series[i].bars.barWidth,
-
+-1
-                    j_start, j_end;
-                if(options.grid.hoverXOnly) {

ui/web/htdocs/js/recon.js

@@ -311 +311 @@
-    refresh:
-        function(options) {
+
-          if(this.length > 1) {
-            this.each(function(i) { $(this).ReconGraphRefresh(options); });
@@ -328 +329 @@
-          $.ajaxq (this.graphinfo.graphid, { url: url,
-            data: data,
-      
+               
-                      });
-
@@ -370 +371 @@
-          r.options.y2axis.tickFormatter = ytickformatter(ddata, 2);
-          r.options.xaxis.localtime = true;
+
+          r.options.stackSets = this.graphinfo.stacks;
+
-          doptions = r.options;
-
@@ -785 +789 @@
-
-  function zoom_modal (id, gtype) {
-
+
+
+
+
-    var smod = stream_graph.modal({
-      containerId: 'StreamingModalContainer',
@@ -801 +808 @@
-      },
-    });
-id
+ginfo.id, stacks: ginfo.stacks
-
-
@@ -836 +843 @@
-        $(".zoomStream").html('Streaming!').fadeIn('slow');
-        $(".stream-log").removeAttr("style").html("stream log_");
-
+ginfo.
-      }
-      else if(streaming) {
@@ -843 +850 @@
-        $(".zoomStream").html('Stream Data').fadeIn('slow');
-        $(".stream-log").attr("style", "display:none;");
-id
+ginfo.id, stacks: ginfo.stacks
-      }
-    }); //end stream click function
@@ -850 +857 @@
-      $(".datechoice").removeClass("selected");
-      $(this).addClass("selected");
-id
+ginfo.id, stacks: ginfo.stacks
-      return false;
-    });
-
+
+
+
-
-  function lock_wforms() {
@@ -936 +945 @@
-            g.type = j.type;
-            g.graphid = j.id;
+            g.stacks = j.stacks;
-            var o = make_ws_graph(g);
-            ul.append($('<li/>').append(o));
@@ -963 +973 @@
-          g.type = j.type;
-          g.graphid = j.id;
+          g.stacks = j.stacks;
-          var o = make_ws_graph(g);
-          var ul = $("ul#worksheet-graphs");

ui/web/lib/Reconnoiter_flot_Driver.php

@@ -63 +63 @@
-    //each dataset needs to have each point set for this stacking to work
-    //non numeric metric are given the value 0 above, so that if stacked, they show up on the plot-line itself
-
+/*
-        $left_count = 0; $bottom = -1; $index=0;
-        foreach($this->sets as $name => $set) { 
@@ -81 +81 @@
-        }
-    }//end if stacking
-
+
-    $start_ts = $a[0]['data'][0][0];
-    $finish = end($a[0]['data']);