*/
import React from 'react';
import moment from 'moment';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import Tooltip from '../../../components/controls/Tooltip';
import { getPeriodLabel, getPeriodDate } from '../../../helpers/periods';
import { translateWithParameters } from '../../../helpers/l10n';
-const LeakPeriodLegend = ({ period }) => {
+export default function LeakPeriodLegend({ period }) {
+ const label = (
+ <div className="measures-domains-leak-header">
+ {translateWithParameters('overview.leak_period_x', getPeriodLabel(period))}
+ </div>
+ );
+
+ if (period.mode === 'days') {
+ return label;
+ }
+
const date = getPeriodDate(period);
- const label = getPeriodLabel(period);
const fromNow = moment(date).fromNow();
const tooltip = fromNow + ', ' + moment(date).format('LL');
-
- return (
- <TooltipsContainer>
- <div className="measures-domains-leak-header">
- <div title={tooltip} data-toggle="tooltip">
- {translateWithParameters('overview.leak_period_x', label)}
- </div>
- </div>
- </TooltipsContainer>
- );
-};
-
-export default LeakPeriodLegend;
+ return <Tooltip placement="bottom" overlay={tooltip}>{label}</Tooltip>;
+}
// @flow
import React from 'react';
import moment from 'moment';
+import Tooltip from '../../../components/controls/Tooltip';
import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
import { translateWithParameters } from '../../../helpers/l10n';
| PreviousAnalysisPeriod
| PreviousVersionPeriod;
-export default function LeakPeriodLegend(props: { period: Period }) {
- const { period } = props;
+export default function LeakPeriodLegend({ period }: { period: Period }) {
const leakPeriodLabel = getPeriodLabel(period);
- const leakPeriodDate = getPeriodDate(period);
+ if (period.mode === 'days') {
+ return (
+ <div className="overview-legend overview-legend-spaced-line">
+ {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
+ </div>
+ );
+ }
+
+ const leakPeriodDate = getPeriodDate(period);
const momentDate = moment(leakPeriodDate);
const fromNow = momentDate.fromNow();
- const note = ['date', 'days'].includes(period.mode)
+ const note = ['date'].includes(period.mode)
? translateWithParameters('overview.last_analysis_x', fromNow)
: translateWithParameters('overview.started_x', fromNow);
- const tooltip = ['date', 'days'].includes(period.mode)
+ const tooltip = ['date'].includes(period.mode)
? translateWithParameters('overview.last_analysis_on_x', momentDate.format('LL'))
: translateWithParameters('overview.started_on_x', momentDate.format('LL'));
return (
- <div className="overview-legend" title={tooltip} data-toggle="tooltip">
- {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
- <br />
- <span className="note">{note}</span>
- </div>
+ <Tooltip overlay={tooltip} placement="bottom">
+ <div className="overview-legend">
+ {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
+ <br />
+ <span className="note">{note}</span>
+ </div>
+ </Tooltip>
);
}