remove graphics.css

server/sonar-web/src/main/js/app/styles/components/graphics.css

-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-/* TODO remove this file */
-
-.line-chart-legend {
-  color: var(--blue);
-}
-
-.line-chart-legend.line-chart-legend-1 {
-  color: var(--darkBlue);
-}
-
-.line-chart-legend.line-chart-legend-2 {
-  color: #24c6e0;
-}

server/sonar-web/src/main/js/app/styles/sonar.css

 @import './components/menu.css';
 @import './components/page.css';
 @import './components/component-name.css';
-@import './components/graphics.css';
 @import './components/list-groups.css';
 @import './components/panels.css';
 @import './components/badges.css';

server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendCustom.tsx

         const hasData = hasDataValues(serie);
         const legendItem = (
           <GraphsLegendItem
+            index={idx}
             metric={serie.name}
             name={serie.translatedName}
             removeMetric={removeMetric}
             showWarning={!hasData}
-            style={idx.toString()}
           />
         );
         if (!hasData) {

server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.tsx

 
 interface Props {
   className?: string;
+  index: number;
   metric: string;
   name: string;
   showWarning?: boolean;
-  style: string;
   removeMetric?: (metric: string) => void;
 }
 
         {this.props.showWarning ? (
           <AlertWarnIcon className="spacer-right" />
         ) : (
-          <ChartLegendIcon
-            className={classNames(
-              'text-middle spacer-right line-chart-legend',
-              'line-chart-legend-' + this.props.style
-            )}
-          />
+          <ChartLegendIcon className="text-middle spacer-right" index={this.props.index} />
         )}
         <span className="text-middle">{this.props.name}</span>
         {isActionable && (

server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendStatic.tsx

       {series.map((serie, idx) => (
         <GraphsLegendItem
           className="big-spacer-left big-spacer-right"
+          index={idx}
           key={serie.name}
           metric={serie.name}
           name={serie.translatedName}
-          style={idx.toString()}
         />
       ))}
     </div>

server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.tsx

       if (this.props.graph === DEFAULT_GRAPH) {
         return (
           <GraphsTooltipsContentIssues
+            index={idx}
             key={serie.name}
             measuresHistory={this.props.measuresHistory}
             name={serie.name}
-            style={idx.toString()}
             tooltipIdx={tooltipIdx}
             translatedName={serie.translatedName}
             value={this.props.formatValue(point.y)}
       } else {
         return (
           <GraphsTooltipsContent
+            index={idx}
             key={serie.name}
             name={serie.name}
-            style={idx.toString()}
             translatedName={serie.translatedName}
             value={this.props.formatValue(point.y)}
           />

server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContent.tsx

  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as classNames from 'classnames';
 import ChartLegendIcon from '../../../components/icons-components/ChartLegendIcon';
 
 interface Props {
   name: string;
-  style: string;
+  index: number;
   translatedName: string;
   value: string;
 }
 
-export default function GraphsTooltipsContent({ name, style, translatedName, value }: Props) {
+export default function GraphsTooltipsContent({ name, index, translatedName, value }: Props) {
   return (
     <tr className="project-activity-graph-tooltip-line" key={name}>
       <td className="thin">
-        <ChartLegendIcon
-          className={classNames('spacer-right line-chart-legend', 'line-chart-legend-' + style)}
-        />
+        <ChartLegendIcon className="spacer-right" index={index} />
       </td>
       <td className="project-activity-graph-tooltip-value text-right spacer-right thin">{value}</td>
       <td>{translatedName}</td>

server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentIssues.tsx

  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as classNames from 'classnames';
 import ChartLegendIcon from '../../../components/icons-components/ChartLegendIcon';
 import Rating from '../../../components/ui/Rating';
 import { MeasureHistory } from '../utils';
 
 interface Props {
+  index: number;
   measuresHistory: MeasureHistory[];
   name: string;
-  style: string;
   tooltipIdx: number;
   translatedName: string;
   value: string;
   return (
     <tr className="project-activity-graph-tooltip-issues-line" key={props.name}>
       <td className="thin">
-        <ChartLegendIcon
-          className={classNames(
-            'spacer-right line-chart-legend',
-            'line-chart-legend-' + props.style
-          )}
-        />
+        <ChartLegendIcon className="spacer-right" index={props.index} />
       </td>
       <td className="text-right spacer-right">
         <span className="project-activity-graph-tooltip-value">{props.value}</span>

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendItem-test.tsx

 import GraphsLegendItem from '../GraphsLegendItem';
 
 it('should render correctly a legend', () => {
-  expect(shallow(<GraphsLegendItem metric="bugs" name="Bugs" style="2" />)).toMatchSnapshot();
+  expect(shallow(<GraphsLegendItem index={2} metric="bugs" name="Bugs" />)).toMatchSnapshot();
 });
 
 it('should render correctly an actionable legend', () => {
     shallow(
       <GraphsLegendItem
         className="myclass"
+        index={1}
         metric="foo"
         name="Foo"
         removeMetric={() => {}}
-        style="1"
       />
     )
   ).toMatchSnapshot();
 it('should render correctly legends with warning', () => {
   expect(
     shallow(
-      <GraphsLegendItem className="myclass" metric="foo" name="Foo" showWarning={true} style="1" />
+      <GraphsLegendItem className="myclass" index={1} metric="foo" name="Foo" showWarning={true} />
     )
   ).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContent-test.tsx

 import GraphsTooltipsContent from '../GraphsTooltipsContent';
 
 const DEFAULT_PROPS = {
+  index: 1,
   name: 'code_smells',
-  style: '1',
   translatedName: 'Code Smells',
   value: '1.2k'
 };

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentIssues-test.tsx

 ];
 
 const DEFAULT_PROPS = {
+  index: 2,
   measuresHistory: MEASURES_ISSUES,
   name: 'bugs',
-  style: '2',
   tooltipIdx: 1,
   translatedName: 'Bugs',
   value: '1.2k'

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendCustom-test.tsx.snap

     key="bugs"
   >
     <GraphsLegendItem
+      index={0}
       metric="bugs"
       name="Bugs"
       removeMetric={[Function]}
       showWarning={false}
-      style="0"
     />
   </span>
   <span
     key="my_metric"
   >
     <GraphsLegendItem
+      index={1}
       metric="my_metric"
       name="My Metric"
       removeMetric={[Function]}
       showWarning={false}
-      style="1"
     />
   </span>
   <Tooltip
       className="spacer-left spacer-right"
     >
       <GraphsLegendItem
+        index={2}
         metric="foo"
         name="Foo"
         removeMetric={[Function]}
         showWarning={true}
-        style="2"
       />
     </span>
   </Tooltip>

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap

   className=""
 >
   <ChartLegendIcon
-    className="text-middle spacer-right line-chart-legend line-chart-legend-2"
+    className="text-middle spacer-right"
+    index={2}
   />
   <span
     className="text-middle"
   className="project-activity-graph-legend-actionable myclass"
 >
   <ChartLegendIcon
-    className="text-middle spacer-right line-chart-legend line-chart-legend-1"
+    className="text-middle spacer-right"
+    index={1}
   />
   <span
     className="text-middle"

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendStatic-test.tsx.snap

 >
   <GraphsLegendItem
     className="big-spacer-left big-spacer-right"
+    index={0}
     key="bugs"
     metric="bugs"
     name="Bugs"
-    style="0"
   />
   <GraphsLegendItem
     className="big-spacer-left big-spacer-right"
+    index={1}
     key="code_smells"
     metric="code_smells"
     name="Code Smells"
-    style="1"
   />
 </div>
 `;

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap

     >
       <tbody>
         <GraphsTooltipsContentIssues
+          index={0}
           key="bugs"
           measuresHistory={Array []}
           name="bugs"
-          style="0"
           tooltipIdx={0}
           translatedName="Bugs"
           value="Formated.3"
         />
         <GraphsTooltipsContentIssues
+          index={1}
           key="code_smells"
           measuresHistory={Array []}
           name="code_smells"
-          style="1"
           tooltipIdx={0}
           translatedName="Code Smells"
           value="Formated.18"
         />
         <GraphsTooltipsContentIssues
+          index={2}
           key="vulnerabilities"
           measuresHistory={Array []}
           name="vulnerabilities"
-          style="2"
           tooltipIdx={0}
           translatedName="Vulnerabilities"
           value="Formated.0"
     >
       <tbody>
         <GraphsTooltipsContent
+          index={0}
           key="bugs"
           name="bugs"
-          style="0"
           translatedName="Bugs"
           value="Formated.0"
         />
         <GraphsTooltipsContent
+          index={1}
           key="code_smells"
           name="code_smells"
-          style="1"
           translatedName="Code Smells"
           value="Formated.15"
         />
         <GraphsTooltipsContent
+          index={2}
           key="vulnerabilities"
           name="vulnerabilities"
-          style="2"
           translatedName="Vulnerabilities"
           value="Formated.1"
         />

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContent-test.tsx.snap

     className="thin"
   >
     <ChartLegendIcon
-      className="spacer-right line-chart-legend line-chart-legend-1"
+      className="spacer-right"
+      index={1}
     />
   </td>
   <td

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentIssues-test.tsx.snap

     className="thin"
   >
     <ChartLegendIcon
-      className="spacer-right line-chart-legend line-chart-legend-2"
+      className="spacer-right"
+      index={2}
     />
   </td>
   <td
     className="thin"
   >
     <ChartLegendIcon
-      className="spacer-right line-chart-legend line-chart-legend-2"
+      className="spacer-right"
+      index={2}
     />
   </td>
   <td

server/sonar-web/src/main/js/components/icons-components/ChartLegendIcon.tsx

  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Icon, { IconProps } from './Icon';
+import Icon from './Icon';
+import * as theme from '../../app/theme';
 
-export default function ChartLegendIcon({ className, fill = 'currentColor', size }: IconProps) {
+interface Props {
+  className?: string;
+  index: number;
+  size?: number;
+}
+
+const COLORS = [theme.blue, theme.darkBlue, '#24c6e0'];
+
+export default function ChartLegendIcon({ className, index, size }: Props) {
+  const fill = COLORS[index] || COLORS[0];
   return (
     <Icon className={className} size={size}>
       <path

server/sonar-web/src/main/js/components/preview-graph/PreviewGraphTooltips.tsx

                 }
                 return (
                   <PreviewGraphTooltipsContent
+                    index={idx}
                     key={serie.name}
-                    style={idx.toString()}
                     translatedName={serie.translatedName}
                     value={this.props.formatValue(point.y)}
                   />

server/sonar-web/src/main/js/components/preview-graph/PreviewGraphTooltipsContent.tsx

 import ChartLegendIcon from '../icons-components/ChartLegendIcon';
 
 interface Props {
-  style: string;
+  index: number;
   translatedName: string;
   value: string;
 }
 
-export default function PreviewGraphTooltipsContent({ style, translatedName, value }: Props) {
+export default function PreviewGraphTooltipsContent({ index, translatedName, value }: Props) {
   return (
     <tr className="overview-analysis-graph-tooltip-line">
       <td className="thin">
-        <ChartLegendIcon
-          className={'little-spacer-right line-chart-legend line-chart-legend-' + style}
-        />
+        <ChartLegendIcon className="little-spacer-right" index={index} />
       </td>
       <td className="overview-analysis-graph-tooltip-value text-right little-spacer-right thin">
         {value}

server/sonar-web/src/main/js/components/preview-graph/__tests__/PreviewGraphTooltipsContent-test.tsx

 import PreviewGraphTooltipsContent from '../PreviewGraphTooltipsContent';
 
 const DEFAULT_PROPS = {
-  style: '1',
+  index: 1,
   translatedName: 'Code Smells',
   value: '1.2k'
 };

server/sonar-web/src/main/js/components/preview-graph/__tests__/__snapshots__/PreviewGraphTooltips-test.tsx.snap

     >
       <tbody>
         <PreviewGraphTooltipsContent
+          index={0}
           key="code_smells"
-          style="0"
           translatedName="Code Smells"
           value="Formated.15"
         />
         <PreviewGraphTooltipsContent
+          index={1}
           key="bugs"
-          style="1"
           translatedName="Bugs"
           value="Formated.0"
         />
         <PreviewGraphTooltipsContent
+          index={2}
           key="vulnerabilities"
-          style="2"
           translatedName="Vulnerabilities"
           value="Formated.1"
         />

server/sonar-web/src/main/js/components/preview-graph/__tests__/__snapshots__/PreviewGraphTooltipsContent-test.tsx.snap

     className="thin"
   >
     <ChartLegendIcon
-      className="little-spacer-right line-chart-legend line-chart-legend-1"
+      className="little-spacer-right"
+      index={1}
     />
   </td>
   <td