Rewrite stats graphs using new machinery (#985)

* Make curve configurable on generic charts

* Extract SizedContainer helper component

* Use new charts for stats page

* Move analytics charts component

* Fix up start date logic for graphs excluding data

web/components/analytics/charts.tsx

@@ -1,139 +0,0 @@
-import { Point, ResponsiveLine } from '@nivo/line'
-import clsx from 'clsx'
-import { formatPercent } from 'common/util/format'
-import dayjs from 'dayjs'
-import { zip } from 'lodash'
-import { useWindowSize } from 'web/hooks/use-window-size'
-import { Col } from '../layout/col'
-
-export function DailyCountChart(props: {
-  startDate: number
-  dailyCounts: number[]
-  small?: boolean
-}) {
-  const { dailyCounts, startDate, small } = props
-  const { width } = useWindowSize()
-
-  const dates = dailyCounts.map((_, i) =>
-    dayjs(startDate).add(i, 'day').toDate()
-  )
-
-  const points = zip(dates, dailyCounts).map(([date, betCount]) => ({
-    x: date,
-    y: betCount,
-  }))
-  const data = [{ id: 'Count', data: points, color: '#11b981' }]
-
-  const bottomAxisTicks = width && width < 600 ? 6 : undefined
-
-  return (
-    <div
-      className={clsx(
-        'h-[250px] w-full overflow-hidden',
-        !small && 'md:h-[400px]'
-      )}
-    >
-      <ResponsiveLine
-        data={data}
-        yScale={{ type: 'linear', stacked: false }}
-        xScale={{
-          type: 'time',
-        }}
-        axisBottom={{
-          tickValues: bottomAxisTicks,
-          format: (date) => dayjs(date).format('MMM DD'),
-        }}
-        colors={{ datum: 'color' }}
-        pointSize={0}
-        pointBorderWidth={1}
-        pointBorderColor="#fff"
-        enableSlices="x"
-        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>
-  )
-}
-
-export function DailyPercentChart(props: {
-  startDate: number
-  dailyPercent: number[]
-  small?: boolean
-  excludeFirstDays?: number
-}) {
-  const { dailyPercent, startDate, small, excludeFirstDays } = props
-  const { width } = useWindowSize()
-
-  const dates = dailyPercent.map((_, i) =>
-    dayjs(startDate).add(i, 'day').toDate()
-  )
-
-  const points = zip(dates, dailyPercent)
-    .map(([date, percent]) => ({
-      x: date,
-      y: percent,
-    }))
-    .slice(excludeFirstDays ?? 0)
-  const data = [{ id: 'Percent', data: points, color: '#11b981' }]
-
-  const bottomAxisTicks = width && width < 600 ? 6 : undefined
-
-  return (
-    <div
-      className={clsx(
-        'h-[250px] w-full overflow-hidden',
-        !small && 'md:h-[400px]'
-      )}
-    >
-      <ResponsiveLine
-        data={data}
-        yScale={{ type: 'linear', stacked: false }}
-        xScale={{
-          type: 'time',
-        }}
-        axisLeft={{
-          format: formatPercent,
-        }}
-        axisBottom={{
-          tickValues: bottomAxisTicks,
-          format: (date) => dayjs(date).format('MMM DD'),
-        }}
-        colors={{ datum: 'color' }}
-        pointSize={0}
-        pointBorderWidth={1}
-        pointBorderColor="#fff"
-        enableSlices="x"
-        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} isPercent />
-        }}
-      />
-    </div>
-  )
-}
-
-function Tooltip(props: { point: Point; isPercent?: boolean }) {
-  const { point, isPercent } = props
-  return (
-    <Col className="border border-gray-300 bg-white py-2 px-3">
-      <div
-        className="pb-1"
-        style={{
-          color: point.serieColor,
-        }}
-      >
-        <strong>{point.serieId}</strong>{' '}
-        {isPercent ? formatPercent(+point.data.y) : Math.round(+point.data.y)}
-      </div>
-      <div>{dayjs(point.data.x).format('MMM DD')}</div>
-    </Col>
-  )
-}

web/components/charts/contract/binary.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { last, sortBy } from 'lodash'
 import { scaleTime, scaleLinear } from 'd3-scale'
+import { curveStepAfter } from 'd3-shape'
 
 import { Bet } from 'common/bet'
 import { getProbability, getInitialProbability } from 'common/calculate'
@@ -76,6 +77,7 @@ export const BinaryContractChart = (props: {
       yScale={yScale}
       data={data}
       color="#11b981"
+      curve={curveStepAfter}
       onMouseOver={onMouseOver}
       Tooltip={BinaryChartTooltip}
       pct

web/components/charts/contract/choice.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { last, sum, sortBy, groupBy } from 'lodash'
 import { scaleTime, scaleLinear } from 'd3-scale'
+import { curveStepAfter } from 'd3-shape'
 
 import { Bet } from 'common/bet'
 import { Answer } from 'common/answer'
@@ -214,6 +215,7 @@ export const ChoiceContractChart = (props: {
       yScale={yScale}
       data={data}
       colors={CATEGORY_COLORS}
+      curve={curveStepAfter}
       onMouseOver={onMouseOver}
       Tooltip={ChoiceTooltip}
       pct

web/components/charts/contract/pseudo-numeric.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { last, sortBy } from 'lodash'
 import { scaleTime, scaleLog, scaleLinear } from 'd3-scale'
+import { curveStepAfter } from 'd3-shape'
 
 import { Bet } from 'common/bet'
 import { DAY_MS } from 'common/util/time'
@@ -97,6 +98,7 @@ export const PseudoNumericContractChart = (props: {
       xScale={xScale}
       yScale={yScale}
       data={data}
+      curve={curveStepAfter}
       onMouseOver={onMouseOver}
       Tooltip={PseudoNumericChartTooltip}
       color={NUMERIC_GRAPH_COLOR}

web/components/charts/generic-charts.tsx

@@ -4,11 +4,11 @@ import { axisBottom, axisLeft } from 'd3-axis'
 import { D3BrushEvent } from 'd3-brush'
 import { ScaleTime, ScaleContinuousNumeric } from 'd3-scale'
 import {
+  CurveFactory,
+  SeriesPoint,
   curveLinear,
-  curveStepAfter,
   stack,
   stackOrderReverse,
-  SeriesPoint,
 } from 'd3-shape'
 import { range } from 'lodash'
 
@@ -52,10 +52,11 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   color: string
   xScale: ScaleContinuousNumeric<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  curve?: CurveFactory
   onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<number, P>
 }) => {
-  const { color, data, yScale, w, h, Tooltip } = props
+  const { color, data, yScale, w, h, curve, Tooltip } = props
 
   const [viewXScale, setViewXScale] =
     useState<ScaleContinuousNumeric<number, number>>()
@@ -100,7 +101,7 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
         px={px}
         py0={py0}
         py1={py1}
-        curve={curveLinear}
+        curve={curve ?? curveLinear}
       />
     </SVGChart>
   )
@@ -113,11 +114,12 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   colors: readonly string[]
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  curve?: CurveFactory
   onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<Date, P>
   pct?: boolean
 }) => {
-  const { colors, data, yScale, w, h, Tooltip, pct } = props
+  const { colors, data, yScale, w, h, curve, Tooltip, pct } = props
 
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -177,7 +179,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
           px={px}
           py0={py0}
           py1={py1}
-          curve={curveStepAfter}
+          curve={curve ?? curveLinear}
           fill={colors[i]}
         />
       ))}
@@ -192,11 +194,12 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   color: string
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  curve?: CurveFactory
   onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<Date, P>
   pct?: boolean
 }) => {
-  const { color, data, yScale, w, h, Tooltip, pct } = props
+  const { color, data, yScale, w, h, curve, Tooltip, pct } = props
 
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -246,7 +249,7 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
         px={px}
         py0={py0}
         py1={py1}
-        curve={curveStepAfter}
+        curve={curve ?? curveLinear}
       />
     </SVGChart>
   )

web/components/charts/helpers.tsx

@@ -10,7 +10,7 @@ import {
 import { pointer, select } from 'd3-selection'
 import { Axis, AxisScale } from 'd3-axis'
 import { brushX, D3BrushEvent } from 'd3-brush'
-import { area, line, curveStepAfter, CurveFactory } from 'd3-shape'
+import { area, line, CurveFactory } from 'd3-shape'
 import { nanoid } from 'nanoid'
 import dayjs from 'dayjs'
 import clsx from 'clsx'
@@ -73,11 +73,11 @@ const LinePathInternal = <P,>(
     data: P[]
     px: number | ((p: P) => number)
     py: number | ((p: P) => number)
-    curve?: CurveFactory
+    curve: CurveFactory
   } & SVGProps<SVGPathElement>
 ) => {
   const { data, px, py, curve, ...rest } = props
-  const d3Line = line<P>(px, py).curve(curve ?? curveStepAfter)
+  const d3Line = line<P>(px, py).curve(curve)
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return <path {...rest} fill="none" d={d3Line(data)!} />
 }
@@ -89,11 +89,11 @@ const AreaPathInternal = <P,>(
     px: number | ((p: P) => number)
     py0: number | ((p: P) => number)
     py1: number | ((p: P) => number)
-    curve?: CurveFactory
+    curve: CurveFactory
   } & SVGProps<SVGPathElement>
 ) => {
   const { data, px, py0, py1, curve, ...rest } = props
-  const d3Area = area<P>(px, py0, py1).curve(curve ?? curveStepAfter)
+  const d3Area = area<P>(px, py0, py1).curve(curve)
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return <path {...rest} d={d3Area(data)!} />
 }
@@ -105,7 +105,7 @@ export const AreaWithTopStroke = <P,>(props: {
   px: number | ((p: P) => number)
   py0: number | ((p: P) => number)
   py1: number | ((p: P) => number)
-  curve?: CurveFactory
+  curve: CurveFactory
 }) => {
   const { color, data, px, py0, py1, curve } = props
   return (

web/components/charts/stats.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+import { scaleTime, scaleLinear } from 'd3-scale'
+import { min, max } from 'lodash'
+import dayjs from 'dayjs'
+
+import { formatPercent } from 'common/util/format'
+import { Row } from '../layout/row'
+import { HistoryPoint, SingleValueHistoryChart } from './generic-charts'
+import { TooltipProps, MARGIN_X, MARGIN_Y } from './helpers'
+import { SizedContainer } from 'web/components/sized-container'
+
+const getPoints = (startDate: number, dailyValues: number[]) => {
+  const startDateDayJs = dayjs(startDate)
+  return dailyValues.map((y, i) => ({
+    x: startDateDayJs.add(i, 'day').toDate(),
+    y: y,
+  }))
+}
+
+const DailyCountTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
+  const { data, mouseX, xScale } = props
+  const d = xScale.invert(mouseX)
+  return (
+    <Row className="items-center gap-2">
+      <span className="font-semibold">{dayjs(d).format('MMM DD')}</span>
+      <span className="text-greyscale-6">{data.y}</span>
+    </Row>
+  )
+}
+
+const DailyPercentTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
+  const { data, mouseX, xScale } = props
+  const d = xScale.invert(mouseX)
+  return (
+    <Row className="items-center gap-2">
+      <span className="font-semibold">{dayjs(d).format('MMM DD')}</span>
+      <span className="text-greyscale-6">{formatPercent(data.y)}</span>
+    </Row>
+  )
+}
+
+export function DailyChart(props: {
+  startDate: number
+  dailyValues: number[]
+  excludeFirstDays?: number
+  pct?: boolean
+}) {
+  const { dailyValues, startDate, excludeFirstDays, pct } = props
+
+  const data = useMemo(
+    () => getPoints(startDate, dailyValues).slice(excludeFirstDays ?? 0),
+    [startDate, dailyValues, excludeFirstDays]
+  )
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const minDate = min(data.map((d) => d.x))!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const maxDate = max(data.map((d) => d.x))!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const maxValue = max(data.map((d) => d.y))!
+  return (
+    <SizedContainer fullHeight={250} mobileHeight={250}>
+      {(width, height) => (
+        <SingleValueHistoryChart
+          w={width}
+          h={height}
+          xScale={scaleTime([minDate, maxDate], [0, width - MARGIN_X])}
+          yScale={scaleLinear([0, maxValue], [height - MARGIN_Y, 0])}
+          data={data}
+          Tooltip={pct ? DailyPercentTooltip : DailyCountTooltip}
+          color="#11b981"
+          pct={pct}
+        />
+      )}
+    </SizedContainer>
+  )
+}

web/components/contract/contract-overview.tsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useRef, useState } from 'react'
-
 import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import { ContractChart } from 'web/components/charts/contract'
@@ -24,6 +22,7 @@ import {
   BinaryContract,
 } from 'common/contract'
 import { ContractDetails } from './contract-details'
+import { SizedContainer } from 'web/components/sized-container'
 
 const OverviewQuestion = (props: { text: string }) => (
   <Linkify className="text-lg text-indigo-700 sm:text-2xl" text={props.text} />
@@ -49,32 +48,18 @@ const SizedContractChart = (props: {
   fullHeight: number
   mobileHeight: number
 }) => {
-  const { contract, bets, fullHeight, mobileHeight } = props
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [chartWidth, setChartWidth] = useState<number>()
-  const [chartHeight, setChartHeight] = useState<number>()
-  useEffect(() => {
-    const handleResize = () => {
-      setChartHeight(window.innerWidth < 800 ? mobileHeight : fullHeight)
-      setChartWidth(containerRef.current?.clientWidth)
-    }
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [fullHeight, mobileHeight])
+  const { fullHeight, mobileHeight, contract, bets } = props
   return (
-    <div ref={containerRef}>
-      {chartWidth != null && chartHeight != null && (
+    <SizedContainer fullHeight={fullHeight} mobileHeight={mobileHeight}>
+      {(width, height) => (
         <ContractChart
+          width={width}
+          height={height}
           contract={contract}
           bets={bets}
-          width={chartWidth}
-          height={chartHeight}
         />
       )}
-    </div>
+    </SizedContainer>
   )
 }
 
@@ -114,7 +99,11 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
         <ContractDetails contract={contract} />
         <Row className="justify-between gap-4">
           <OverviewQuestion text={contract.question} />
-          <BinaryResolutionOrChance contract={contract} large />
+          <BinaryResolutionOrChance
+            className="flex items-end"
+            contract={contract}
+            large
+          />
         </Row>
       </Col>
       <SizedContractChart

web/components/sized-container.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, useEffect, useRef, useState } from 'react'
+
+export const SizedContainer = (props: {
+  fullHeight: number
+  mobileHeight: number
+  mobileThreshold?: number
+  children: (width: number, height: number) => ReactNode
+}) => {
+  const { children, fullHeight, mobileHeight } = props
+  const threshold = props.mobileThreshold ?? 800
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState<number>()
+  const [height, setHeight] = useState<number>()
+  useEffect(() => {
+    if (containerRef.current) {
+      const handleResize = () => {
+        setHeight(window.innerWidth <= threshold ? mobileHeight : fullHeight)
+        setWidth(containerRef.current?.clientWidth)
+      }
+      handleResize()
+      const resizeObserver = new ResizeObserver(handleResize)
+      resizeObserver.observe(containerRef.current)
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+        resizeObserver.disconnect()
+      }
+    }
+  }, [threshold, fullHeight, mobileHeight])
+  return (
+    <div ref={containerRef}>
+      {width != null && height != null && children(width, height)}
+    </div>
+  )
+}

web/pages/stats.tsx

@@ -1,8 +1,5 @@
 import { useEffect, useState } from 'react'
-import {
-  DailyCountChart,
-  DailyPercentChart,
-} from 'web/components/analytics/charts'
+import { DailyChart } from 'web/components/charts/stats'
 import { Col } from 'web/components/layout/col'
 import { Spacer } from 'web/components/layout/spacer'
 import { Tabs } from 'web/components/layout/tabs'
@@ -96,40 +93,36 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'Daily',
             content: (
-              <DailyCountChart
-                dailyCounts={dailyActiveUsers}
+              <DailyChart
+                dailyValues={dailyActiveUsers}
                 startDate={startDate}
-                small
               />
             ),
           },
           {
             title: 'Daily (7d avg)',
             content: (
-              <DailyCountChart
-                dailyCounts={dailyActiveUsersWeeklyAvg}
+              <DailyChart
+                dailyValues={dailyActiveUsersWeeklyAvg}
                 startDate={startDate}
-                small
               />
             ),
           },
           {
             title: 'Weekly',
             content: (
-              <DailyCountChart
-                dailyCounts={weeklyActiveUsers}
+              <DailyChart
+                dailyValues={weeklyActiveUsers}
                 startDate={startDate}
-                small
               />
             ),
           },
           {
             title: 'Monthly',
             content: (
-              <DailyCountChart
-                dailyCounts={monthlyActiveUsers}
+              <DailyChart
+                dailyValues={monthlyActiveUsers}
                 startDate={startDate}
-                small
               />
             ),
           },
@@ -149,44 +142,44 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'D1',
             content: (
-              <DailyPercentChart
-                dailyPercent={d1}
+              <DailyChart
+                dailyValues={d1}
                 startDate={startDate}
-                small
                 excludeFirstDays={1}
+                pct
               />
             ),
           },
           {
             title: 'D1 (7d avg)',
             content: (
-              <DailyPercentChart
-                dailyPercent={d1WeeklyAvg}
+              <DailyChart
+                dailyValues={d1WeeklyAvg}
                 startDate={startDate}
-                small
                 excludeFirstDays={7}
+                pct
               />
             ),
           },
           {
             title: 'W1',
             content: (
-              <DailyPercentChart
-                dailyPercent={weekOnWeekRetention}
+              <DailyChart
+                dailyValues={weekOnWeekRetention}
                 startDate={startDate}
-                small
                 excludeFirstDays={14}
+                pct
               />
             ),
           },
           {
             title: 'M1',
             content: (
-              <DailyPercentChart
-                dailyPercent={monthlyRetention}
+              <DailyChart
+                dailyValues={monthlyRetention}
                 startDate={startDate}
-                small
                 excludeFirstDays={60}
+                pct
               />
             ),
           },
@@ -207,33 +200,33 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'ND1',
             content: (
-              <DailyPercentChart
-                dailyPercent={nd1}
+              <DailyChart
+                dailyValues={nd1}
                 startDate={startDate}
                 excludeFirstDays={1}
-                small
+                pct
               />
             ),
           },
           {
             title: 'ND1 (7d avg)',
             content: (
-              <DailyPercentChart
-                dailyPercent={nd1WeeklyAvg}
+              <DailyChart
+                dailyValues={nd1WeeklyAvg}
                 startDate={startDate}
                 excludeFirstDays={7}
-                small
+                pct
               />
             ),
           },
           {
             title: 'NW1',
             content: (
-              <DailyPercentChart
-                dailyPercent={nw1}
+              <DailyChart
+                dailyValues={nw1}
                 startDate={startDate}
                 excludeFirstDays={14}
-                small
+                pct
               />
             ),
           },
@@ -249,41 +242,31 @@ export function CustomAnalytics(props: Stats) {
           {
             title: capitalize(PAST_BETS),
             content: (
-              <DailyCountChart
-                dailyCounts={dailyBetCounts}
-                startDate={startDate}
-                small
-              />
+              <DailyChart dailyValues={dailyBetCounts} startDate={startDate} />
             ),
           },
           {
             title: 'Markets created',
             content: (
-              <DailyCountChart
-                dailyCounts={dailyContractCounts}
+              <DailyChart
+                dailyValues={dailyContractCounts}
                 startDate={startDate}
-                small
               />
             ),
           },
           {
             title: 'Comments',
             content: (
-              <DailyCountChart
-                dailyCounts={dailyCommentCounts}
+              <DailyChart
+                dailyValues={dailyCommentCounts}
                 startDate={startDate}
-                small
               />
             ),
           },
           {
             title: 'Signups',
             content: (
-              <DailyCountChart
-                dailyCounts={dailySignups}
-                startDate={startDate}
-                small
-              />
+              <DailyChart dailyValues={dailySignups} startDate={startDate} />
             ),
           },
         ]}
@@ -304,22 +287,22 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'Daily',
             content: (
-              <DailyPercentChart
-                dailyPercent={dailyActivationRate}
+              <DailyChart
+                dailyValues={dailyActivationRate}
                 startDate={startDate}
                 excludeFirstDays={1}
-                small
+                pct
               />
             ),
           },
           {
             title: 'Daily (7d avg)',
             content: (
-              <DailyPercentChart
-                dailyPercent={dailyActivationRateWeeklyAvg}
+              <DailyChart
+                dailyValues={dailyActivationRateWeeklyAvg}
                 startDate={startDate}
                 excludeFirstDays={7}
-                small
+                pct
               />
             ),
           },
@@ -335,33 +318,33 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'Daily / Weekly',
             content: (
-              <DailyPercentChart
-                dailyPercent={dailyDividedByWeekly}
+              <DailyChart
+                dailyValues={dailyDividedByWeekly}
                 startDate={startDate}
-                small
                 excludeFirstDays={7}
+                pct
               />
             ),
           },
           {
             title: 'Daily / Monthly',
             content: (
-              <DailyPercentChart
-                dailyPercent={dailyDividedByMonthly}
+              <DailyChart
+                dailyValues={dailyDividedByMonthly}
                 startDate={startDate}
-                small
                 excludeFirstDays={30}
+                pct
               />
             ),
           },
           {
             title: 'Weekly / Monthly',
             content: (
-              <DailyPercentChart
-                dailyPercent={weeklyDividedByMonthly}
+              <DailyChart
+                dailyValues={weeklyDividedByMonthly}
                 startDate={startDate}
-                small
                 excludeFirstDays={30}
+                pct
               />
             ),
           },
@@ -380,31 +363,19 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'Daily',
             content: (
-              <DailyCountChart
-                dailyCounts={manaBet.daily}
-                startDate={startDate}
-                small
-              />
+              <DailyChart dailyValues={manaBet.daily} startDate={startDate} />
             ),
           },
           {
             title: 'Weekly',
             content: (
-              <DailyCountChart
-                dailyCounts={manaBet.weekly}
-                startDate={startDate}
-                small
-              />
+              <DailyChart dailyValues={manaBet.weekly} startDate={startDate} />
             ),
           },
           {
             title: 'Monthly',
             content: (
-              <DailyCountChart
-                dailyCounts={manaBet.monthly}
-                startDate={startDate}
-                small
-              />
+              <DailyChart dailyValues={manaBet.monthly} startDate={startDate} />
             ),
           },
         ]}