@@ -1,32 +0,0 @@ | |||
/* | |||
* 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; | |||
} |
@@ -36,7 +36,6 @@ | |||
@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'; |
@@ -35,11 +35,11 @@ export default function GraphsLegendCustom({ removeMetric, series }: Props) { | |||
const hasData = hasDataValues(serie); | |||
const legendItem = ( | |||
<GraphsLegendItem | |||
index={idx} | |||
metric={serie.name} | |||
name={serie.translatedName} | |||
removeMetric={removeMetric} | |||
showWarning={!hasData} | |||
style={idx.toString()} | |||
/> | |||
); | |||
if (!hasData) { |
@@ -27,10 +27,10 @@ import ClearIcon from '../../../components/icons-components/ClearIcon'; | |||
interface Props { | |||
className?: string; | |||
index: number; | |||
metric: string; | |||
name: string; | |||
showWarning?: boolean; | |||
style: string; | |||
removeMetric?: (metric: string) => void; | |||
} | |||
@@ -52,12 +52,7 @@ export default class GraphsLegendItem extends React.PureComponent<Props> { | |||
{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 && ( |
@@ -31,10 +31,10 @@ export default function GraphsLegendStatic({ series }: Props) { | |||
{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> |
@@ -54,10 +54,10 @@ export default class GraphsTooltips extends React.PureComponent<Props> { | |||
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)} | |||
@@ -66,9 +66,9 @@ export default class GraphsTooltips extends React.PureComponent<Props> { | |||
} else { | |||
return ( | |||
<GraphsTooltipsContent | |||
index={idx} | |||
key={serie.name} | |||
name={serie.name} | |||
style={idx.toString()} | |||
translatedName={serie.translatedName} | |||
value={this.props.formatValue(point.y)} | |||
/> |
@@ -18,23 +18,20 @@ | |||
* 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> |
@@ -18,15 +18,14 @@ | |||
* 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; | |||
@@ -49,12 +48,7 @@ export default function GraphsTooltipsContentIssues(props: Props) { | |||
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> |
@@ -22,7 +22,7 @@ import { shallow } from 'enzyme'; | |||
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', () => { | |||
@@ -30,10 +30,10 @@ it('should render correctly an actionable legend', () => { | |||
shallow( | |||
<GraphsLegendItem | |||
className="myclass" | |||
index={1} | |||
metric="foo" | |||
name="Foo" | |||
removeMetric={() => {}} | |||
style="1" | |||
/> | |||
) | |||
).toMatchSnapshot(); | |||
@@ -42,7 +42,7 @@ it('should render correctly an actionable legend', () => { | |||
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(); | |||
}); |
@@ -22,8 +22,8 @@ import { shallow } from 'enzyme'; | |||
import GraphsTooltipsContent from '../GraphsTooltipsContent'; | |||
const DEFAULT_PROPS = { | |||
index: 1, | |||
name: 'code_smells', | |||
style: '1', | |||
translatedName: 'Code Smells', | |||
value: '1.2k' | |||
}; |
@@ -40,9 +40,9 @@ const MEASURES_ISSUES = [ | |||
]; | |||
const DEFAULT_PROPS = { | |||
index: 2, | |||
measuresHistory: MEASURES_ISSUES, | |||
name: 'bugs', | |||
style: '2', | |||
tooltipIdx: 1, | |||
translatedName: 'Bugs', | |||
value: '1.2k' |
@@ -9,11 +9,11 @@ exports[`should render correctly the list of series 1`] = ` | |||
key="bugs" | |||
> | |||
<GraphsLegendItem | |||
index={0} | |||
metric="bugs" | |||
name="Bugs" | |||
removeMetric={[Function]} | |||
showWarning={false} | |||
style="0" | |||
/> | |||
</span> | |||
<span | |||
@@ -21,11 +21,11 @@ exports[`should render correctly the list of series 1`] = ` | |||
key="my_metric" | |||
> | |||
<GraphsLegendItem | |||
index={1} | |||
metric="my_metric" | |||
name="My Metric" | |||
removeMetric={[Function]} | |||
showWarning={false} | |||
style="1" | |||
/> | |||
</span> | |||
<Tooltip | |||
@@ -36,11 +36,11 @@ exports[`should render correctly the list of series 1`] = ` | |||
className="spacer-left spacer-right" | |||
> | |||
<GraphsLegendItem | |||
index={2} | |||
metric="foo" | |||
name="Foo" | |||
removeMetric={[Function]} | |||
showWarning={true} | |||
style="2" | |||
/> | |||
</span> | |||
</Tooltip> |
@@ -5,7 +5,8 @@ exports[`should render correctly a legend 1`] = ` | |||
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" | |||
@@ -20,7 +21,8 @@ exports[`should render correctly an actionable legend 1`] = ` | |||
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" |
@@ -6,17 +6,17 @@ exports[`should render correctly the list of series 1`] = ` | |||
> | |||
<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> | |||
`; |
@@ -63,28 +63,28 @@ exports[`should render correctly for issues graphs 1`] = ` | |||
> | |||
<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" | |||
@@ -122,23 +122,23 @@ exports[`should render correctly for random graphs 1`] = ` | |||
> | |||
<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" | |||
/> |
@@ -9,7 +9,8 @@ exports[`should render correctly 1`] = ` | |||
className="thin" | |||
> | |||
<ChartLegendIcon | |||
className="spacer-right line-chart-legend line-chart-legend-1" | |||
className="spacer-right" | |||
index={1} | |||
/> | |||
</td> | |||
<td |
@@ -9,7 +9,8 @@ exports[`should render correctly 1`] = ` | |||
className="thin" | |||
> | |||
<ChartLegendIcon | |||
className="spacer-right line-chart-legend line-chart-legend-2" | |||
className="spacer-right" | |||
index={2} | |||
/> | |||
</td> | |||
<td | |||
@@ -41,7 +42,8 @@ exports[`should render correctly when rating data is missing 1`] = ` | |||
className="thin" | |||
> | |||
<ChartLegendIcon | |||
className="spacer-right line-chart-legend line-chart-legend-2" | |||
className="spacer-right" | |||
index={2} | |||
/> | |||
</td> | |||
<td |
@@ -18,9 +18,19 @@ | |||
* 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 |
@@ -64,8 +64,8 @@ export default class PreviewGraphTooltips extends React.PureComponent<Props> { | |||
} | |||
return ( | |||
<PreviewGraphTooltipsContent | |||
index={idx} | |||
key={serie.name} | |||
style={idx.toString()} | |||
translatedName={serie.translatedName} | |||
value={this.props.formatValue(point.y)} | |||
/> |
@@ -21,18 +21,16 @@ import * as React from 'react'; | |||
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} |
@@ -22,7 +22,7 @@ import { shallow } from 'enzyme'; | |||
import PreviewGraphTooltipsContent from '../PreviewGraphTooltipsContent'; | |||
const DEFAULT_PROPS = { | |||
style: '1', | |||
index: 1, | |||
translatedName: 'Code Smells', | |||
value: '1.2k' | |||
}; |
@@ -28,20 +28,20 @@ exports[`should render correctly 1`] = ` | |||
> | |||
<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" | |||
/> |
@@ -8,7 +8,8 @@ exports[`should render correctly 1`] = ` | |||
className="thin" | |||
> | |||
<ChartLegendIcon | |||
className="little-spacer-right line-chart-legend line-chart-legend-1" | |||
className="little-spacer-right" | |||
index={1} | |||
/> | |||
</td> | |||
<td |