1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import style from "./BlockersTableSummary.module.scss";
import * as API from "aws-amplify/api";
//const apiClient = API.generateClient();
interface BlockersTableSummaryProps {
auditId: string;
isShared: boolean;
chartData: any;
}
export const BlockersTableSummary = ({ auditId, isShared, chartData }: BlockersTableSummaryProps) => {
const [mostCommonUrlsLimit, setMostCommonUrlsLimit] = useState(5);
const [mostCommonBlockersLimit, setMostCommonBlockersLimit] = useState(5);
const [mostCommonCategoriesLimit, setMostCommonCategoriesLimit] = useState(3);
const [mostCommonTagsLimit, setMostCommonTagsLimit] = useState(3);
const { data, isLoading, error } = useQuery({
queryKey: [
"auditSummary"
],
queryFn: async () => {
const params: Record<string, string> = {
id: auditId,
mostCommonUrlsLimit: mostCommonUrlsLimit.toString(),
mostCommonBlockersLimit: mostCommonBlockersLimit.toString(),
mostCommonCategoriesLimit: mostCommonCategoriesLimit.toString(),
mostCommonTagsLimit: mostCommonTagsLimit.toString()
};
const response = await API.get({
apiName: isShared ? "public" : "auth",
path: "/getAuditTable",
options: { queryParams: params },
}).response;
const resp = (await response.body.json()) as any;
console.log(resp);
return resp;
}});
return (
<div className={style.BlockersTableSummary}>
Summary
--<br/>
{chartData.data[
chartData.data.length - 1
].blockers.toLocaleString()} Blockers.
<br/>
X of Y pages have accessibility errors.
The average page has x.x accessibility errors.
--
Pages with most errors:
--
The most common accessibility errors:
| Table |
--
The most common tag/category of error (table w/ count?)
</div>
);
};