Formatted Tooltips in Timeline widgets (#2191)

meedan · Nov 7, 2024 · 412f4b2 · 412f4b2
1 parent ffeee8b
commit 412f4b2
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 26 deletions.
diff --git a/localization/react-intl/src/app/components/dashboard/TimelineArticlesCreatedAndUpdated.json b/localization/react-intl/src/app/components/dashboard/TimelineArticlesCreatedAndUpdated.json
@@ -3,5 +3,15 @@
     "id": "timelineArticlesCreatedAndUpdated.title",
     "description": "Title for the number of articles added and updated timeline widget",
     "defaultMessage": "Articles Added & Updated"
+  },
+  {
+    "id": "timelineArticlesCreatedAndUpdated.created",
+    "description": "Tooltip for the articles created and updated widget",
+    "defaultMessage": "• {articleCount} created"
+  },
+  {
+    "id": "timelineArticlesCreatedAndUpdated.updated",
+    "description": "Tooltip for the articles created and updated widget",
+    "defaultMessage": "• {articleCount} updated"
   }
 ]
diff --git a/localization/react-intl/src/app/components/dashboard/TimelineTiplineMessageVolume.json b/localization/react-intl/src/app/components/dashboard/TimelineTiplineMessageVolume.json
@@ -3,5 +3,10 @@
     "id": "timelineTiplineMessageVolume.title",
     "description": "Title for the tipline message volume widget",
     "defaultMessage": "Tipline Message Volume"
+  },
+  {
+    "id": "timelineTiplineMessageVolume.tooltip",
+    "description": "Tooltip for the tipline message volume widget",
+    "defaultMessage": "• {value} messages"
   }
 ]
diff --git a/src/app/components/dashboard/TimelineArticlesCreatedAndUpdated.js b/src/app/components/dashboard/TimelineArticlesCreatedAndUpdated.js
@@ -4,32 +4,44 @@ import { FormattedMessage } from 'react-intl';
 import { createFragmentContainer, graphql } from 'react-relay/compat';
 import TimelineWidget from '../cds/charts/TimelineWidget';
 
-const TimelineArticlesCreatedAndUpdated = ({ statistics }) => {
-  //
-  // TODO: Format tooltip to show both created and updated articles
-  //
-
-  console.log('TimelineArticlesCreatedAndUpdated statistics:', statistics.number_of_articles_created_by_date); // eslint-disable-line no-console
-  console.log('TimelineArticlesCreatedAndUpdated statistics:', statistics.number_of_articles_updated_by_date); // eslint-disable-line no-console
-
-  return (
-    <TimelineWidget
-      data={
-        Object.entries(statistics.number_of_articles_created_by_date).map(([date, value]) => ({
-          date: `${date}T23:59:59.000Z`,
-          value,
-        }))
-      }
-      title={
-        <FormattedMessage
-          defaultMessage="Articles Added & Updated"
-          description="Title for the number of articles added and updated timeline widget"
-          id="timelineArticlesCreatedAndUpdated.title"
-        />
-      }
-    />
-  );
-};
+const TimelineArticlesCreatedAndUpdated = ({ statistics }) => (
+  <TimelineWidget
+    data={
+      Object.entries(statistics.number_of_articles_created_by_date).map(([date, value]) => ({
+        date: `${date}T23:59:59.000Z`,
+        value,
+        updatedValue: statistics.number_of_articles_updated_by_date[date],
+      }))
+    }
+    title={
+      <FormattedMessage
+        defaultMessage="Articles Added & Updated"
+        description="Title for the number of articles added and updated timeline widget"
+        id="timelineArticlesCreatedAndUpdated.title"
+      />
+    }
+    tooltipFormatter={(value, name, props) => [(
+      <>
+        <div>
+          <FormattedMessage
+            defaultMessage="• {articleCount} created"
+            description="Tooltip for the articles created and updated widget"
+            id="timelineArticlesCreatedAndUpdated.created"
+            values={{ articleCount: value }}
+          />
+        </div>
+        <div>
+          <FormattedMessage
+            defaultMessage="• {articleCount} updated"
+            description="Tooltip for the articles created and updated widget"
+            id="timelineArticlesCreatedAndUpdated.updated"
+            values={{ articleCount: props.payload.updatedValue - value }}
+          />
+        </div>
+      </>
+    )]}
+  />
+);
 
 TimelineArticlesCreatedAndUpdated.propTypes = {
   statistics: PropTypes.shape({

diff --git a/src/app/components/dashboard/TimelineTiplineMessageVolume.js b/src/app/components/dashboard/TimelineTiplineMessageVolume.js
@@ -19,6 +19,14 @@ const TimelineTiplineMessageVolume = ({ statistics }) => (
         id="timelineTiplineMessageVolume.title"
       />
     }
+    tooltipFormatter={value => [(
+      <FormattedMessage
+        defaultMessage="• {value} messages"
+        description="Tooltip for the tipline message volume widget"
+        id="timelineTiplineMessageVolume.tooltip"
+        values={{ value }}
+      />
+    )]}
   />
 );