From b750c05af6ea18b325580563ab443f34b8239ccd Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Fri, 21 Apr 2023 14:39:02 -0700
Subject: [PATCH] fix date filter, bind start/end dates, fix frequency bar
 chart

---
 src/routes/dashboard/+page.svelte             | 84 +++++++++----------
 src/routes/dashboard/QuestionBarChart.svelte  |  8 +-
 .../dashboard/helpers/filter-answers.ts       |  1 +
 3 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index 03ccc993..562485e4 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -37,21 +37,53 @@
     guild,
   } = data
 
-  let today = new Date()
-  let endDate = today
-  let startDate = new Date(today.getFullYear(), today.getMonth() - 3, 1)
-  let dates: Date[] = timeBetweenDates('months', [startDate, endDate])
+  const today = new Date()
+
+  /**
+   * Selected start date
+   * @default "3 months ago"
+   */
+  let selectedStartDate = new Date(today.getFullYear(), today.getMonth() - 3, 1)
+  /**
+   * Selected end date
+   * @default "today"
+   */
+  let selectedEndDate = today
+  /**
+   * Selected time period
+   */
+  let selectedTimePeriod: TimePeriod = TIME_PERIODS.MONTH
+  /**
+   * Selected post tags
+   */
+  let selectedTags: string[] = [...availableTags]
+  /**
+   * Selected channels
+   */
+  let selectedChannels: string[] = [...allHelpChannels]
+
+  /**
+   * Dates between selected start and end dates
+   */
+  let dates: Date[] = timeBetweenDates(selectedTimePeriod, [
+    selectedStartDate,
+    selectedEndDate,
+  ])
 
   let filteredContributors: Contributor[] = filterAnswers(
     allHelpChannels,
-    [dates[0], today],
+    [dates[0], selectedEndDate],
     contributors.all
   )
   let filteredStaffContributors: Contributor[] = filterAnswers(
     allHelpChannels,
-    [dates[0], today],
+    [dates[0], selectedEndDate],
     contributors.staff
   )
+
+  /**
+   * @todo refactor contributor tables to component
+   */
   let topOverallPromise = getTopContributors(contributors.all, gitHubStaff, 9)
   let topStaffPromise = getTopContributors(contributors.staff, gitHubStaff, 9)
 
@@ -62,17 +94,6 @@
     { key: 'answers', value: 'Answers' },
   ]
 
-  $: filteredContributors = filterAnswers(
-    allHelpChannels,
-    [dates[0], today],
-    contributors.all
-  )
-  $: filteredStaffContributors = filterAnswers(
-    allHelpChannels,
-    [dates[0], today],
-    contributors.staff
-  )
-
   $: topStaffPromise = getTopContributors(
     filteredStaffContributors,
     gitHubStaff,
@@ -84,29 +105,6 @@
     9
   )
 
-  /**
-   * Selected start date
-   * @default "3 months ago"
-   */
-  let selectedStartDate = new Date(today.getFullYear(), today.getMonth() - 3, 1)
-  /**
-   * Selected end date
-   * @default "today"
-   */
-  let selectedEndDate = today
-  /**
-   * Selected time period
-   */
-  let selectedTimePeriod: TimePeriod = TIME_PERIODS.MONTH
-  /**
-   * Selected post tags
-   */
-  let selectedTags: string[] = [...availableTags]
-  /**
-   * Selected channels
-   */
-  let selectedChannels: string[] = [...allHelpChannels]
-
   /**
    * @todo rename this when we have finished the migration to the revised helpers
    * @todo fix the need to typecast
@@ -208,8 +206,6 @@
       ),
     },
   ]
-
-  $: console.log()
 </script>
 
 <svelte:head>
@@ -247,9 +243,9 @@
         bind:channels="{selectedChannels}"
         bind:tags="{selectedTags}"
         bind:timePeriod="{selectedTimePeriod}"
+        bind:startDate="{selectedStartDate}"
+        bind:endDate="{selectedEndDate}"
         today="{today}"
-        startDate="{startDate}"
-        endDate="{endDate}"
       />
       <Row padding>
         <Column>
diff --git a/src/routes/dashboard/QuestionBarChart.svelte b/src/routes/dashboard/QuestionBarChart.svelte
index 155a144f..afff7d4d 100644
--- a/src/routes/dashboard/QuestionBarChart.svelte
+++ b/src/routes/dashboard/QuestionBarChart.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BarChartStacked } from '@carbon/charts-svelte'
-  import { COHORTS } from './constants'
+  import { COHORTS, TIME_PERIODS } from './constants'
   import { groupQuestions } from './helpers/group-questions'
   import type { TimePeriod, Question } from './types'
 
@@ -36,7 +36,12 @@
       byDateOptions: { period: timePeriod },
     })
     for (const [date, questionsGroupedByDate] of Object.entries(grouped)) {
+      const isGroupedByDayOrWeek = [
+        TIME_PERIODS.DAY as string,
+        TIME_PERIODS.WEEK as string,
+      ].includes(timePeriod)
       const key = new Date(date).toLocaleDateString('en-US', {
+        day: isGroupedByDayOrWeek ? 'numeric' : undefined,
         month: 'short',
         year: 'numeric',
       })
@@ -84,6 +89,7 @@
   }
 
   $: data = createBarChartData(questions, timePeriod)
+  $: console.log({ timePeriod, data })
 </script>
 
 <BarChartStacked
diff --git a/src/routes/dashboard/helpers/filter-answers.ts b/src/routes/dashboard/helpers/filter-answers.ts
index 5d9fcd4a..c67339b9 100644
--- a/src/routes/dashboard/helpers/filter-answers.ts
+++ b/src/routes/dashboard/helpers/filter-answers.ts
@@ -5,6 +5,7 @@ import type { Contributor } from '../types'
 /**
  * Filter answers by channel and date range
  * @TODO refactor this to be more generic
+ * @deprecated
  */
 export function filterAnswers(
   channels: string[],