refactor(chartTypeVariant): ent-4899 consistent types (#927)

src/components/chart/__tests__/__snapshots__/chartHelpers.test.js.snap

@@ -834,6 +834,11 @@ exports[`ChartHelpers should generate y axis props: props 1`] = `
 
 exports[`ChartHelpers should return specific properties: specific properties 1`] = `
 {
+  "ChartTypeVariant": {
+    "area": "area",
+    "line": "line",
+    "threshold": "threshold",
+  },
   "generateAxisProps": [Function],
   "generateDomains": [Function],
   "generateElementsProps": [Function],

src/components/chart/chart.js

@@ -4,7 +4,7 @@ import { ChartThemeColor } from '@patternfly/react-charts';
 import { ChartContext } from './chartContext';
 import { ChartElements } from './chartElements';
 import { ChartLegend } from './chartLegend';
-import { chartHelpers } from './chartHelpers';
+import { chartHelpers, ChartTypeVariant } from './chartHelpers';
 import { useResizeObserver } from '../../hooks/useWindow';
 
 /**
@@ -176,7 +176,7 @@ Chart.propTypes = {
         })
       ),
       animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-      chartType: PropTypes.oneOf(['area', 'line', 'threshold']),
+      chartType: PropTypes.oneOf([...Object.values(ChartTypeVariant)]),
       fill: PropTypes.string,
       stroke: PropTypes.string,
       strokeWidth: PropTypes.number,
@@ -239,4 +239,4 @@ Chart.defaultProps = {
   yValueFormat: null
 };
 
-export { Chart as default, Chart };
+export { Chart as default, Chart, ChartTypeVariant };

src/components/chart/chartElements.js

@@ -6,6 +6,7 @@ import { Chart, ChartArea, ChartAxis, ChartContainer, ChartLine, ChartThreshold
 import { useChartContext } from './chartContext';
 import { chartTooltip } from './chartTooltip';
 import { chartAxisLabel } from './chartAxisLabel';
+import { ChartTypeVariant } from './chartHelpers';
 
 /**
  * Generate a compatible Victory chart element/facet component.
@@ -96,7 +97,8 @@ const ChartElements = ({ chartTypeDefaults }) => {
   }
 
   const setChartElement = ({ chartType, props }) => {
-    const { component: Component, ...defaultProps } = chartTypeDefaults[chartType] || chartTypeDefaults.area;
+    const { component: Component, ...defaultProps } =
+      chartTypeDefaults[chartType] || chartTypeDefaults[ChartTypeVariant.area];
     return <Component {...{ ...defaultProps, ...props }} />;
   };
 
@@ -130,23 +132,23 @@ ChartElements.propTypes = {
 
 ChartElements.defaultProps = {
   chartTypeDefaults: {
-    area: {
+    [ChartTypeVariant.area]: {
       component: ChartArea,
       animate: {
         duration: 250,
         onLoad: { duration: 250 }
       },
       interpolation: 'monotoneX'
     },
-    line: {
+    [ChartTypeVariant.line]: {
       component: ChartLine,
       animate: {
         duration: 250,
         onLoad: { duration: 250 }
       },
       interpolation: 'monotoneX'
     },
-    threshold: {
+    [ChartTypeVariant.threshold]: {
       component: ChartThreshold,
       animate: {
         duration: 100,

src/components/chart/chartHelpers.js

@@ -2,6 +2,17 @@ import React from 'react';
 import _cloneDeep from 'lodash/cloneDeep';
 import { helpers } from '../../common';
 
+/**
+ * Available chart types
+ *
+ * @type {{area: string, line: string, threshold: string}}
+ */
+const ChartTypeVariant = {
+  area: 'area',
+  line: 'line',
+  threshold: 'threshold'
+};
+
 /**
  * Generate max X and Y values from datasets.
  *
@@ -92,9 +103,14 @@ const generateDomains = ({ maxY, padding = {} } = {}) => {
  * @param {number} params.maxY
  * @param {Function} params.xValueFormat
  * @param {Function} params.yValueFormat
+ * @param {object} options
+ * @param {object} options.chartTypeVariant
  * @returns {{elementsById: object, stackedElements: Array, stackedElementsById: object, elements: Array}}
  */
-const generateElementsProps = ({ dataSets = [], maxX, maxY, xValueFormat, yValueFormat }) => {
+const generateElementsProps = (
+  { dataSets = [], maxX, maxY, xValueFormat, yValueFormat } = {},
+  { chartTypeVariant = ChartTypeVariant } = {}
+) => {
   const elements = [];
   const stackedElements = [];
   const elementsById = {};
@@ -109,7 +125,7 @@ const generateElementsProps = ({ dataSets = [], maxX, maxY, xValueFormat, yValue
         data: {}
       };
 
-      if (fill && chartType !== 'line' && chartType !== 'threshold') {
+      if (fill && chartType !== chartTypeVariant.line && chartType !== chartTypeVariant.threshold) {
         dataColorStroke.data.fill = fill;
       }
 
@@ -422,6 +438,7 @@ const generateAxisProps = ({
 };
 
 const chartHelpers = {
+  ChartTypeVariant,
   generateAxisProps,
   generateDomains,
   generateElementsProps,
@@ -434,6 +451,7 @@ const chartHelpers = {
 export {
   chartHelpers as default,
   chartHelpers,
+  ChartTypeVariant,
   generateAxisProps,
   generateDomains,
   generateElementsProps,

src/components/graphCard/__tests__/graphCardChartTooltip.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { GraphCardChartTooltip } from '../graphCardChartTooltip';
+import { ChartTypeVariant } from '../../chart/chart';
 import {
   RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES,
   RHSM_API_QUERY_SET_TYPES
@@ -134,23 +135,23 @@ describe('GraphCardChartTooltip Component', () => {
 
     // threshold value > 0
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: 100, date: '2019-06-01T00:00:00Z', hasInfinite: undefined }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
       'threshold display for > 0 and UNDEFINED hasInfinite on threshold'
     );
 
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: 100, date: '2019-06-01T00:00:00Z', hasInfinite: false }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
       'threshold display for > 0 and NOT hasInfinite on threshold'
     );
 
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: 100, date: '2019-06-01T00:00:00Z', hasInfinite: true }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
@@ -159,23 +160,23 @@ describe('GraphCardChartTooltip Component', () => {
 
     // threshold value = 0
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasInfinite: undefined }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
       'threshold display for zero and UNDEFINED hasInfinite on threshold'
     );
 
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasInfinite: false }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
       'threshold display for zero and NOT hasInfinite on threshold'
     );
 
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasInfinite: true }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
@@ -184,23 +185,23 @@ describe('GraphCardChartTooltip Component', () => {
 
     // threshold value = null
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasInfinite: undefined }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
       'threshold display for null and UNDEFINED hasInfinite on threshold'
     );
 
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasInfinite: false }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
       'threshold display for null and NOT hasInfinite on threshold'
     );
 
     itemsByKey.threshold = {
-      chartType: 'threshold',
+      chartType: ChartTypeVariant.threshold,
       data: { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasInfinite: true }
     };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(

src/components/graphCard/graphCardChartTooltip.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useProduct, useProductGraphTallyQuery } from '../productView/productViewContext';
 import { getTooltipDate } from './graphCardHelpers';
 import { translate } from '../i18n/i18n';
+import { ChartTypeVariant } from '../chart/chart';
 import { ChartIcon } from '../chart/chartIcon';
 import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants';
 import { helpers } from '../../common';
@@ -43,7 +44,7 @@ const GraphCardChartTooltip = ({
         color: itemsByKey[key]?.color
       };
 
-      if (itemsByKey[key]?.chartType === 'threshold') {
+      if (itemsByKey[key]?.chartType === ChartTypeVariant.threshold) {
         let thresholdStringValue = itemsByKey[key]?.data.y ?? t('curiosity-graph.label_noData');
 
         if (itemsByKey[key]?.data.hasInfinite) {
@@ -102,10 +103,10 @@ const GraphCardChartTooltip = ({
               return (
                 <tr key={`tooltip-${dataFacet.label}`}>
                   <th>
-                    {dataFacet.chartType === 'threshold' && (
+                    {dataFacet.chartType === ChartTypeVariant.threshold && (
                       <ChartIcon size="sm" symbol="dash" fill={dataFacet.color || 'transparent'} />
                     )}
-                    {dataFacet.chartType !== 'threshold' && (
+                    {dataFacet.chartType !== ChartTypeVariant.threshold && (
                       <ChartIcon size="sm" fill={dataFacet.color || 'transparent'} />
                     )}{' '}
                     {dataFacet.label}

src/components/graphCard/graphCardHelpers.js

@@ -1,5 +1,6 @@
 import moment from 'moment';
 import { chart_color_green_300 as chartColorGreenDark } from '@patternfly/react-tokens';
+import { ChartTypeVariant } from '../chart/chart';
 import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
 import { dateHelpers, helpers } from '../../common';
 
@@ -19,7 +20,7 @@ const generateChartSettings = (filters = [], graphCardSettings = {}) => {
       return;
     }
 
-    const isThreshold = filterSettings?.chartType === 'threshold';
+    const isThreshold = filterSettings?.chartType === ChartTypeVariant.threshold;
     const baseFilterSettings = {
       id,
       isStacked: !isThreshold,

src/config/product.openshiftContainer.js

@@ -21,6 +21,7 @@ import {
 } from '../services/rhsm/rhsmConstants';
 import { dateHelpers, helpers } from '../common';
 import { Tooltip } from '../components/tooltip/tooltip';
+import { ChartTypeVariant } from '../components/chart/chart';
 import { ChartIcon } from '../components/chart/chartIcon';
 import { translate } from '../components/i18n/i18n';
 
@@ -75,8 +76,8 @@ const config = {
       stroke: chartColorBlueDark.value,
       color: chartColorBlueDark.value
     },
-    { id: 'thresholdSockets', chartType: 'threshold', isOptional: true },
-    { id: 'thresholdCores', chartType: 'threshold', isOptional: true }
+    { id: 'thresholdSockets', chartType: ChartTypeVariant.threshold, isOptional: true },
+    { id: 'thresholdCores', chartType: ChartTypeVariant.threshold, isOptional: true }
   ],
   initialGraphSettings: {},
   initialGuestsFilters: [

src/config/product.openshiftDedicated.js

@@ -15,6 +15,7 @@ import {
   RHSM_API_PATH_ID_TYPES
 } from '../types/rhsmApiTypes';
 import { RHSM_INTERNAL_PRODUCT_DISPLAY_TYPES as DISPLAY_TYPES } from '../services/rhsm/rhsmConstants';
+import { ChartTypeVariant } from '../components/chart/chart';
 import { dateHelpers, helpers } from '../common';
 import { translate } from '../components/i18n/i18n';
 
@@ -49,7 +50,7 @@ const config = {
       fill: chartColorBlueLight.value,
       stroke: chartColorBlueDark.value,
       color: chartColorBlueDark.value,
-      chartType: 'line',
+      chartType: ChartTypeVariant.line,
       isStacked: false,
       yAxisUseDataSet: true
     },
@@ -58,7 +59,7 @@ const config = {
       fill: chartColorCyanLight.value,
       stroke: chartColorCyanDark.value,
       color: chartColorCyanDark.value,
-      chartType: 'line',
+      chartType: ChartTypeVariant.line,
       isStacked: false,
       yAxisUseDataSet: true
     }

src/config/product.rhacs.js

@@ -19,6 +19,7 @@ import {
   RHSM_API_PATH_METRIC_TYPES,
   RHSM_INTERNAL_PRODUCT_DISPLAY_TYPES as DISPLAY_TYPES
 } from '../services/rhsm/rhsmConstants';
+import { ChartTypeVariant } from '../components/chart/chart';
 import { dateHelpers, helpers } from '../common';
 import { translate, EMPTY_CONTEXT } from '../components/i18n/i18n';
 
@@ -64,7 +65,7 @@ const config = {
       fill: chartColorBlueLight.value,
       stroke: chartColorBlueDark.value,
       color: chartColorBlueDark.value,
-      chartType: 'line',
+      chartType: ChartTypeVariant.line,
       isStacked: false,
       isStandalone: true,
       yAxisChartLabel: ({ id }) => translate('curiosity-graph.label_axisY', { context: id })

src/config/product.rhel.js

@@ -26,6 +26,7 @@ import {
 import { dateHelpers, helpers } from '../common';
 import { Tooltip } from '../components/tooltip/tooltip';
 import { ChartIcon } from '../components/chart/chartIcon';
+import { ChartTypeVariant } from '../components/chart/chart';
 import { translate } from '../components/i18n/i18n';
 
 /**
@@ -84,7 +85,7 @@ const config = {
       stroke: chartColorPurpleDark.value,
       color: chartColorPurpleDark.value
     },
-    { id: 'thresholdSockets', chartType: 'threshold' }
+    { id: 'thresholdSockets', chartType: ChartTypeVariant.threshold }
   ],
   initialGuestsFilters: [
     {

src/config/product.rhods.js

@@ -19,6 +19,7 @@ import {
   RHSM_API_PATH_METRIC_TYPES,
   RHSM_INTERNAL_PRODUCT_DISPLAY_TYPES as DISPLAY_TYPES
 } from '../services/rhsm/rhsmConstants';
+import { ChartTypeVariant } from '../components/chart/chart';
 import { dateHelpers, helpers } from '../common';
 import { translate, EMPTY_CONTEXT } from '../components/i18n/i18n';
 
@@ -59,7 +60,7 @@ const config = {
       fill: chartColorBlueLight.value,
       stroke: chartColorBlueDark.value,
       color: chartColorBlueDark.value,
-      chartType: 'line',
+      chartType: ChartTypeVariant.line,
       isStacked: false,
       isStandalone: true,
       yAxisChartLabel: ({ id }) => translate('curiosity-graph.label_axisY', { context: id })