With working stats modal
This commit is contained in:
parent
d9d033fe46
commit
32a3fc268e
4 changed files with 68 additions and 42 deletions
18
src/components/histogram/histogram.tsx
Normal file
18
src/components/histogram/histogram.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
23
src/components/histogram/progress.tsx
Normal file
23
src/components/histogram/progress.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
19
src/components/statline/statline.tsx
Normal file
19
src/components/statline/statline.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue