SONAR-7405 display treemap legend

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 f9db563b4199d0fb3b08b41b8780ad42452807a4..c4a0ecc2e555f51385a64dac748457f571697b47 100644 (file)
--- 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 b9cbca5ccec4927659a00ada33d164bb7a34cfa9..4bf606fac58195938cac011566c80961c311cb7f 100644 (file)
--- 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;
 }

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 2465c6726a942a2e42724950ab0c5e2909505d8e..d4089ee4933b18e9e770e556c5a5486fe2a3957d 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3230,3 +3230,5 @@ component_measures.tab.list=List
 component_measures.tab.bubbles=Bubble Chart
 component_measures.tab.treemap=Treemap
 component_measures.tab.history=History
+component_measures.legend.color_x=Color: {0}
+component_measures.legend.size_x=Color: {0}