-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e7122b8
commit 1cca4b0
Showing
10 changed files
with
174 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from "react"; | ||
import { TableCell } from "@mui/material"; | ||
import RYGGradient from "../utils/RYGGradient"; | ||
import { CoverageDiffIcon } from "./CoverageDiffIcon"; | ||
|
||
export const CoverageCell: React.FC<{ coverage: number; previous: number; }> = ({ | ||
coverage, previous, | ||
}) => { | ||
const icon = React.useMemo( | ||
() => CoverageDiffIcon(coverage - (previous), previous), | ||
[coverage, previous] | ||
); | ||
const styles = React.useMemo(() => RYGGradient(coverage), [coverage]); | ||
return ( | ||
<TableCell sx={styles}>{Math.round(coverage)}% {icon}</TableCell> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from "react"; | ||
import { Tooltip } from "@mui/material"; | ||
import { ArrowDownward, ArrowUpward } from "@mui/icons-material"; | ||
|
||
export const CoverageDiffIcon = (diff: number, prev: number) => { | ||
if (prev === 0) return; | ||
if (diff > 0) { | ||
return ( | ||
<Tooltip title={`+${diff.toFixed(2)}%`}> | ||
<ArrowUpward color="success" /> | ||
</Tooltip> | ||
); | ||
} | ||
if (diff < 0) { | ||
return ( | ||
<Tooltip title={`-${diff.toFixed(2)}%`}> | ||
<ArrowDownward color="error" /> | ||
</Tooltip> | ||
); | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React from "react"; | ||
import { TableCell, TableRow } from "@mui/material"; | ||
import { CoverageDetails } from "../models/CoverageDetails"; | ||
import { CoverageCell } from "./CoverageCell"; | ||
|
||
export const CoverageRow: React.FC<{ data: CoverageDetails; name: string; }> = ({ | ||
name, data, | ||
}) => { | ||
return ( | ||
<TableRow key={name}> | ||
<TableCell>{name}</TableCell> | ||
<CoverageCell | ||
coverage={data.current.lines} | ||
previous={data.previous.lines} /> | ||
<CoverageCell | ||
coverage={data.current.statements} | ||
previous={data.previous.statements} /> | ||
<CoverageCell | ||
coverage={data.current.functions} | ||
previous={data.previous.functions} /> | ||
<CoverageCell | ||
coverage={data.current.branches} | ||
previous={data.previous.branches} /> | ||
</TableRow> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import React from "react"; | ||
import { TableCell, TableRow } from "@mui/material"; | ||
import { CoverageDetails } from "../models/CoverageDetails"; | ||
import { CoverageCell } from "./CoverageCell"; | ||
|
||
export const SummaryRow: React.FC<{ data: CoverageDetails[]; }> = ({ data }) => { | ||
const summaryData = React.useMemo(() => { | ||
return { | ||
lines: data.reduce((acc, curr) => acc + curr.current.lines, 0) / data.length, | ||
statements: data.reduce((acc, curr) => acc + curr.current.statements, 0) / | ||
data.length, | ||
functions: data.reduce((acc, curr) => acc + curr.current.functions, 0) / | ||
data.length, | ||
branches: data.reduce((acc, curr) => acc + curr.current.branches, 0) / | ||
data.length, | ||
}; | ||
}, [data]); | ||
|
||
return ( | ||
<TableRow key="Summary" sx={{ borderTopWidth: "2px" }}> | ||
<TableCell sx={{ fontWeight: "bold" }}>Summary</TableCell> | ||
<CoverageCell coverage={summaryData.lines} previous={0} /> | ||
<CoverageCell coverage={summaryData.statements} previous={0} /> | ||
<CoverageCell coverage={summaryData.functions} previous={0} /> | ||
<CoverageCell coverage={summaryData.branches} previous={0} /> | ||
</TableRow> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { CoverageValues } from "./CoverageValues"; | ||
|
||
export interface CoverageDetails { | ||
current: CoverageValues; | ||
previous: CoverageValues; | ||
diff: CoverageValues; | ||
changed: string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { CoverageDetails } from "./CoverageDetails"; | ||
|
||
export interface CoverageResponse { | ||
[key: string]: CoverageDetails; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export interface CoverageValues { | ||
lines: number; | ||
statements: number; | ||
functions: number; | ||
branches: number; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
interface StyleProps { | ||
color: string; | ||
fontWeight: string; | ||
textShadow?: string; | ||
backgroundColor?: string; | ||
} | ||
|
||
const RYGGradient = (coverage: number): StyleProps => { | ||
let r: number = 0; | ||
let g: number = 0; | ||
let b: number = 0; | ||
|
||
const red = { r: 185, g: 28, b: 28 }; | ||
const yellow = { r: 234, g: 179, b: 8 }; | ||
const green = { r: 101, g: 163, b: 13 }; | ||
|
||
if (coverage <= 45) { | ||
r = red.r; | ||
g = red.g; | ||
b = red.b; | ||
} else if (coverage <= 60) { | ||
const ratio = (coverage - 45) / 15; | ||
r = red.r + (yellow.r - red.r) * ratio; | ||
g = red.g + (yellow.g - red.g) * ratio; | ||
b = red.b + (yellow.b - red.b) * ratio; | ||
} else if (coverage <= 85) { | ||
const ratio = (coverage - 60) / 25; | ||
r = yellow.r + (green.r - yellow.r) * ratio; | ||
g = yellow.g + (green.g - yellow.g) * ratio; | ||
b = yellow.b + (green.b - yellow.b) * ratio; | ||
} else { | ||
r = green.r; | ||
g = green.g; | ||
b = green.b; | ||
} | ||
|
||
const fontWeight = coverage < 45 ? "bolder" : "bold"; | ||
const color = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`; | ||
|
||
return { color, fontWeight }; | ||
}; | ||
|
||
export default RYGGradient; | ||
|
||
|