refactor(graphCard): sw-923 allow nested graph configs (#1073)

* config, products, isMetricDisplay, nested chart groups
* graphCard, isMetricDisplay setting
* graphCardChart, remove isStandalone, useProduct hook
* graphCardChartTitleTooltip, stringId, remove hook
* graphCardContext, return single list of settings
* graphCardHelpers, restructure for nested chart groups
* graphCardMetricTotals, alias id to chartId
* productViewContext, uom filter on nested chart groups
* styling, adjust grouped chart margins
* toolbarFieldCategory, generate opts, chart groups

public/locales/en-US.json

@@ -11,31 +11,25 @@
   "curiosity-graph": {
     "cardActionTotal": "{{total}} used",
     "cardActionTotal_Cores": "{{total}} core hours used",
-    "cardActionTotal_coreHours": "{{total}} core hours used",
-    "cardHeading": "CPU usage",
-    "cardHeading_cores": "CPU core usage",
-    "cardHeading_cores_OpenShift Container Platform": "CPU core usage",
-    "cardHeading_cores_OpenShift-metrics": "CPU core usage",
-    "cardHeading_cores_OpenShift-dedicated-metrics": "CPU core usage",
+    "cardHeading": "Usage",
     "cardHeading_Cores": "vCPU hours",
-    "cardHeading_sockets": "CPU socket usage",
+    "cardHeading_Cores_OpenShift-metrics": "On-Demand subscriptions",
     "cardHeading_Instance-hours": "Instance hours",
     "cardHeading_Storage-gibibytes": "Data storage",
     "cardHeading_Storage-gibibyte-months": "Data storage",
     "cardHeading_Transfer-gibibytes": "Data transfer",
     "cardHeading_OpenShift Container Platform": "Annual subscriptions",
-    "cardHeading_OpenShift-metrics": "On-Demand subscriptions",
     "cardHeading_OpenShift-dedicated-metrics": "On-Demand subscriptions",
     "cardHeading_RHEL": "CPU socket usage",
     "cardHeading_Satellite": "CPU socket usage",
     "cardHeadingDescription": "...",
     "cardHeadingDescription_Cores": "vCPU hours usage in hours",
+    "cardHeadingDescription_Cores_OpenShift-metrics": "A subscription model that offers purchasing options to match your usage patterns.",
     "cardHeadingDescription_Instance-hours": "Instance hours usage in hours",
     "cardHeadingDescription_Storage-gibibytes": "Data storage usage in binary gigabyte hours",
     "cardHeadingDescription_Storage-gibibyte-months": "Data storage usage in binary gigabyte months",
     "cardHeadingDescription_Transfer-gibibytes": "Data transfer usage in binary gigabytes",
     "cardHeadingDescription_OpenShift Container Platform": "A pre-paid subscription model that offers a designated maximum quota of units within a set time frame.",
-    "cardHeadingDescription_OpenShift-metrics": "A subscription model that offers purchasing options to match your usage patterns.",
     "cardHeadingDescription_OpenShift-dedicated-metrics": "A subscription model that offers purchasing options to match your usage patterns.",
     "cardHeadingMetric": "Total",
     "cardHeadingMetric_dailyTotal": "Daily total",
@@ -65,10 +59,6 @@
     "label_axisY_Storage-gibibytes": "Binary gigabyte hours",
     "label_axisY_Storage-gibibyte-months": "Binary gigabyte months",
     "label_axisY_Transfer-gibibytes": "Binary gigabytes",
-    "label_cores": "Cores",
-    "label_cores_OpenShift Container Platform": "Cores",
-    "label_cores_OpenShift-metrics": "Cores",
-    "label_cores_OpenShift-dedicated-metrics": "Cores",
     "label_Cores": "vCPU hours",
     "label_Cores_OpenShift Container Platform": "Cores",
     "label_Cores_OpenShift-metrics": "Core hours",
@@ -77,20 +67,12 @@
     "label_Cores_hypervisor": "Hypervisor",
     "label_Cores_physical": "Physical cores",
     "label_Cores_virtual": "Virtual",
-    "label_coreHours": "Core hours",
-    "label_instanceHours": "Instance hours",
     "label_Instance-hours": "Instance hours",
-    "label_sockets": "Sockets",
     "label_Sockets": "Sockets",
     "label_Sockets_cloud": "Public cloud",
     "label_Sockets_hypervisor": "Hypervisor",
     "label_Sockets_physical": "Physical",
     "label_Sockets_virtual": "Virtual",
-    "label_cloudSockets": "Public cloud",
-    "label_hypervisorCores": "Virtualized cores",
-    "label_hypervisorSockets": "Virtualized {{product}}",
-    "label_physicalCores": "Physical cores",
-    "label_physicalSockets": "Physical {{product}}",
     "label_no": "Data",
     "label_noData": "no data",
     "label_noData_error": "No data",
@@ -100,29 +82,14 @@
     "label_threshold_infinite": "<0>unlimited</0>",
     "label_threshold_Cores": "Subscription threshold",
     "label_threshold_Sockets": "Subscription threshold",
-    "label_thresholdCores": "Subscription threshold",
-    "label_thresholdSockets": "Subscription threshold",
     "label_Transfer-gibibytes": "Data transfer",
     "legendTooltip": "{{product}} metric usage",
-    "legendTooltip_cores": "{{product}} CPU usage, per CPU core.",
-    "legendTooltip_cores_OpenShift Container Platform": "{{product}} CPU usage, per CPU core.",
-    "legendTooltip_cores_OpenShift-metrics": "{{product}} CPU usage, per CPU core.",
-    "legendTooltip_cores_OpenShift-dedicated-metrics": "{{product}} CPU usage, per CPU core.",
     "legendTooltip_Cores": "vCPU hours usage",
     "legendTooltip_Cores_OpenShift Container Platform": "{{product}} CPU usage, per CPU core.",
     "legendTooltip_Cores_OpenShift-metrics": "OpenShift Container Platform <0>On-Demand</0> core hour usage.",
     "legendTooltip_Cores_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> core hour usage.",
-    "legendTooltip_coreHours": "{{product}} core hours usage.",
-    "legendTooltip_coreHours_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> core hour usage.",
     "legendTooltip_Instance-hours": "Instance hours usage",
     "legendTooltip_Instance-hours_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> instance hour usage.",
-    "legendTooltip_instanceHours_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> instance hour usage.",
-    "legendTooltip_coreHours_OpenShift-metrics": "OpenShift Container Platform <0>On-Demand</0> core hour usage.",
-    "legendTooltip_cloudSockets": "Public cloud {{product}} CPU usage, 1 CPU socket per instance.",
-    "legendTooltip_hypervisorCores": "{{product}} CPU usage, per CPU core.",
-    "legendTooltip_hypervisorSockets": "{{product}} CPU socket usage, per socket pair.",
-    "legendTooltip_physicalCores": "{{product}} CPU usage, per CPU core.",
-    "legendTooltip_physicalSockets": "{{product}} CPU socket usage, per socket pair.",
     "legendTooltip_Sockets": "{{product}} CPU usage, per CPU socket pair.",
     "legendTooltip_Sockets_cloud": "Public cloud {{product}} CPU usage, per socket. Each instance is considered a single socket.",
     "legendTooltip_Sockets_hypervisor": "{{product}} CPU socket usage, per socket pair.",
@@ -131,19 +98,12 @@
     "legendTooltip_Sockets_physical_RHEL": "Physical {{product}} CPU usage, per socket pair. Each system's socket count is rounded upward to the next even number.",
     "legendTooltip_Sockets_virtual": "{{product}} CPU socket usage, per socket pair.",
     "legendTooltip_Sockets_virtual_RHEL": "Virtual {{product}} CPU usage, per socket. Each virtual machine without host-guest mapping is considered a single socket.",
-    "legendTooltip_sockets": "{{product}} CPU usage, per CPU socket pair.",
     "legendTooltip_Storage-gibibytes": "Data storage usage",
     "legendTooltip_Storage-gibibyte-months": "Data storage usage",
     "legendTooltip_threshold_Cores_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} Annual subscriptions in this account.",
     "legendTooltip_threshold_Sockets": "Maximum capacity, based on total {{product}} subscriptions in this account.",
     "legendTooltip_threshold_Sockets_OpenShift Container Platform": "Maximum capacity, as CPU sockets, based on total {{product}} Annual subscriptions in this account.",
     "legendTooltip_threshold_Sockets_RHEL": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
-    "legendTooltip_thresholdCores_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} Annual subscriptions in this account.",
-    "legendTooltip_thresholdSockets": "Maximum capacity, based on total {{product}} subscriptions in this account.",
-    "legendTooltip_thresholdSockets_OpenShift Container Platform": "Maximum capacity, as CPU sockets, based on total {{product}} Annual subscriptions in this account.",
-    "legendTooltip_threshold_thresholdSockets": "Maximum capacity, based on total {{product}} subscriptions in this account.",
-    "legendTooltip_threshold_thresholdCores_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} Annual subscriptions in this account.",
-    "legendTooltip_threshold_thresholdSockets_OpenShift Container Platform": "Maximum capacity, as CPU sockets, based on total {{product}} Annual subscriptions in this account.",
     "legendTooltip_Transfer-gibibytes": "Data transfer usage",
     "tooltipSummary": "Your subscription data facets. With one level of column and row headers."
   },

src/components/README.md

@@ -2049,8 +2049,6 @@ A chart/graph card.
     </tr><tr>
     <td>props.useGraphCardContext</td><td><code>function</code></td>
     </tr><tr>
-    <td>props.useProduct</td><td><code>function</code></td>
-    </tr><tr>
     <td>props.useProductGraphTallyQuery</td><td><code>function</code></td>
     </tr>  </tbody>
 </table>
@@ -2178,8 +2176,6 @@ Graph card title tooltip.
     <td>props.t</td><td><code>function</code></td>
     </tr><tr>
     <td>props.useGraphCardContext</td><td><code>function</code></td>
-    </tr><tr>
-    <td>props.useProduct</td><td><code>function</code></td>
     </tr>  </tbody>
 </table>
 
@@ -2467,7 +2463,7 @@ Update chart/graph filters with core settings and styling.
 <a name="GraphCard.module_GraphCardHelpers..getChartXAxisLabelIncrement"></a>
 
 ### GraphCardHelpers~getChartXAxisLabelIncrement(granularity) ⇒ <code>number</code>
-Returns x axis ticks/intervals array for the xAxisTickInterval
+Returns x-axis ticks/intervals array for the xAxisTickInterval
 
 **Kind**: inner method of [<code>GraphCardHelpers</code>](#GraphCard.module_GraphCardHelpers)  
 <table>
@@ -2509,7 +2505,7 @@ Return a formatted date string.
 <a name="GraphCard.module_GraphCardHelpers..xAxisTickFormat"></a>
 
 ### GraphCardHelpers~xAxisTickFormat(params) ⇒ <code>string</code> \| <code>undefined</code>
-Format x axis ticks.
+Format x-axis ticks.
 
 **Kind**: inner method of [<code>GraphCardHelpers</code>](#GraphCard.module_GraphCardHelpers)  
 <table>
@@ -2538,7 +2534,7 @@ Format x axis ticks.
 <a name="GraphCard.module_GraphCardHelpers..yAxisTickFormat"></a>
 
 ### GraphCardHelpers~yAxisTickFormat(params) ⇒ <code>string</code>
-Format y axis ticks.
+Format y-axis ticks.
 
 **Kind**: inner method of [<code>GraphCardHelpers</code>](#GraphCard.module_GraphCardHelpers)  
 <table>
@@ -6250,7 +6246,7 @@ A standalone Category select filter.
 <a name="Toolbar.module_ToolbarFieldCategory..useToolbarFieldOptions"></a>
 
 ### ToolbarFieldCategory~useToolbarFieldOptions(options) ⇒ <code>function</code>
-Generate select field options from config
+Generate select field options from nested product graph configuration.
 
 **Kind**: inner method of [<code>ToolbarFieldCategory</code>](#Toolbar.module_ToolbarFieldCategory)  
 <table>

src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap

@@ -2,102 +2,85 @@
 
 exports[`GraphCard Component should allow being disabled: disabled 1`] = `""`;
 
-exports[`GraphCard Component should render a default component: default 1`] = `<Fragment />`;
-
 exports[`GraphCard Component should setup basic settings: settings, grouped 1`] = `
-<Fragment>
-  <ContextProvider
-    key="graphCard_grouped-Core-seconds"
-    value={
-      {
-        "settings": {
-          "isStandalone": false,
-          "metric": undefined,
-          "metrics": [
-            {
-              "chartType": "area",
-              "id": "Core-seconds",
-              "isCapacity": false,
-              "isStacked": true,
-              "isStandalone": false,
-              "isThreshold": false,
-              "isToolbarFilter": false,
-              "metric": "Core-seconds",
-              "strokeWidth": 2,
-            },
-          ],
-        },
-      }
+<ContextProvider
+  key="graphCard-Core-seconds"
+  value={
+    {
+      "settings": {
+        "isMetricDisplay": true,
+        "loremIpsum": false,
+        "metric": undefined,
+        "metrics": [
+          {
+            "chartType": "area",
+            "id": "Core-seconds",
+            "isCapacity": false,
+            "isStacked": true,
+            "isThreshold": false,
+            "isToolbarFilter": false,
+            "loremIpsum": false,
+            "metric": "Core-seconds",
+            "strokeWidth": 2,
+          },
+        ],
+      },
     }
+  }
+>
+  <GraphCardMetricTotals
+    t={[Function]}
+    useMetricsSelector={[Function]}
+    useProductGraphTallyQuery={[Function]}
   >
     <GraphCardChart
       t={[Function]}
       useGetMetrics={[Function]}
       useGraphCardActions={[Function]}
       useGraphCardContext={[Function]}
-      useProduct={[Function]}
       useProductGraphTallyQuery={[Function]}
     />
-  </ContextProvider>
-</Fragment>
+  </GraphCardMetricTotals>
+</ContextProvider>
 `;
 
 exports[`GraphCard Component should setup basic settings: settings, standalone 1`] = `
-<Fragment>
-  <ContextProvider
-    key="graphCard_standalone-Sockets"
-    value={
-      {
-        "settings": {
-          "isStandalone": true,
-          "metric": {
+<ContextProvider
+  key="graphCard-Sockets"
+  value={
+    {
+      "settings": {
+        "loremIpsum": true,
+        "metric": undefined,
+        "metrics": [
+          {
             "chartType": "area",
             "id": "Sockets",
             "isCapacity": false,
             "isStacked": true,
-            "isStandalone": true,
             "isThreshold": false,
             "isToolbarFilter": false,
+            "loremIpsum": true,
             "metric": "Sockets",
             "strokeWidth": 2,
           },
-          "metrics": [
-            {
-              "chartType": "area",
-              "id": "Sockets",
-              "isCapacity": false,
-              "isStacked": true,
-              "isStandalone": true,
-              "isThreshold": false,
-              "isToolbarFilter": false,
-              "metric": "Sockets",
-              "strokeWidth": 2,
-            },
-          ],
-          "padding": {
-            "bottom": 75,
-            "left": 75,
-            "right": 45,
-            "top": 45,
-          },
+        ],
+        "padding": {
+          "bottom": 75,
+          "left": 75,
+          "right": 45,
+          "top": 45,
         },
-      }
+      },
     }
-  >
-    <GraphCardMetricTotals
-      t={[Function]}
-      useMetricsSelector={[Function]}
-      useProductGraphTallyQuery={[Function]}
-    >
-      <GraphCardChart
-        t={[Function]}
-        useGetMetrics={[Function]}
-        useGraphCardActions={[Function]}
-        useGraphCardContext={[Function]}
-        useProduct={[Function]}
-        useProductGraphTallyQuery={[Function]}
-      />
-    </GraphCardMetricTotals>
-  </ContextProvider>
-</Fragment>
+  }
+>
+  <GraphCardChart
+    t={[Function]}
+    useGetMetrics={[Function]}
+    useGraphCardActions={[Function]}
+    useGraphCardContext={[Function]}
+    useProductGraphTallyQuery={[Function]}
+  />
+</ContextProvider>
 `;

src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap

@@ -3,6 +3,7 @@
 exports[`GraphCardChart Component should handle API response states: error 1`] = `
 <Card
   className="curiosity-usage-graph"
+  isPlain={true}
 >
   <CardHeader>
     <CardTitle>
@@ -14,7 +15,6 @@ exports[`GraphCardChart Component should handle API response states: error 1`] =
         <GraphCardChartTitleTooltip
           t={[Function]}
           useGraphCardContext={[Function]}
-          useProduct={[Function]}
         />
       </Title>
     </CardTitle>
@@ -60,6 +60,7 @@ exports[`GraphCardChart Component should handle API response states: error 1`] =
 exports[`GraphCardChart Component should handle API response states: fulfilled 1`] = `
 <Card
   className="curiosity-usage-graph"
+  isPlain={true}
 >
   <CardHeader>
     <CardTitle>
@@ -71,7 +72,6 @@ exports[`GraphCardChart Component should handle API response states: fulfilled 1
         <GraphCardChartTitleTooltip
           t={[Function]}
           useGraphCardContext={[Function]}
-          useProduct={[Function]}
         />
       </Title>
     </CardTitle>
@@ -117,6 +117,7 @@ exports[`GraphCardChart Component should handle API response states: fulfilled 1
 exports[`GraphCardChart Component should handle API response states: pending 1`] = `
 <Card
   className="curiosity-usage-graph"
+  isPlain={true}
 >
   <CardHeader>
     <CardTitle>
@@ -128,7 +129,6 @@ exports[`GraphCardChart Component should handle API response states: pending 1`]
         <GraphCardChartTitleTooltip
           t={[Function]}
           useGraphCardContext={[Function]}
-          useProduct={[Function]}
         />
       </Title>
     </CardTitle>
@@ -161,6 +161,7 @@ exports[`GraphCardChart Component should handle API response states: pending 1`]
 exports[`GraphCardChart Component should render a default component: default 1`] = `
 <Card
   className="curiosity-usage-graph"
+  isPlain={true}
 >
   <CardHeader>
     <CardTitle>
@@ -172,7 +173,6 @@ exports[`GraphCardChart Component should render a default component: default 1`]
         <GraphCardChartTitleTooltip
           t={[Function]}
           useGraphCardContext={[Function]}
-          useProduct={[Function]}
         />
       </Title>
     </CardTitle>