SONAR-7405 display treemap legend

2 files changed, 15 insertions, 2 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureTreemap.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureTreemap.js
index f9db563b419..c4a0ecc2e55 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureTreemap.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureTreemap.js
@@ -23,7 +23,7 @@ import Spinner from './Spinner';
 import { Treemap } from '../../../components/charts/treemap';
 import { getChildren } from '../../../api/components';
 import { formatMeasure } from '../../../helpers/measures';
-import { translate } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getComponentUrl } from '../../../helpers/urls';
 import Workspace from '../../../components/workspace/main';
 
@@ -197,6 +197,7 @@ export default class MeasureTreemap extends React.Component {
   }
 
   render () {
+    const { metric } = this.props;
     const { fetching } = this.state;
 
     if (fetching) {
@@ -211,6 +212,14 @@ export default class MeasureTreemap extends React.Component {
 
     return (
         <div className="measure-details-treemap">
+          <ul className="list-inline note measure-details-treemap-legend">
+            <li>
+              {translateWithParameters('component_measures.legend.color_x', metric.name)}
+            </li>
+            <li>
+              {translateWithParameters('component_measures.legend.size_x', translate('metric.ncloc.name'))}
+            </li>
+          </ul>
           {this.renderTreemap()}
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/component-measures/styles.css b/server/sonar-web/src/main/js/apps/component-measures/styles.css
index b9cbca5ccec..4bf606fac58 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/styles.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/styles.css
@@ -246,5 +246,9 @@
 
 .measure-details-treemap {
   max-width: 960px;
-  margin: 10px auto;
+  margin: 20px auto;
+}
+
+.measure-details-treemap-legend {
+  margin-bottom: 10px;
 }