Convert text for internationalization.

components/metrics/MetricsBar.js

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import MetricCard from './MetricCard';
 import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
+import { useDateRange } from 'hooks/useDateRange';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
+import MetricCard from './MetricCard';
 import styles from './MetricsBar.module.css';
-import { useDateRange } from '../../hooks/useDateRange';
 
 export default function MetricsBar({ websiteId, className }) {
   const dateRange = useDateRange(websiteId);
@@ -36,15 +37,28 @@ export default function MetricsBar({ websiteId, className }) {
         <Loading />
       ) : (
         <>
-          <MetricCard label="Views" value={pageviews} format={formatFunc} />
-          <MetricCard label="Visitors" value={uniques} format={formatFunc} />
           <MetricCard
-            label="Bounce rate"
+            label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+            value={pageviews}
+            format={formatFunc}
+          />
+          <MetricCard
+            label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+            value={uniques}
+            format={formatFunc}
+          />
+          <MetricCard
+            label={<FormattedMessage id="metrics.bounce-rate" defaultMessage="Bounce rate" />}
             value={pageviews ? (bounces / pageviews) * 100 : 0}
             format={n => Number(n).toFixed(0) + '%'}
           />
           <MetricCard
-            label="Average visit time"
+            label={
+              <FormattedMessage
+                id="metrics.average-visit-time"
+                defaultMessage="Average visit time"
+              />
+            }
             value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
             format={n => formatShortTime(n, ['m', 's'], ' ')}
           />