Merge pull request #88 from ibi-group/daily-stats

Daily Stats

Author: binh-dam-ibigroup

.github/workflows/e2e.yml

@@ -12,10 +12,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 22.x
       - name: Install npm packages using cache
         uses: bahmutov/npm-install@v1
         with:

.github/workflows/node-ci.yml

@@ -12,10 +12,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 22.x
       - name: Install npm packages using cache
         uses: bahmutov/npm-install@v1
         with:

__tests__/e2e/e2e.ts

@@ -199,7 +199,7 @@ describe('end-to-end tests', () => {
         downloadPath: '/tmp'
       })
 
-      await expect(page).toClick('div', { text: uploadString })
+      await expect(page).toClick('button', { text: uploadString })
 
       await waitForDownload('anon-trip-data')
       await expect(page).toMatch('You last downloaded', { timeout: 6000 })

components/AdminUserDashboard.tsx

@@ -12,6 +12,7 @@ import CDPUserDashboard from './CDPUserDashboard'
 import ErrorEventsDashboard from './ErrorEventsDashboard'
 import RequestLogsDashboard from './RequestLogsDashboard'
 import UserList from './UserList'
+import DailyStatsDashboard from './DailyStatsDashboard'
 
 export default function AdminUserDashboard(): JSX.Element {
   const {
@@ -39,6 +40,9 @@ export default function AdminUserDashboard(): JSX.Element {
           </div>
           {hasApiManager && <RequestLogsDashboard isAdmin summaryView />}
         </Tab>
+        <Tab eventKey="dailystats" title="Daily Stats">
+          <DailyStatsDashboard />
+        </Tab>
         <Tab eventKey="errors" title="Errors">
           <ErrorEventsDashboard />
         </Tab>

components/ApiKeyUsageChart.tsx

@@ -4,18 +4,10 @@ import { Key } from '@styled-icons/fa-solid/Key'
 import clone from 'clone'
 import moment from 'moment'
 import { Button } from 'react-bootstrap'
-import {
-  XYPlot,
-  XAxis,
-  YAxis,
-  VerticalGridLines,
-  HorizontalGridLines,
-  VerticalRectSeries,
-  RectSeriesPoint,
-  RVValueEventHandler
-} from 'react-vis'
 
-import { GraphValue, Requests, Plan } from '../types/graph'
+import { Requests, Plan, GraphNumberValue } from '../types/graph'
+
+import Chart from './Chart'
 
 export type Props = {
   aggregatedView?: boolean
@@ -27,18 +19,7 @@ export type Props = {
  * Renders a chart showing API Key usage (requests over time) for a particular
  * API key.
  */
-class ApiKeyUsageChart extends Component<Props, { value: GraphValue | null }> {
-  constructor(props: Props) {
-    super(props)
-    this.state = {
-      value: null
-    }
-  }
-
-  handleClearValue = () => {
-    this.setState({ value: null })
-  }
-
+class ApiKeyUsageChart extends Component<Props> {
   _renderChartTitle = () => {
     const { aggregatedView, isAdmin } = this.props
     // Do not show chart title for non-admin users.
@@ -140,12 +121,6 @@ class ApiKeyUsageChart extends Component<Props, { value: GraphValue | null }> {
       ? null
       : (this.props.id && this.props?.plan?.apiUsers?.[this.props.id]) || null
 
-  handleSetValue: RVValueEventHandler<RectSeriesPoint> = (
-    data: RectSeriesPoint
-  ) => {
-    this.setState({ value: data })
-  }
-
   handleViewApiKey = () => {
     const { id, plan } = this.props
     if (!id || !plan) return
@@ -164,8 +139,6 @@ class ApiKeyUsageChart extends Component<Props, { value: GraphValue | null }> {
 
   render() {
     const { aggregatedView, id, plan } = this.props
-    const { value } = this.state
-    const ONE_DAY_MILLIS = 86400000
     const startDate = moment(plan?.result.startDate)
     if (!aggregatedView && !id) {
       console.warn('Cannot show non-aggregated view if id prop is undefined.')
@@ -174,55 +147,24 @@ class ApiKeyUsageChart extends Component<Props, { value: GraphValue | null }> {
     // Render the # of requests per API key on each day beginning
     // with the start date.
     const requestData = this._getRequestData()
-    const timestamp = startDate.valueOf()
-    let rangeMax = 0
     // Format request data for chart component.
-    const CHART_DATA: RectSeriesPoint[] =
+    const CHART_DATA: GraphNumberValue[] =
       requestData?.map((value, i) => {
         if (i > 0) startDate.add(1, 'days')
-        const begin = startDate.valueOf()
         // @ts-ignore TYPESCRIPT TODO: what is going on here?
-        const y = value[0]
-        const end = begin + ONE_DAY_MILLIS
-        if (y > rangeMax) rangeMax = y
-        return { x: end, x0: begin, y, y0: 0 }
+        return { x: startDate.valueOf(), y: value[0] }
       }) || []
-    const maxY = rangeMax === 0 ? 10 : Math.ceil(rangeMax / 10) * 10
     return (
-      <div className="usage-list" style={{ display: 'inline-block' }}>
-        {this._renderChartTitle()}
-        {this._renderKeyInfo()}
-        <XYPlot
-          height={300}
-          style={{ overflow: 'initial' }}
-          width={600} // Round up max y value to the nearest 10
-          xDomain={[
-            timestamp - 2 * ONE_DAY_MILLIS,
-            timestamp + 30 * ONE_DAY_MILLIS
-          ]}
-          yDomain={[0, maxY]}
-        >
-          <VerticalGridLines />
-          <HorizontalGridLines />
-          <XAxis tickFormat={(d) => moment(d).format('MMM DD')} />
-          <YAxis />
-          <VerticalRectSeries
-            data={CHART_DATA}
-            onValueMouseOut={this.handleClearValue} // Update value on mouse over/out.
-            onValueMouseOver={this.handleSetValue}
-            style={{ stroke: '#fff' }}
-          />
-        </XYPlot>
-        <p style={{ textAlign: 'center' }}>
-          {value ? (
-            <>
-              {moment(value.x).format('MMM DD')}: {value.y} requests
-            </>
-          ) : (
-            <>[Hover over bars to see values.]</>
-          )}
-        </p>
-      </div>
+      <Chart
+        data={CHART_DATA}
+        entityType="requests"
+        title={
+          <>
+            {this._renderChartTitle()}
+            {this._renderKeyInfo()}
+          </>
+        }
+      />
     )
   }
 }

components/CDPUserDashboard.tsx

@@ -97,8 +97,9 @@ const CDPUserDashboard = (props: Props): JSX.Element => {
   const url = `${CDP_FILES_URL}`
 
   const [swrData, setServerResponse] = useState<{
-    // TODO: Shared type
-    data?: any
+    data?: {
+      data: CDPFile[]
+    }
     error?: string
     message?: string
     status?: string
@@ -151,9 +152,8 @@ const CDPUserDashboard = (props: Props): JSX.Element => {
     fetchData()
   }, [auth0, currentlyDownloadingFile])
 
-  let files = Object.keys(swrData).length > 0 ? swrData?.data?.data : []
-  files = files
-    ?.filter((file: CDPFile) => file?.size > 0)
+  const files = (swrData?.data?.data || [])
+    .filter((file: CDPFile) => file?.size > 0)
     // Negative sorts "reverse alphabetically" which allows newest files to appear first
     .sort((a: CDPFile, b: CDPFile) => -a.key.localeCompare(b.key))
 

components/Chart.tsx

@@ -0,0 +1,131 @@
+import React, { Component, ReactNode } from 'react'
+import moment from 'moment'
+import {
+  XYPlot,
+  XAxis,
+  YAxis,
+  VerticalGridLines,
+  HorizontalGridLines,
+  VerticalRectSeries,
+  RectSeriesPoint,
+  RVValueEventHandler
+} from 'react-vis'
+
+import { GraphNumberValue, GraphValue } from '../types/graph'
+
+export type Props = {
+  data: GraphNumberValue[]
+  entityType: string
+  title: ReactNode
+}
+
+type ChartBounds = {
+  chartData: RectSeriesPoint[]
+  endDateMillis: number
+  rangeMax: number
+  startDateMillis: number
+}
+
+/**
+ * Renders a chart with presets and default behaviors (e.g. hover over data to show value).
+ */
+class Chart extends Component<Props, { value: GraphValue | null }> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      value: null
+    }
+  }
+
+  handleClearValue = (): void => {
+    this.setState({ value: null })
+  }
+
+  /**
+   * Extract the ranges of the data provided.
+   */
+  _getBounds = (): ChartBounds => {
+    const ONE_DAY_MILLIS = 86400000
+    let rangeMax = 0
+    let startDateMillis = Number.MAX_VALUE
+    let endDateMillis = 0
+
+    const chartData = this.props.data.map(({ x, y }): RectSeriesPoint => {
+      // End the x range one millisecond before so that the bar
+      // doesn't bleed into the next day and the chart doesn't associate the bar with the next day.
+      const end = x + ONE_DAY_MILLIS - 1
+      if (y > rangeMax) rangeMax = y
+      if (startDateMillis > x) startDateMillis = x
+      if (endDateMillis < end) endDateMillis = end
+      return { x: end, x0: x, y, y0: 0 }
+    })
+
+    return {
+      chartData,
+      endDateMillis,
+      rangeMax,
+      startDateMillis
+    }
+  }
+
+  handleSetValue: RVValueEventHandler<RectSeriesPoint> = (
+    data: RectSeriesPoint
+  ) => {
+    this.setState({ value: data })
+  }
+
+  render(): JSX.Element | null {
+    const { data, entityType, title } = this.props
+    if (!data.length) return null
+
+    const days = 30
+    const { value } = this.state
+    const ONE_DAY_MILLIS = 86400000
+
+    const { chartData, endDateMillis, rangeMax, startDateMillis } =
+      this._getBounds()
+
+    const renderedTitle = typeof title === 'string' ? <h3>{title}</h3> : title
+
+    // Round up max y value to the nearest 10
+    const maxY = rangeMax === 0 ? 10 : Math.ceil(rangeMax / 10) * 10
+    return (
+      <div className="usage-list" style={{ display: 'inline-block' }}>
+        {renderedTitle}
+        <XYPlot
+          height={300}
+          style={{ overflow: 'initial' }}
+          width={600}
+          xDomain={[
+            startDateMillis,
+            // Display at least 30 days if data spans over less than 30 days.
+            Math.max(startDateMillis + days * ONE_DAY_MILLIS, endDateMillis)
+          ]}
+          yDomain={[0, maxY]}
+        >
+          <VerticalGridLines />
+          <HorizontalGridLines />
+          <XAxis tickFormat={(d) => moment(d).format('MMM DD')} />
+          <YAxis />
+          <VerticalRectSeries
+            data={chartData}
+            onValueMouseOut={this.handleClearValue} // Update value on mouse over/out.
+            onValueMouseOver={this.handleSetValue}
+            style={{ stroke: '#fff' }}
+          />
+        </XYPlot>
+        <p style={{ textAlign: 'center' }}>
+          {value ? (
+            <>
+              {moment(value.x).format('MMM DD')}: {value.y} {entityType}
+            </>
+          ) : (
+            <>[Hover over bars to see values.]</>
+          )}
+        </p>
+      </div>
+    )
+  }
+}
+
+export default Chart

components/DailyStatsChart.tsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+import Chart from './Chart'
+import { GraphNumberValue } from '../types/graph'
+
+export type StatsRecord = {
+  date: number
+  otpUsers?: number
+  otpUsersWithTripRequests?: number
+  tripRequests?: number
+}
+
+export type Props = {
+  entityType: string
+  records: StatsRecord[]
+  series: keyof StatsRecord
+}
+/**
+ * Renders a chart showing API Key usage (requests over time) for a particular
+ * API key.
+ */
+class DailyStatsChart extends Component<Props> {
+  _getSeries = (series: keyof StatsRecord): GraphNumberValue[] =>
+    (this.props.records || []).map((value) => ({
+      x: value.date.valueOf(),
+      y: value[series] || 0
+    }))
+
+  render(): JSX.Element | null {
+    const { entityType, records, series } = this.props
+    if (!records.length) return null
+
+    // Render the given series on each day beginning with the start date.
+    const data = this._getSeries(series)
+    return <Chart data={data} entityType={entityType} title={entityType} />
+  }
+}
+
+export default DailyStatsChart