SONAR-9401 Force the metrics to a defined style on project history graphs

5 files changed, 32 insertions, 9 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js
index c1088f8d7d8..235ab128377 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js
@@ -21,6 +21,7 @@
 import React from 'react';
 import ProjectActivityGraphsHeader from './ProjectActivityGraphsHeader';
 import StaticGraphs from './StaticGraphs';
+import { GRAPHS_METRICS_STYLE } from '../utils';
 import type { RawQuery } from '../../../helpers/query';
 import type { Analysis, MeasureHistory, Query } from '../types';
 
@@ -47,6 +48,7 @@ export default function ProjectActivityGraphs(props: Props) {
         measuresHistory={props.measuresHistory}
         metricsType={props.metricsType}
         project={props.project}
+        seriesStyle={GRAPHS_METRICS_STYLE[graph]}
         showAreas={['coverage', 'duplications'].includes(graph)}
       />
     </div>
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js b/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js
index 98bb977ff12..48ef1df5c8b 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js
@@ -33,7 +33,8 @@ type Props = {
   leakPeriodDate: Date,
   loading: boolean,
   measuresHistory: Array<MeasureHistory>,
-  metricsType: string
+  metricsType: string,
+  seriesStyle?: { [string]: string }
 };
 
 export default class StaticGraphs extends React.PureComponent {
@@ -58,13 +59,14 @@ export default class StaticGraphs extends React.PureComponent {
 
   getSeries = () =>
     sortBy(
-      this.props.measuresHistory.map(measure => {
+      this.props.measuresHistory.map((measure, idx) => {
         if (measure.metric === 'uncovered_lines') {
           return generateCoveredLinesMetric(measure, this.props.measuresHistory);
         }
         return {
           name: measure.metric,
           translatedName: translate('metric', measure.metric, 'name'),
+          style: this.props.seriesStyle ? this.props.seriesStyle[measure.metric] : idx,
           data: measure.history.map(analysis => ({
             x: analysis.date,
             y: this.props.metricsType === 'LEVEL' ? analysis.value : Number(analysis.value)
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphsLegend.js b/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphsLegend.js
index 0a1b1040aa0..a1ceab688f4 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphsLegend.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphsLegend.js
@@ -22,16 +22,19 @@ import classNames from 'classnames';
 import ChartLegendIcon from '../../../components/icons-components/ChartLegendIcon';
 
 type Props = {
-  series: Array<{ name: string, translatedName: string }>
+  series: Array<{ name: string, translatedName: string, style: string }>
 };
 
 export default function StaticGraphsLegend({ series }: Props) {
   return (
     <div className="project-activity-graph-legends">
-      {series.map((serie, idx) => (
+      {series.map(serie => (
         <span className="big-spacer-left big-spacer-right" key={serie.name}>
           <ChartLegendIcon
-            className={classNames('spacer-right line-chart-legend', 'line-chart-legend-' + idx)}
+            className={classNames(
+              'spacer-right line-chart-legend',
+              'line-chart-legend-' + serie.style
+            )}
           />
           {serie.translatedName}
         </span>
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 1498d215f41..e0c42628de7 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/utils.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/utils.js
@@ -28,7 +28,23 @@ export const GRAPHS_METRICS = {
   overview: ['bugs', 'vulnerabilities', 'code_smells'],
   coverage: ['uncovered_lines', 'lines_to_cover'],
   duplications: ['duplicated_lines', 'ncloc'],
-  remediation: ['sqale_index', 'security_remediation_effort', 'reliability_remediation_effort']
+  remediation: ['reliability_remediation_effort', 'security_remediation_effort', 'sqale_index']
+};
+export const GRAPHS_METRICS_STYLE = {
+  overview: { bugs: '0', code_smells: '1', vulnerabilities: '2' },
+  coverage: {
+    lines_to_cover: '1',
+    uncovered_lines: '0'
+  },
+  duplications: {
+    duplicated_lines: '0',
+    ncloc: '1'
+  },
+  remediation: {
+    reliability_remediation_effort: '0',
+    security_remediation_effort: '2',
+    sqale_index: '1'
+  }
 };
 
 const parseGraph = (value?: string): string => {
diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js
index 86921f46fed..a148053604b 100644
--- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js
+++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js
@@ -27,7 +27,7 @@ import { line as d3Line, area, curveBasis } from 'd3-shape';
 
 type Point = { x: Date, y: number | string };
 
-type Serie = { name: string, data: Array<Point> };
+type Serie = { name: string, data: Array<Point>, style: string };
 
 type Event = { className?: string, name: string, date: Date };
 
@@ -168,7 +168,7 @@ export default class AdvancedTimeline extends React.PureComponent {
         {this.props.series.map((serie, idx) => (
           <path
             key={`${idx}-${serie.name}`}
-            className={classNames('line-chart-path', 'line-chart-path-' + idx)}
+            className={classNames('line-chart-path', 'line-chart-path-' + serie.style)}
             d={lineGenerator(serie.data)}
           />
         ))}
@@ -186,7 +186,7 @@ export default class AdvancedTimeline extends React.PureComponent {
         {this.props.series.map((serie, idx) => (
           <path
             key={`${idx}-${serie.name}`}
-            className={classNames('line-chart-area', 'line-chart-area-' + idx)}
+            className={classNames('line-chart-area', 'line-chart-area-' + serie.style)}
             d={areaGenerator(serie.data)}
           />
         ))}