From 76fcc04bf692374c74327bd9bb2eb1f933c64771 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?= <gregoire.aubert@sonarsource.com>
Date: Mon, 7 Aug 2017 10:15:38 +0200
Subject: [PATCH] Show a message if there is no data to be displayed on the
 project activity preview graph

---
 .../js/apps/overview/events/PreviewGraph.js   | 77 +++++++++++--------
 .../src/main/js/apps/overview/styles.css      |  4 +
 .../src/main/js/apps/projectActivity/utils.js |  3 +
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js b/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js
index 20538c6a4d1..5ecdab56437 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js
+++ b/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js
@@ -28,10 +28,12 @@ import {
   getDisplayedHistoryMetrics,
   generateSeries,
   getSeriesMetricType,
+  hasHistoryDataValue,
   splitSeriesInGraphs
 } from '../../projectActivity/utils';
 import { getCustomGraph, getGraph } from '../../../helpers/storage';
 import { formatMeasure, getShortType } from '../../../helpers/measures';
+import { translate } from '../../../helpers/l10n';
 import type { Serie } from '../../../components/charts/AdvancedTimeline';
 import type { History, Metric } from '../types';
 
@@ -137,46 +139,57 @@ export default class PreviewGraph extends React.PureComponent {
   updateTooltip = (selectedDate: ?Date, tooltipXPos: ?number, tooltipIdx: ?number) =>
     this.setState({ selectedDate, tooltipXPos, tooltipIdx });
 
-  render() {
+  renderTimeline() {
     const { graph, selectedDate, series, tooltipIdx, tooltipXPos } = this.state;
+    return (
+      <AutoSizer disableHeight={true}>
+        {({ width }) =>
+          <div>
+            <AdvancedTimeline
+              endDate={null}
+              startDate={null}
+              height={80}
+              width={width}
+              hideGrid={true}
+              hideXAxis={true}
+              interpolate="linear"
+              metricType={getSeriesMetricType(series)}
+              padding={GRAPH_PADDING}
+              series={series}
+              showAreas={['coverage', 'duplications'].includes(graph)}
+              updateTooltip={this.updateTooltip}
+            />
+            {selectedDate != null &&
+              tooltipXPos != null &&
+              tooltipIdx != null &&
+              <PreviewGraphTooltips
+                formatValue={this.formatValue}
+                graph={graph}
+                graphWidth={width}
+                metrics={this.props.metrics}
+                selectedDate={selectedDate}
+                series={series}
+                tooltipIdx={tooltipIdx}
+                tooltipPos={tooltipXPos}
+              />}
+          </div>}
+      </AutoSizer>
+    );
+  }
+
+  render() {
+    const { series } = this.state;
     return (
       <div
         className="overview-analysis-graph big-spacer-bottom spacer-top"
         onClick={this.handleClick}
         tabIndex={0}
         role="link">
-        <AutoSizer disableHeight={true}>
-          {({ width }) =>
-            <div>
-              <AdvancedTimeline
-                endDate={null}
-                startDate={null}
-                height={80}
-                width={width}
-                hideGrid={true}
-                hideXAxis={true}
-                interpolate="linear"
-                metricType={getSeriesMetricType(series)}
-                padding={GRAPH_PADDING}
-                series={series}
-                showAreas={['coverage', 'duplications'].includes(graph)}
-                updateTooltip={this.updateTooltip}
-              />
-              {selectedDate != null &&
-                tooltipXPos != null &&
-                tooltipIdx != null &&
-                <PreviewGraphTooltips
-                  formatValue={this.formatValue}
-                  graph={graph}
-                  graphWidth={width}
-                  metrics={this.props.metrics}
-                  selectedDate={selectedDate}
-                  series={series}
-                  tooltipIdx={tooltipIdx}
-                  tooltipPos={tooltipXPos}
-                />}
+        {hasHistoryDataValue(series)
+          ? this.renderTimeline()
+          : <div className="note text-center spacer-top big-spacer-bottom">
+              {translate('component_measures.no_history')}
             </div>}
-        </AutoSizer>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 46b4bcaec91..0b27fa87235 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -381,6 +381,10 @@
   padding: 0;
 }
 
+.overview-analysis-graph .bubble-popup-arrow {
+  top: 7px;
+}
+
 .overview-analysis-graph-tooltip {
   padding: 4px;
   pointer-events: none;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/utils.js b/server/sonar-web/src/main/js/apps/projectActivity/utils.js
index 89171cf3617..7a126be384a 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/utils.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/utils.js
@@ -67,6 +67,9 @@ export const hasDataValues = (serie: Serie) => serie.data.some(point => point.y
 export const hasHistoryData = (series: Array<Serie>) =>
   series.some(serie => serie.data && serie.data.length > 1);
 
+export const hasHistoryDataValue = (series: Array<Serie>) =>
+  series.some(serie => serie.data && serie.data.length > 1 && hasDataValues(serie));
+
 export const historyQueryChanged = (prevQuery: Query, nextQuery: Query): boolean =>
   prevQuery.graph !== nextQuery.graph;
 
-- 
2.39.5