Add "download data" link below plots (#87)

sid-kap · Feb 12, 2024 · 1042766 · 1042766
1 parent 3aa1003
commit 1042766
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/lib/PlotsTemplate.tsx b/lib/PlotsTemplate.tsx
@@ -71,13 +71,36 @@ export default function PlotsTemplate({
           preferHcdData={preferHcdData}
         />
       </div>
-      {perCapitaInput}
-      {selected?.has_ca_hcd_data && preferHcdDataInput}
-      {countyList ?? ""}
-      <div>
-        <CurrentYearExtrapolationInfo />
-        {selected?.has_ca_hcd_data && <HcdDataInfo />}
+      <div className="flex flex-row mx-auto flex-wrap">
+        <div className="align-center items-center justify-center flex flex-col max-w-3xl">
+          {perCapitaInput}
+          {selected?.has_ca_hcd_data && preferHcdDataInput}
+          {countyList ?? ""}
+          <div>
+            <CurrentYearExtrapolationInfo />
+            {selected?.has_ca_hcd_data && <HcdDataInfo />}
+          </div>
+        </div>
+        <DownloadData data={data} name={selected?.name + ".json"} />
       </div>
     </div>
   )
 }
+
+export function DownloadData({
+  data,
+  name,
+}: {
+  data: object
+  name: string
+}): JSX.Element {
+  return (
+    <a
+      href={"data:application/json," + JSON.stringify(data)}
+      className="text-sm text-blue-500 hover:text-blue-300"
+      download={name}
+    >
+      download data
+    </a>
+  )
+}
diff --git a/lib/selects.tsx b/lib/selects.tsx
@@ -66,16 +66,14 @@ export function usePreferHcdDataInput(): {
 } {
   const [preferHcdData, setPreferHcdData] = useState<boolean>(true)
   const preferHcdDataInput = (
-    <div className="mt-2">
-      <label className="mr-3">
-        <input
-          type="checkbox"
-          checked={preferHcdData}
-          onChange={() => setPreferHcdData(!preferHcdData)}
-        />
-        <span className="ml-1">Prefer California HCD data for 2018–2022†</span>
-      </label>
-    </div>
+    <label className="mr-3">
+      <input
+        type="checkbox"
+        checked={preferHcdData}
+        onChange={() => setPreferHcdData(!preferHcdData)}
+      />
+      <span className="ml-1">Prefer California HCD data for 2018–2022†</span>
+    </label>
   )
 
   return {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -11,7 +11,7 @@ import { Transform } from "vega-lite/src/transform"
 
 import { makeMetroOptions } from "lib/MetroPlots"
 import MultiSelect from "lib/MultiSelect"
-import { makeOptions } from "lib/PlotsTemplate"
+import { DownloadData, makeOptions } from "lib/PlotsTemplate"
 import { Page } from "lib/common_elements"
 import { useFetch } from "lib/queries"
 import {
@@ -496,6 +496,7 @@ export default function Home(): JSX.Element {
         {perCapitaInput}
         {groupingInput}
         {selectedLocations.some((l) => l.has_ca_hcd_data) && preferHcdDataInput}
+        <DownloadData data={data} name="housing data comparisons.json" />
         {selectedLocations.some((l) => l.has_ca_hcd_data) && <HcdDataInfo />}
       </div>
     </Page>