From aa5ca5c7e5f2695d4f1e589d907778b3e94bd2e1 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Fri, 31 Mar 2017 17:48:53 +0200
Subject: [PATCH] fix measure timeline

---
 .../it/measure/ProjectMeasuresPageTest.java     | 12 ++++++++++++
 .../details/history/MeasureHistory.js           |  1 +
 .../src/main/js/components/charts/Timeline.js   | 17 ++++++++++-------
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/it/it-tests/src/test/java/it/measure/ProjectMeasuresPageTest.java b/it/it-tests/src/test/java/it/measure/ProjectMeasuresPageTest.java
index 854109f632d..b69af1e0aad 100644
--- a/it/it-tests/src/test/java/it/measure/ProjectMeasuresPageTest.java
+++ b/it/it-tests/src/test/java/it/measure/ProjectMeasuresPageTest.java
@@ -25,7 +25,11 @@ import it.Category1Suite;
 import org.junit.BeforeClass;
 import org.junit.ClassRule;
 import org.junit.Test;
+import pageobjects.Navigation;
 
+import static com.codeborne.selenide.Condition.visible;
+import static com.codeborne.selenide.Selenide.$;
+import static com.codeborne.selenide.Selenide.$$;
 import static util.ItUtils.projectDir;
 import static util.selenium.Selenese.runSelenese;
 
@@ -67,4 +71,12 @@ public class ProjectMeasuresPageTest {
     runSelenese(orchestrator, "/measure/ProjectMeasuresPageTest/should_drilldown_on_tree_view.html");
   }
 
+  @Test
+  public void should_show_history() {
+    Navigation nav = Navigation.get(orchestrator);
+    nav.open("/component_measures/metric/reliability_rating/history?id=project-measures-page-test-project");
+    $(".line-chart").shouldBe(visible);
+    $$(".line-chart-tick-x").shouldHaveSize(5);
+  }
+
 }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/history/MeasureHistory.js b/server/sonar-web/src/main/js/apps/component-measures/details/history/MeasureHistory.js
index 75f439d3ecc..dc1202526b1 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/history/MeasureHistory.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/history/MeasureHistory.js
@@ -122,6 +122,7 @@ export default class MeasureHistory extends React.Component {
     return (
       <div style={{ height: HEIGHT }}>
         <Timeline
+          basisCurve={false}
           key={metric.key}
           data={data}
           metricType={metric.type}
diff --git a/server/sonar-web/src/main/js/components/charts/Timeline.js b/server/sonar-web/src/main/js/components/charts/Timeline.js
index 51ed0746afe..080d08c3b9a 100644
--- a/server/sonar-web/src/main/js/components/charts/Timeline.js
+++ b/server/sonar-web/src/main/js/components/charts/Timeline.js
@@ -21,8 +21,8 @@ import $ from 'jquery';
 import moment from 'moment';
 import React from 'react';
 import { extent, max } from 'd3-array';
-import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
-import { line as d3Line } from 'd3-shape';
+import { scaleLinear, scalePoint, scaleTime } from 'd3-scale';
+import { line as d3Line, curveBasis } from 'd3-shape';
 import { ResizeMixin } from '../mixins/resize-mixin';
 import { TooltipsMixin } from '../mixins/tooltips-mixin';
 
@@ -31,7 +31,7 @@ const Timeline = React.createClass({
     data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     padding: React.PropTypes.arrayOf(React.PropTypes.number),
     height: React.PropTypes.number,
-    interpolate: React.PropTypes.string
+    basisCurve: React.PropTypes.bool
   },
 
   mixins: [ResizeMixin, TooltipsMixin],
@@ -39,7 +39,7 @@ const Timeline = React.createClass({
   getDefaultProps() {
     return {
       padding: [10, 10, 10, 10],
-      interpolate: 'basis'
+      basisCurve: true
     };
   },
 
@@ -51,11 +51,11 @@ const Timeline = React.createClass({
   },
 
   getRatingScale(availableHeight) {
-    return scaleOrdinal().domain([5, 4, 3, 2, 1]).rangePoints([availableHeight, 0]);
+    return scalePoint().domain([5, 4, 3, 2, 1]).range([availableHeight, 0]);
   },
 
   getLevelScale(availableHeight) {
-    return scaleOrdinal().domain(['ERROR', 'WARN', 'OK']).rangePoints([availableHeight, 0]);
+    return scalePoint().domain(['ERROR', 'WARN', 'OK']).range([availableHeight, 0]);
   },
 
   getYScale(availableHeight) {
@@ -154,7 +154,10 @@ const Timeline = React.createClass({
   },
 
   renderLine(xScale, yScale) {
-    const p = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y)).interpolate(this.props.interpolate);
+    const p = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y));
+    if (this.props.basisCurve) {
+      p.curve(curveBasis);
+    }
     return <path className="line-chart-path" d={p(this.props.data)} />;
   },
 
-- 
2.39.5