SONAR-7481 Sparklines in the "History Table" widget are not displayed

4 files changed, 99 insertions, 18 deletions

diff --git a/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/time_machine.html.erb b/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/time_machine.html.erb
index 3271038a2f0..4fcb2f845d4 100644
--- a/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/time_machine.html.erb
+++ b/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/time_machine.html.erb
@@ -1,6 +1,6 @@
 <%
    rows_by_metric_id={}
-   
+
    # Retrieve widget settings
    metric_ids = []
    (1..10).each do |index|
@@ -33,7 +33,7 @@
                                     ]
    )
 
-   
+
    # Prepare the rows to display
    snapshot_by_id={}
    snapshots.each do |s|
@@ -44,7 +44,7 @@
 
      if measure.metric.timemachine? && (measure.value || measure.text_value)
        row=rows_by_metric_id[measure.metric_id]
-       
+
        #optimization : avoid eager loading of snapshots
        measure.snapshot=snapshot_by_id[measure.snapshot_id]
        row.add_measure(measure)
@@ -61,14 +61,14 @@
    end
 
    # Should display the sparkline?
-   sparkline_urls_by_row = {}
+   sparklines_by_row = {}
    if widget_properties["displaySparkLine"]
      rows.each do |row|
-       sparkline_url = row.sparkline_url
-       sparkline_urls_by_row[row] = sparkline_url if sparkline_url
+       sparkline = row.sparkline
+       sparklines_by_row[row] = sparkline if sparkline
      end
    end
-   display_sparkline = !sparkline_urls_by_row.empty?
+   display_sparkline = !sparklines_by_row.empty?
 %>
 
 <% if widget_properties["title"] %>
@@ -115,10 +115,16 @@
         <% end %>
         <%
            if display_sparkline
-             sparkline_url = sparkline_urls_by_row[row]
+             sparkline = sparklines_by_row[row]
         %>
           <td width="1%">
-            <%= image_tag(sparkline_url) if sparkline_url %>
+            <%
+              if sparkline
+                x = sparkline[0]
+                y = sparkline[1]
+            %>
+              <div class="time-machine-sparkline" data-x="<%= x.join(',') -%>" data-y="<%= y.join(',') -%>"></div>
+            <% end %>
           </td>
         <% end %>
       </tr>
@@ -128,3 +134,10 @@
   </table>
 
 </div>
+
+<script>
+  (function () {
+    var TimeMachineWidget = window.TimeMachineWidget;
+    TimeMachineWidget('.time-machine-sparkline');
+  })();
+</script>
diff --git a/server/sonar-web/src/main/js/widgets/timeMachine/index.js b/server/sonar-web/src/main/js/widgets/timeMachine/index.js
new file mode 100644
index 00000000000..344857cb085
--- /dev/null
+++ b/server/sonar-web/src/main/js/widgets/timeMachine/index.js
@@ -0,0 +1,65 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import moment from 'moment';
+import React from 'react';
+import { render } from 'react-dom';
+import d3 from 'd3';
+
+import { LineChart } from '../../components/charts/line-chart';
+
+const DEFAULTS = {
+  width: 80,
+  height: 15,
+  dateFormat: 'YYYYMMDDHHmmss'
+};
+
+export default function (selector) {
+  const elements = Array.from(document.querySelectorAll(selector));
+
+  elements.forEach(element => {
+    const { dataset } = element;
+    const width = Number(dataset.width || DEFAULTS.width);
+    const height = Number(dataset.height || DEFAULTS.height);
+
+    const { x, y } = dataset;
+    const xData = x.split(',').map(v => moment(v, DEFAULTS.dateFormat).toDate());
+    const yData = y.split(',').map(v => Number(v));
+
+    const data = xData.map((x, index) => {
+      const y = yData[index];
+      return { x, y };
+    });
+
+    const domain = d3.extent(yData);
+
+    render((
+        <LineChart
+            data={data}
+            domain={domain}
+            width={width}
+            height={height}
+            padding={[1, 1, 1, 1]}
+            interpolate="linear"
+            displayBackdrop={false}
+            displayPoints={false}
+            displayVerticalGrid={false}/>
+    ), element);
+  });
+}
diff --git a/server/sonar-web/src/main/js/widgets/widgets.js b/server/sonar-web/src/main/js/widgets/widgets.js
index d5bef69f777..157e7f718ec 100644
--- a/server/sonar-web/src/main/js/widgets/widgets.js
+++ b/server/sonar-web/src/main/js/widgets/widgets.js
@@ -32,6 +32,8 @@ import './old/widget';
 
 import IssueFilterWidget from './issue-filter/widget';
 import ComplexityDistribution from './complexity';
+import TimeMachine from './timeMachine';
 
 window.IssueFilterWidget = IssueFilterWidget;
 window.ComplexityDistribution = ComplexityDistribution;
+window.TimeMachineWidget = TimeMachine;
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/models/sonar/timemachine_row.rb b/server/sonar-web/src/main/webapp/WEB-INF/app/models/sonar/timemachine_row.rb
index 23d20b119d8..2bc9e959f35 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/models/sonar/timemachine_row.rb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/models/sonar/timemachine_row.rb
@@ -41,17 +41,18 @@ class Sonar::TimemachineRow
     (self.domain <=> other.domain).nonzero? || (self.metric.short_name <=> other.metric.short_name)
   end
 
-  def sparkline_url
-    if metric.numeric? && @measure_by_sid.size>1
-      values=[]
+  def sparkline
+    if metric.numeric? && @measure_by_sid.size > 1
+      x = []
+      y = []
       @measure_by_sid.values.each do |measure|
         # date.to_f does not works under oracle
-        values << measure.snapshot.created_at.to_s(:number)
-        values << (measure.value.nil? ? 0 : measure.value)
+        x << measure.snapshot.created_at.to_s(:number)
+        y << (measure.value.nil? ? 0 : measure.value)
       end
-      "/chart?cht=sl&chdi=80x15&chv=" + values*',' + '&.png'
-     else
-       nil
-     end
+      [x, y]
+    else
+      nil
+    end
   end
 end