fix(rhelGraphCardHelpers): issues/161 generate tooltips

* generate tooltips vs hard coded * expand switch granularity defaults * no data display
RedHatInsights · Dec 16, 2019 · 7d3b350 · 7d3b350
1 parent 287972c
commit 7d3b350
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 41 deletions.
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -14,7 +14,7 @@ exports[`I18n Component should generate a predictable pot output snapshot: pot o
 msgstr \\"\\"
 \\"Content-Type: text/plain; charset=UTF-8\\\\n\\"
 
-#: src/components/rhelGraphCard/rhelGraphCardHelpers.js:76
+#: src/components/rhelGraphCard/rhelGraphCardHelpers.js:73
 msgid \\"curiosity-graph.dateLabel\\"
 msgstr \\"\\"
 
@@ -26,8 +26,8 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.dropdownMonthly\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:144
-#: src/components/rhelGraphCard/rhelGraphCard.js:148
+#: src/components/rhelGraphCard/rhelGraphCard.js:145
+#: src/components/rhelGraphCard/rhelGraphCard.js:149
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"
 
@@ -39,26 +39,23 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.dropdownWeekly\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:141
+#: src/components/rhelGraphCard/rhelGraphCard.js:142
 msgid \\"curiosity-graph.heading\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCardHelpers.js:84
-msgid \\"curiosity-graph.noDataLabel\\"
+#: src/components/rhelGraphCard/rhelGraphCard.js:111
+msgid \\"curiosity-graph.hypervisorSocketsLabel\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:110
-#: src/components/rhelGraphCard/rhelGraphCardHelpers.js:69
-msgid \\"curiosity-graph.productHypervisorLabel\\"
+#: src/components/rhelGraphCard/rhelGraphCardHelpers.js:90
+msgid \\"curiosity-graph.noDataLabel\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:98
-#: src/components/rhelGraphCard/rhelGraphCardHelpers.js:71
-msgid \\"curiosity-graph.productSocketsLabel\\"
+#: src/components/rhelGraphCard/rhelGraphCard.js:99
+msgid \\"curiosity-graph.physicalSocketsLabel\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:121
-#: src/components/rhelGraphCard/rhelGraphCardHelpers.js:72
+#: src/components/rhelGraphCard/rhelGraphCard.js:122
 msgid \\"curiosity-graph.thresholdLabel\\"
 msgstr \\"\\"
 

diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCardHelpers.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCardHelpers.test.js.snap
@@ -20,21 +20,21 @@ Object {
 
 exports[`RhelGraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: granularity data display 1`] = `
 Object {
-  "daily": "t(curiosity-graph.thresholdLabel): 100
-t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
+  "daily": "t(curiosity-graph.thresholdLabel, [object Object]): 100
 t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
-t(curiosity-graph.dateLabel): June 1",
-  "monthly": "t(curiosity-graph.thresholdLabel): 100
 t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.thresholdLabel, [object Object]): 100
 t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
-t(curiosity-graph.dateLabel): June 2019",
-  "quarterly": "t(curiosity-graph.thresholdLabel): 100
 t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
-t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
 t(curiosity-graph.dateLabel): June 2019",
-  "weekly": "t(curiosity-graph.thresholdLabel): 100
+  "quarterly": "t(curiosity-graph.thresholdLabel, [object Object]): 100
+t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
 t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.thresholdLabel, [object Object]): 100
 t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
 t(curiosity-graph.dateLabel): June 1",
 }
 `;

diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js
@@ -71,7 +71,8 @@ class RhelGraphCard extends React.Component {
     const tooltips = ({ itemsByKey }) =>
       rhelGraphCardHelpers.getTooltips({
         itemsByKey,
-        granularity: graphGranularity
+        granularity: graphGranularity,
+        product: 'RHEL'
       });
 
     const chartAreaProps = {

diff --git a/src/components/rhelGraphCard/rhelGraphCardHelpers.js b/src/components/rhelGraphCard/rhelGraphCardHelpers.js
@@ -41,6 +41,8 @@ const getTooltipDate = ({ date, granularity }) => {
     case GRANULARITY_TYPES.MONTHLY:
       formattedDateTooltip = dateHelpers.timestampMonthFormats.yearLong;
       break;
+    case GRANULARITY_TYPES.WEEKLY:
+    case GRANULARITY_TYPES.DAILY:
     default:
       formattedDateTooltip = dateHelpers.timestampDayFormats.long;
       break;
@@ -54,33 +56,37 @@ const getTooltipDate = ({ date, granularity }) => {
  *
  * @param {Object} itemsByKey
  * @param {string} granularity, see enum of RHSM_API_QUERY_GRANULARITY_TYPES
+ * @param {string} product, apply the product to locale strings
  * @returns {string | *}
  */
 /**
  * ToDo: we have access to the datasets and index which gives us access to the previous date.
  * Consider adding back in the year on tooltip cross year displays
  */
-const getTooltips = ({ itemsByKey, granularity }) => {
-  let hypervisor = itemsByKey.hypervisorSockets && itemsByKey.hypervisorSockets.y;
-  let sockets = itemsByKey.physicalSockets && itemsByKey.physicalSockets.y;
-  let threshold = itemsByKey.threshold && itemsByKey.threshold.y;
-
-  hypervisor =
-    (hypervisor && `${translate('curiosity-graph.hypervisorSocketsLabel', { product: 'RHEL' })}: ${hypervisor}`) || '';
-
-  sockets = (sockets && `${translate('curiosity-graph.physicalSocketsLabel', { product: 'RHEL' })}: ${sockets}`) || '';
-  threshold = (threshold && `${translate('curiosity-graph.thresholdLabel')}: ${threshold}`) || '';
-
-  const date =
-    ((hypervisor || sockets || threshold) &&
-      `${translate('curiosity-graph.dateLabel')}: ${getTooltipDate({
-        date: itemsByKey.physicalSockets.date,
+const getTooltips = ({ itemsByKey, granularity, product = '' }) => {
+  let dateString = '';
+  let thresholdString = '';
+  const dataFacets = [];
+
+  Object.keys(itemsByKey).forEach((key, index) => {
+    if (index === 0) {
+      dateString = `${translate('curiosity-graph.dateLabel')}: ${getTooltipDate({
+        date: itemsByKey[key].date,
         granularity
-      })}`) ||
-    '';
+      })}`;
+    }
+
+    if (itemsByKey[key].y) {
+      if (key === 'threshold') {
+        thresholdString = `${translate(`curiosity-graph.${key}Label`, { product })}: ${itemsByKey[key].y}\n`;
+      } else {
+        dataFacets.push(`${translate(`curiosity-graph.${key}Label`, { product })}: ${itemsByKey[key].y}\n`);
+      }
+    }
+  });
 
   return (
-    `${threshold}\n${sockets}${(sockets && '\n') || ''}${hypervisor}${(hypervisor && '\n') || ''}${date}`.trim() ||
+    ((thresholdString || dataFacets.length) && `${thresholdString}${dataFacets.join('')}${dateString}`.trim()) ||
     translate('curiosity-graph.noDataLabel')
   );
 };
@@ -118,6 +124,8 @@ const xAxisTickFormat = ({ date, granularity, tick, previousDate }) => {
 
       formattedDate = formattedDate.replace(/\s/, '\n');
       break;
+    case GRANULARITY_TYPES.WEEKLY:
+    case GRANULARITY_TYPES.DAILY:
     default:
       formattedDate = isNewYear
         ? momentDate.format(dateHelpers.timestampDayFormats.yearShort)