Viz: improve events display

src/main/java/ats/viz/Viz.java

@@ -7,6 +7,7 @@ import java.io.FileWriter;
 import java.io.IOException;
 import java.math.BigDecimal;
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Locale;
@@ -39,15 +40,14 @@ public class Viz {
     static final DateTimeFormatter formatter = DateTimeFormat.forPattern("E MMM d, yyyy, HH:mm:ss.SSS");
     static int canvasWidth = 1000;
     static int canvasHeight = 1000;
-    static int chartWidth = canvasWidth - 50;
+    static int chartWidth = canvasWidth - 60;
-    static int chartHeight = 50;
+    static int chartHeight = 150;
     DateTime startTime;
     DateTime endTime;
     BigDecimal midMin;
     BigDecimal midMax;
     List<Map<String, Object>> ticks = new ArrayList<>();
     Map<String, List<Map<String, Object>>> bars = new HashMap<>();
-    // Map<String, List<Map<String, Object>>> events = new HashMap<>();
     Map<String,EventSequence> events = new HashMap<>();
 
 
@@ -74,25 +74,44 @@ public class Viz {
             myevents.add(e);
         }
 
-        public List<Float> timePoints() {
+        public List<Float[]> timePoints() {
             long minTime = startTime.getMillis();
             long maxTime = endTime.getMillis();
             long timespan = maxTime - minTime;
             float xscale = timespan / chartWidth;
+            long lastTickTime = 0;
+            float lastY = 0;
 
-            List<Float> points = new ArrayList<>();
+            List<Float[]> points = new ArrayList<>();
             log.debug("{} events", events.size());
-            for (Map.Entry<DateTime, List<Map<String,Object>>> entry : events.entrySet()) {
+            List<DateTime> times = new ArrayList<>(events.keySet());
-                log.debug("event: {} / {}", entry.getKey(), entry.getValue());
+            Collections.sort(times);
-                long tickTime = entry.getKey().getMillis();
+
+            for (DateTime key : times) {
+                long tickTime = key.getMillis();
 
                 float x = (tickTime - minTime) / xscale;
-                log.debug("adding point {}", x);
+                float y = 0;
-                points.add(x);
+                if (tickTime - lastTickTime < 1000) {
+                    y = lastY - 5;
+                }
+                log.debug("adding point {},{}", x, y);
 
-                // TODO: check for multiple
+                Float[] point = new Float[2];
+                point[0] = x;
+                point[1] = y;
+                points.add(point);
+
+                lastTickTime = tickTime;
+                lastY = y;
             }
 
+            Collections.sort(points, Collections.reverseOrder((f1, f2) -> {
+                int c = f1[0].compareTo(f2[0]);
+                if (c != 0) return c;
+                return f1[1].compareTo(f2[1]);
+            }));
+
             return points;
         }
     }

src/main/resources/viz/templates/test.html

@@ -10,8 +10,8 @@
          margin: 20px;
      }
      .chartline {
-         stroke: black;
+         stroke: hsl(0, 0%, 50%);
-         stroke-width: 2;
+         stroke-width: 1;
      }
      .tickline {
          stroke: hsl(240, 100%, 50%);
@@ -59,17 +59,17 @@
       </defs>
 
       <g id="bars"
-         th:with="starty=0,height=50,margin=25"
+         th:with="starty=0,margin=25"
          th:each="data,iterstat : ${bars}">
         <g class="bar"
-           th:transform="|translate(${chartstartx}, ${starty + (height + margin) * iterstat.index})|">
+           th:transform="|translate(${chartstartx}, ${starty + (chartHeight + margin) * iterstat.index})|">
-          <line class="chartline" x1="0" x2="0" y1="0" th:y2="${height}" />
+          <line class="chartline" x1="0" x2="0" y1="0" th:y2="${chartHeight}" />
           <polyline class="tickline" th:points="${tickpoints}" />
         </g>
       </g>
 
       <g id="events"
-         th:with="starty=80,height=10,margin=10"
+         th:with="starty=${chartHeight + 40},height=20,margin=10"
          th:each="eventseq,iterstat : ${events}">
         <g class="eventgroup"
            th:transform="|translate(0, ${starty + (height + margin) * iterstat.index})|">
@@ -82,7 +82,7 @@
             <!-- points -->
             <g id="eventpoints"
                th:each="point : ${eventseq.value.timePoints()}">
-              <use th:x="${point}" xlink:href="#event" />
+              <use th:x="${point[0]}" th:y="${point[1]}" xlink:href="#event" />
             </g>
           </g>
         </g>