Added table & map visualizations with visx

.prettierignore

@@ -0,0 +1 @@
+/data/world-topo.json

components/home/link-card.tsx

@@ -5,7 +5,7 @@ import CopyButton from "@/components/shared/copy-button";
 import LoadingDots from "@/components/shared/loading-dots";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { fetcher, nFormatter } from "@/lib/utils";
+import { fetcher, nFormatter, linkConstructor } from "@/lib/utils";
 import Link from "next/link";
 
 export default function LinkCard({
@@ -15,13 +15,7 @@ export default function LinkCard({
   _key: string;
   url: string;
 }) {
-  const shortURL = `${
-    process.env.NEXT_PUBLIC_DEMO_APP === "1"
-      ? "https://dub.sh"
-      : process.env.NEXT_PUBLIC_VERCEL === "1"
-      ? process.env.NEXT_PUBLIC_VERCEL_URL
-      : "http://localhost:3000"
-  }/${key}`; // if you're self-hosting you can just replace this with your own domain
+  const shortURL = linkConstructor(key);
 
   const urlHostname = new URL(url).hostname;
 
@@ -59,6 +53,8 @@ export default function LinkCard({
       className="flex items-center border border-gray-200 dark:border-gray-600 hover:border-black dark:hover:border-white p-3 rounded-md transition-all"
     >
       <StatsModal
+        _key={stats as string}
+        stats={[]}
         showStatsModal={showStatsModal}
         setShowStatsModal={setShowStatsModal}
       />

components/stats/index.module.css

@@ -0,0 +1,37 @@
+.bar {
+  transform-origin: bottom !important;
+  fill: #0070f3;
+}
+
+.tooltip {
+  z-index: 40;
+  width: 200px;
+  padding: 1rem !important;
+  border-radius: 5px !important;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  margin: auto;
+
+  border: 7px solid transparent;
+  border-top-color: white;
+
+  top: 100%;
+  left: 95px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tooltip {
+    background-color: black !important;
+    border: solid 1px #eaeaea;
+    box-shadow: none !important;
+  }
+  .tooltip::after {
+    border-top-color: black;
+  }
+}

components/stats/index.tsx

@@ -0,0 +1,27 @@
+import dynamic from "next/dynamic";
+import { Suspense } from "react";
+import { RawStatsProps } from "@/lib/stats";
+import StatsChart from "@/components/stats/stats-chart";
+const StatsMap = dynamic(() => import("@/components/stats/stats-map"), {
+  suspense: true,
+}); // the map takes a while to load so we'll dynamically import it with suspense
+
+export default function Stats({
+  _key,
+  stats,
+}: {
+  _key: string;
+  stats: RawStatsProps[];
+}) {
+  return (
+    <div className="flex flex-col justify-center items-center my-36">
+      {/* @ts-ignore */}
+      <StatsChart _key={_key} stats={stats} />
+      <div className="h-20" />
+      <Suspense fallback={<div>Loading...</div>}>
+        {/* @ts-ignore */}
+        <StatsMap _key={_key} stats={stats} />
+      </Suspense>
+    </div>
+  );
+}