From bcf722cd9cac06afd8b210adf772fd082eab1b2a Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Wed, 26 Jul 2023 12:17:47 +0200
Subject: [PATCH] SONAR-19157 Fix activity graph area color

---
 .../js/components/charts/AdvancedTimeline.css |  4 ----
 .../js/components/charts/AdvancedTimeline.tsx | 20 +++++++++++--------
 .../main/js/components/charts/LineChart.css   | 13 ------------
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css
index 3816d07bfcf..916ea6a9bd0 100644
--- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css
+++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css
@@ -31,10 +31,6 @@
   pointer-events: all;
 }
 
-.chart-zoomed .line-chart-area {
-  clip-path: url(#chart-clip);
-}
-
 .chart-zoomed .line-chart-path {
   clip-path: url(#chart-clip);
 }
diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
index f6ee34e7a71..7de3a2fbe96 100644
--- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
+++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
@@ -18,19 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import styled from '@emotion/styled';
 import classNames from 'classnames';
 import { bisector, extent, max } from 'd3-array';
 import {
   NumberValue,
   ScaleLinear,
-  scaleLinear,
   ScalePoint,
-  scalePoint,
   ScaleTime,
+  scaleLinear,
+  scalePoint,
   scaleTime,
 } from 'd3-scale';
 import { area, curveBasis, line as d3Line } from 'd3-shape';
-import { themeColor, ThemeProp, withTheme } from 'design-system';
+import { CSSColor, ThemeProp, themeColor, withTheme } from 'design-system';
 import { flatten, isEqual, sortBy, throttle, uniq } from 'lodash';
 import * as React from 'react';
 import { isDefined } from '../../helpers/types';
@@ -518,11 +519,7 @@ export class AdvancedTimelineClass extends React.PureComponent<Props, State> {
     return (
       <g>
         {series.map((serie, idx) => (
-          <path
-            className={classNames('line-chart-area', `line-chart-area-${idx}`)}
-            d={areaGenerator(serie.data) ?? undefined}
-            key={serie.name}
-          />
+          <StyledArea d={areaGenerator(serie.data) ?? undefined} index={idx} key={serie.name} />
         ))}
       </g>
     );
@@ -661,4 +658,11 @@ export class AdvancedTimelineClass extends React.PureComponent<Props, State> {
   }
 }
 
+const AREA_OPACITY = 0.15;
+
+const StyledArea = styled.path<{ index: number }>`
+  clip-path: url(#chart-clip);
+  fill: ${({ index }) => themeColor(`graphLineColor.${index}` as CSSColor, AREA_OPACITY)};
+`;
+
 export const AdvancedTimeline = withTheme<PropsWithoutTheme>(AdvancedTimelineClass);
diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.css b/server/sonar-web/src/main/js/components/charts/LineChart.css
index 7536054b3d0..0dec7262166 100644
--- a/server/sonar-web/src/main/js/components/charts/LineChart.css
+++ b/server/sonar-web/src/main/js/components/charts/LineChart.css
@@ -35,19 +35,6 @@
   stroke-dasharray: 7;
 }
 
-.line-chart-area {
-  fill: rgba(75, 159, 213, 0.3);
-  stroke-width: 0;
-}
-
-.line-chart-area.line-chart-area-1 {
-  fill: rgba(35, 106, 151, 0.3);
-}
-
-.line-chart-area.line-chart-area-2 {
-  fill: rgba(36, 198, 224, 0.3);
-}
-
 .line-chart-point {
   fill: #fff;
   stroke: var(--blue);
-- 
2.39.5