joshuacoles/revision-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: joshuacoles:89558cdd1a1380993137e79998b7476f1382e288
Branches Tags
joshuacoles:main
..
compare: joshuacoles:f350018eb2fbced578b0a346aeaf33c7220530cc
Branches Tags
joshuacoles:main

No commits in common. "89558cdd1a1380993137e79998b7476f1382e288" and "f350018eb2fbced578b0a346aeaf33c7220530cc" have entirely different histories.
89558cdd1a ... f350018eb2

2 changed files with 10 additions and 16 deletions
Show Stats Expand all files Collapse all files

10
src/components/Donut.tsx
View File

@ -8,12 +8,7 @@ export type DonutChartData = {
value: number; value: number;
}[]; }[];
export function Donut({ export function Donut({data, centerLabel, formatter, hoverSuffix}: {
data,
centerLabel,
formatter,
hoverSuffix
}: {
data: DonutChartData, data: DonutChartData,
formatter: (value: number) => string, formatter: (value: number) => string,
centerLabel: string, centerLabel: string,
@ -76,13 +71,12 @@ export function Donut({
strokeWidth="3" strokeWidth="3"
strokeDasharray={`${value * normalisingFactor} ${100 - value * normalisingFactor}`} strokeDasharray={`${value * normalisingFactor} ${100 - value * normalisingFactor}`}
strokeDashoffset={100 - (offset * normalisingFactor) + 25} strokeDashoffset={100 - (offset * normalisingFactor) + 25}
style={{outline: 'none'}}
/> />
) )
}) })
} }
<g className="chart-text" style={{ userSelect: 'none'}}> <g className="chart-text">
<text x="50%" y="50%" className="chart-number"> <text x="50%" y="50%" className="chart-number">
{formatter(total)} {formatter(total)}
</text> </text>

16
src/components/HeatMap.tsx
View File

@ -40,33 +40,33 @@ function GitHubCalendarHeatmap({
const dayGoalTime = goal; const dayGoalTime = goal;
const weekGoalTime = 5 * dayGoalTime; const weekGoalTime = 5 * dayGoalTime;
const getColorForValue = (value: number, goalTime: number, zeroColor: string): string => { const getColorForValue = (value: number, goalTime: number): string => {
const buckets = [ const buckets = [
{ {
min: -Infinity, min: -Infinity,
max: 0, max: 0,
color: zeroColor, color: '#eeeeee'
}, },
{ {
min: 0, min: 0,
max: 0.40, max: 0.40,
color: '#d6e685', color: '#d6e685'
}, },
{ {
min: 0.40, min: 0.40,
max: 0.50, max: 0.50,
color: '#8cc665', color: '#8cc665'
}, },
{ {
min: 0.50, min: 0.50,
max: 0.90, max: 0.90,
color: '#44a340', color: '#44a340'
}, },
{ {
min: 0.90, min: 0.90,
// If penalising overtime, the max is 1.125, otherwise it's infinity (ie this is the last bucket) // If penalising overtime, the max is 1.125, otherwise it's infinity (ie this is the last bucket)
max: penaliseOvertime ? 1.125 : Infinity, max: penaliseOvertime ? 1.125 : Infinity,
color: '#1e6823', color: '#1e6823'
}, },
{ {
min: 1.125, min: 1.125,
@ -116,7 +116,7 @@ function GitHubCalendarHeatmap({
const dayOfWeek = (date.getDay() + 6) % 7; const dayOfWeek = (date.getDay() + 6) % 7;
const x = weekIndex * (squareSize + padding); const x = weekIndex * (squareSize + padding);
const y = dayOfWeek * (squareSize + padding); const y = dayOfWeek * (squareSize + padding);
const color = getColorForValue(count, dayGoalTime, dFns.isWeekend(date) ? '#d4d4d4' : '#eeeeee'); const color = getColorForValue(count, dayGoalTime);
return ( return (
<rect <rect
@ -137,7 +137,7 @@ function GitHubCalendarHeatmap({
const x = weekIndex * (squareSize + padding); const x = weekIndex * (squareSize + padding);
const y = 7 * (squareSize + padding) + weekTotalPadding; // Position for the week total const y = 7 * (squareSize + padding) + weekTotalPadding; // Position for the week total
const count = getWeekTotal(weekIndex); const count = getWeekTotal(weekIndex);
const color = getColorForValue(count, weekGoalTime, '#eeeeee'); const color = getColorForValue(count, weekGoalTime);
return ( return (
<rect <rect