Skip to content

Commit

Permalink
started implementing analytics dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
rayceramsay committed Aug 25, 2024
1 parent a1680db commit dd5e2cb
Show file tree
Hide file tree
Showing 7 changed files with 212 additions and 10 deletions.
116 changes: 116 additions & 0 deletions frontend/graphql/queries/analyticsQueries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -294,3 +294,119 @@ export const GET_CLICKS_CUSTOM_ANALYTICS = gql`
}
}
`;

export const GET_ANALYTICS_DASHBOARD_DATA = gql`
query GetAnalyticsDashboardData($startDate: Date!, $endDate: Date!) {
jobClicksDaily: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "daily", clickType: "job") {
date
count
}
jobClicksWeekly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "weekly", clickType: "job") {
date
count
}
jobClicksMonthly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "monthly", clickType: "job") {
date
count
}
jobClicksYearly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "yearly", clickType: "job") {
date
count
}
applyClicksDaily: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "daily", clickType: "apply") {
date
count
}
applyClicksWeekly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "weekly", clickType: "apply") {
date
count
}
applyClicksMonthly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "monthly", clickType: "apply") {
date
count
}
applyClicksYearly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "yearly", clickType: "apply") {
date
count
}
employerClicksDaily: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "daily", clickType: "employer") {
date
count
}
employerClicksWeekly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "weekly", clickType: "employer") {
date
count
}
employerClicksMonthly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "monthly", clickType: "employer") {
date
count
}
employerClicksYearly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "yearly", clickType: "employer") {
date
count
}
}
`;

export const GET_DASHBOARD_JOB_CLICKS = gql`
query GetDashboardJobClicks($startDate: Date!, $endDate: Date!) {
daily: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "daily", clickType: "job") {
date
count
}
weekly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "weekly", clickType: "job") {
date
count
}
jobClicksMonthly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "monthly", clickType: "job") {
date
count
}
jobClicksYearly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "yearly", clickType: "job") {
date
count
}
}
`;

export const GET_DASHBOARD_APPLY_CLICKS = gql`
query GetDashboardApplyClicks($startDate: Date!, $endDate: Date!) {
daily: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "daily", clickType: "apply") {
date
count
}
weekly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "weekly", clickType: "apply") {
date
count
}
monthly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "monthly", clickType: "apply") {
date
count
}
yearly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "yearly", clickType: "apply") {
date
count
}
}
`;

export const GET_DASHBOARD_EMPLOYER_CLICKS = gql`
query GetDashboardEmployerClicks($startDate: Date!, $endDate: Date!) {
daily: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "daily", clickType: "employer") {
date
count
}
weekly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "weekly", clickType: "employer") {
date
count
}
monthly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "monthly", clickType: "employer") {
date
count
}
yearly: getClicksCustomAnalytics(startDate: $startDate, endDate: $endDate, interval: "yearly", clickType: "employer") {
date
count
}
}
`;
32 changes: 24 additions & 8 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"@types/file-saver": "^2.0.7",
"@vercel/analytics": "^1.0.1",
"bcrypt": "^5.1.0",
"chart.js": "^4.3.0",
"chart.js": "^4.4.4",
"dayjs": "^1.11.6",
"dotenv": "^16.0.3",
"embla-carousel-react": "^7.0.5",
Expand All @@ -60,6 +60,7 @@
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "18.2.0",
"react-google-charts": "^4.0.1",
"react-hook-form": "^7.41.3",
"react-icons": "^4.7.1",
"react-responsive": "^9.0.2",
Expand Down
4 changes: 3 additions & 1 deletion frontend/pages/Admin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import EditJobButton from "../src/components/admin/EditJobButton";
import { Analytics } from "@vercel/analytics/react";
import AnalyticsPage from "./Analytics";
import AnalyticsButton from "../src/components/admin/AnalyticsButton";
import DashboardButton from "../src/components/admin/DashboardButton";


// To ensure unauthenticated people don't access
Expand Down Expand Up @@ -75,7 +76,8 @@ export default function Admin() {
<div>
<h1>Analytics</h1>
<div style={{ display: "flex" }}>
<AnalyticsButton text="Analytics" link="/Analytics" />
<AnalyticsButton text="Analytics" link="/Analytics" />
<DashboardButton text="Dashboard" link="/Dashboard" />
</div>
</div>
</div>
Expand Down
51 changes: 51 additions & 0 deletions frontend/pages/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { useQuery } from '@apollo/client'
import {
GET_DASHBOARD_APPLY_CLICKS,
GET_DASHBOARD_EMPLOYER_CLICKS,
GET_DASHBOARD_JOB_CLICKS,
} from '../graphql/queries/analyticsQueries'
import { Chart } from 'react-google-charts'
import styles from '../styles/Dashboard.module.css'
import Navbar from '../src/components/general/Navbar'

function Dashboard() {
const {
data: jobClicks,
loading: jobClicksLoading,
error: jobClicksError,
} = useQuery(GET_DASHBOARD_JOB_CLICKS, {
variables: { startDate: '2024-01-01', endDate: '2024-08-01' },
})
const {
data: applyClicks,
loading: applyClicksLoading,
error: applyClicksError,
} = useQuery(GET_DASHBOARD_APPLY_CLICKS, {
variables: { startDate: '2024-01-01', endDate: '2024-08-01' },
})
const {
data: employerClicks,
loading: employerClicksLoading,
error: employerClicksError,
} = useQuery(GET_DASHBOARD_EMPLOYER_CLICKS, {
variables: { startDate: '2024-01-01', endDate: '2024-08-01' },
})

if (jobClicksLoading || applyClicksLoading || employerClicksLoading) return <div>loading</div>

const dailyClickCounts = [['Date', 'Daily Count'], ...jobClicks.daily.map((item: any) => [item.date, item.count])]
const dailyChartOptions = {
title: 'Daily Clicks',
}

return (
<>
<Navbar />
<main>
<Chart chartType='Line' width='80%' height='400px' data={dailyClickCounts} options={dailyChartOptions} />
</main>
</>
)
}

export default Dashboard
16 changes: 16 additions & 0 deletions frontend/src/components/admin/DashboardButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import styles from "../../../styles/components/AdminPageButtons.module.css";
import Link from "next/link";


export default function DashboardButton(props:any) {
const { text, link } = props;
return (
<div>
<Link href={link}>
<button className={styles.adminFunctionButton}>{text}</button>
</Link>
</div>
)

}
Empty file.

0 comments on commit dd5e2cb

Please sign in to comment.