Skip to content

Commit

Permalink
Make cm graphs by week, and tidy.
Browse files Browse the repository at this point in the history
  • Loading branch information
@GreenAsJade
GreenAsJade committed Mar 28, 2024
1 parent 63b2ed3 commit e44abbf
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 42 deletions.
83 changes: 58 additions & 25 deletions src/views/ReportsCenter/ReportsCenterCMInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,40 +35,66 @@ interface AggregatedReportsData {
interface VoteActivityGraphProps {
vote_data: ReportCount[];
}

/*
function round_date(the_date: Date): Date {
return new Date(the_date.setHours(0, 0, 0, 0));
}
*/
function startOfWeek(the_date: Date): Date {
const date = new Date(the_date);
const day = date.getDay(); // Get current day of week (0 is Sunday)
const diff = date.getDate() - day; // Calculate difference to the start of the week

return new Date(date.setDate(diff));
}

const CMVoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
const aggregateDataByWeek = React.useMemo(() => {
const aggregated: {
[key: string]: { escalated: number; consensus: number; non_consensus: number };
} = {};

vote_data.forEach((entry) => {
const weekStart = startOfWeek(new Date(entry.date)).toISOString().slice(0, 10); // Get week start and convert to ISO string for key
if (!aggregated[weekStart]) {
aggregated[weekStart] = { escalated: 0, consensus: 0, non_consensus: 0 };
}
aggregated[weekStart].escalated += entry.escalated;
aggregated[weekStart].consensus += entry.consensus;
aggregated[weekStart].non_consensus += entry.non_consensus;
});

return Object.entries(aggregated).map(([date, counts]) => ({
date,
...counts,
}));
}, [vote_data]);

const chart_data = React.useMemo(
() => [
{
id: "escalated",
data:
vote_data?.map((day) => ({
x: round_date(new Date(day.date)),
y: day.escalated,
})) ?? [],
data: aggregateDataByWeek.map((week) => ({
x: week.date,
y: week.escalated,
})),
},
{
id: "consensus",
data:
vote_data?.map((day) => ({
x: round_date(new Date(day.date)),
y: day.consensus,
})) ?? [],
data: aggregateDataByWeek.map((week) => ({
x: week.date,
y: week.consensus,
})),
},
{
id: "non-consensus",
data:
vote_data?.map((day) => ({
x: round_date(new Date(day.date)),
y: day.non_consensus,
})) ?? [],
data: aggregateDataByWeek.map((week) => ({
x: week.date,
y: week.non_consensus,
})),
},
],
[vote_data],
[aggregateDataByWeek],
);

const chart_theme =
Expand All @@ -82,37 +108,44 @@ const CMVoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
grid: { line: { stroke: "#444444" } },
};

const line_colors = {
consensus: "green",
"non-consensus": "red",
escalated: "orange",
};

if (!chart_data[0].data.length) {
return <div className="aggregate-vote-activity-graph">No activity yet</div>;
}

console.log(chart_data);
return (
<div className="aggregate-vote-activity-graph">
<ResponsiveLine
data={chart_data}
colors={({ id }) => line_colors[id as keyof typeof line_colors]}
animate
curve="monotoneX"
enablePoints={false}
enableSlices="x"
axisBottom={{
format: "%d %b %g",
tickValues: "every month",
tickValues: "every week",
}}
xFormat="time:%Y-%m-%d"
xScale={{
format: "%Y-%m-%d",
precision: "day",
type: "time",
min: "2023-12-31",
format: "%Y-%m-%d",
useUTC: false,
precision: "day",
}}
axisLeft={{
tickValues: 6,
}}
margin={{
bottom: 40,
left: 60,
right: 20,
right: 40,
top: 5,
}}
theme={chart_theme}
Expand Down Expand Up @@ -144,10 +177,10 @@ export function ReportsCenterCMInfo(): JSX.Element {
return (
<div className="ReportsCenterCMInfo">
{["overall", "escaping", "stalling", "score_cheating"].map((report_type) => (
<>
<div key={report_type}>
<h3>{report_type}</h3>
<CMVoteActivityGraph vote_data={vote_data[report_type]} key={report_type} />
</>
<CMVoteActivityGraph vote_data={vote_data[report_type]} />
</div>
))}
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/views/User/ActivityCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export function ActivityCard({
<div className="mod-graph-header">
{pgettext(
"header for a graph showing how often the moderator voted with the others",
"consensus votes",
"consensus votes (by week)",
)}
</div>
<UserVoteActivityGraph user_id={user.id} />
Expand All @@ -178,7 +178,7 @@ export function ActivityCard({
),
)
.map(([report_type, _flag]) => (
<>
<div key={report_type}>
<div className="mod-graph-header" key={report_type}>
{interpolate(
pgettext(
Expand All @@ -192,7 +192,7 @@ export function ActivityCard({
user_id={user.id}
report_type={report_type as ReportType}
/>
</>
</div>
))}
</>
)}
Expand Down
47 changes: 33 additions & 14 deletions src/views/User/VoteActivityGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,24 +35,42 @@ interface VoteActivityGraphProps {
vote_data: ModeratorVoteCountData;
}

function round_date(the_date: Date): Date {
return new Date(the_date.setHours(0, 0, 0, 0));
function startOfWeek(the_date: Date): Date {
const date = new Date(the_date);
const day = date.getDay(); // Get current day of week (0 is Sunday)
const diff = date.getDate() - day;
return new Date(date.setDate(diff));
}

const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
const chart_data = React.useMemo(
() => [
const chart_data = React.useMemo(() => {
const aggregatedByWeek: {
[key: string]: number;
} = {};

vote_data.counts.forEach((day) => {
const weekStart = startOfWeek(new Date(day.date)).toISOString().slice(0, 10); // Format as YYYY-MM-DD
if (!aggregatedByWeek[weekStart]) {
aggregatedByWeek[weekStart] = 0;
}
aggregatedByWeek[weekStart] += day.count;
});

const min_date = new Date("2024-02-01");
const data = Object.entries(aggregatedByWeek)
.filter(([date, _count]) => new Date(date) >= min_date)
.map(([date, count]) => ({
x: date, // x-axis will use the week start date
y: count, // y-axis will use the aggregated count
}));

return [
{
id: "votes",
data:
vote_data?.counts.map((day) => ({
x: round_date(new Date(day.date)),
y: day.count,
})) ?? [],
data,
},
],
[vote_data],
);
];
}, [vote_data]);

const chart_theme =
data.get("theme") === "light" // (Accessible theme TBD - this assumes accessible is dark for now)
Expand All @@ -79,10 +97,11 @@ const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
enableSlices="x"
axisBottom={{
format: "%d %b %g",
tickValues: "every month",
tickValues: "every 2 weeks",
}}
xFormat="time:%Y-%m-%d"
xScale={{
min: "2024-02-01",
format: "%Y-%m-%d",
precision: "day",
type: "time",
Expand All @@ -95,7 +114,7 @@ const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
margin={{
bottom: 40,
left: 60,
right: 20,
right: 40,
top: 5,
}}
theme={chart_theme}
Expand Down

0 comments on commit e44abbf

Please sign in to comment.