time series chart scaffold

app/county/[county]/page.tsx

@@ -7,6 +7,7 @@ import PercentileLineChart from "components/PercentileLineChart"
 import { getMdxContent } from "hooks/useMdxContent"
 import { getContentDirs } from "utils/contentDirs"
 import { getSummaryStats } from "utils/data/summaryStats"
+import TimeseriesChart from "components/TimeseriesChart"
 const Map = dynamic(() => import("components/Map/Map"), { ssr: false })
 
 const operators = [
@@ -169,6 +170,9 @@ const CountyPage: React.FC<CountyRouteProps> = async ({ params }) => {
               </ul>
             </div>
           </div>
+          <div className="w-full h-[100vh] bg-white shadow-xl p-8 my-8">
+            <TimeseriesChart id={county} />
+          </div>
         </>
       )}
     </div>

app/state/page.tsx

@@ -1,11 +1,21 @@
-import React from "react"
+"use client"
+import { useRouter } from "next/navigation"
+import React, { useState } from "react"
+import CountyFilterSelector from "components/CountyFilterSelector"
 
 const StatePage: React.FC = () => {
+  const router = useRouter()
+  const handleChange = (e: string) => {
+    router.push(`/state/${e}`)
+  }
   return (
-    <div>
-      <h1>State home page</h1>
+    <div className="bg-canvas-500 align-center flex min-h-[100vh] items-center justify-center p-8">
+      <div className="bg-white p-8 shadow-xl">
+        <h1 className="mb-4 text-2xl">State Home Page</h1>
+        <CountyFilterSelector handleSetFilter={handleChange} />
+      </div>
     </div>
   )
 }
 
-export default StatePage
+export default StatePage

components/Map/Map.tsx

@@ -232,7 +232,7 @@ export const Map: React.FC<MapProps> = ({
   const handleSetFilter = (filter: string) => dispatch(setCurrentFilter(filter))
 
   useEffect(() => {
-    if (dispatch && initialFilter) {
+    if (initialFilter) {
       dispatch(setCurrentFilter(initialFilter))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

components/TimeseriesChart/Renderer.tsx

@@ -0,0 +1,23 @@
+"use client"
+import React, { useEffect, useState } from "react";
+import { getTimeseriesChartProps } from "./types";
+import { ds } from "utils/data/service";
+
+const TimeseriesChart: React.FC<getTimeseriesChartProps> = ({ id }) => {
+  const [data, setData] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      await ds.initDb();
+      await ds.initData();
+      const data = await ds.getTimeseries(id);
+      setData(data);
+    };
+
+    fetchData();
+  }, [id]);
+
+  return <div>TimeseriesChart {id}</div>;
+}
+
+export default TimeseriesChart;

components/TimeseriesChart/index.ts

@@ -0,0 +1,4 @@
+import dynamic from 'next/dynamic'
+const TimeseriesChart = dynamic(() => import('components/TimeseriesChart/Renderer'), { ssr: false })
+
+export default TimeseriesChart

components/TimeseriesChart/types.ts

@@ -0,0 +1,3 @@
+export type getTimeseriesChartProps = {
+  id: string
+}

utils/data/service.ts

@@ -244,6 +244,30 @@ export class DataService {
     this.tooltipResults[id] = mappedTooltipContent
   }
 
+  async getTimeseries(
+    id: string
+  ) {
+    if (this.tooltipResults[id]) {
+      return this.tooltipResults[id]
+    }
+    let data: any[] = []
+    for (let i = 0; i < this.config.length; i++) {
+      const c = this.config[i]
+      if (!c) {
+        continue
+      }
+      if (!c.columns?.length) {
+        continue
+      }
+      const query = `SELECT * FROM ${this.getFromQueryString(c.filename)} WHERE "${c.id}" = '${id}'`
+      console.log(query)
+      const result = await this.runQuery(query, true)
+      data.push(JSON.parse(JSON.stringify(result)))
+    }
+    console.log(data)
+    return data
+  }
+
   setCompleteCallback(cb: (s: string) => void) {
     this.completeCallback = cb
     this.complete.forEach(cb)