A couple of fixes for the data dashboard. (#2197)

1. Make sure we use the timezone UTC when formatting the labels for the line chart, so it matches the data received from the backend.

2. Fix the links to articles: for now, it should be fact-checks instead of explainers.

Reference: CV2-4111.

localization/react-intl/src/app/components/dashboard/ListTopArticlesSent.json

@@ -7,6 +7,6 @@
   {
     "id": "listTopArticlesSent.title",
     "description": "Title for the top articles sent list widget",
-    "defaultMessage": "Top Articles Sent"
+    "defaultMessage": "Top Fact-Checks Sent"
   }
 ]

src/app/components/cds/charts/TimelineWidget.js

@@ -19,11 +19,16 @@ const TimelineWidget = ({
   tooltipFormatter,
 }) => {
   const tickFormatter = intl ?
-    value => intl.formatDate(value, { month: 'short', day: 'numeric' }) :
+    value => intl.formatDate(value, { month: 'short', day: 'numeric', timeZone: 'UTC' }) :
     value => value;
 
   const labelFormatter = intl ?
-    value => `${intl.formatDate(value, { month: 'long', day: 'numeric', year: 'numeric' })}:` :
+    value => `${intl.formatDate(value, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      timeZone: 'UTC',
+    })}:` :
     value => value;
 
   return (

src/app/components/dashboard/ListTopArticlesSent.js

@@ -4,13 +4,14 @@ import { FormattedMessage } from 'react-intl';
 import { createFragmentContainer, graphql } from 'react-relay/compat';
 import ListWidget from '../cds/charts/ListWidget';
 
+// FIXME: For now, it assumes the backend is returning only fact-checks - must update this component once the backend returns explainers too
 const ListTopArticlesSent = ({ statistics }) => {
   const teamSlug = window.location.pathname.split('/')[1];
 
   const dataArray = statistics.top_articles_sent.map(a => ({
     itemText: a.label,
     itemValue: a.value,
-    itemLink: `/${teamSlug}/articles/explainers?explainerId=${a.id}`,
+    itemLink: `/${teamSlug}/articles/fact-checks?factCheckId=${a.id}`,
   }));
 
   return (
@@ -25,7 +26,7 @@ const ListTopArticlesSent = ({ statistics }) => {
       items={dataArray}
       title={
         <FormattedMessage
-          defaultMessage="Top Articles Sent"
+          defaultMessage="Top Fact-Checks Sent"
           description="Title for the top articles sent list widget"
           id="listTopArticlesSent.title"
         />