From 803f6debed7de0109a95f2f700da2acebb7d195a Mon Sep 17 00:00:00 2001
From: Chisu Yu <puseori9th@gmail.com>
Date: Thu, 16 May 2013 06:00:25 +0000
Subject: [PATCH] =?UTF-8?q?[=EC=9C=A0=EC=B9=98=EC=88=98]=20[PINPOINT-205]?=
 =?UTF-8?q?=20histogram=20summary=EB=A5=BC=20=EB=B3=B4=EC=97=AC=EC=A3=BC?=
 =?UTF-8?q?=EA=B8=B0=EC=9C=84=ED=95=9C=20bar=20chart=20=EC=B6=94=EA=B0=80.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

git-svn-id: http://svn.bds.nhncorp.com/pe/hippo-web/trunk@1682 84d0f5b1-2673-498c-a247-62c4ff18d310
---
 src/main/webapp/barData.json                  | 23 +++++++++++++++++++
 .../webapp/common/js/pinpoint/chart-bar.js    | 23 +++++++++++++++++++
 .../common/js/pinpoint/chart-servermap.js     |  3 ++-
 .../common/js/pinpoint/chart-stacked.js       |  2 +-
 src/main/webapp/index.html                    | 10 +++++---
 5 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/main/webapp/barData.json
 create mode 100644 src/main/webapp/common/js/pinpoint/chart-bar.js

diff --git a/src/main/webapp/barData.json b/src/main/webapp/barData.json
new file mode 100644
index 000000000..aa5ce465a
--- /dev/null
+++ b/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
+			} 
+		]
+	}
+]
\ No newline at end of file
diff --git a/src/main/webapp/common/js/pinpoint/chart-bar.js b/src/main/webapp/common/js/pinpoint/chart-bar.js
new file mode 100644
index 000000000..3e8108109
--- /dev/null
+++ b/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;
+		});
+	});
+}
\ No newline at end of file
diff --git a/src/main/webapp/common/js/pinpoint/chart-servermap.js b/src/main/webapp/common/js/pinpoint/chart-servermap.js
index 836f77653..93a6708fa 100644
--- a/src/main/webapp/common/js/pinpoint/chart-servermap.js
+++ b/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();
 }
\ No newline at end of file
diff --git a/src/main/webapp/common/js/pinpoint/chart-stacked.js b/src/main/webapp/common/js/pinpoint/chart-stacked.js
index a2d257924..497eba8d2 100644
--- a/src/main/webapp/common/js/pinpoint/chart-stacked.js
+++ b/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) {
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index 5fd66d5ec..0410d167a 100644
--- a/src/main/webapp/index.html
+++ b/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 -->