refactor(graphCard): ent-4899 align hook components (#927)

* graphCardMetric, Metrics, combine in helpers
RedHatInsights · Oct 14, 2022 · e372d75 · e372d75
1 parent 2bdb7be
commit e372d75
Show file tree

Hide file tree

Showing 14 changed files with 372 additions and 329 deletions.
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -4,51 +4,113 @@ exports[`GraphCard Component should allow being disabled: disabled 1`] = `""`;
 
 exports[`GraphCard Component should render a basic component: basic 1`] = `
 <Fragment>
-  <GraphCardMetrics
-    metricFilters={
-      [
-        {
-          "id": "Core-seconds",
-          "isStacked": true,
+  <ContextProvider
+    value={
+      {
+        "settings": {
           "isStandalone": false,
-          "isThreshold": false,
-          "strokeWidth": 2,
+          "metric": undefined,
+          "metrics": [
+            {
+              "id": "Core-seconds",
+              "isStacked": true,
+              "isStandalone": false,
+              "isThreshold": false,
+              "strokeWidth": 2,
+            },
+          ],
         },
-      ]
+      }
     }
-    useProductGraphConfig={[Function]}
-  />
+  >
+    <GraphCardChart
+      t={[Function]}
+      useGetGraphTally={[Function]}
+      useGraphCardContext={[Function]}
+      useMetricsSelector={[Function]}
+      useProduct={[Function]}
+      useProductGraphTallyQuery={[Function]}
+    />
+  </ContextProvider>
 </Fragment>
 `;
 
 exports[`GraphCard Component should setup basic settings: settings 1`] = `
 <Fragment>
-  <GraphCardMetrics
-    metricFilters={
-      [
-        {
-          "id": "Core-seconds",
-          "isStacked": true,
+  <ContextProvider
+    value={
+      {
+        "settings": {
           "isStandalone": false,
-          "isThreshold": false,
-          "strokeWidth": 2,
+          "metric": undefined,
+          "metrics": [
+            {
+              "id": "Core-seconds",
+              "isStacked": true,
+              "isStandalone": false,
+              "isThreshold": false,
+              "strokeWidth": 2,
+            },
+          ],
         },
-      ]
+      }
     }
-    useProductGraphConfig={[Function]}
-  />
-  <GraphCardMetric
-    key="graphCard_Sockets"
-    metricFilter={
+  >
+    <GraphCardChart
+      t={[Function]}
+      useGetGraphTally={[Function]}
+      useGraphCardContext={[Function]}
+      useMetricsSelector={[Function]}
+      useProduct={[Function]}
+      useProductGraphTallyQuery={[Function]}
+    />
+  </ContextProvider>
+  <ContextProvider
+    key="graphCard_undefined"
+    value={
       {
-        "id": "Sockets",
-        "isStacked": true,
-        "isStandalone": true,
-        "isThreshold": false,
-        "strokeWidth": 2,
+        "settings": {
+          "isStandalone": true,
+          "metric": {
+            "id": "Sockets",
+            "isStacked": true,
+            "isStandalone": true,
+            "isThreshold": false,
+            "strokeWidth": 2,
+          },
+          "metrics": [
+            {
+              "id": "Sockets",
+              "isStacked": true,
+              "isStandalone": true,
+              "isThreshold": false,
+              "strokeWidth": 2,
+            },
+          ],
+          "padding": {
+            "bottom": 75,
+            "left": 75,
+            "right": 45,
+            "top": 45,
+          },
+        },
       }
     }
-    useProductGraphConfig={[Function]}
-  />
+  >
+    <GraphCardMetricTotals
+      t={[Function]}
+      useMetricsSelector={[Function]}
+      useProductGraphTallyQuery={[Function]}
+    >
+      <GraphCardChart
+        t={[Function]}
+        useGetGraphTally={[Function]}
+        useGraphCardContext={[Function]}
+        useMetricsSelector={[Function]}
+        useProduct={[Function]}
+        useProductGraphTallyQuery={[Function]}
+      />
+    </GraphCardMetricTotals>
+  </ContextProvider>
 </Fragment>
 `;
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
@@ -2,24 +2,30 @@
 
 exports[`GraphCardHelpers generateChartSettings should return base graph settings: basic filters 1`] = `
 {
-  "groupedFilters": [
-    {
-      "dolor": "sit",
-      "id": "dolorSit",
-      "isStacked": true,
+  "groupedFiltersSettings": {
+    "settings": {
       "isStandalone": false,
-      "isThreshold": false,
-      "strokeWidth": 2,
+      "metric": undefined,
+      "metrics": [
+        {
+          "dolor": "sit",
+          "id": "dolorSit",
+          "isStacked": true,
+          "isStandalone": false,
+          "isThreshold": false,
+          "strokeWidth": 2,
+        },
+      ],
     },
-  ],
-  "standaloneFilters": [],
+  },
+  "standaloneFiltersSettings": [],
 }
 `;
 
 exports[`GraphCardHelpers generateChartSettings should return base graph settings: no filters 1`] = `
 {
-  "groupedFilters": [],
-  "standaloneFilters": [],
+  "groupedFiltersSettings": undefined,
+  "standaloneFiltersSettings": [],
 }
 `;
 

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardMetric.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardMetric.test.js.snap
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardMetrics.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardMetrics.test.js.snap
diff --git a/src/components/graphCard/__tests__/graphCardMetric.test.js b/src/components/graphCard/__tests__/graphCardMetric.test.js
diff --git a/src/components/graphCard/__tests__/graphCardMetrics.test.js b/src/components/graphCard/__tests__/graphCardMetrics.test.js
diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useProductGraphConfig } from '../productView/productViewContext';
 import { helpers } from '../../common';
-import { GraphCardMetrics } from './graphCardMetrics';
-import { GraphCardMetric } from './graphCardMetric';
+import { GraphCardMetricTotals } from './graphCardMetricTotals';
+import { GraphCardChart } from './graphCardChart';
+import { GraphCardContext } from './graphCardContext';
 import { graphCardHelpers } from './graphCardHelpers';
 
 /**
@@ -15,18 +16,30 @@ import { graphCardHelpers } from './graphCardHelpers';
  * @returns {Node}
  */
 const GraphCard = ({ isDisabled, useProductGraphConfig: useAliasProductGraphConfig }) => {
-  const { filters } = useAliasProductGraphConfig();
-  const { groupedFilters, standaloneFilters } = graphCardHelpers.generateChartSettings(filters);
+  const { filters, settings } = useAliasProductGraphConfig();
+  const { groupedFiltersSettings, standaloneFiltersSettings } = graphCardHelpers.generateChartSettings(
+    filters,
+    settings
+  );
 
   if (isDisabled) {
     return null;
   }
 
   return (
     <React.Fragment>
-      {(groupedFilters?.length && <GraphCardMetrics metricFilters={groupedFilters} />) || null}
-      {standaloneFilters.map(metricFilter => (
-        <GraphCardMetric key={`graphCard_${metricFilter.id}`} metricFilter={metricFilter} />
+      {(groupedFiltersSettings && (
+        <GraphCardContext.Provider value={groupedFiltersSettings}>
+          <GraphCardChart />
+        </GraphCardContext.Provider>
+      )) ||
+        null}
+      {standaloneFiltersSettings?.map(filtersSettings => (
+        <GraphCardContext.Provider key={`graphCard_${filtersSettings?.metric?.id}`} value={filtersSettings}>
+          <GraphCardMetricTotals>
+            <GraphCardChart />
+          </GraphCardMetricTotals>
+        </GraphCardContext.Provider>
       ))}
     </React.Fragment>
   );

diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js
@@ -4,16 +4,17 @@ import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../typ
 import { dateHelpers, helpers } from '../../common';
 
 /**
- * Update chart/graph filters with base settings with styling.
+ * Update chart/graph filters with core settings and styling.
  *
  * @param {Array} filters
- * @returns {{standaloneFilters: Array, groupedFilters: Array}}
+ * @param {object} graphCardSettings
+ * @returns {{standaloneFilters: Array, groupedFilters: object}}
  */
-const generateChartSettings = (filters = []) => {
-  const standaloneFilters = [];
-  const groupedFilters = [];
+const generateChartSettings = (filters = [], graphCardSettings = {}) => {
+  const standaloneFiltersSettings = [];
+  const groupedFiltersSettings = [];
 
-  filters.forEach(({ id, isStandalone = false, isThreshold = false, ...settings }) => {
+  filters.forEach(({ id, isStandalone = false, isThreshold = false, ...filterSettings }) => {
     if (!id) {
       return;
     }
@@ -33,21 +34,50 @@ const generateChartSettings = (filters = []) => {
     }
 
     if (isStandalone) {
-      standaloneFilters.push({
-        ...baseFilterSettings,
-        ...settings
+      standaloneFiltersSettings.push({
+        settings: {
+          padding: {
+            bottom: 75,
+            left: 75,
+            right: 45,
+            top: 45
+          },
+          ...graphCardSettings,
+          isStandalone: true,
+          metric: {
+            ...baseFilterSettings,
+            ...filterSettings
+          },
+          metrics: [
+            {
+              ...baseFilterSettings,
+              ...filterSettings
+            }
+          ]
+        }
       });
     } else {
-      groupedFilters.push({
+      groupedFiltersSettings.push({
         ...baseFilterSettings,
-        ...settings
+        ...filterSettings
       });
     }
   });
 
+  const updatedGroupedFiltersSettings =
+    (groupedFiltersSettings.length && {
+      settings: {
+        ...graphCardSettings,
+        isStandalone: false,
+        metric: undefined,
+        metrics: groupedFiltersSettings
+      }
+    }) ||
+    undefined;
+
   return {
-    standaloneFilters,
-    groupedFilters
+    standaloneFiltersSettings,
+    groupedFiltersSettings: updatedGroupedFiltersSettings
   };
 };