diff --git a/package.json b/package.json index a751ae97..0c4f5c98 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "react-arborist": "^3.2.0", "react-dom": "^16.13.0", "react-dropzone": "^10.2.2", - "react-google-charts": "^3.0.15", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "^5.0.0", diff --git a/src/__tests__/integration/validation.test.js b/src/__tests__/integration/validation.test.js index 1443b508..51db76fc 100644 --- a/src/__tests__/integration/validation.test.js +++ b/src/__tests__/integration/validation.test.js @@ -1,7 +1,6 @@ import { integrationTest, moveNext, storeFile, waitFor, stepFinished } from './index'; import { createJob, executeJob, getJob, updateJob } from '../../common/services/jobService'; import { getFileContent, uploadFile } from '../../common/services/fileService'; -import { Chart } from 'react-google-charts'; import Progress from '../../common/components/shared/progress/Progress'; import Results from '../../common/components/layouts/pages/results/Results'; @@ -82,9 +81,7 @@ describe('Validation', () => { // Once job is complete app should be redirected to Results summary page expect(component.find(Results)).toHaveLength(1); - // Chart component loaded - expect(component.find(Chart)).toHaveLength(1); - expect(component.find('.summary__compliance').text()).toBe('50%compliant'); + expect(component.find('ul.list').text()).toMatch('Page:0 errors'); expect(component.find('li.legend-item_passed').text()).toBe('1 checks passed'); expect(component.find('li.legend-item_failed').text()).toBe('1 errors'); }) diff --git a/src/common/components/layouts/pages/inspect/tree/Tree.js b/src/common/components/layouts/pages/inspect/tree/Tree.js index 3b98f17f..66c80e45 100644 --- a/src/common/components/layouts/pages/inspect/tree/Tree.js +++ b/src/common/components/layouts/pages/inspect/tree/Tree.js @@ -610,11 +610,13 @@ export function sortChecksByPage(checks, errorsMap) { return newChecks; } -const SummaryInterface = PropTypes.shape({ +export const SummaryInterface = PropTypes.shape({ clause: PropTypes.string.isRequired, testNumber: PropTypes.number.isRequired, description: PropTypes.string.isRequired, checks: PropTypes.arrayOf(PropTypes.object).isRequired, + failedChecks: PropTypes.number.isRequired, + tags: PropTypes.arrayOf(PropTypes.string).isRequired, }); Tree.propTypes = { diff --git a/src/common/components/layouts/pages/results/summary/Summary.js b/src/common/components/layouts/pages/results/summary/Summary.js index 4b63a022..b1e4fbab 100644 --- a/src/common/components/layouts/pages/results/summary/Summary.js +++ b/src/common/components/layouts/pages/results/summary/Summary.js @@ -1,12 +1,10 @@ -import React, { useMemo, useState } from 'react'; +import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import classNames from 'classnames'; +import _ from 'lodash'; import Paper from '@material-ui/core/Paper'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import { useTheme } from '@material-ui/core/styles'; -import { Chart } from 'react-google-charts'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; import HighlightOffIcon from '@material-ui/icons/HighlightOff'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; @@ -18,13 +16,17 @@ import { getFileNameLink } from '../../../../../store/pdfLink/selectors'; import { getResultSummary, getJobEndStatus } from '../../../../../store/job/result/selectors'; import { getProfileOptions } from '../../../../../store/validationProfiles/selectors'; import { isFileUploadMode } from '../../../../../store/application/selectors'; +import { SummaryInterface as RuleSummariesInterface } from '../../inspect/tree/Tree'; import './Summary.scss'; +import errorTags from '../../inspect/validationErrorTags.json'; + const JOB_END_STATUS = { CANCELLED: 'cancelled', TIMEOUT: 'timeout', }; +const CATEGORY = 'Category'; function Summary({ fileName, profiles, selectedProfile, resultSummary, jobEndStatus }) { return ( @@ -41,26 +43,16 @@ function Summary({ fileName, profiles, selectedProfile, resultSummary, jobEndSta } function ProcessedSummary({ resultSummary }) { - const theme = useTheme(); - const [chartReady, setChartReady] = useState(false); - const chartData = useMemo(() => buildChartData(resultSummary), [resultSummary]); - const chartOptions = useMemo(() => getChartOptions(theme), [theme]); - const chartEvents = useMemo(() => [{ eventName: 'ready', callback: () => setChartReady(true) }], [setChartReady]); - const compliancePercent = useMemo(() => calculateCompliance(resultSummary), [resultSummary]); + const listOfErrors = useMemo(() => getListOfErrors(resultSummary.ruleSummaries), [resultSummary]); + return ( <> -
- } - data={chartData} - options={chartOptions} - chartEvents={chartEvents} - /> -
- {compliancePercent}% - compliant -
+
+
    + {listOfErrors?.map(([key, value]) => ( + 0} /> + ))} +