show commits count when hover chart on stats page

Dmitriy Zaporozhets
1 parent d9ab7ba6
Showing 3 changed files with 20 additions and 7 deletions Show diff stats
app/assets/javascripts/chart.js.coffee
app/assets/stylesheets/common.scss
app/views/repositories/stats.html.haml
@@ -4,9 +4,18 @@
   init: (labels, values, title) ->
     r = Raphael('activity-chart')
+
+    fin = ->
+      @flag = r.popup(@bar.x, @bar.y, @bar.value or "0").insertBefore(this)
+
+    fout = ->
+      @flag.animate
+        opacity: 0, 300, -> @remove()
+
     r.text(160, 10, title).attr font: "13px sans-serif"
     r.barchart(
-      10, 10, 400, 160,
+      10, 20, 560, 200,
       [values],
       {colors:["#456"]}
     ).label(labels, true)
+      .hover(fin, fout)
@@ -555,3 +555,8 @@ img.emoji {
   text-shadow: 0 1px 1px #111;
   font-weight: normal;
 }
+
+.chart {
+  overflow: hidden;
+  height: 220px;
+}
 = render "commits/head"
 .row
-  .span5
-    %h4
-      Stats:
+  .span6
+    %div#activity-chart.chart
+    %hr
     %p
       %b Total commits:
       %span= @stats.commits_count
@@ -13,9 +13,8 @@
       %b Authors:
       %span= @stats.authors_count
-    %br
-    %div#activity-chart
-  .span7
+
+  .span6
     %h4 Top 50 Committers:
     %ol.styled
       - @stats.authors[0...50].each do |author|
	@@ -4,9 +4,18 @@		@@ -4,9 +4,18 @@
4		4
5	init: (labels, values, title) ->	5	init: (labels, values, title) ->
6	r = Raphael('activity-chart')	6	r = Raphael('activity-chart')
		7	+
		8	+ fin = ->
		9	+ @flag = r.popup(@bar.x, @bar.y, @bar.value or "0").insertBefore(this)
		10	+
		11	+ fout = ->
		12	+ @flag.animate
		13	+ opacity: 0, 300, -> @remove()
		14	+
7	r.text(160, 10, title).attr font: "13px sans-serif"	15	r.text(160, 10, title).attr font: "13px sans-serif"
8	r.barchart(	16	r.barchart(
9	- 10, 10, 400, 160,	17	+ 10, 20, 560, 200,
10	[values],	18	[values],
11	{colors:["#456"]}	19	{colors:["#456"]}
12	).label(labels, true)	20	).label(labels, true)
		21	+ .hover(fin, fout)
	@@ -555,3 +555,8 @@ img.emoji {		@@ -555,3 +555,8 @@ img.emoji {
555	text-shadow: 0 1px 1px #111;	555	text-shadow: 0 1px 1px #111;
556	font-weight: normal;	556	font-weight: normal;
557	}	557	}
		558	+
		559	+.chart {
		560	+ overflow: hidden;
		561	+ height: 220px;
		562	+}