SONAR-9608 SONAR-9611 Create the project overview bubble chart on the measures page

4 files changed, 4 insertions, 72 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index 1e16c1a1565..dd0ef5e696d 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -268,31 +268,6 @@
   font-style: italic;
 }
 
-.projects-visualizations-ratings {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}
-
-.projects-visualizations-ratings > *:not(:first-child) {
-  margin-left: 24px;
-}
-
-.projects-visualizations-ratings-rect {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 1px;
-  margin-right: 4px;
-  border: 1px solid;
-}
-
-.projects-visualizations-ratings-rect-inner {
-  display: block;
-  width: 8px;
-  height: 8px;
-  opacity: 0.2;
-}
-
 .measure-details-bubble-chart-axis {
   position: absolute;
   color: #777;
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/RatingsLegend.js b/server/sonar-web/src/main/js/apps/projects/visualizations/RatingsLegend.js
deleted file mode 100644
index b22d9729157..00000000000
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/RatingsLegend.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 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.
- */
-// @flow
-import React from 'react';
-import { formatMeasure } from '../../../helpers/measures';
-import { RATING_COLORS } from '../../../helpers/constants';
-
-export default function RatingsLegend() {
-  return (
-    <div className="projects-visualizations-ratings">
-      {[1, 2, 3, 4, 5].map(rating =>
-        <div key={rating}>
-          <span
-            className="projects-visualizations-ratings-rect"
-            style={{ borderColor: RATING_COLORS[rating - 1] }}>
-            <span
-              className="projects-visualizations-ratings-rect-inner"
-              style={{ backgroundColor: RATING_COLORS[rating - 1] }}
-            />
-          </span>
-          {formatMeasure(rating, 'RATING')}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.js b/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.js
index fc881790b54..d69b6bfce49 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.js
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.js
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import RatingsLegend from './RatingsLegend';
+import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend';
 import BubbleChart from '../../../components/charts/BubbleChart';
 import { formatMeasure } from '../../../helpers/measures';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -130,7 +130,7 @@ export default class Risk extends React.PureComponent {
             'component_measures.legend.size_x',
             translate('metric', SIZE_METRIC, 'name')
           )}
-          <RatingsLegend />
+          <ColorRatingsLegend className="big-spacer-top" />
         </div>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.js b/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.js
index ede73dbf87b..44ddf736040 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.js
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.js
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import RatingsLegend from './RatingsLegend';
+import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend';
 import BubbleChart from '../../../components/charts/BubbleChart';
 import { formatMeasure } from '../../../helpers/measures';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -130,7 +130,7 @@ export default class SimpleBubbleChart extends React.PureComponent {
             'component_measures.legend.size_x',
             translate('metric', sizeMetric.key, 'name')
           )}
-          {colorMetric != null && <RatingsLegend />}
+          {colorMetric != null && <ColorRatingsLegend className="big-spacer-top" />}
         </div>
       </div>
     );