import EmptyResult from './EmptyResult';
import OriginalBubbleChart from '../../../components/charts/BubbleChart';
import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend';
+import Tooltip from '../../../components/controls/Tooltip';
+import HelpIcon from '../../../components/icons-components/HelpIcon';
import { formatMeasure, isDiffMetric } from '../../../helpers/measures';
import {
getLocalizedMetricDomain,
handleBubbleClick = (component /*: ComponentEnhanced */) =>
this.props.updateSelected(component.refKey || component.key);
+ getDescription(domain /*: string */) {
+ const description = `component_measures.overview.${domain}.description`;
+ const translatedDescription = translate(description);
+ if (description === translatedDescription) {
+ return null;
+ }
+ return translatedDescription;
+ }
+
renderBubbleChart(
metrics /*: {
x: Metric ,
);
return (
<div className="measure-overview-bubble-chart-header">
- <span className="measure-overview-bubble-chart-title">{title}</span>
+ <span className="measure-overview-bubble-chart-title">
+ {title}
+ <Tooltip overlay={this.getDescription(domain)}>
+ <span className="spacer-left text-info">
+ <HelpIcon />
+ </span>
+ </Tooltip>
+ </span>
<span className="measure-overview-bubble-chart-legend">
<span className="note">
{colorsMetric && (
);
}
- renderChartFooter(domain /*: string */) {
- const description = `component_measures.overview.${domain}.description`;
- const translatedDescription = translate(description);
- if (description === translatedDescription) {
- return null;
- }
- return <div className="measure-overview-bubble-chart-footer">{translatedDescription}</div>;
- }
-
render() {
if (this.props.components.length <= 0) {
return <EmptyResult />;
<div className="measure-overview-bubble-chart-axis y">
{getLocalizedMetricName(metrics.y)}
</div>
- {this.renderChartFooter(domain)}
</div>
);
}
font-style: italic;
}
+.measure-details-bubble-chart-title {
+ position: absolute;
+ left: 20px;
+}
+
.measure-details-bubble-chart-axis {
position: absolute;
color: var(--secondFontColor);
.measure-details-bubble-chart-axis.x {
left: 50%;
- bottom: 10px;
+ bottom: 16px;
width: 500px;
margin-left: -250px;
text-align: center;
}
.measure-details-bubble-chart-axis.size {
- left: 50%;
- top: 10px;
- width: 500px;
- margin-left: -250px;
- text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ top: 16px;
+ width: 100%;
}
.projects-empty-list {
import * as React from 'react';
import SimpleBubbleChart from './SimpleBubbleChart';
import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
interface Props {
displayOrganizations: boolean;
+ helpText: string;
projects: Project[];
}
return (
<SimpleBubbleChart
{...props}
+ sizeMetric={{ key: 'uncovered_lines', type: 'SHORT_INT' }}
+ title={translate('projects.visualization', 'coverage')}
xMetric={{ key: 'complexity', type: 'SHORT_INT' }}
- yMetric={{ key: 'coverage', type: 'PERCENT' }}
yDomain={[100, 0]}
- sizeMetric={{ key: 'uncovered_lines', type: 'SHORT_INT' }}
+ yMetric={{ key: 'coverage', type: 'PERCENT' }}
/>
);
}
import * as React from 'react';
import SimpleBubbleChart from './SimpleBubbleChart';
import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
interface Props {
displayOrganizations: boolean;
+ helpText: string;
projects: Project[];
}
return (
<SimpleBubbleChart
{...props}
+ sizeMetric={{ key: 'duplicated_blocks', type: 'SHORT_INT' }}
+ title={translate('projects.visualization', 'duplications')}
xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
yMetric={{ key: 'duplicated_lines_density', type: 'PERCENT' }}
- sizeMetric={{ key: 'duplicated_blocks', type: 'SHORT_INT' }}
/>
);
}
import * as React from 'react';
import SimpleBubbleChart from './SimpleBubbleChart';
import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
interface Props {
displayOrganizations: boolean;
+ helpText: string;
projects: Project[];
}
return (
<SimpleBubbleChart
{...props}
+ colorMetric="sqale_rating"
+ sizeMetric={{ key: 'code_smells', type: 'SHORT_INT' }}
+ title={translate('projects.visualization', 'maintainability')}
xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
yMetric={{ key: 'sqale_index', type: 'SHORT_WORK_DUR' }}
- sizeMetric={{ key: 'code_smells', type: 'SHORT_INT' }}
- colorMetric="sqale_rating"
/>
);
}
import * as React from 'react';
import SimpleBubbleChart from './SimpleBubbleChart';
import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
interface Props {
displayOrganizations: boolean;
+ helpText: string;
projects: Project[];
}
return (
<SimpleBubbleChart
{...props}
+ colorMetric="reliability_rating"
+ sizeMetric={{ key: 'bugs', type: 'SHORT_INT' }}
+ title={translate('projects.visualization', 'reliability')}
xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
yMetric={{ key: 'reliability_remediation_effort', type: 'SHORT_WORK_DUR' }}
- sizeMetric={{ key: 'bugs', type: 'SHORT_INT' }}
- colorMetric="reliability_rating"
/>
);
}
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { RATING_COLORS } from '../../../helpers/constants';
import { getProjectUrl } from '../../../helpers/urls';
+import Tooltip from '../../../components/controls/Tooltip';
+import HelpIcon from '../../../components/icons-components/HelpIcon';
const X_METRIC = 'sqale_index';
const X_METRIC_TYPE = 'SHORT_WORK_DUR';
interface Props {
displayOrganizations: boolean;
+ helpText: string;
projects: Project[];
}
padding={[80, 20, 60, 100]}
yDomain={[100, 0]}
/>
+
<div className="measure-details-bubble-chart-axis x">
{translate('metric', X_METRIC, 'name')}
</div>
{translate('metric', Y_METRIC, 'name')}
</div>
<div className="measure-details-bubble-chart-axis size">
- <span className="spacer-right">
+ <span className="measure-details-bubble-chart-title">
+ {translate('projects.visualization.risk')}
+ <Tooltip overlay={this.props.helpText}>
+ <span className="spacer-left text-info">
+ <HelpIcon />
+ </span>
+ </Tooltip>
+ </span>
+ <div>
+ <span className="spacer-right">
+ {translateWithParameters(
+ 'component_measures.legend.color_x',
+ translate('projects.worse_of_reliablity_and_security')
+ )}
+ </span>
{translateWithParameters(
- 'component_measures.legend.color_x',
- translate('projects.worse_of_reliablity_and_security')
+ 'component_measures.legend.size_x',
+ translate('metric', SIZE_METRIC, 'name')
)}
- </span>
- {translateWithParameters(
- 'component_measures.legend.size_x',
- translate('metric', SIZE_METRIC, 'name')
- )}
- <ColorRatingsLegend className="big-spacer-top" />
+ <ColorRatingsLegend className="big-spacer-top" />
+ </div>
</div>
</div>
);
import * as React from 'react';
import SimpleBubbleChart from './SimpleBubbleChart';
import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
interface Props {
displayOrganizations: boolean;
+ helpText: string;
projects: Project[];
}
return (
<SimpleBubbleChart
{...props}
+ colorMetric="security_rating"
+ sizeMetric={{ key: 'vulnerabilities', type: 'SHORT_INT' }}
+ title={translate('projects.visualization', 'security')}
xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
yMetric={{ key: 'security_remediation_effort', type: 'SHORT_WORK_DUR' }}
- sizeMetric={{ key: 'vulnerabilities', type: 'SHORT_INT' }}
- colorMetric="security_rating"
/>
);
}
import { RATING_COLORS } from '../../../helpers/constants';
import { getProjectUrl } from '../../../helpers/urls';
import { Project } from '../types';
+import Tooltip from '../../../components/controls/Tooltip';
+import HelpIcon from '../../../components/icons-components/HelpIcon';
export interface Metric {
key: string;
interface Props {
colorMetric?: string;
displayOrganizations: boolean;
+ helpText: string;
projects: Project[];
sizeMetric: Metric;
+ title?: string;
xMetric: Metric;
yDomain?: [number, number];
yMetric: Metric;
{translate('metric', yMetric.key, 'name')}
</div>
<div className="measure-details-bubble-chart-axis size">
- {colorMetric != null && (
- <span className="spacer-right">
- {translateWithParameters(
- 'component_measures.legend.color_x',
- translate('metric', colorMetric, 'name')
- )}
- </span>
- )}
- {translateWithParameters(
- 'component_measures.legend.size_x',
- translate('metric', sizeMetric.key, 'name')
- )}
- {colorMetric != null && <ColorRatingsLegend className="big-spacer-top" />}
+ <span className="measure-details-bubble-chart-title">
+ {this.props.title}
+ <Tooltip overlay={this.props.helpText}>
+ <span className="spacer-left text-info">
+ <HelpIcon className="text-bottom" />
+ </span>
+ </Tooltip>
+ </span>
+ <div>
+ {colorMetric != null && (
+ <span className="spacer-right">
+ {translateWithParameters(
+ 'component_measures.legend.color_x',
+ translate('metric', colorMetric, 'name')
+ )}
+ </span>
+ )}
+ {translateWithParameters(
+ 'component_measures.legend.size_x',
+ translate('metric', sizeMetric.key, 'name')
+ )}
+ {colorMetric != null && <ColorRatingsLegend className="big-spacer-top" />}
+ </div>
</div>
</div>
);
const Component = visualizationToComponent[this.props.visualization];
return Component ? (
- <Component displayOrganizations={this.props.displayOrganizations} projects={projects} />
+ <Component
+ displayOrganizations={this.props.displayOrganizations}
+ helpText={translate('projects.visualization', this.props.visualization, 'description')}
+ projects={projects}
+ />
) : null;
}
const limitReached = projects != null && total != null && projects.length < total;
- return (
+ return limitReached ? (
<footer className="projects-visualizations-footer">
- <p>{translate('projects.visualization', this.props.visualization, 'description')}</p>
- {limitReached && (
- <p className="note spacer-top">
- {translateWithParameters(
- 'projects.limited_set_of_projects',
- projects!.length,
- localizeSorting(sort)
- )}
- </p>
- )}
+ <p className="note spacer-top">
+ {translateWithParameters(
+ 'projects.limited_set_of_projects',
+ projects!.length,
+ localizeSorting(sort)
+ )}
+ </p>
</footer>
- );
+ ) : null;
}
render() {
import Coverage from '../Coverage';
it('renders', () => {
- expect(shallow(<Coverage displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+ expect(
+ shallow(<Coverage displayOrganizations={false} helpText="foobar" projects={[]} />)
+ ).toMatchSnapshot();
});
import Duplications from '../Duplications';
it('renders', () => {
- expect(shallow(<Duplications displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+ expect(
+ shallow(<Duplications displayOrganizations={false} helpText="foobar" projects={[]} />)
+ ).toMatchSnapshot();
});
import Maintainability from '../Maintainability';
it('renders', () => {
- expect(shallow(<Maintainability displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+ expect(
+ shallow(<Maintainability displayOrganizations={false} helpText="foobar" projects={[]} />)
+ ).toMatchSnapshot();
});
import Reliability from '../Reliability';
it('renders', () => {
- expect(shallow(<Reliability displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+ expect(
+ shallow(<Reliability displayOrganizations={false} helpText="foobar" projects={[]} />)
+ ).toMatchSnapshot();
});
tags: [],
visibility: 'public'
};
- expect(shallow(<Risk displayOrganizations={false} projects={[project1]} />)).toMatchSnapshot();
+ expect(
+ shallow(<Risk displayOrganizations={false} helpText="foobar" projects={[project1]} />)
+ ).toMatchSnapshot();
});
import Security from '../Security';
it('renders', () => {
- expect(shallow(<Security displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+ expect(
+ shallow(<Security displayOrganizations={false} helpText="foobar" projects={[]} />)
+ ).toMatchSnapshot();
});
<SimpleBubbleChart
colorMetric="security_rating"
displayOrganizations={false}
+ helpText="foobar"
projects={[project1]}
sizeMetric={{ key: 'ncloc', type: 'INT' }}
xMetric={{ key: 'complexity', type: 'INT' }}
exports[`renders 1`] = `
<SimpleBubbleChart
displayOrganizations={false}
+ helpText="foobar"
projects={Array []}
sizeMetric={
Object {
"type": "SHORT_INT",
}
}
+ title="projects.visualization.coverage"
xMetric={
Object {
"key": "complexity",
exports[`renders 1`] = `
<SimpleBubbleChart
displayOrganizations={false}
+ helpText="foobar"
projects={Array []}
sizeMetric={
Object {
"type": "SHORT_INT",
}
}
+ title="projects.visualization.duplications"
xMetric={
Object {
"key": "ncloc",
<SimpleBubbleChart
colorMetric="sqale_rating"
displayOrganizations={false}
+ helpText="foobar"
projects={Array []}
sizeMetric={
Object {
"type": "SHORT_INT",
}
}
+ title="projects.visualization.maintainability"
xMetric={
Object {
"key": "ncloc",
<SimpleBubbleChart
colorMetric="reliability_rating"
displayOrganizations={false}
+ helpText="foobar"
projects={Array []}
sizeMetric={
Object {
"type": "SHORT_INT",
}
}
+ title="projects.visualization.reliability"
xMetric={
Object {
"key": "ncloc",
className="measure-details-bubble-chart-axis size"
>
<span
- className="spacer-right"
+ className="measure-details-bubble-chart-title"
>
- component_measures.legend.color_x.projects.worse_of_reliablity_and_security
+ projects.visualization.risk
+ <Tooltip
+ overlay="foobar"
+ >
+ <span
+ className="spacer-left text-info"
+ >
+ <HelpIcon />
+ </span>
+ </Tooltip>
</span>
- component_measures.legend.size_x.metric.ncloc.name
- <ColorRatingsLegend
- className="big-spacer-top"
- />
+ <div>
+ <span
+ className="spacer-right"
+ >
+ component_measures.legend.color_x.projects.worse_of_reliablity_and_security
+ </span>
+ component_measures.legend.size_x.metric.ncloc.name
+ <ColorRatingsLegend
+ className="big-spacer-top"
+ />
+ </div>
</div>
</div>
`;
<SimpleBubbleChart
colorMetric="security_rating"
displayOrganizations={false}
+ helpText="foobar"
projects={Array []}
sizeMetric={
Object {
"type": "SHORT_INT",
}
}
+ title="projects.visualization.security"
xMetric={
Object {
"key": "ncloc",
className="measure-details-bubble-chart-axis size"
>
<span
- className="spacer-right"
+ className="measure-details-bubble-chart-title"
>
- component_measures.legend.color_x.metric.security_rating.name
+ <Tooltip
+ overlay="foobar"
+ >
+ <span
+ className="spacer-left text-info"
+ >
+ <HelpIcon
+ className="text-bottom"
+ />
+ </span>
+ </Tooltip>
</span>
- component_measures.legend.size_x.metric.ncloc.name
- <ColorRatingsLegend
- className="big-spacer-top"
- />
+ <div>
+ <span
+ className="spacer-right"
+ >
+ component_measures.legend.color_x.metric.security_rating.name
+ </span>
+ component_measures.legend.size_x.metric.ncloc.name
+ <ColorRatingsLegend
+ className="big-spacer-top"
+ />
+ </div>
</div>
</div>
`;
>
<Coverage
displayOrganizations={false}
+ helpText="projects.visualization.coverage.description"
projects={Array []}
/>
</div>
- <footer
- className="projects-visualizations-footer"
- >
- <p>
- projects.visualization.coverage.description
- </p>
- </footer>
</div>
`;
>
<Coverage
displayOrganizations={false}
+ helpText="projects.visualization.coverage.description"
projects={Array []}
/>
</div>
<footer
className="projects-visualizations-footer"
>
- <p>
- projects.visualization.coverage.description
- </p>
<p
className="note spacer-top"
>