feat(graph-tooltip): issues/23 tooltip, react-breakpoints (#35)

* adds breakpoint constants and react-breakpoints utils
* add chart tooltip and base theme customized
* add responsive graph height, tooltip dimensions, and font size helpers
* update pf to fix theme
* tests

package.json

@@ -76,12 +76,12 @@
   },
   "dependencies": {
     "@patternfly/patternfly": "2.8.3",
-    "@patternfly/react-charts": "4.4.2",
-    "@patternfly/react-core": "3.51.0",
+    "@patternfly/react-charts": "4.5.2",
+    "@patternfly/react-core": "3.70.1",
     "@patternfly/react-icons": "3.9.3",
     "@patternfly/react-styles": "3.4.4",
-    "@patternfly/react-table": "2.13.19",
-    "@patternfly/react-tokens": "2.6.3",
+    "@patternfly/react-table": "2.14.11",
+    "@patternfly/react-tokens": "2.6.9",
     "@redhat-cloud-services/frontend-components": "0.0.7",
     "@redhat-cloud-services/frontend-components-utilities": "0.0.7",
     "axios": "^0.19.0",
@@ -92,6 +92,7 @@
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
+    "react-breakpoints": "^3.0.3",
     "react-dom": "^16.8.6",
     "react-i18next": "^10.11.1",
     "react-redux": "^7.1.0",

src/common/__tests__/__snapshots__/graphHelpers.test.js.snap

@@ -3,5 +3,74 @@
 exports[`GraphHelpers should have specific functions: helpers 1`] = `
 Object {
   "convertGraphData": [Function],
+  "getGraphHeight": [Function],
+  "getTooltipDimensions": [Function],
+  "getTooltipFontSize": [Function],
 }
 `;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: lg graph height 1`] = `200`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: md graph height 1`] = `400`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: sm graph height 1`] = `400`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: xl graph height 1`] = `200`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: xl2 graph height 1`] = `200`;
+
+exports[`GraphHelpers should match graph heights at all breakpoints: xs graph height 1`] = `400`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: lg tooltip dimensions 1`] = `
+Object {
+  "height": 40,
+  "width": 120,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: md tooltip dimensions 1`] = `
+Object {
+  "height": 40,
+  "width": 140,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: sm tooltip dimensions 1`] = `
+Object {
+  "height": 50,
+  "width": 180,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: xl tooltip dimensions 1`] = `
+Object {
+  "height": 30,
+  "width": 90,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: xl2 tooltip dimensions 1`] = `
+Object {
+  "height": 20,
+  "width": 80,
+}
+`;
+
+exports[`GraphHelpers should match tooltip dimensions at all breakpoints: xs tooltip dimensions 1`] = `
+Object {
+  "height": 60,
+  "width": 200,
+}
+`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: lg tooltip font sizes 1`] = `12`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: md tooltip font sizes 1`] = `14`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: sm tooltip font sizes 1`] = `14`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: xl tooltip font sizes 1`] = `8`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: xl2 tooltip font sizes 1`] = `8`;
+
+exports[`GraphHelpers should match tooltip font sizes at all breakpoints: xs tooltip font sizes 1`] = `14`;

src/common/__tests__/__snapshots__/helpers.test.js.snap

@@ -8,6 +8,14 @@ Object {
   "REVIEW_MODE": false,
   "TEST_MODE": true,
   "UI_VERSION": "0.0.0.0000000",
+  "breakpoints": Object {
+    "lg": 992,
+    "md": 768,
+    "sm": 576,
+    "xl": 1200,
+    "xl2": 1450,
+    "xs": 0,
+  },
   "generateId": [Function],
   "noop": [Function],
   "noopPromise": Promise {},

src/common/__tests__/graphHelpers.test.js

@@ -1,7 +1,34 @@
-import { graphHelpers } from '../graphHelpers';
+import { graphHelpers, getGraphHeight, getTooltipDimensions, getTooltipFontSize } from '../graphHelpers';
+import { helpers } from '../helpers';
+
+const { breakpoints } = helpers;
 
 describe('GraphHelpers', () => {
   it('should have specific functions', () => {
     expect(graphHelpers).toMatchSnapshot('helpers');
   });
+  it('should match graph heights at all breakpoints', () => {
+    expect(getGraphHeight(breakpoints, 'xs')).toMatchSnapshot('xs graph height');
+    expect(getGraphHeight(breakpoints, 'sm')).toMatchSnapshot('sm graph height');
+    expect(getGraphHeight(breakpoints, 'md')).toMatchSnapshot('md graph height');
+    expect(getGraphHeight(breakpoints, 'lg')).toMatchSnapshot('lg graph height');
+    expect(getGraphHeight(breakpoints, 'xl')).toMatchSnapshot('xl graph height');
+    expect(getGraphHeight(breakpoints, 'xl2')).toMatchSnapshot('xl2 graph height');
+  });
+  it('should match tooltip dimensions at all breakpoints', () => {
+    expect(getTooltipDimensions(breakpoints, 'xs')).toMatchSnapshot('xs tooltip dimensions');
+    expect(getTooltipDimensions(breakpoints, 'sm')).toMatchSnapshot('sm tooltip dimensions');
+    expect(getTooltipDimensions(breakpoints, 'md')).toMatchSnapshot('md tooltip dimensions');
+    expect(getTooltipDimensions(breakpoints, 'lg')).toMatchSnapshot('lg tooltip dimensions');
+    expect(getTooltipDimensions(breakpoints, 'xl')).toMatchSnapshot('xl tooltip dimensions');
+    expect(getTooltipDimensions(breakpoints, 'xl2')).toMatchSnapshot('xl2 tooltip dimensions');
+  });
+  it('should match tooltip font sizes at all breakpoints', () => {
+    expect(getTooltipFontSize(breakpoints, 'xs')).toMatchSnapshot('xs tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'sm')).toMatchSnapshot('sm tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'md')).toMatchSnapshot('md tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'lg')).toMatchSnapshot('lg tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'xl')).toMatchSnapshot('xl tooltip font sizes');
+    expect(getTooltipFontSize(breakpoints, 'xl2')).toMatchSnapshot('xl2 tooltip font sizes');
+  });
 });

src/common/graphHelpers.js

@@ -2,8 +2,8 @@ const convertGraphData = () => {
   // todo: convert passed params to consumable chart data
 
   return [
-    { x: 'May 25', y: 1 },
-    { x: 'May 26', y: 1 },
+    { x: 'May 25', y: 30, label: '30 Sockets on May 25' },
+    { x: 'May 26', y: 60, label: '60 Sockets on May 26 \r\n +30 from previous day' },
     { x: 'May 27', y: 1 },
     { x: 'May 28', y: 1 },
     { x: 'May 29', y: 2 },
@@ -36,6 +36,45 @@ const convertGraphData = () => {
   ];
 };
 
-const graphHelpers = { convertGraphData };
+const getGraphHeight = (breakpoints, currentBreakpoint) =>
+  (breakpoints[currentBreakpoint] > breakpoints.md && 200) || 400;
 
-export { graphHelpers as default, graphHelpers, convertGraphData };
+const getTooltipDimensions = (breakpoints, currentBreakpoint) => {
+  if (breakpoints[currentBreakpoint] < breakpoints.sm) {
+    return { height: 60, width: 200 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.md) {
+    return { height: 50, width: 180 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.lg) {
+    return { height: 40, width: 140 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.xl) {
+    return { height: 40, width: 120 };
+  }
+  if (breakpoints[currentBreakpoint] < breakpoints.xl2) {
+    return { height: 30, width: 90 };
+  }
+  return { height: 20, width: 80 };
+};
+
+const getTooltipFontSize = (breakpoints, currentBreakpoint) => {
+  if (breakpoints[currentBreakpoint] > breakpoints.lg) {
+    return 8;
+  }
+  if (breakpoints[currentBreakpoint] > breakpoints.md) {
+    return 12;
+  }
+  return 14;
+};
+
+const graphHelpers = { convertGraphData, getGraphHeight, getTooltipDimensions, getTooltipFontSize };
+
+export {
+  graphHelpers as default,
+  graphHelpers,
+  convertGraphData,
+  getGraphHeight,
+  getTooltipDimensions,
+  getTooltipFontSize
+};

src/common/helpers.js

@@ -1,3 +1,12 @@
+import {
+  global_breakpoint_xs as globalBreakpointXs,
+  global_breakpoint_sm as globalBreakpointSm,
+  global_breakpoint_md as globalBreakpointMd,
+  global_breakpoint_lg as globalBreakpointLg,
+  global_breakpoint_xl as globalBreakpointXl,
+  global_breakpoint_2xl as globalBreakpoint2xl
+} from '@patternfly/react-tokens';
+
 const generateId = prefix =>
   `${prefix || 'generatedid'}-${(process.env.REACT_APP_ENV !== 'test' && Math.ceil(1e5 * Math.random())) || ''}`;
 
@@ -19,6 +28,15 @@ const PUBLIC_URL = process.env.PUBLIC_URL || '/';
 
 const UI_VERSION = process.env.REACT_APP_UI_VERSION;
 
+const breakpoints = {
+  xs: parseInt(globalBreakpointXs.value, 10),
+  sm: parseInt(globalBreakpointSm.value, 10),
+  md: parseInt(globalBreakpointMd.value, 10),
+  lg: parseInt(globalBreakpointLg.value, 10),
+  xl: parseInt(globalBreakpointXl.value, 10),
+  xl2: parseInt(globalBreakpoint2xl.value, 10)
+};
+
 const helpers = {
   generateId,
   noop,
@@ -29,7 +47,8 @@ const helpers = {
   REVIEW_MODE,
   TEST_MODE,
   PUBLIC_URL,
-  UI_VERSION
+  UI_VERSION,
+  breakpoints
 };
 
 export { helpers as default, helpers };