mirror of
https://github.com/ClickHouse/ClickHouse.git
synced 2024-11-24 00:22:29 +00:00
more improvements
This commit is contained in:
Sergei Trifonov
parent
1d9bcb5993
commit
85dd3afa2b
@ -8,7 +8,6 @@
|
||||
}
|
||||
|
||||
rect.zoom-panel {
|
||||
/*cursor: ew-resize;*/
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
@ -20,18 +19,18 @@ rect.zoom-panel {
|
||||
}
|
||||
|
||||
.axis.y {
|
||||
font-size: 16px;
|
||||
font-size: 9px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.axis.x {
|
||||
font-size: 16px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
#ruler {
|
||||
text-anchor: middle;
|
||||
alignment-baseline: before-edge;
|
||||
font-size: 16px;
|
||||
font-size: 9px;
|
||||
font-family: sans-serif;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -14,12 +14,22 @@
|
||||
<script language="javascript" type="text/javascript" src="js/d3.v4.min.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="js/d3-tip-0.8.0-alpha.1.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="js/d3-gantt.js"></script>
|
||||
<div class="container-fluid" id="toolbar" style="margin:20px;margin-right:50px">
|
||||
<div class="pull-right">
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">ClickHouse trace-visualizer</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<form class="navbar-form navbar-left">
|
||||
<button type="button" class="btn btn-primary" id="toolbar-load" data-toggle="modal" data-target="#loadModal">Load</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="placeholder" class="chart-placeholder"></div>
|
||||
|
||||
<div class="modal fade" id="loadModal" tabindex="-1" role="dialog" aria-labelledby="loadModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
@ -42,21 +52,36 @@
|
||||
</html>
|
||||
|
||||
<script language="javascript">
|
||||
var example_json = [
|
||||
{ t1: 100, t2: 200, band: "band1", color: "#888", text: "text1" },
|
||||
{ t1: 300, t2: 400, band: "band2", color: "#ff8", text: "text2" },
|
||||
{ t1: 100, t2: 400, band: "band3", color: "#888", text: "some very long text with a lot of letters in it" },
|
||||
{ t1: 300, t2: 400, band: "band1", color: "#8ff", text: "some_very_long_identifier_with_a_lot_of_letters_in_it" },
|
||||
{ t1: 500, t2: 800, band: "band2", color: "#f8f", text: "test\nif\nnew\nline\nworks\nhere?" }
|
||||
];
|
||||
var example_json = [];
|
||||
var example_colors = ["#f88", "#8f8", "#88f", "#888", "#aaa"];
|
||||
for (let i = 0; i < 1024; i++) {
|
||||
example_json.push({
|
||||
t1: i + 50 - Math.random() * 60,
|
||||
t2: i + 50 + Math.random() * 60,
|
||||
band: "band" + (i % 128),
|
||||
color: example_colors[i % example_colors.length],
|
||||
text: "it is span #" + i
|
||||
});
|
||||
}
|
||||
example_json.bands = new Set(example_json.map(x => x.band));
|
||||
example_json.max_time_ms = Math.max(...example_json.map(x => x.t2));
|
||||
|
||||
let chart_height = window.innerHeight - $("#placeholder")[0].getBoundingClientRect().y - 80;
|
||||
var data = null;
|
||||
var chart = null;
|
||||
|
||||
function renderChart(parsed) {
|
||||
data = parsed;
|
||||
chart = d3.gantt().height(chart_height).selector("#placeholder");
|
||||
if (chart != null) {
|
||||
chart.destroy();
|
||||
}
|
||||
let view_height = window.innerHeight - $("#placeholder")[0].getBoundingClientRect().y - 40;
|
||||
let data_height = parsed.bands.size * 8;
|
||||
chart = d3.gantt()
|
||||
.height(Math.max(view_height, data_height))
|
||||
.view_height(view_height)
|
||||
.selector("#placeholder")
|
||||
.timeDomain([0, parsed.max_time_ms])
|
||||
;
|
||||
chart(data);
|
||||
}
|
||||
|
||||
@ -139,18 +164,22 @@
|
||||
}
|
||||
|
||||
let result = [];
|
||||
let bands = new Set();
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
let span = json.data[i];
|
||||
let band = Object.values(span.group).join(' ');
|
||||
bands.add(band);
|
||||
result.push({
|
||||
t1: convertTime(+span.start_time_us),
|
||||
t2: convertTime(+span.finish_time_us),
|
||||
band: Object.values(span.group).join(' '),
|
||||
band,
|
||||
color: d3.interpolateRainbow((strHash(span.color) % 256) / 256),
|
||||
text: span.operation_name
|
||||
});
|
||||
}
|
||||
|
||||
chart.timeDomain([0, max_time_ms]);
|
||||
result.bands = bands;
|
||||
result.max_time_ms = max_time_ms;
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
53
utils/trace-visualizer/js/d3-gantt.js
vendored
53
utils/trace-visualizer/js/d3-gantt.js
vendored
@ -8,9 +8,6 @@
|
||||
|
||||
initAxis();
|
||||
|
||||
// clear previous chart (if any)
|
||||
d3.select(selector).selectAll("svg").remove();
|
||||
|
||||
// create svg element
|
||||
svg = d3.select(selector)
|
||||
.append("svg")
|
||||
@ -40,6 +37,7 @@
|
||||
.on("zoom", function() {
|
||||
if (tipShown != null) {
|
||||
tip.hide(tipShown);
|
||||
tipShown = null;
|
||||
}
|
||||
var tr = d3.event.transform;
|
||||
xZoomed = tr.rescaleX(x);
|
||||
@ -54,7 +52,7 @@
|
||||
zoomContainer1.attr("transform", "translate(" + tr.x + ",0) scale(" + tr.k + ",1)");
|
||||
zoomContainer2.attr("transform", "translate(" + tr.x + ",0) scale(" + tr.k + ",1)");
|
||||
|
||||
render();
|
||||
//render();
|
||||
})
|
||||
.on("start", function() {
|
||||
zoom.startScreenY = d3.event.sourceEvent.screenY;
|
||||
@ -119,6 +117,12 @@
|
||||
.call(xAxis)
|
||||
;
|
||||
|
||||
// ruler should be drawn above x axis and under y axis
|
||||
ruler = fixedContainer.append("g")
|
||||
.attr("id", "ruler")
|
||||
.attr("transform", "translate(0, 0)")
|
||||
;
|
||||
|
||||
// create y axis
|
||||
fixedContainer.append("g")
|
||||
.attr("class", "y axis")
|
||||
@ -189,10 +193,6 @@
|
||||
;
|
||||
|
||||
// ruler
|
||||
ruler = fixedContainer.append("g")
|
||||
.attr("id", "ruler")
|
||||
.attr("transform", "translate(0, 0)")
|
||||
;
|
||||
ruler.append("rect")
|
||||
.attr("id", "ruler-line")
|
||||
.attr("x", 0)
|
||||
@ -221,10 +221,9 @@
|
||||
|
||||
// scroll handling
|
||||
window.onscroll = function myFunction() {
|
||||
documentBodyScrollLeft(document.body.scrollLeft);
|
||||
documentBodyScrollTop(document.body.scrollTop);
|
||||
documentBodyScrollLeft(window.scrollX);
|
||||
documentBodyScrollTop(window.scrollY);
|
||||
var scroll = scrollParams();
|
||||
|
||||
svgChartContainer
|
||||
.attr("transform", "translate(" + margin.left
|
||||
+ ", " + (margin.top + scroll.y1) + ")");
|
||||
@ -285,7 +284,7 @@
|
||||
.attr("class", "bar")
|
||||
.attr("vector-effect", "non-scaling-stroke")
|
||||
.style("fill", d => d.color)
|
||||
.on('click', function(d) {
|
||||
.on('mouseover', function(d) {
|
||||
if (tipShown != d) {
|
||||
tipShown = d;
|
||||
tip.show(d);
|
||||
@ -317,12 +316,11 @@
|
||||
//.clamp(true); // dosn't work with zoom/pan
|
||||
xZoomed = x;
|
||||
y = d3.scaleBand()
|
||||
.domain(Object.values(data).map(d => d.band).sort())
|
||||
.rangeRound([0, height - margin.top - margin.bottom])
|
||||
.padding(0.5);
|
||||
.domain([...data.bands])
|
||||
.range([1, height - margin.top - margin.bottom])
|
||||
.padding(1/8);
|
||||
xAxis = d3.axisBottom()
|
||||
.scale(x)
|
||||
//.tickSubdivide(true)
|
||||
.tickSize(8)
|
||||
.tickPadding(8);
|
||||
yAxis = d3.axisLeft()
|
||||
@ -334,7 +332,7 @@
|
||||
var documentBodyScrollLeft = function(value) {
|
||||
if (!arguments.length) {
|
||||
if (documentBodyScrollLeft.value === undefined) {
|
||||
documentBodyScrollLeft.value = document.body.scrollLeft;
|
||||
documentBodyScrollLeft.value = window.scrollX;
|
||||
}
|
||||
return documentBodyScrollLeft.value;
|
||||
} else {
|
||||
@ -346,7 +344,7 @@
|
||||
var documentBodyScrollTop = function(value) {
|
||||
if (!arguments.length) {
|
||||
if (!documentBodyScrollTop.value === undefined) {
|
||||
documentBodyScrollTop.value = document.body.scrollTop;
|
||||
documentBodyScrollTop.value = window.scrollY;
|
||||
}
|
||||
return documentBodyScrollTop.value;
|
||||
} else {
|
||||
@ -356,7 +354,7 @@
|
||||
|
||||
var scrollParams = function() {
|
||||
var y1 = documentBodyScrollTop();
|
||||
var y2 = y1 + window.innerHeight - margin.footer;
|
||||
var y2 = y1 + view_height;
|
||||
y2 = Math.min(y2, height - margin.top - margin.bottom);
|
||||
var h = y2 - y1;
|
||||
return {
|
||||
@ -404,7 +402,7 @@
|
||||
var textWidth = 10 * posText.length;
|
||||
ruler.select("#bgrect")
|
||||
.attr("x", -textWidth/2 - xpadding)
|
||||
.attr("y", positionRuler.bbox.y - ypadding)
|
||||
.attr("y", positionRuler.bbox.y - ypadding + window.scrollY)
|
||||
.attr("width", textWidth + (xpadding*2))
|
||||
.attr("height", positionRuler.bbox.height + (ypadding*2))
|
||||
;
|
||||
@ -428,6 +426,13 @@
|
||||
return gantt;
|
||||
}
|
||||
|
||||
gantt.view_height = function(value) {
|
||||
if (!arguments.length)
|
||||
return view_height;
|
||||
view_height = +value;
|
||||
return gantt;
|
||||
}
|
||||
|
||||
gantt.selector = function(value) {
|
||||
if (!arguments.length)
|
||||
return selector;
|
||||
@ -447,12 +452,18 @@
|
||||
return data;
|
||||
}
|
||||
|
||||
gantt.destroy = function() {
|
||||
tip.destroy();
|
||||
d3.select(selector).selectAll("svg").remove();
|
||||
}
|
||||
|
||||
// constructor
|
||||
|
||||
// Config
|
||||
var margin = { top: 20, right: 40, bottom: 20, left: 200, footer: 100 },
|
||||
var margin = { top: 0, right: 30, bottom: 20, left: 150 },
|
||||
height = document.body.clientHeight - margin.top - margin.bottom - 5,
|
||||
width = document.body.clientWidth - margin.right - margin.left - 5,
|
||||
view_height = window.innerHeight,
|
||||
selector = 'body',
|
||||
timeDomainStart = 0,
|
||||
timeDomainEnd = 1000,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user