SONAR-16976 Color alone is used to convey info

diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
index c26f9de9f02355e4a867b0bc5e865ecac107ad24..2e2fd79af1c46ef519801ad3e5e4e69618225977 100644 (file)
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
@@ -41,13 +41,13 @@ export default class GraphsLegendItem extends React.PureComponent<Props> {
   };
 
   render() {
-    const { className, name, index } = this.props;
+    const { className, name, index, showWarning } = this.props;
     const isActionable = this.props.removeMetric != null;
     const legendClass = classNames({ 'activity-graph-legend-actionable': isActionable }, className);
 
     return (
       <span className={legendClass}>
-        {this.props.showWarning ? (
+        {showWarning ? (
           <AlertWarnIcon className="spacer-right" />
         ) : (
           <ChartLegendIcon className="text-middle spacer-right" index={index} />

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 34329c7088c4b3e2812d81dff6981a48761390a6..f3945dfcd383e8205014694320e8de98166df5d3 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/LineChart.css
+++ b/server/sonar-web/src/main/js/components/charts/LineChart.css
@@ -20,15 +20,21 @@
 .line-chart-path {
   fill: none;
   stroke: var(--blue);
-  stroke-width: 2px;
+  stroke-width: 3px;
 }
 
 .line-chart-path.line-chart-path-1 {
   stroke: var(--darkBlue);
+  stroke-dasharray: 3;
 }
 
 .line-chart-path.line-chart-path-2 {
   stroke: #24c6e0;
+  stroke-dasharray: 10;
+}
+
+.line-chart-path.line-chart-path-legend.line-chart-path-2 {
+  stroke-dasharray: 7;
 }
 
 .line-chart-area {

diff --git a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
index 8ca8287e6ce485c3e4eb84257551ce5be06e3430..c1aa161efb3e1f6e712f02ed286d052e893da80c 100644 (file)
--- a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
@@ -17,23 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import classNames from 'classnames';
 import * as React from 'react';
-import { colors } from '../../app/theme';
 import Icon from './Icon';
 
 interface Props {
   className?: string;
   index: number;
-  size?: number;
 }
 
-export default function ChartLegendIcon({ index, ...iconProps }: Props) {
-  const COLORS = [colors.blue, colors.darkBlue, '#24c6e0'];
+export default function ChartLegendIcon({ index, className }: Props) {
   return (
-    <Icon {...iconProps} aria-hidden={true}>
+    <Icon className={className} aria-hidden={true} width={21}>
       <path
-        d="M14.325 7.143v1.714q0 0.357-0.25 0.607t-0.607 0.25h-10.857q-0.357 0-0.607-0.25t-0.25-0.607v-1.714q0-0.357 0.25-0.607t0.607-0.25h10.857q0.357 0 0.607 0.25t0.25 0.607z"
-        style={{ fill: COLORS[index] || COLORS[0] }}
+        className={classNames('line-chart-path line-chart-path-legend', 'line-chart-path-' + index)}
+        d="M0 8 L 21 8"
       />
     </Icon>
   );