fix project home page timeline with missing values

diff --git a/server/sonar-web/src/main/js/api/time-machine.ts b/server/sonar-web/src/main/js/api/time-machine.ts
index ac77c7c8b4170d72043d6a75bb8e6c3e549af7df..097b0b08f3d2cab29e8da5bc090dcb28fd2b88fa 100644 (file)
--- a/server/sonar-web/src/main/js/api/time-machine.ts
+++ b/server/sonar-web/src/main/js/api/time-machine.ts
@@ -23,7 +23,7 @@ import throwGlobalError from '../app/utils/throwGlobalError';
 
 export interface HistoryItem {
   date: Date;
-  value: string;
+  value?: string;
 }
 
 export interface History {

diff --git a/server/sonar-web/src/main/js/apps/overview/components/Timeline.tsx b/server/sonar-web/src/main/js/apps/overview/components/Timeline.tsx
index 2b372ce80ddf4ed16058979fad8d543ad940a00e..51fade7572d2b552b8cdfd255e24caa01483ce27 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/Timeline.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/Timeline.tsx
@@ -49,9 +49,12 @@ export default class Timeline extends React.PureComponent<Props> {
     }
 
     const data = snapshots.map((snapshot, index) => {
-      return { x: index, y: Number(snapshot.value) };
+      return { x: index, y: snapshot.value !== undefined ? Number(snapshot.value) : undefined };
     });
-    const domain = [0, max(this.props.history, d => parseFloat(d.value))] as [number, number];
+    const domain = [
+      0,
+      max(this.props.history, d => (d.value !== undefined ? parseFloat(d.value) : 0))
+    ] as [number, number];
     return (
       <LineChart
         data={data}

diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/Timeline-test.tsx b/server/sonar-web/src/main/js/apps/overview/components/__tests__/Timeline-test.tsx
new file mode 100644 (file)
index 0000000..c3ef5ec
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/Timeline-test.tsx
@@ -0,0 +1,62 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 SonarSource SA
+ * mailto:info 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 * as React from 'react';
+import { shallow } from 'enzyme';
+import Timeline from '../Timeline';
+import { parseDate } from '../../../../helpers/dates';
+
+const range = parseDate('2017-05-01T00:00:00.000Z');
+const history = [
+  { date: parseDate('2017-04-08T00:00:00.000Z'), value: '29.6' },
+  { date: parseDate('2017-04-09T00:00:00.000Z'), value: '170.8' },
+  { date: parseDate('2017-05-08T00:00:00.000Z'), value: '360' },
+  { date: parseDate('2017-05-09T00:00:00.000Z'), value: '39' }
+];
+
+it('should render correctly with an "after" range', () => {
+  expect(shallow(<Timeline after={range} history={history} />)).toMatchSnapshot();
+});
+
+it('should render correctly with a "before" range', () => {
+  expect(shallow(<Timeline before={range} history={history} />)).toMatchSnapshot();
+});
+
+it('should have a correct domain with strings or numbers', () => {
+  const date = parseDate('2017-05-08T00:00:00.000Z');
+  const wrapper = shallow(<Timeline after={range} history={history} />);
+  expect(wrapper.find('LineChart').prop('domain')).toEqual([0, 360]);
+
+  wrapper.setProps({ history: [{ date, value: '360.33' }, { date, value: '39.54' }] });
+  expect(wrapper.find('LineChart').prop('domain')).toEqual([0, 360.33]);
+
+  wrapper.setProps({ history: [{ date, value: 360 }, { date, value: 39 }] });
+  expect(wrapper.find('LineChart').prop('domain')).toEqual([0, 360]);
+});
+
+it('should not fail when a value is missing', () => {
+  expect(
+    shallow(
+      <Timeline
+        before={range}
+        history={[{ date: parseDate('2017-04-07T00:00:00.000Z') }, ...history]}
+      />
+    )
+  ).toMatchSnapshot();
+});

diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/Timeline-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/Timeline-test.tsx.snap
new file mode 100644 (file)
index 0000000..710cbbf
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/Timeline-test.tsx.snap
@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not fail when a value is missing 1`] = `
+<LineChart
+  data={
+    Array [
+      Object {
+        "x": 0,
+        "y": undefined,
+      },
+      Object {
+        "x": 1,
+        "y": 29.6,
+      },
+      Object {
+        "x": 2,
+        "y": 170.8,
+      },
+    ]
+  }
+  displayBackdrop={true}
+  displayPoints={false}
+  displayVerticalGrid={false}
+  domain={
+    Array [
+      0,
+      360,
+    ]
+  }
+  height={80}
+  padding={
+    Array [
+      0,
+      0,
+      0,
+      0,
+    ]
+  }
+/>
+`;
+
+exports[`should render correctly with a "before" range 1`] = `
+<LineChart
+  data={
+    Array [
+      Object {
+        "x": 0,
+        "y": 29.6,
+      },
+      Object {
+        "x": 1,
+        "y": 170.8,
+      },
+    ]
+  }
+  displayBackdrop={true}
+  displayPoints={false}
+  displayVerticalGrid={false}
+  domain={
+    Array [
+      0,
+      360,
+    ]
+  }
+  height={80}
+  padding={
+    Array [
+      0,
+      0,
+      0,
+      0,
+    ]
+  }
+/>
+`;
+
+exports[`should render correctly with an "after" range 1`] = `
+<LineChart
+  data={
+    Array [
+      Object {
+        "x": 0,
+        "y": 360,
+      },
+      Object {
+        "x": 1,
+        "y": 39,
+      },
+    ]
+  }
+  displayBackdrop={true}
+  displayPoints={false}
+  displayVerticalGrid={false}
+  domain={
+    Array [
+      0,
+      360,
+    ]
+  }
+  height={80}
+  padding={
+    Array [
+      0,
+      0,
+      0,
+      0,
+    ]
+  }
+/>
+`;

diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.tsx b/server/sonar-web/src/main/js/components/charts/LineChart.tsx
index 862a3da8c1d58eeb7f779cff93666bf365c44d0e..48ce481f192cb2de305e8083aafe3aac81235f40 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/LineChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/LineChart.tsx
@@ -26,7 +26,7 @@ import './LineChart.css';
 
 interface DataPoint {
   x: number;
-  y: number;
+  y?: number;
 }
 
 interface Props {
@@ -54,7 +54,7 @@ export default class LineChart extends React.PureComponent<Props> {
     const area = d3Area<DataPoint>()
       .x(d => xScale(d.x))
       .y0(yScale.range()[0])
-      .y1(d => yScale(d.y))
+      .y1(d => yScale(d.y || 0))
       .defined(d => d.y != null)
       .curve(curveBasis);
 
@@ -76,7 +76,7 @@ export default class LineChart extends React.PureComponent<Props> {
 
     const points = this.props.data.filter(point => point.y != null).map((point, index) => {
       const x = xScale(point.x);
-      const y = yScale(point.y);
+      const y = yScale(point.y || 0);
       return <circle className="line-chart-point" cx={x} cy={y} key={index} r="3" />;
     });
     return <g>{points}</g>;
@@ -92,7 +92,7 @@ export default class LineChart extends React.PureComponent<Props> {
     const lines = this.props.data.map((point, index) => {
       const x = xScale(point.x);
       const y1 = yScale.range()[0];
-      const y2 = yScale(point.y);
+      const y2 = yScale(point.y || 0);
       return <line className="line-chart-grid" key={index} x1={x} x2={x} y1={y1} y2={y2} />;
     });
     return <g>{lines}</g>;
@@ -128,7 +128,7 @@ export default class LineChart extends React.PureComponent<Props> {
     const ticks = xValues.map((value, index) => {
       const point = this.props.data[index];
       const x = xScale(point.x);
-      const y = yScale(point.y);
+      const y = yScale(point.y || 0);
       return (
         <text className="line-chart-tick" dy="-1em" key={index} x={x} y={y}>
           {value}
@@ -141,7 +141,7 @@ export default class LineChart extends React.PureComponent<Props> {
   renderLine(xScale: ScaleLinear<number, number>, yScale: ScaleLinear<number, number>) {
     const p = d3Line<DataPoint>()
       .x(d => xScale(d.x))
-      .y(d => yScale(d.y))
+      .y(d => yScale(d.y || 0))
       .defined(d => d.y != null)
       .curve(curveBasis);
     return <path className="line-chart-path" d={p(this.props.data) as string} />;