Add tooltip to analytics charts

web/components/analytics/charts.tsx

@@ -1,7 +1,8 @@
-import { ResponsiveLine } from '@nivo/line'
+import { Point, ResponsiveLine } from '@nivo/line'
 import dayjs from 'dayjs'
 import _ from 'lodash'
 import { useWindowSize } from 'web/hooks/use-window-size'
+import { Col } from '../layout/col'
 
 export function DailyCountChart(props: {
   startDate: number
@@ -46,6 +47,10 @@ export function DailyCountChart(props: {
         enableGridX={!!width && width >= 800}
         enableArea
         margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
+        sliceTooltip={({ slice }) => {
+          const point = slice.points[0]
+          return <Tooltip point={point} />
+        }}
       />
     </div>
   )
@@ -97,7 +102,34 @@ export function DailyPercentChart(props: {
         enableGridX={!!width && width >= 800}
         enableArea
         margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
+        sliceTooltip={({ slice }) => {
+          const point = slice.points[0]
+          return <Tooltip point={point} />
+        }}
       />
     </div>
   )
 }
+
+function Tooltip(props: { point: Point }) {
+  const { point } = props
+  return (
+    <Col
+      className="border bg-white py-1 px-3 "
+      style={{
+        border: '1px solid #ccc',
+      }}
+    >
+      <div
+        key={point.id}
+        style={{
+          color: point.serieColor,
+          padding: '3px 0',
+        }}
+      >
+        <strong>{point.serieId}</strong> {point.data.yFormatted}
+      </div>
+      <div>{dayjs(point.data.x).format('MMM DD')}</div>
+    </Col>
+  )
+}

web/pages/analytics.tsx

@@ -18,10 +18,11 @@ import { getDailyNewUsers } from 'web/lib/firebase/users'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz() {
-  const numberOfDays = 45
+  const numberOfDays = 10
   const tomorrow = dayjs(dayjs().format('YYYY-MM-DD'))
     .add(1, 'day')
-    .subtract(7, 'hours')
+    // Convert from UTC midnight to PT midnight.
+    .add(7, 'hours')
 
   const startDate = tomorrow.subtract(numberOfDays, 'day')
 
@@ -147,7 +148,7 @@ export async function getStaticPropz() {
 
   return {
     props: {
-      startDate: startDate.add(1, 'day').valueOf(),
+      startDate,
       dailyActiveUsers,
       weeklyActiveUsers,
       monthlyActiveUsers,
@@ -208,7 +209,6 @@ export function CustomAnalytics(props: {
   weeklyActivationRate: number[]
 }) {
   const {
-    startDate,
     dailyActiveUsers,
     dailyBetCounts,
     dailyContractCounts,
@@ -220,6 +220,8 @@ export function CustomAnalytics(props: {
     weeklyActivationRate,
   } = props
 
+  const startDate = dayjs(props.startDate).add(12, 'hours').valueOf()
+
   const dailyDividedByWeekly = dailyActiveUsers
     .map((dailyActive, i) =>
       Math.round((100 * dailyActive) / weeklyActiveUsers[i])