export default class GraphsTooltips extends React.PureComponent {
props: Props;
+ renderContent() {
+ const { tooltipIdx } = this.props;
+
+ return this.props.series.map((serie, idx) => {
+ const point = serie.data[tooltipIdx];
+ if (!point || (!point.y && point.y !== 0)) {
+ return null;
+ }
+ if (this.props.graph === DEFAULT_GRAPH) {
+ return (
+ <GraphsTooltipsContentIssues
+ 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
+ key={serie.name}
+ name={serie.name}
+ style={idx.toString()}
+ translatedName={serie.translatedName}
+ value={this.props.formatValue(point.y)}
+ />
+ );
+ }
+ });
+ }
+
render() {
const { events, measuresHistory, tooltipIdx } = this.props;
const top = 30;
left -= TOOLTIP_WIDTH;
customClass = 'bubble-popup-right';
}
+ const tooltipContent = this.renderContent().filter(Boolean);
+ const addSeparator = tooltipContent.length > 0;
return (
<BubblePopup customClass={customClass} position={{ top, left, width: TOOLTIP_WIDTH }}>
<div className="project-activity-graph-tooltip">
</div>
<table className="width-100">
<tbody>
- {this.props.series.map((serie, idx) => {
- const point = serie.data[tooltipIdx];
- if (!point || (!point.y && point.y !== 0)) {
- return null;
- }
- if (this.props.graph === DEFAULT_GRAPH) {
- return (
- <GraphsTooltipsContentIssues
- key={serie.name}
- measuresHistory={measuresHistory}
- name={serie.name}
- style={idx.toString()}
- tooltipIdx={tooltipIdx}
- translatedName={serie.translatedName}
- value={this.props.formatValue(point.y)}
- />
- );
- } else {
- return (
- <GraphsTooltipsContent
- key={serie.name}
- name={serie.name}
- style={idx.toString()}
- translatedName={serie.translatedName}
- value={this.props.formatValue(point.y)}
- />
- );
- }
- })}
+ {tooltipContent}
</tbody>
{this.props.graph === 'coverage' &&
<GraphsTooltipsContentCoverage
+ addSeparator={addSeparator}
measuresHistory={measuresHistory}
tooltipIdx={tooltipIdx}
/>}
{this.props.graph === 'duplications' &&
<GraphsTooltipsContentDuplication
+ addSeparator={addSeparator}
measuresHistory={measuresHistory}
tooltipIdx={tooltipIdx}
/>}
- {events && events.length > 0 && <GraphsTooltipsContentEvents events={events} />}
+ {events &&
+ events.length > 0 &&
+ <GraphsTooltipsContentEvents addSeparator={addSeparator} events={events} />}
</table>
</div>
</BubblePopup>
import type { MeasureHistory } from '../types';
type Props = {
+ addSeparator: boolean,
measuresHistory: Array<MeasureHistory>,
tooltipIdx: number
};
-export default function GraphsTooltipsContentCoverage({ measuresHistory, tooltipIdx }: Props) {
+export default function GraphsTooltipsContentCoverage({
+ addSeparator,
+ measuresHistory,
+ tooltipIdx
+}: Props) {
const uncovered = measuresHistory.find(measure => measure.metric === 'uncovered_lines');
const coverage = measuresHistory.find(measure => measure.metric === 'coverage');
if (!uncovered || !uncovered.history[tooltipIdx] || !coverage || !coverage.history[tooltipIdx]) {
const coverageValue = coverage.history[tooltipIdx].value;
return (
<tbody>
- <tr>
- <td className="project-activity-graph-tooltip-separator" colSpan="3">
- <hr />
- </td>
- </tr>
+ {addSeparator &&
+ <tr>
+ <td className="project-activity-graph-tooltip-separator" colSpan="3">
+ <hr />
+ </td>
+ </tr>}
{uncoveredValue &&
<tr className="project-activity-graph-tooltip-line">
<td
import type { MeasureHistory } from '../types';
type Props = {
+ addSeparator: boolean,
measuresHistory: Array<MeasureHistory>,
tooltipIdx: number
};
-export default function GraphsTooltipsContentDuplication({ measuresHistory, tooltipIdx }: Props) {
+export default function GraphsTooltipsContentDuplication({
+ addSeparator,
+ measuresHistory,
+ tooltipIdx
+}: Props) {
const duplicationDensity = measuresHistory.find(
measure => measure.metric === 'duplicated_lines_density'
);
}
return (
<tbody>
- <tr>
- <td className="project-activity-graph-tooltip-separator" colSpan="3">
- <hr />
- </td>
- </tr>
+ {addSeparator &&
+ <tr>
+ <td className="project-activity-graph-tooltip-separator" colSpan="3">
+ <hr />
+ </td>
+ </tr>}
<tr className="project-activity-graph-tooltip-line">
<td
colSpan="2"
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should not add separators if not needed 1`] = `
+<BubblePopup
+ customClass="bubble-popup-right"
+ position={
+ Object {
+ "left": 476,
+ "top": 30,
+ "width": 250,
+ }
+ }
+>
+ <div
+ className="project-activity-graph-tooltip"
+ >
+ <div
+ className="project-activity-graph-tooltip-title spacer-bottom"
+ >
+ <FormattedDate
+ date={2011-10-01T22:01:00.000Z}
+ format="LL"
+ />
+ </div>
+ <table
+ className="width-100"
+ >
+ <tbody />
+ <GraphsTooltipsContentCoverage
+ addSeparator={false}
+ measuresHistory={Array []}
+ tooltipIdx={0}
+ />
+ </table>
+ </div>
+</BubblePopup>
+`;
+
exports[`should render correctly for issues graphs 1`] = `
<BubblePopup
customClass="bubble-popup-right"