53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { Card } from 'components/Form/Card';
|
|
import { ExpandableRow } from 'components/Form/Row';
|
|
|
|
const processScore = (percentile: number) => {
|
|
return `${Math.round(percentile * 100)}%`;
|
|
}
|
|
|
|
interface Audit {
|
|
id: string,
|
|
score?: number | string,
|
|
scoreDisplayMode?: string,
|
|
title?: string,
|
|
description?: string,
|
|
displayValue?: string,
|
|
};
|
|
|
|
const makeValue = (audit: Audit) => {
|
|
let score = audit.score;
|
|
if (audit.displayValue) {
|
|
score = audit.displayValue;
|
|
} else if (audit.scoreDisplayMode) {
|
|
score = audit.score === 1 ? '✅ Pass' : '❌ Fail';
|
|
}
|
|
return score;
|
|
};
|
|
|
|
const LighthouseCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
|
|
const lighthouse = props.data;
|
|
const categories = lighthouse?.categories || {};
|
|
const audits = lighthouse?.audits || [];
|
|
|
|
return (
|
|
<Card heading={props.title} actionButtons={props.actionButtons}>
|
|
{ Object.keys(categories).map((title: string, index: number) => {
|
|
const scoreIds = categories[title].auditRefs.map((ref: { id: string }) => ref.id);
|
|
const scoreList = scoreIds.map((id: string) => {
|
|
return { lbl: audits[id].title, val: makeValue(audits[id]), title: audits[id].description, key: id }
|
|
})
|
|
return (
|
|
<ExpandableRow
|
|
key={`lighthouse-${index}`}
|
|
lbl={title}
|
|
val={processScore(categories[title].score)}
|
|
rowList={scoreList}
|
|
/>
|
|
);
|
|
}) }
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default LighthouseCard;
|