interactive chart with symbol dropdown

components/StockLineChart.tsx

@@ -0,0 +1,62 @@
+import { useRecords } from "beneath-react";
+import { FC } from "react";
+import {
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+interface Props {
+  filter: string;
+}
+
+const StockLineChart: FC<Props> = ({ filter }) => {
+  const { records, loading, error } = useRecords({
+    table: "examples/wallstreetbets-analytics/stock-mentions-rollup-daily",
+    query: { type: "index", filter },
+    subscribe: false,
+    pageSize: 30,
+  });
+
+  // Q: This gets hit 3 times. Are the records getting fetched three times?
+  console.log(records);
+
+  return (
+    <ResponsiveContainer width={"100%"} height={400}>
+      <LineChart width={500} height={300} data={records}>
+        <XAxis
+          dataKey="day"
+          tickFormatter={(tickItem) => {
+            const d = new Date(tickItem);
+            return d.toLocaleDateString("en-US");
+          }}
+        />
+        <YAxis
+          yAxisId="left"
+          dataKey="num_mentions"
+          label={{ value: "Mentions", angle: -90, position: "insideLeft" }}
+        />
+        <Line
+          type="monotone"
+          dataKey="num_mentions"
+          stroke="#8884d8"
+          yAxisId="left"
+          isAnimationActive={false}
+        />
+        <Line
+          type="monotone"
+          dataKey="num_positive"
+          stroke="#82ca9d"
+          yAxisId="left"
+          isAnimationActive={false}
+        />
+        <Tooltip />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default StockLineChart;

components/SymbolDropdown.tsx

@@ -0,0 +1,30 @@
+import { TextField } from "@material-ui/core";
+import { Autocomplete } from "@material-ui/lab";
+import React, { FC } from "react";
+import { SYMBOLS } from "../lib/symbols";
+
+interface Props {
+  symbol: string;
+  setSymbol: (symbol: string) => void;
+}
+
+const SymbolDropdown: FC<Props> = ({ symbol, setSymbol }) => {
+  return (
+    <>
+      <Autocomplete
+        id="combo-box-demo"
+        options={SYMBOLS}
+        style={{ width: 200 }}
+        value={symbol}
+        onChange={(event, newValue) => {
+          setSymbol(newValue);
+        }}
+        renderInput={(params) => (
+          <TextField {...params} label="Combo box" variant="outlined" />
+        )}
+      />
+    </>
+  );
+};
+
+export default SymbolDropdown;

lib/symbols.tsx

@@ -0,0 +1,2 @@
+// TODO: add the full list
+export const SYMBOLS = ["AAPL", "TSLA", "BABA"];

next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

package.json

@@ -8,9 +8,16 @@
     "start": "next start"
   },
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "beneath-react": "^1.2.0",
     "next": "^11.0.1",
     "react": "17.x",
-    "react-dom": "17.x"
+    "react-dom": "17.x",
+    "recharts": "^2.0.10"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.15",
+    "typescript": "^4.3.5"
   }
 }

pages/index.tsx

@@ -0,0 +1,29 @@
+import { Container } from "@material-ui/core";
+import { useState } from "react";
+import StockLineChart from "../components/StockLineChart";
+import SymbolDropdown from "../components/SymbolDropdown";
+
+const TIME_WINDOW = 30; // days
+
+const makeFilter = (symbol: string) => {
+  var d = new Date();
+  d.setDate(d.getDate() - TIME_WINDOW);
+  return `{ "symbol": "${symbol}", "day":{"_gt":"${d.toISOString()}"}}`;
+};
+
+export default function Home() {
+  const [symbol, setSymbol] = useState("AAPL");
+  const filter = makeFilter(symbol);
+
+  return (
+    <Container>
+      <h1>Stock mentions on r/wallstreetbets</h1>
+      <SymbolDropdown
+        symbol={symbol}
+        setSymbol={(symbol) => setSymbol(symbol)}
+      />
+      <h2>{symbol}</h2>
+      <StockLineChart filter={filter} />
+    </Container>
+  );
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}