Viz: improve events display

This commit is contained in:
2019-02-12 10:23:01 -08:00
parent 8197617da7
commit 0a599e7cff
2 changed files with 37 additions and 18 deletions

View File

@ -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 chartHeight = 50;
static int chartWidth = canvasWidth - 60;
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,24 +74,43 @@ 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()) {
log.debug("event: {} / {}", entry.getKey(), entry.getValue());
long tickTime = entry.getKey().getMillis();
List<DateTime> times = new ArrayList<>(events.keySet());
Collections.sort(times);
for (DateTime key : times) {
long tickTime = key.getMillis();
float x = (tickTime - minTime) / xscale;
log.debug("adding point {}", x);
points.add(x);
// TODO: check for multiple
float y = 0;
if (tickTime - lastTickTime < 1000) {
y = lastY - 5;
}
log.debug("adding point {},{}", x, y);
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;
}

View File

@ -10,8 +10,8 @@
margin: 20px;
}
.chartline {
stroke: black;
stroke-width: 2;
stroke: hsl(0, 0%, 50%);
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})|">
<line class="chartline" x1="0" x2="0" y1="0" th:y2="${height}" />
th:transform="|translate(${chartstartx}, ${starty + (chartHeight + margin) * iterstat.index})|">
<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>