Added title displaying current date range in dashboard

onyx-initiative · Aug 28, 2024 · e36651b · e36651b
1 parent 8bba71f
commit e36651b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 36 deletions.
diff --git a/frontend/pages/Dashboard.tsx b/frontend/pages/Dashboard.tsx
@@ -54,36 +54,41 @@ function Dashboard() {
     <>
       <Navbar />
       <main className={styles.wrapper}>
-        <form action='' className={styles.dateLimitsForm}>
-          <label className={styles.dateLimitInputContainer}>
-            <span className={styles.dateLimitInputLabel}>Start Date</span>
-            <input
-              type='date'
-              value={startDate}
-              onChange={(e) => setStartDate(e.target.value)}
-              className={styles.dateLimitInput}
-              max={currentDate}
-            />
-          </label>
-          <label className={styles.dateLimitInputContainer}>
-            <span className={styles.dateLimitInputLabel}>End Date</span>
-            <input
-              type='date'
-              value={endDate}
-              onChange={(e) => setEndDate(e.target.value)}
-              className={styles.dateLimitInput}
-              min={startDate}
-              max={currentDate}
-            />
-          </label>
-          <button
-            type='button'
-            onClick={() => getPageData({ variables: { startDate, endDate } })}
-            className={styles.dateLimitSubmit}
-          >
-            Get Analytics
-          </button>
-        </form>
+        <div className={styles.titleRow}>
+          <h1 className={styles.mainTitle}>
+            Analytics for {startDate} to {endDate}
+          </h1>
+          <form action='' className={styles.dateLimitsForm}>
+            <label className={styles.dateLimitInputContainer}>
+              <span className={styles.dateLimitInputLabel}>Start Date</span>
+              <input
+                type='date'
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                className={styles.dateLimitInput}
+                max={currentDate}
+              />
+            </label>
+            <label className={styles.dateLimitInputContainer}>
+              <span className={styles.dateLimitInputLabel}>End Date</span>
+              <input
+                type='date'
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+                className={styles.dateLimitInput}
+                min={startDate}
+                max={currentDate}
+              />
+            </label>
+            <button
+              type='button'
+              onClick={() => getPageData({ variables: { startDate, endDate } })}
+              className={styles.dateLimitSubmit}
+            >
+              Get Analytics
+            </button>
+          </form>
+        </div>
         <div className={styles.quickStats}>
           <DashboardTwoItemTable firstHeading='Click Type' secondHeading='TOTAL CLICKS' data={typeClickTableBodyData} />
         </div>

diff --git a/frontend/src/components/admin/DashboardClickChart.tsx b/frontend/src/components/admin/DashboardClickChart.tsx
@@ -63,7 +63,7 @@ export default function DashboardClickChart({ data, interval, type }: ClickChart
 
   return (
     <div className={styles.chart}>
-      <h2 className={styles.chartTitle}>{title}</h2>
+      <div className={styles.chartTitle}>{title}</div>
       {data.length ? (
         <div className={styles.googleChartContainer}>
           <Chart chartType='AreaChart' width='100%' height='100%' data={clickCounts} options={chartOptions} />

diff --git a/frontend/styles/Dashboard.module.css b/frontend/styles/Dashboard.module.css
@@ -7,13 +7,26 @@
   margin: 0 auto;
 }
 
+.titleRow {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mainTitle {
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: bold;
+  text-align: left;
+}
+
 .dateLimitsForm {
   display: flex;
   justify-content: right;
   align-items: end;
-  padding-left: 4rem;
-  padding-right: 4rem;
-  margin-bottom: 1rem;
 }
 
 .dateLimitInputContainer {
@@ -89,3 +102,11 @@
 .chartContainer:last-child {
   margin-bottom: 0;
 }
+
+@media screen and (min-width: 1064px) {
+  .titleRow {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
diff --git a/frontend/styles/components/DashboardClickChart.module.css b/frontend/styles/components/DashboardClickChart.module.css
@@ -3,13 +3,13 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  padding: 1rem 2rem;
+  padding: 2rem 2rem 1rem;
   border: #333 1px solid;
   border-radius: 1rem;
 }
 
 .chartTitle {
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   margin-bottom: 2rem;
   font-weight: bold;
 }

diff --git a/frontend/styles/components/DashboardTwoItemTable.module.css b/frontend/styles/components/DashboardTwoItemTable.module.css
@@ -1,3 +1,7 @@
+.dataTable {
+  overflow-x: auto;
+}
+
 .dataTable table,
 .dataTable thead,
 .dataTable tbody {
@@ -9,6 +13,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  column-gap: 1rem;
 }
 
 .dataTable thead tr {