[유치수] [PINPOINT-205] histogram summary를 보여주기위한 bar chart 추가.

git-svn-id: http://svn.bds.nhncorp.com/pe/hippo-web/trunk@1682 84d0f5b1-2673-498c-a247-62c4ff18d310

src/main/webapp/barData.json

@@ -0,0 +1,23 @@
+[ 
+	{
+		"key" : "Cumulative Return",
+		"values" : [
+			{ 
+				"label" : "<= 1000ms",
+				"value" : 220
+			}, 
+			{ 
+				"label" : "<= 3000ms",
+				"value" : 110
+			}, 
+			{ 
+				"label" : "<= 5000ms",
+				"value" : 50
+			}, 
+			{ 
+				"label" : "> 5000ms" ,
+				"value" : 30
+			} 
+		]
+	}
+]

src/main/webapp/common/js/pinpoint/chart-bar.js

@@ -0,0 +1,23 @@
+function showLinkHistogramSum() {
+	$("#linkInfoBarChart").show();
+
+	d3.json('/barData.json', function(data) {
+		nv.addGraph(function() {
+			var chart = nv.models.discreteBarChart().x(function(d) {
+				return d.label
+			}).y(function(d) {
+				return d.value
+			}).staggerLabels(true).tooltips(false).showValues(true)
+	
+			d3.select('#linkInfoBarChart svg')
+					.datum(data)
+					.transition()
+					.duration(500)
+					.call(chart);
+	
+			nv.utils.windowResize(chart.update);
+	
+			return chart;
+		});
+	});
+}

src/main/webapp/common/js/pinpoint/chart-servermap.js

@@ -424,5 +424,6 @@ var linkClickHandler = function(e, query, data, containerId) {
 	data.query = query;
 	$('#linkInfoDetails').empty();
 	$('#linkInfoDetails').append($('#LinkInfoBox').tmpl(data));
-	showLinkHistogram();
+	showLinkHistogramDetailed();
+	showLinkHistogramSum();
 }

src/main/webapp/common/js/pinpoint/chart-stacked.js

@@ -1,5 +1,5 @@
 
-function showLinkHistogram() {
+function showLinkHistogramDetailed() {
 	$("#linkInfoChart").show();
 	
 	d3.json('/stackedTestData.json', function(data) {

src/main/webapp/index.html

@@ -47,10 +47,11 @@
     <script type="text/javascript" src="/common/js/pinpoint/servermap/canvas.roundRect.js"></script>
     <script type="text/javascript" src="/common/js/pinpoint/servermap/jquery.ServerMap.js"></script>
     
-    <!-- stacked area chart -->
+    <!-- link info chart -->
     <script type="text/javascript" src="/common/js/nvd3/d3.v2.min.js"></script>
     <script type="text/javascript" src="/common/js/nvd3/nv.d3.min.js"></script>
     <script type="text/javascript" src="/common/js/pinpoint/chart-stacked.js"></script>
+    <script type="text/javascript" src="/common/js/pinpoint/chart-bar.js"></script>
     
     <!-- requests list -->
     <script type="text/javascript" src="/common/js/pinpoint/chart-transactions.js"></script>
@@ -119,7 +120,6 @@
 	</div>
 	<div class="chart-right">
 		<div id="scatterChartContainer" style="display:none;">
-			<h5 id="scattercharttitle">Transaction response scatter</h5>
 			<span onclick="" style="text-decoration:underline;cursor:pointer">Show all transactions</span>
 			&nbsp;&nbsp;&nbsp;
 			<i class="icon-fullscreen" onclick="expandScatter($(this));" onmouseover="$(this).tooltip('show');" title="Expand to new popup window." style="cursor:pointer;"></i>
@@ -131,9 +131,13 @@
 		<div id="linkInfoDetails">
 		</div>
 		<div id='linkInfoChart' style='width:100%;display:none'>
-			DEMO
+			DEMO (timeseries response histogram)
 			<svg style='height:200px' />
 		</div>
+		<div id='linkInfoBarChart' style='width:100%;display:none'>
+			DEMO (response histogram summary)
+			<svg style='height:150px' />
+		</div>
 	</div>
 </div>
 <!-- END OF BODY -->