SONAR-2074 Improve timeline widget

- Add top and bottom "padding" inside the graph for better readibility
- Display a message if only 1 snapshot available
- Display the "legend" under the graph with localized metric names
- Add possibility to specify widget height in the options
- Select first the last snapshot values when rendering the widget
- Add date label (localized)

3 files changed, 62 insertions, 23 deletions

diff --git a/plugins/sonar-core-plugin/src/main/java/org/sonar/plugins/core/widgets/TimelineWidget.java b/plugins/sonar-core-plugin/src/main/java/org/sonar/plugins/core/widgets/TimelineWidget.java
index 6faba17f939..0569f5ff6d5 100644
--- a/plugins/sonar-core-plugin/src/main/java/org/sonar/plugins/core/widgets/TimelineWidget.java
+++ b/plugins/sonar-core-plugin/src/main/java/org/sonar/plugins/core/widgets/TimelineWidget.java
@@ -31,7 +31,8 @@ import org.sonar.api.web.WidgetPropertyType;
         @WidgetProperty(key = "metric1", type = WidgetPropertyType.METRIC),
         @WidgetProperty(key = "metric2", type = WidgetPropertyType.METRIC),
         @WidgetProperty(key = "metric3", type = WidgetPropertyType.METRIC),
-        @WidgetProperty(key = "displayEvents", type = WidgetPropertyType.BOOLEAN)
+        @WidgetProperty(key = "displayEvents", type = WidgetPropertyType.BOOLEAN),
+        @WidgetProperty(key = "widgetHeight", type = WidgetPropertyType.INTEGER)
     }
 )
 public class TimelineWidget extends AbstractRubyTemplate implements RubyRailsWidget {
diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/timeline.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/timeline.html.erb
index 1c2f6ffc520..a8d8d10ee45 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/timeline.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/timeline.html.erb
@@ -1,43 +1,64 @@
 <%= javascript_include_tag 'protovis-sonar' %>
 <%
   metric_data_map = {}
+  metric_name_map = {}
   (1..3).each do |index|
     metric=widget_properties["metric#{index}"]
     if metric
       metric_data_map[metric.id] = []
+      metric_name_map[metric.id] = message('metric.' + metric.name + '.name')
     end
   end
   
+  # Retrieve metric trend information
   options = {}
   from_date = dashboard_configuration.from_datetime
   if from_date
     options[:from] = from_date
   end
-  
   TrendsChart.time_machine_measures(@resource, metric_data_map.keys, options).each()  do |trend_item|
-    metric_data_map[trend_item["metric_id"].to_i] << {:date => trend_item["created_at"], :value => trend_item["value"]}
+    metric_data_map[trend_item["metric_id"].to_i] << {:date => trend_item["created_at"], :value => trend_item["value"], :sid => trend_item["sid"]}
   end
 
+  # Create JS structures to print out in the HTML page 
   js_data = "["
-  metric_data_map.keys.each() do |metric_id|
+  js_snapshots = "["
+  js_metrics = "["
+  metric_data_map.keys.each_with_index() do |metric_id, index|
+    js_metrics += "\"" + metric_name_map[metric_id] + "\","
     js_data += "["
     metric_data_map[metric_id].each() do |metric_data|
       m_date = Time.parse(metric_data[:date])
       js_data += "{\"x\":d("
-                 js_data += m_date.year.to_s
-                 js_data += ","
-                 # Need to decrease by 1 the month as the JS Date object start months at 0 (= January)
-                 js_data += (m_date.month - 1).to_s
-                 js_data += ","
-                 js_data += m_date.day.to_s
-                 js_data +=  "),\"y\":" 
-                 js_data +=  sprintf( "%0.02f", metric_data[:value])
-                 js_data +=  "},"
+      js_data += m_date.year.to_s
+      js_data += ","
+      # Need to decrease by 1 the month as the JS Date object start months at 0 (= January)
+      js_data += (m_date.month - 1).to_s
+      js_data += ","
+      js_data += m_date.day.to_s
+      js_data += "),\"y\":" 
+      js_data += sprintf( "%0.02f", metric_data[:value])
+      js_data +=  "},"
+      if index == 0
+        # we fill the js_snapshots array (no need to do this more than once)
+        js_snapshots += "{\"sid\":"
+        js_snapshots += metric_data[:sid]
+        js_snapshots += ",\"d\":\""
+        js_snapshots += human_short_date(m_date)
+        js_snapshots += "\"},"
+      end
     end
     js_data += "],"
   end
   js_data += "]"
-   
+  js_snapshots += "]"
+  js_metrics += "]"
+  
+  # And prepare translations for labels
+  js_translations = "{"
+  js_translations += "\"date\":\"" + message("date") + "\""
+  js_translations += "}"
+  
 %>
 
 <% if widget_properties["chartTitle"] %>
@@ -45,13 +66,29 @@
 <% end %>
 
 
-<div id="timeline-chart-<%= widget.id -%>"></div>
-<script type="text/javascript+protovis">
-  function d(y,m,d) {
-    return new Date(y,m,d);
-  }
-  var data = <%= js_data -%>;  
-  var timeline = new SonarWidgets.Timeline('timeline-chart-<%= widget.id -%>').data(data);
-  timeline.render();
+<% if metric_data_map.values[0].size == 1 %>
+
+	<span style="color: #777777; font-size: 93%; font-style:italic"><%= message('widget.timeline.timeline_not_displayed') -%></span>
+
+<% else %>
+
+	<div id="timeline-chart-<%= widget.id -%>"></div>
+	<script type="text/javascript+protovis">
+	  function d(y,m,d) {
+	    return new Date(y,m,d);
+	  }
+	  var data = <%= js_data -%>;
+	  var snapshots = <%= js_snapshots -%>;
+	  var metrics = <%= js_metrics -%>;
+	  var translations = <%= js_translations -%>;
+	  var timeline = new SonarWidgets.Timeline('timeline-chart-<%= widget.id -%>')
+	  						.height(<%= widget_properties["widgetHeight"] ? widget_properties["widgetHeight"] : "null" -%>)
+	  						.data(data)
+	  						.snapshots(snapshots)
+	  						.metrics(metrics)
+	  						.translations(translations);
+	  timeline.render();
+	
+	</script>
 
-</script>
\ No newline at end of file
+<% end %>
\ No newline at end of file
diff --git a/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties b/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
index f61dd520ddd..a61de34dc63 100644
--- a/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
+++ b/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
@@ -510,6 +510,7 @@ widget.size.paragraphs.suffix=\ paragraphs
 
 widget.timeline.name=Timeline
 widget.timeline.description=Displays up to 3 metrics on a history chart.
+widget.timeline.timeline_not_displayed=The timeline won't be displayed as currently only 1 snapshot is available.
 
 widget.ckjm.name=Chidamber & Kemerer
 widget.ckjm.description=Reports on LCOM4 and RFC average and distribution.