From cae7d92a16ebaf0a2524cd73c225b7c6c7771eba Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Sun, 11 Jul 2021 10:39:20 +1000
Subject: [PATCH] filter stats chart by time range

---
 components/Chart.tsx | 97 +++++++++++++++++++++++++++++++-------------
 1 file changed, 68 insertions(+), 29 deletions(-)

diff --git a/components/Chart.tsx b/components/Chart.tsx
index 1f84627..ff5fdae 100644
--- a/components/Chart.tsx
+++ b/components/Chart.tsx
@@ -4,6 +4,7 @@ import useDimensions from 'react-cool-dimensions'
 
 const Chart = ({ title, xAxis, yAxis, data, labelFormat, type }) => {
   const [mouseData, setMouseData] = useState<string | null>(null)
+  const [filterData, setFilterData] = useState(null)
   // @ts-ignore
   const { observe, width, height } = useDimensions()
 
@@ -17,40 +18,78 @@ const Chart = ({ title, xAxis, yAxis, data, labelFormat, type }) => {
     setMouseData(null)
   }
 
+  const handleFilterData = (time) => {
+    const startFrom = time
+      ? new Date(Date.now() - time * 24 * 60 * 60 * 1000).getTime()
+      : null
+
+    return startFrom
+      ? data.filter((d) => new Date(d.time).getTime() > startFrom)
+      : data
+  }
+
   return (
-    <div className="h-full w-full" ref={observe}>
-      <div className="absolute h-full w-full pb-4">
-        <div className="pb-0.5 text-xs text-th-fgd-3">{title}</div>
-        {mouseData ? (
-          <>
-            <div className="pb-1 text-xl text-th-fgd-1">
-              {labelFormat(mouseData[yAxis])}
-            </div>
-            <div className="text-xs font-normal text-th-fgd-4">
-              {new Date(mouseData[xAxis]).toDateString()}
-            </div>
-          </>
-        ) : data.length > 0 && data[data.length - 1][yAxis] ? (
-          <>
-            <div className="pb-1 text-xl text-th-fgd-1">
-              {labelFormat(data[data.length - 1][yAxis])}
-            </div>
-            <div className="text-xs font-normal text-th-fgd-4">
-              {new Date(data[data.length - 1][xAxis]).toDateString()}
-            </div>
-          </>
-        ) : (
-          <>
-            <div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-48" />
-            <div className="animate-pulse bg-th-bkg-3 h-4 mt-1 rounded w-24" />
-          </>
-        )}
+    <div className="h-52 w-full" ref={observe}>
+      <div className="flex items-start justify-between w-full">
+        <div>
+          <div className="pb-0.5 text-xs text-th-fgd-3">{title}</div>
+          {mouseData ? (
+            <>
+              <div className="pb-1 text-xl text-th-fgd-1">
+                {labelFormat(mouseData[yAxis])}
+              </div>
+              <div className="text-xs font-normal text-th-fgd-4">
+                {new Date(mouseData[xAxis]).toDateString()}
+              </div>
+            </>
+          ) : data.length > 0 && data[data.length - 1][yAxis] ? (
+            <>
+              <div className="pb-1 text-xl text-th-fgd-1">
+                {labelFormat(data[data.length - 1][yAxis])}
+              </div>
+              <div className="text-xs font-normal text-th-fgd-4">
+                {new Date(data[data.length - 1][xAxis]).toDateString()}
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-48" />
+              <div className="animate-pulse bg-th-bkg-3 h-4 mt-1 rounded w-24" />
+            </>
+          )}
+        </div>
+        <div className="flex h-5">
+          <button
+            className={`default-transition font-bold mx-3 text-th-fgd-1 text-xs hover:text-th-primary focus:outline-none ${
+              filterData === 7 && 'text-th-primary'
+            }`}
+            onClick={() => setFilterData(7)}
+          >
+            7D
+          </button>
+          <button
+            className={`default-transition font-bold mx-3 text-th-fgd-1 text-xs hover:text-th-primary focus:outline-none ${
+              filterData === 30 && 'text-th-primary'
+            }`}
+            onClick={() => setFilterData(30)}
+          >
+            30D
+          </button>
+          <button
+            className={`default-transition font-bold ml-3 text-th-fgd-1 text-xs hover:text-th-primary focus:outline-none ${
+              !filterData && 'text-th-primary'
+            }`}
+            onClick={() => setFilterData(null)}
+          >
+            ALL
+          </button>
+        </div>
       </div>
       {width > 0 && type === 'area' ? (
         <AreaChart
           width={width}
           height={height}
-          data={data}
+          data={data ? handleFilterData(filterData) : null}
           onMouseMove={handleMouseMove}
           onMouseLeave={handleMouseLeave}
         >
@@ -81,7 +120,7 @@ const Chart = ({ title, xAxis, yAxis, data, labelFormat, type }) => {
         <BarChart
           width={width}
           height={height}
-          data={data}
+          data={data ? handleFilterData(filterData) : null}
           onMouseMove={handleMouseMove}
           onMouseLeave={handleMouseLeave}
         >