diff --git a/src/components/histogram/histogram.tsx b/src/components/histogram/histogram.tsx
new file mode 100644
index 0000000..09ca247
--- /dev/null
+++ b/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(
+
+ { data.map(( value, i ) => (
+
+ ))
+ }
+
+ )
+}
diff --git a/src/components/histogram/progress.tsx b/src/components/histogram/progress.tsx
new file mode 100644
index 0000000..25b90cb
--- /dev/null
+++ b/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(
+
+ )
+}
+
+
diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx
index 6f66276..03edce2 100644
--- a/src/components/modals/StatsModal.tsx
+++ b/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'
-
-//const boxItem = ( label: string, value: string ) => {
-// return ()
-// }
+import { Histogram } from '../histogram/histogram'
+import { StatLine } from '../statline/statline'
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 (