home/pinpoint
2
0
Fork 0
mirror of https://github.com/wahyd4/pinpoint.git synced 2026-08-19 01:35:58 +10:00
Code Issues Packages Projects Releases Wiki Activity

remove no active thread message and add vertical grid in realtime chart.

Browse Source
This commit is contained in:
denz
2015-11-27 15:58:18 +09:00
parent 4b12af367c
commit d17a20bd4e
2 changed files with 73 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/main/webapp/features/realtimeChart/realtime-chart.directive.js
+64 -38
View File
@@ -24,7 +24,8 @@
TIMEOUT: 211
},
consts: {
maxDealyCount: 5
maxDealyCount: 5,
verticalGridCount: 5
},
message: {
NO_ACTIVE_THREAD: "No Active Thread",
@@ -76,9 +77,11 @@
var chartDataQueue = [];
var timeoutCount = 0;
var delayCount = 0;
var verticalGridGap = parseInt( chartInnerWidth / (cfg.consts.verticalGridCount - 1) );
var tickCount = 1;
initChartData();
var d3svg, d3svgX, d3svgY, d3grid, d3path, d3area, d3labels, d3totalLabel, d3tooltip, d3tooltipTextGroup, d3tooltipDate, d3errorLabel, d3errorLabelSpan1, d3errorLabelSpan2;
var d3svg, d3svgX, d3svgY, d3HGrid, d3VGrid, d3VGridLines, d3path, d3area, d3labels, d3totalLabel, d3tooltip, d3tooltipTextGroup, d3tooltipDate, d3errorLabel, d3errorLabelSpan1, d3errorLabelSpan2;
var d3stack = d3.layout.stack().y(function(d) { return d.y; });
var d3transition = d3.select({}).transition().duration(oInnerOption.transaction.duration).ease(oInnerOption.transaction.ease);
d3stack(chartDataQueue);
@@ -112,15 +115,18 @@
chartDataQueue.length = 0;
var now = Date.now();
for( var i = 0 ; i < oOuterOption.requestLabel.length ; i++ ) {
chartDataQueue.push( d3.range(oOuterOption.xAxisCount).map(function() { return { y: 0, d: now }; }) );
chartDataQueue.push( d3.range(oOuterOption.xAxisCount).map(function() { return { y: 0, d: now }; }) );
}
}
function initAxis() {
d3svgX = d3.scale.linear().domain(oInnerOption.domain).range([0, chartInnerWidth]);
if ( oOuterOption.showExtraInfo ) {
d3svg.append("g").attr("class", "y axis");
}
d3grid = d3svg.append("g");
} else {
d3VGrid = d3svg.append("g").attr("class", "v-grid");
resetVGrid();
}
d3HGrid = d3svg.append("g").attr("class", "h-grid");
resetYAxis();
}
function resetYAxis() {
@@ -128,10 +134,24 @@
if ( oOuterOption.showExtraInfo ) {
d3svg.selectAll("g.y.axis")
.call( d3.svg.axis().scale(d3svgY).ticks(3).orient("left").tickFormat(oInnerOption.yAxisFormat) );
}
resetGrid();
}
resetHGrid();
}
function resetGrid() {
function resetVGrid() {
var aData = [];
for( var i = 0 ; i < cfg.consts.verticalGridCount ; i++ ) {
aData.push( verticalGridGap * i );
}
d3VGridLines = d3VGrid.selectAll("line").data(aData).enter().append("line")
.attr("class", "grid").attr({
x1: function(d) { return d; },
x2: function(d) { return d; },
y1: -10,
y2: chartInnerHeight
})[0];
}
function resetHGrid() {
var gridValue = [];
var aTarget = d3svg.select("g.y.axis").selectAll("g.tick");
if ( aTarget.length == 0 ) return;
@@ -139,7 +159,7 @@
jQuery.each( aTarget[0], function( index, ele ) {
gridValue.push( parseFloat( ele.getAttribute("transform").replace(/translate\(0,(-?[0-9.]*)\)/, "$1") ) );
});
var elements = d3grid.selectAll("line").data(gridValue);
var elements = d3HGrid.selectAll("line").data(gridValue);
elements.enter()
.append("line")
@@ -158,10 +178,10 @@
.transition()
.attr("x1", 0)
.attr("x2", chartInnerWidth)
.attr("y1", function(d, i) {
.attr("y1", function(d) {
return d;
})
.attr("y2", function(d, i) {
.attr("y2", function(d) {
return d;
});
@@ -219,7 +239,7 @@
.attr("fill", function(d, i) {
return oOuterOption.requestColor[i];
})
.attr("text-acchor", "end")
.attr("text-anchor", "end")
.text(function(d, i) {
return oOuterOption.requestLabel[i];
});
@@ -265,7 +285,7 @@
});
d3tooltipDate.text( oInnerOption.timeFormat(new Date(datum[0].d)) );
}
function initLabels( datum ) {
function initLabels() {
if ( oOuterOption.showExtraInfo === false ) return;
d3svg.append("g")
@@ -326,9 +346,7 @@
.attr("fill", function(d, i) {
return oOuterOption.requestColor[i];
})
.text(function(d, i) {
return "0";
});
.text("0");
}
function initErrorLabel() {
d3errorLabel = d3svg.append("text")
@@ -370,7 +388,7 @@
d3transition = d3transition.each(function() {
delayCount++;
if ( passingQueue.length === 0 ) {
if ( delayCount > cfg.maxDalyCount ) {
if ( delayCount > cfg.consts.maxDealyCount ) {
setErrorMessage( false, [cfg.message.NO_RESPONSE]);
}
return;
@@ -378,8 +396,11 @@
delayCount = 0;
var aNewData = passingQueue.shift();
resetLabelData( aNewData );
resetLabelData( aNewData );
resetYAxis();
if ( oOuterOption.showExtraInfo === false ) {
redrawVGrid();
}
var i = 0;
for( i = 0 ; i < chartDataQueue.length ; i++ ) {
@@ -387,7 +408,7 @@
}
d3stack(chartDataQueue);
initArea();
redrawPath();
redrawPath();
for( i = 0 ; i < chartDataQueue.length ; i++ ) {
chartDataQueue[i].shift();
}
@@ -396,6 +417,28 @@
tick();
});
}
function redrawVGrid() {
var maxGridX = 0;
for( var i = 0 ; i < d3VGridLines.length ; i++ ) {
maxGridX = Math.max( maxGridX, parseInt( d3.select(d3VGridLines[i]).attr("x1") ) );
}
var newX = d3svgX(0) * tickCount++;
var nextGridX = maxGridX + verticalGridGap;
d3VGrid.transition().attr("transform", "translate("+ newX + ")").each("end", function() {
for( var i = 0 ; i < d3VGridLines.length ; i++ ) {
var d3Elem = d3.select(d3VGridLines[i]);
var x1 = parseInt( d3Elem.attr("x1") );
if ( x1 < Math.abs( newX ) ) {
d3Elem.attr({
x1: nextGridX,
x2: nextGridX
});
nextGridX += verticalGridGap;
}
}
});
}
function redrawPath() {
d3path.data(chartDataQueue)
.attr("d", d3area)
@@ -404,22 +447,6 @@
.attr("transform", "translate(" + d3svgX(0) + ")");
}
tick();
function checkSleeping() {
if ( oOuterOption.showExtraInfo ) return;
var bHasData = false;
for( var i = 0 ; i < chartDataQueue.length ; i++ ) {
var aInner = chartDataQueue[i];
for( var j = 0 ; j < aInner.length ; j++ ) {
if ( aInner[j].y !== 0 ) {
bHasData = true;
break;
}
}
}
if ( bHasData === false ) {
setErrorMessage( false, [cfg.message.NO_ACTIVE_THREAD]);
}
}
scope.$on('realtimeChartDirective.onData.' + oOuterOption.namespace, function (event, aNewRequestCount, timeStamp, yValue, bAllError) {
maxY = yValue;
@@ -432,7 +459,6 @@
d: timeStamp
}
}) );
checkSleeping();
}
});
scope.$on('realtimeChartDirective.onError.' + oOuterOption.namespace, function (event, oError, timeStamp, yValue) {
@@ -440,7 +466,7 @@
if ( oError.code === cfg.responseCode.TIMEOUT ) {
if ( timeoutCount < oOuterOption.timeoutMaxCount ) {
passingQueue.push( chartDataQueue[chartDataQueue.length - 1] );
checkSleeping();
//checkSleeping();
} else {
setErrorMessage( true, oError.message.split("_") );
}
@@ -457,7 +483,7 @@
element.html("");
resetLabelData([{}, {}, {}, {}]);
d3stack(chartDataQueue);
initChart();
initAxis();
initArea();
web/src/main/webapp/styles/serverMap.css
+9 -2
View File
@@ -230,11 +230,15 @@
font: 8px sans-serif;
display: block;
}
.realtime .agent-sum-chart .axis path, .axis line, .agent-chart-list .axis path, .axis line {
.realtime .agent-sum-chart .axis path, .agent-chart-list .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.realtime .axis line {
stroke: #000;
stroke-opaticy: 0.1;
}
.realtime .agent-sum-chart .guideLine, .agent-chart-list .guideLine {
fill: none;
stroke: #000;
@@ -243,6 +247,10 @@
.realtime .agent-sum-chart .x.axis area, .agent-chart-list .x.axis area {
shape-rendering: auto;
}
.realtime .agent-chart-list .x.axis path {
stroke: #AAA;
}
.realtime .agent-sum-chart .area, .agent-chart-list .area {
stroke: none;
stroke-width: 1.5px;
@@ -293,6 +301,5 @@
}
.realtime .grid {
stroke: rgba(200, 200, 200, 0.4);
stroke-dasharray: 4, 2;
shape-rendering: crispEdges;
}