From 3fb43c16c41681c565ab20a7c1ea861e918dcf8a Mon Sep 17 00:00:00 2001 From: Pico2x Date: Mon, 3 Oct 2022 10:02:38 +0100 Subject: [PATCH] Revert "Merge branch 'main' of https://github.com/manifoldmarkets/manifold" This reverts commit 603201a00ff3ea4ae145c907fefa0c5ccce33c0c, reversing changes made to b517817ee395217dc0f4f853c8efa7801db9f482. --- web/components/analytics/charts.tsx | 139 ++++++++++++++++++ web/components/charts/contract/binary.tsx | 2 - web/components/charts/contract/choice.tsx | 2 - .../charts/contract/pseudo-numeric.tsx | 8 +- web/components/charts/generic-charts.tsx | 19 +-- web/components/charts/helpers.tsx | 12 +- web/components/charts/stats.tsx | 76 ---------- web/components/contract/contract-card.tsx | 4 +- web/components/contract/contract-overview.tsx | 35 +++-- web/components/contract/contract-tabs.tsx | 52 +++---- web/components/sized-container.tsx | 35 ----- web/pages/cowp.tsx | 2 +- web/pages/labs/index.tsx | 2 +- web/pages/stats.tsx | 137 ++++++++++------- 14 files changed, 288 insertions(+), 237 deletions(-) create mode 100644 web/components/analytics/charts.tsx delete mode 100644 web/components/charts/stats.tsx delete mode 100644 web/components/sized-container.tsx diff --git a/web/components/analytics/charts.tsx b/web/components/analytics/charts.tsx new file mode 100644 index 00000000..131ce2a0 --- /dev/null +++ b/web/components/analytics/charts.tsx @@ -0,0 +1,139 @@ +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 ( +
+ 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 + }} + /> +
+ ) +} + +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 ( +
+ 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 + }} + /> +
+ ) +} + +function Tooltip(props: { point: Point; isPercent?: boolean }) { + const { point, isPercent } = props + return ( + +
+ {point.serieId}{' '} + {isPercent ? formatPercent(+point.data.y) : Math.round(+point.data.y)} +
+
{dayjs(point.data.x).format('MMM DD')}
+ + ) +} diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx index c9b3bb0b..7e192767 100644 --- a/web/components/charts/contract/binary.tsx +++ b/web/components/charts/contract/binary.tsx @@ -1,7 +1,6 @@ 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' @@ -77,7 +76,6 @@ export const BinaryContractChart = (props: { yScale={yScale} data={data} color="#11b981" - curve={curveStepAfter} onMouseOver={onMouseOver} Tooltip={BinaryChartTooltip} pct diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx index 99e02fa8..65279b70 100644 --- a/web/components/charts/contract/choice.tsx +++ b/web/components/charts/contract/choice.tsx @@ -1,7 +1,6 @@ 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' @@ -215,7 +214,6 @@ export const ChoiceContractChart = (props: { yScale={yScale} data={data} colors={CATEGORY_COLORS} - curve={curveStepAfter} onMouseOver={onMouseOver} Tooltip={ChoiceTooltip} pct diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx index e3edb11f..e03d4ad9 100644 --- a/web/components/charts/contract/pseudo-numeric.tsx +++ b/web/components/charts/contract/pseudo-numeric.tsx @@ -1,7 +1,6 @@ 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' @@ -86,11 +85,11 @@ export const PseudoNumericContractChart = (props: { Date.now() ) const visibleRange = [start, rightmostDate] - const xScale = scaleTime(visibleRange, [0, width - MARGIN_X]) + const xScale = scaleTime(visibleRange, [0, width ?? 0 - MARGIN_X]) // clamp log scale to make sure zeroes go to the bottom const yScale = isLogScale - ? scaleLog([Math.max(min, 1), max], [height - MARGIN_Y, 0]).clamp(true) - : scaleLinear([min, max], [height - MARGIN_Y, 0]) + ? scaleLog([Math.max(min, 1), max], [height ?? 0 - MARGIN_Y, 0]).clamp(true) + : scaleLinear([min, max], [height ?? 0 - MARGIN_Y, 0]) return ( (props: { color: string xScale: ScaleContinuousNumeric yScale: ScaleContinuousNumeric - curve?: CurveFactory onMouseOver?: (p: P | undefined) => void Tooltip?: TooltipComponent }) => { - const { color, data, yScale, w, h, curve, Tooltip } = props + const { color, data, yScale, w, h, Tooltip } = props const [viewXScale, setViewXScale] = useState>() @@ -101,7 +100,7 @@ export const DistributionChart =

(props: { px={px} py0={py0} py1={py1} - curve={curve ?? curveLinear} + curve={curveLinear} /> ) @@ -114,12 +113,11 @@ export const MultiValueHistoryChart =

(props: { colors: readonly string[] xScale: ScaleTime yScale: ScaleContinuousNumeric - curve?: CurveFactory onMouseOver?: (p: P | undefined) => void Tooltip?: TooltipComponent pct?: boolean }) => { - const { colors, data, yScale, w, h, curve, Tooltip, pct } = props + const { colors, data, yScale, w, h, Tooltip, pct } = props const [viewXScale, setViewXScale] = useState>() const xScale = viewXScale ?? props.xScale @@ -179,7 +177,7 @@ export const MultiValueHistoryChart =

(props: { px={px} py0={py0} py1={py1} - curve={curve ?? curveLinear} + curve={curveStepAfter} fill={colors[i]} /> ))} @@ -194,12 +192,11 @@ export const SingleValueHistoryChart =

(props: { color: string xScale: ScaleTime yScale: ScaleContinuousNumeric - curve?: CurveFactory onMouseOver?: (p: P | undefined) => void Tooltip?: TooltipComponent pct?: boolean }) => { - const { color, data, yScale, w, h, curve, Tooltip, pct } = props + const { color, data, yScale, w, h, Tooltip, pct } = props const [viewXScale, setViewXScale] = useState>() const xScale = viewXScale ?? props.xScale @@ -249,7 +246,7 @@ export const SingleValueHistoryChart =

(props: { px={px} py0={py0} py1={py1} - curve={curve ?? curveLinear} + curve={curveStepAfter} /> ) diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx index b40ab7db..96115dc0 100644 --- a/web/components/charts/helpers.tsx +++ b/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, CurveFactory } from 'd3-shape' +import { area, line, curveStepAfter, CurveFactory } from 'd3-shape' import { nanoid } from 'nanoid' import dayjs from 'dayjs' import clsx from 'clsx' @@ -73,11 +73,11 @@ const LinePathInternal = ( data: P[] px: number | ((p: P) => number) py: number | ((p: P) => number) - curve: CurveFactory + curve?: CurveFactory } & SVGProps ) => { const { data, px, py, curve, ...rest } = props - const d3Line = line

(px, py).curve(curve) + const d3Line = line

(px, py).curve(curve ?? curveStepAfter) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return } @@ -89,11 +89,11 @@ const AreaPathInternal = ( px: number | ((p: P) => number) py0: number | ((p: P) => number) py1: number | ((p: P) => number) - curve: CurveFactory + curve?: CurveFactory } & SVGProps ) => { const { data, px, py0, py1, curve, ...rest } = props - const d3Area = area

(px, py0, py1).curve(curve) + const d3Area = area

(px, py0, py1).curve(curve ?? curveStepAfter) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return } @@ -105,7 +105,7 @@ export const AreaWithTopStroke = (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 ( diff --git a/web/components/charts/stats.tsx b/web/components/charts/stats.tsx deleted file mode 100644 index a630657a..00000000 --- a/web/components/charts/stats.tsx +++ /dev/null @@ -1,76 +0,0 @@ -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) => { - const { data, mouseX, xScale } = props - const d = xScale.invert(mouseX) - return ( - - {dayjs(d).format('MMM DD')} - {data.y} - - ) -} - -const DailyPercentTooltip = (props: TooltipProps) => { - const { data, mouseX, xScale } = props - const d = xScale.invert(mouseX) - return ( - - {dayjs(d).format('MMM DD')} - {formatPercent(data.y)} - - ) -} - -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 ( - - {(width, height) => ( - - )} - - ) -} diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx index 4b4a32b6..a8caf7bd 100644 --- a/web/components/contract/contract-card.tsx +++ b/web/components/contract/contract-card.tsx @@ -393,9 +393,7 @@ export function ContractCardProbChange(props: { noLinkAvatar?: boolean className?: string }) { - const { noLinkAvatar, className } = props - const contract = useContractWithPreload(props.contract) as CPMMBinaryContract - + const { contract, noLinkAvatar, className } = props return ( ( @@ -48,18 +49,32 @@ const SizedContractChart = (props: { fullHeight: number mobileHeight: number }) => { - const { fullHeight, mobileHeight, contract, bets } = props + const { contract, bets, fullHeight, mobileHeight } = props + const containerRef = useRef(null) + const [chartWidth, setChartWidth] = useState() + const [chartHeight, setChartHeight] = useState() + 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]) return ( - - {(width, height) => ( +

+ {chartWidth != null && chartHeight != null && ( )} - +
) } @@ -99,11 +114,7 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => { - + ('Newest') const me = useUser() - if (comments == null) { return } - - const tipsOrBountiesAwarded = - Object.keys(tips).length > 0 || comments.some((c) => c.bountiesAwarded) - - const sortedComments = sortBy(comments, (c) => - sort === 'Newest' - ? c.createdTime - : // Is this too magic? If there are tips/bounties, 'Best' shows your own comments made within the last 10 minutes first, then sorts by score - tipsOrBountiesAwarded && - c.createdTime > Date.now() - 10 * MINUTE_MS && - c.userId === me?.id - ? -Infinity - : -((c.bountiesAwarded ?? 0) + sum(Object.values(tips[c.id] ?? []))) - ) - - const commentsByParent = groupBy( - sortedComments, - (c) => c.replyToCommentId ?? '_' - ) - const topLevelComments = commentsByParent['_'] ?? [] - // Top level comments are reverse-chronological, while replies are chronological - if (sort === 'Newest') topLevelComments.reverse() - if (contract.outcomeType === 'FREE_RESPONSE') { + const generalComments = comments.filter( + (c) => c.answerOutcome === undefined && c.betId === undefined + ) const sortedAnswers = sortBy( contract.answers, (a) => -getOutcomeProbability(contract, a.id) @@ -113,9 +92,6 @@ const CommentsTabContent = memo(function CommentsTabContent(props: { comments, (c) => c.answerOutcome ?? c.betOutcome ?? '_' ) - const generalTopLevelComments = topLevelComments.filter( - (c) => c.answerOutcome === undefined && c.betId === undefined - ) return ( <> {sortedAnswers.map((answer) => ( @@ -139,12 +115,12 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
General Comments
- {generalTopLevelComments.map((comment) => ( + {generalComments.map((comment) => ( ))} @@ -152,6 +128,24 @@ const CommentsTabContent = memo(function CommentsTabContent(props: { ) } else { + const tipsOrBountiesAwarded = + Object.keys(tips).length > 0 || comments.some((c) => c.bountiesAwarded) + + const commentsByParent = groupBy( + sortBy(comments, (c) => + sort === 'Newest' + ? -c.createdTime + : // Is this too magic? If there are tips/bounties, 'Best' shows your own comments made within the last 10 minutes first, then sorts by score + tipsOrBountiesAwarded && + c.createdTime > Date.now() - 10 * MINUTE_MS && + c.userId === me?.id + ? -Infinity + : -((c.bountiesAwarded ?? 0) + sum(Object.values(tips[c.id] ?? []))) + ), + (c) => c.replyToCommentId ?? '_' + ) + + const topLevelComments = commentsByParent['_'] ?? [] return ( <> diff --git a/web/components/sized-container.tsx b/web/components/sized-container.tsx deleted file mode 100644 index 26532047..00000000 --- a/web/components/sized-container.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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(null) - const [width, setWidth] = useState() - const [height, setHeight] = useState() - 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 ( -
- {width != null && height != null && children(width, height)} -
- ) -} diff --git a/web/pages/cowp.tsx b/web/pages/cowp.tsx index a854f141..21494c37 100644 --- a/web/pages/cowp.tsx +++ b/web/pages/cowp.tsx @@ -11,7 +11,7 @@ const App = () => { url="/cowp" /> - + ) diff --git a/web/pages/labs/index.tsx b/web/pages/labs/index.tsx index 79f44a64..bd1dbb35 100644 --- a/web/pages/labs/index.tsx +++ b/web/pages/labs/index.tsx @@ -16,7 +16,7 @@ export default function LabsPage() { url="/labs" /> - + <Title className="sm:!mt-0" text="Manifold Labs" /> <Masonry breakpointCols={{ default: 2, 768: 1 }} diff --git a/web/pages/stats.tsx b/web/pages/stats.tsx index 125af4bd..19fab509 100644 --- a/web/pages/stats.tsx +++ b/web/pages/stats.tsx @@ -1,5 +1,8 @@ import { useEffect, useState } from 'react' -import { DailyChart } from 'web/components/charts/stats' +import { + DailyCountChart, + DailyPercentChart, +} from 'web/components/analytics/charts' import { Col } from 'web/components/layout/col' import { Spacer } from 'web/components/layout/spacer' import { Tabs } from 'web/components/layout/tabs' @@ -93,36 +96,40 @@ export function CustomAnalytics(props: Stats) { { title: 'Daily', content: ( - <DailyChart - dailyValues={dailyActiveUsers} + <DailyCountChart + dailyCounts={dailyActiveUsers} startDate={startDate} + small /> ), }, { title: 'Daily (7d avg)', content: ( - <DailyChart - dailyValues={dailyActiveUsersWeeklyAvg} + <DailyCountChart + dailyCounts={dailyActiveUsersWeeklyAvg} startDate={startDate} + small /> ), }, { title: 'Weekly', content: ( - <DailyChart - dailyValues={weeklyActiveUsers} + <DailyCountChart + dailyCounts={weeklyActiveUsers} startDate={startDate} + small /> ), }, { title: 'Monthly', content: ( - <DailyChart - dailyValues={monthlyActiveUsers} + <DailyCountChart + dailyCounts={monthlyActiveUsers} startDate={startDate} + small /> ), }, @@ -142,44 +149,44 @@ export function CustomAnalytics(props: Stats) { { title: 'D1', content: ( - <DailyChart - dailyValues={d1} + <DailyPercentChart + dailyPercent={d1} startDate={startDate} + small excludeFirstDays={1} - pct /> ), }, { title: 'D1 (7d avg)', content: ( - <DailyChart - dailyValues={d1WeeklyAvg} + <DailyPercentChart + dailyPercent={d1WeeklyAvg} startDate={startDate} + small excludeFirstDays={7} - pct /> ), }, { title: 'W1', content: ( - <DailyChart - dailyValues={weekOnWeekRetention} + <DailyPercentChart + dailyPercent={weekOnWeekRetention} startDate={startDate} + small excludeFirstDays={14} - pct /> ), }, { title: 'M1', content: ( - <DailyChart - dailyValues={monthlyRetention} + <DailyPercentChart + dailyPercent={monthlyRetention} startDate={startDate} + small excludeFirstDays={60} - pct /> ), }, @@ -200,33 +207,33 @@ export function CustomAnalytics(props: Stats) { { title: 'ND1', content: ( - <DailyChart - dailyValues={nd1} + <DailyPercentChart + dailyPercent={nd1} startDate={startDate} excludeFirstDays={1} - pct + small /> ), }, { title: 'ND1 (7d avg)', content: ( - <DailyChart - dailyValues={nd1WeeklyAvg} + <DailyPercentChart + dailyPercent={nd1WeeklyAvg} startDate={startDate} excludeFirstDays={7} - pct + small /> ), }, { title: 'NW1', content: ( - <DailyChart - dailyValues={nw1} + <DailyPercentChart + dailyPercent={nw1} startDate={startDate} excludeFirstDays={14} - pct + small /> ), }, @@ -242,31 +249,41 @@ export function CustomAnalytics(props: Stats) { { title: capitalize(PAST_BETS), content: ( - <DailyChart dailyValues={dailyBetCounts} startDate={startDate} /> + <DailyCountChart + dailyCounts={dailyBetCounts} + startDate={startDate} + small + /> ), }, { title: 'Markets created', content: ( - <DailyChart - dailyValues={dailyContractCounts} + <DailyCountChart + dailyCounts={dailyContractCounts} startDate={startDate} + small /> ), }, { title: 'Comments', content: ( - <DailyChart - dailyValues={dailyCommentCounts} + <DailyCountChart + dailyCounts={dailyCommentCounts} startDate={startDate} + small /> ), }, { title: 'Signups', content: ( - <DailyChart dailyValues={dailySignups} startDate={startDate} /> + <DailyCountChart + dailyCounts={dailySignups} + startDate={startDate} + small + /> ), }, ]} @@ -287,22 +304,22 @@ export function CustomAnalytics(props: Stats) { { title: 'Daily', content: ( - <DailyChart - dailyValues={dailyActivationRate} + <DailyPercentChart + dailyPercent={dailyActivationRate} startDate={startDate} excludeFirstDays={1} - pct + small /> ), }, { title: 'Daily (7d avg)', content: ( - <DailyChart - dailyValues={dailyActivationRateWeeklyAvg} + <DailyPercentChart + dailyPercent={dailyActivationRateWeeklyAvg} startDate={startDate} excludeFirstDays={7} - pct + small /> ), }, @@ -318,33 +335,33 @@ export function CustomAnalytics(props: Stats) { { title: 'Daily / Weekly', content: ( - <DailyChart - dailyValues={dailyDividedByWeekly} + <DailyPercentChart + dailyPercent={dailyDividedByWeekly} startDate={startDate} + small excludeFirstDays={7} - pct /> ), }, { title: 'Daily / Monthly', content: ( - <DailyChart - dailyValues={dailyDividedByMonthly} + <DailyPercentChart + dailyPercent={dailyDividedByMonthly} startDate={startDate} + small excludeFirstDays={30} - pct /> ), }, { title: 'Weekly / Monthly', content: ( - <DailyChart - dailyValues={weeklyDividedByMonthly} + <DailyPercentChart + dailyPercent={weeklyDividedByMonthly} startDate={startDate} + small excludeFirstDays={30} - pct /> ), }, @@ -363,19 +380,31 @@ export function CustomAnalytics(props: Stats) { { title: 'Daily', content: ( - <DailyChart dailyValues={manaBet.daily} startDate={startDate} /> + <DailyCountChart + dailyCounts={manaBet.daily} + startDate={startDate} + small + /> ), }, { title: 'Weekly', content: ( - <DailyChart dailyValues={manaBet.weekly} startDate={startDate} /> + <DailyCountChart + dailyCounts={manaBet.weekly} + startDate={startDate} + small + /> ), }, { title: 'Monthly', content: ( - <DailyChart dailyValues={manaBet.monthly} startDate={startDate} /> + <DailyCountChart + dailyCounts={manaBet.monthly} + startDate={startDate} + small + /> ), }, ]}