SONAR-19157 Fix activity graph area color

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 3816d07bfcfe272394826e2c420a269c20629498..916ea6a9bd066b3ee664fa67a747704531b9bf8e 100644 (file)
--- 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 f6ee34e7a717427de122ef37e6b1fb343e5d483c..7de3a2fbe96cf3c2f2ae24a1f5408b81fe41e819 100644 (file)
--- 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 7536054b3d0cc237475e96c90cdff85c95cfb04c..0dec72621660412eceeab02ddf404072e32bc232 100644 (file)
--- 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);