With working stats modal

This commit is contained in:
James 2022-01-19 11:31:08 +01:00
parent d9d033fe46
commit 32a3fc268e
4 changed files with 68 additions and 42 deletions

View file

@ -0,0 +1,18 @@
import {Progress} from './progress'
type Props = {
data: number[]
}
export const Histogram = ({ data }: Props) => {
const min = 10
const max = Math.ceil(Math.max.apply(null, data)*1.2)
return(
<div className="columns-1 justify-left m-2 bg-blue-300 text-sm">
{ data.map(( value, i ) => (
<Progress index={i} size={min+100*value/max} label={String(value)} />
))
}
</div>
)
}

View file

@ -0,0 +1,23 @@
type Props = {
index: number,
size: number,
label: string
}
export const Progress = ( {index, size, label}: Props ) => {
return(
<div className="flex justify-left m-1 bg-blue-200">
<div className="items-center justify-center w-10%">{index+1}</div>
<div className="bg-gray-200 rounded-full w-full ml-2">
<div
style={{ width: `${size}%`}}
className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5
rounded-l-full">{label}
</div>
</div>
</div>
)
}

View file

@ -2,10 +2,8 @@ import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, Transition } from '@headlessui/react'
import { XCircleIcon } from '@heroicons/react/outline' import { XCircleIcon } from '@heroicons/react/outline'
import { trys, successRate, currentStreak, bestStreak } from '../../lib/stats' import { trys, successRate, currentStreak, bestStreak } from '../../lib/stats'
import { Histogram } from '../histogram/histogram'
//const boxItem = ( label: string, value: string ) => { import { StatLine } from '../statline/statline'
// return ()
// }
type Props = { type Props = {
isOpen: boolean isOpen: boolean
@ -14,6 +12,10 @@ type Props = {
} }
export const StatsModal = ({ isOpen, handleClose, stats }: Props) => { export const StatsModal = ({ isOpen, handleClose, stats }: Props) => {
const labels = ["Total trys", "Success rate",
"Current streak", "Best streak"]
const values = [String(trys(stats)), String(successRate(stats))+'%',
String(currentStreak(stats)), String(bestStreak(stats))]
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition.Root show={isOpen} as={Fragment}>
<Dialog <Dialog
@ -67,50 +69,14 @@ export const StatsModal = ({ isOpen, handleClose, stats }: Props) => {
> >
Statistics Statistics
</Dialog.Title> </Dialog.Title>
<div className="flex justify-center m-1"> <StatLine labels={labels} values={values} />
<div className="items-center justify-center m-1 w-1/4 bg-blue-300">
<div className="text-3xl font-bold">{String(trys(stats))} </div>
<div className="text-sm">Total trys</div>
</div>
<div className="items-center justify-center m-1 w-1/4 bg-blue-300">
<div className="text-3xl font-bold">{String(successRate(stats))}% </div>
<div className="text-sm">Success rate</div>
</div>
<div className="items-center justify-center m-1 w-1/4 bg-blue-300">
<div className="text-3xl font-bold">{String(currentStreak(stats))}</div>
<div className="text-sm">Current streak</div>
</div>
<div className="items-center justify-center m-1 w-1/4 bg-blue-300">
<div className="text-3xl font-bold">{String(bestStreak(stats))}</div>
<div className="text-sm">Best streak</div>
</div>
</div>
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg leading-6 font-medium text-gray-900" className="text-lg leading-6 font-medium text-gray-900"
> >
Guess Distribution Guess Distribution
</Dialog.Title> </Dialog.Title>
<div className="columns-1 justify-left m-2 bg-blue-300 text-sm"> <Histogram data={stats.slice(0,6)} />
<div className="flex justify-left m-1 bg-blue-200">
<div>1 {String(stats[0])}</div>
</div>
<div className="flex justify-left m-1 bg-blue-200">
<div>2 {String(stats[1])}</div>
</div>
<div className="flex justify-left m-1 bg-blue-200">
<div>3 {String(stats[2])}</div>
</div>
<div className="flex justify-left m-1 bg-blue-200">
<div>4 {String(stats[3])}</div>
</div>
<div className="flex justify-left m-1 bg-blue-200">
<div>5 {String(stats[4])}</div>
</div>
<div className="flex justify-left m-1 bg-blue-200">
<div>6 {String(stats[5])}</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -0,0 +1,19 @@
type Props = {
labels: string[]
values: string[]
}
export const StatLine = ({labels, values}: Props) => {
return (
<div className="flex justify-center m-1">
{values.map((value,i ) => (
<div className="items-center justify-center m-1 w-1/4 bg-blue-300">
<div className="text-3xl font-bold">{value} </div>
<div className="text-sm">{labels[i]}</div>
</div>
))}
</div>
)
}