Style dashboard charts

frontend/pages/Dashboard.tsx

@@ -1,44 +1,94 @@
-import { useQuery } from "@apollo/client";
-import {
-  GET_ANALYTICS_DASHBOARD_DATA
-} from "../graphql/queries/analyticsQueries";
-import { Chart } from "react-google-charts";
-import styles from "../styles/Dashboard.module.css";
-import Navbar from "../src/components/general/Navbar";
+import { useQuery } from '@apollo/client'
+import { GET_ANALYTICS_DASHBOARD_DATA } 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, loading, error } = useQuery(GET_ANALYTICS_DASHBOARD_DATA, {
-    variables: { startDate: "2024-01-01", endDate: "2024-08-01" },
-  });
+    variables: { startDate: '2024-01-01', endDate: '2024-08-01' },
+  })
 
-  if (loading) return <div>loading</div>;
-  if (error) return <div>error</div>;
+  if (loading) return <div>loading</div>
+  if (error) return <div>error</div>
 
-
-  const dailyClickCounts = [
-    ["Date", "Daily Count"],
-    ...data.jobClicksDaily.map((item: any) => [item.date, item.count]),
-    ...data.applyClicksDaily.map((item: any) => [item.date, item.count]),
-    ...data.employerClicksDaily.map((item: any) => [item.date, item.count])
-  ];
-  const dailyChartOptions = {
-    title: "Daily Clicks",
-  };
+  const types = ['Job', 'Apply', 'Employer']
+  const intervals = ['Daily', 'Weekly', 'Monthly', 'Yearly']
+  let clickChartsIntervals = []
+  for (const type of types) {
+    for (const interval of intervals) {
+      const dataKey = `${type.toLowerCase()}Clicks${interval}`
+      const clickCounts = [
+        ['Date', `${interval} ${type} Count`],
+        ...data[dataKey].map((item: any) => [item.date, item.count]),
+      ]
+      const chartOptions = {
+        title: `${interval} ${type} Clicks`,
+        titlePosition: 'none',
+        legend: 'none',
+        backgroundColor: 'transparent',
+        chartArea: {
+          width: '100%',
+          height: '100%',
+          bottom: '30',
+        },
+        vAxis: {
+          gridlines: {
+            color: '#333',
+          },
+          minorGridlines: {
+            count: 0,
+          },
+          textPosition: 'in',
+          textStyle: {
+            color: '#999',
+          },
+          slantedText: false,
+          maxAlternation: 1,
+        },
+        hAxis: {
+          textPosition: 'out',
+          textStyle: {
+            color: '#999',
+          },
+          slantedText: false,
+          maxAlternation: 1,
+        },
+        crosshair: {
+          trigger: 'focus',
+          color: 'white',
+          orientation: 'vertical',
+        },
+        tooltip: {
+          isHtml: true,
+        },
+        axisTitlesPosition: 'none',
+      }
+      clickChartsIntervals.push({ clickCounts, chartOptions })
+    }
+  }
 
   return (
     <>
       <Navbar />
-      <main>
-        <Chart
-          chartType="Line"
-          width="80%"
-          height="400px"
-          data={dailyClickCounts}
-          options={dailyChartOptions}
-        />
+      <main className={styles.wrapper}>
+        <div className={styles.charts}>
+          {clickChartsIntervals.map((item: any) => (
+            <div key={item.chartOptions.title} className={styles.chartContainer}>
+              <Chart
+                chartType='AreaChart'
+                width='100%'
+                height='100%'
+                data={item.clickCounts}
+                options={item.chartOptions}
+                className={styles.chart}
+              />
+            </div>
+          ))}
+        </div>
       </main>
     </>
-  );
+  )
 }
 
-export default Dashboard;
+export default Dashboard

frontend/styles/Dashboard.module.css

@@ -0,0 +1,37 @@
+.wrapper {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.charts {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  max-width: 1554px;
+  margin: 0 auto;
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
+.chartContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 4rem;
+  padding: 2rem 2rem 1rem;
+  border: #333 1px solid;
+  border-radius: 1rem;
+  height: 500px;
+}
+
+.chartContainer :global(div.google-visualization-tooltip) {
+  background-color: #222;
+  border: #555 2px solid;
+  border-radius: 0.5rem;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}
+
+.chartContainer :global(div.google-visualization-tooltip > ul > li > span) {
+  color: white !important;
+}