Skip to content

Commit

Permalink
feat(rhelGraphCard): update responsive usage and apply ChartAxis (#70)
Browse files Browse the repository at this point in the history 
* use the ChartAxis component w/ StackChart.
* extract tick values from the chart data for the ChartAxis
* remove breakpoint specific tooltip and font sizes, and the container
div size to emulate PF more closely.
* add new tests to handle componentDidMount, resize, unMount changes in
rhelGraphCard
* build, remove reactBreakpoints, updated classnames and platform
* rhelGraphCard, remove setTimeout favor lifecycle methods, tests
* pageLayout, helpers, remove reactBreakpoints, tests updated
  • Loading branch information
@priley86
priley86 committed Aug 13, 2019
1 parent 84a6023 commit b67efb8
Show file tree
Hide file tree
Showing 16 changed files with 407 additions and 1,135 deletions.
17 changes: 8 additions & 9 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,15 @@
},
"dependencies": {
"@patternfly/patternfly": "2.8.3",
"@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.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",
"@patternfly/react-charts": "4.7.2",
"@patternfly/react-core": "3.80.3",
"@patternfly/react-icons": "3.10.14",
"@patternfly/react-styles": "3.5.7",
"@patternfly/react-tokens": "2.6.13",
"@redhat-cloud-services/frontend-components": "0.0.9",
"@redhat-cloud-services/frontend-components-utilities": "0.0.8",
"axios": "^0.19.0",
"classnames": "^2.2.6",
"i18next": "^17.0.6",
"i18next-xhr-backend": "^3.0.0",
"js-cookie": "^2.2.0",
Expand All @@ -91,7 +91,6 @@
"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.4",
"react-redux": "^7.1.0",
Expand Down
93 changes: 24 additions & 69 deletions src/common/__tests__/__snapshots__/graphHelpers.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ Object {
10,
],
},
"tickValues": Array [
"Jun 1",
],
}
`;

Expand Down Expand Up @@ -112,6 +115,9 @@ Object {
10,
],
},
"tickValues": Array [
"Jun 1",
],
}
`;

Expand Down Expand Up @@ -149,6 +155,9 @@ Object {
10,
],
},
"tickValues": Array [
"Jun 1",
],
}
`;

Expand Down Expand Up @@ -186,6 +195,20 @@ Object {
10,
],
},
"tickValues": Array [
"Jun 1",
],
}
`;

exports[`GraphHelpers should get tick values array given chart data 1`] = `
Object {
"empty array": Array [],
"x axis interval": Array [
"Jan 1",
"Jan 3",
"Jan 5",
],
}
`;

Expand All @@ -194,75 +217,7 @@ Object {
"chartDateFormat": "MMM D",
"convertGraphUsageData": [Function],
"getChartDomain": [Function],
"getGraphHeight": [Function],
"getTooltipDimensions": [Function],
"getTooltipFontSize": [Function],
"getTickValues": [Function],
"zeroedUsageData": [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`;
8 changes: 0 additions & 8 deletions src/common/__tests__/__snapshots__/helpers.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,6 @@ Object {
"UI_NAME": "subscriptions",
"UI_PATH": "/apps/subscriptions/",
"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 {},
Expand Down
49 changes: 9 additions & 40 deletions src/common/__tests__/graphHelpers.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
import {
graphHelpers,
convertGraphUsageData,
getChartDomain,
getGraphHeight,
getTooltipDimensions,
getTooltipFontSize
} from '../graphHelpers';
import { helpers } from '../helpers';
import { graphHelpers, convertGraphUsageData, getChartDomain, getTickValues } from '../graphHelpers';
import { rhelApiTypes } from '../../types/rhelApiTypes';

describe('GraphHelpers', () => {
Expand Down Expand Up @@ -107,36 +99,13 @@ describe('GraphHelpers', () => {
}).toMatchSnapshot();
});

it('should match graph heights at all breakpoints', () => {
const { breakpoints } = helpers;

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', () => {
const { breakpoints } = helpers;

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', () => {
const { breakpoints } = helpers;

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');
it('should get tick values array given chart data', () => {
expect({
'empty array': getTickValues({ chartData: [], xAxisTickInterval: 2 }),
'x axis interval': getTickValues({
chartData: [{ x: 'Jan 1' }, { x: 'Jan 2' }, { x: 'Jan 3' }, { x: 'Jan 4' }, { x: 'Jan 5' }, { x: 'Jan 6' }],
xAxisTickInterval: 2
})
}).toMatchSnapshot();
});
});
60 changes: 20 additions & 40 deletions src/common/graphHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import moment from 'moment';
import { rhelApiTypes } from '../types/rhelApiTypes';
import { helpers } from './helpers';

/**
* Chart Date Format (used in axis and tooltips)
*/
const chartDateFormat = 'MMM D';

/**
Expand Down Expand Up @@ -55,7 +58,7 @@ const getLabel = ({ data, previousData, formattedDate, label, previousLabel }) =
* @param endDate {string}
* @param values {object} pre-filled key-value object
* @param label {string} i18n specific label
* @param previousLabel {string} i18n specific prevousLabel
* @param previousLabel {string} i18n specific previousLabel
* @returns {Array}
*/
const fillMissingValues = ({ startDate, endDate, values, label, previousLabel }) => {
Expand Down Expand Up @@ -116,6 +119,16 @@ const getChartDomain = ({ empty, maxY = 0 }) => {
return chartDomain;
};

/**
* Returns x axis ticks/intervals array for the xAxisTickInterval
*
* @param {Array} chartData
* @param {number} xAxisTickInterval
* @returns {Array}
*/
const getTickValues = ({ chartData, xAxisTickInterval = 5 }) =>
chartData.reduce((acc, current, index) => (index % xAxisTickInterval === 0 ? acc.concat(current.x) : acc), []);

/**
* Convert graph data to usable format
* convert json usage report from this format:
Expand All @@ -128,9 +141,10 @@ const getChartDomain = ({ empty, maxY = 0 }) => {
* @param endDate {string}
* @param label {string}
* @param previousLabel {string}
* @param xAxisTickInterval {number}
* @returns {Object} Object array result converted { chartData: {...} chartDomain {...} }
*/
const convertGraphUsageData = ({ data, startDate, endDate, label, previousLabel }) => {
const convertGraphUsageData = ({ data, startDate, endDate, label, previousLabel, xAxisTickInterval }) => {
let chartData = [];
let chartDomain = {};

Expand Down Expand Up @@ -165,48 +179,16 @@ const convertGraphUsageData = ({ data, startDate, endDate, label, previousLabel
chartDomain = getChartDomain({ empty: true });
}

return { chartData, chartDomain };
};

const getGraphHeight = (breakpoints, currentBreakpoint) =>
(breakpoints[currentBreakpoint] > breakpoints.md && 200) || 400;
const tickValues = getTickValues({ chartData, xAxisTickInterval });

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;
return { chartData, chartDomain, tickValues };
};

const graphHelpers = {
chartDateFormat,
convertGraphUsageData,
getChartDomain,
getGraphHeight,
getTooltipDimensions,
getTooltipFontSize,
getTickValues,
zeroedUsageData
};

Expand All @@ -216,8 +198,6 @@ export {
chartDateFormat,
convertGraphUsageData,
getChartDomain,
getGraphHeight,
getTooltipDimensions,
getTooltipFontSize,
getTickValues,
zeroedUsageData
};
19 changes: 0 additions & 19 deletions src/common/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,3 @@
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 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 generateId = prefix =>
`${prefix || 'generatedid'}-${(process.env.REACT_APP_ENV !== 'test' && Math.ceil(1e5 * Math.random())) || ''}`;

Expand Down Expand Up @@ -48,7 +30,6 @@ const UI_PATH = process.env.PUBLIC_URL || '/';
const UI_VERSION = process.env.REACT_APP_UI_VERSION;

const helpers = {
breakpoints,
generateId,
noop,
noopPromise,
Expand Down
Loading

0 comments on commit b67efb8

Please sign in to comment.