With working stats modal

src/components/histogram/histogram.tsx

@@ -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>
+  )
+}

src/components/histogram/progress.tsx

@@ -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>
+  )
+}
+
+

src/components/modals/StatsModal.tsx

@@ -2,10 +2,8 @@ import { Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { XCircleIcon } from '@heroicons/react/outline'
 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 = {
   isOpen: boolean
@@ -14,6 +12,10 @@ type 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 (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog
@@ -67,50 +69,14 @@ export const StatsModal = ({ isOpen, handleClose, stats }: Props) => {
                   >
                     Statistics
                   </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
                     as="h3"
                     className="text-lg leading-6 font-medium text-gray-900"
                   >
                   Guess Distribution
                   </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>

src/components/statline/statline.tsx

@@ -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>
+  )
+}