feat: Work in progress charts endpoint

package.json

@@ -81,7 +81,8 @@
     "tailwindcss": "^3.0.22",
     "textversionjs": "^1.1.3",
     "ts-node": "^10.7.0",
-    "tunnel": "^0.0.6"
+    "tunnel": "^0.0.6",
+    "victory": "^36.3.2"
   },
   "devDependencies": {
     "@netlify/plugin-nextjs": "^4.2.4",

src/pages/charts/embed/[id].tsx

@@ -0,0 +1,71 @@
+import { GetServerSideProps, NextPage } from "next";
+import Error from "next/error";
+
+import { DashboardItem } from "../../../backend/dashboards";
+import { DisplayForecasts } from "../../../web/display/DisplayForecasts";
+import { FrontendForecast } from "../../../web/platforms";
+import { getDashboardForecastsByDashboardId } from "../../../web/worker/getDashboardForecasts";
+import { reqToBasePath } from "../../../web/utils";
+
+interface Props {
+  dashboardForecasts: FrontendForecast[];
+  dashboardItem: DashboardItem;
+  numCols?: number;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  const dashboardId = context.query.id as string;
+  const numCols = Number(context.query.numCols);
+
+  const { dashboardItem, dashboardForecasts } =
+    await getDashboardForecastsByDashboardId({
+      dashboardId,
+      basePath: reqToBasePath(context.req), // required on server side to find the API endpoint
+    });
+
+  if (!dashboardItem) {
+    context.res.statusCode = 404;
+  }
+
+  return {
+    props: {
+      dashboardForecasts,
+      dashboardItem,
+      numCols: !numCols ? null : numCols < 5 ? numCols : 4,
+    },
+  };
+};
+
+const EmbedDashboardPage: NextPage<Props> = ({
+  dashboardForecasts,
+  dashboardItem,
+  numCols,
+}) => {
+  if (!dashboardItem) {
+    return <Error statusCode={404} />;
+  }
+
+  return (
+    <div className="mb-4 mt-3 flex flex-row justify-left items-center">
+      <div className="mx-2 place-self-left">
+        <div
+          className={`grid grid-cols-${numCols || 1} sm:grid-cols-${
+            numCols || 1
+          } md:grid-cols-${numCols || 2} lg:grid-cols-${
+            numCols || 3
+          } gap-4 mb-6`}
+        >
+          <DisplayForecasts
+            results={dashboardForecasts}
+            numDisplay={dashboardForecasts.length}
+            showIdToggle={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmbedDashboardPage;

src/pages/charts/index.tsx

@@ -0,0 +1,51 @@
+import axios from "axios";
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+
+import { DashboardCreator } from "../../web/display/DashboardCreator";
+import { InfoBox } from "../../web/display/InfoBox";
+
+import { Layout } from "../../web/display/Layout";
+import { LineHeader } from "../../web/display/LineHeader";
+
+const DashboardsPage: NextPage = () => {
+  const router = useRouter();
+
+  const handleSubmit = async (data) => {
+    // Send to server to create
+    // Get back the id
+    let response = await axios({
+      url: "/api/create-dashboard-from-ids",
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      data: JSON.stringify(data),
+    }).then((res) => res.data);
+    await router.push(`/dashboards/view/${response.dashboardId}`);
+  };
+
+  return (
+    <Layout page="dashboard">
+      <div className="flex flex-col my-8 space-y-8">
+        <LineHeader>Charts!</LineHeader>
+
+        <div className="self-center">{""}</div>
+        <div className="max-w-2xl self-center">
+          <InfoBox>
+            This is an under-construction endpoint to display charts. Go to
+            metaforecast.org/charts/view/[id] to find the chart for a particular
+            question.
+          </InfoBox>
+        </div>
+        <div className="max-w-2xl self-center">
+          <InfoBox>
+            You can find the necessary ids by toggling the advanced options in
+            the search, or by visiting{" "}
+            <a href="/api/all-forecasts">/api/all-forecasts</a>
+          </InfoBox>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default DashboardsPage;

src/pages/charts/view/[id].tsx

@@ -0,0 +1,55 @@
+/* Imports */
+
+import { GetServerSideProps, NextPage } from "next";
+import { Layout } from "../../../web/display/Layout";
+
+import React from "react";
+
+import { platforms } from "../../../backend/platforms";
+import { HistoryChart } from "../../../web/display/HistoryChart";
+import { FrontendForecast } from "../../../web/platforms";
+import searchAccordingToQueryData from "../../../web/worker/searchAccordingToQueryData";
+
+interface Props {
+  question: FrontendForecast;
+  history: number[];
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  let urlQuery = context.query; // this is an object, not a string which I have to parse!!
+
+  let initialQueryParameters = {
+    query: "test",
+    starsThreshold: 2,
+    forecastsThreshold: 0,
+    forecastingPlatforms: platforms.map((platform) => platform.name),
+    ...urlQuery,
+  };
+
+  let results: FrontendForecast[] = [];
+  if (initialQueryParameters.query != "") {
+    results = await searchAccordingToQueryData(initialQueryParameters, 1);
+    console.log(results);
+  }
+
+  return {
+    props: {
+      question: results[0] || null,
+      history: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    },
+  };
+};
+
+const Chart: NextPage<Props> = ({ question, history }) => {
+  return (
+    <Layout page={"chart"}>
+      <div className="w-6/12 mb-4 mt-8 flex flex-row justify-center items-center bg-white">
+        <HistoryChart question={question} history={history} />
+      </div>
+    </Layout>
+  );
+};
+
+export default Chart;

src/web/display/HistoryChart.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+import { FrontendForecast } from "../platforms";
+import * as V from "victory";
+import {
+  VictoryBar,
+  VictoryLabel,
+  VictoryTooltip,
+  VictoryLine,
+  VictoryScatter,
+  VictoryChart,
+  VictoryTheme,
+  VictoryAxis,
+  VictoryGroup,
+  VictoryVoronoiContainer,
+} from "victory";
+
+interface Props {
+  question: FrontendForecast;
+  history: number[];
+}
+
+const data = [
+  { date: 1, probability: 0.1 },
+  { date: 2, probability: 0.2 },
+  { date: 3, probability: 0.4 },
+  { date: 4, probability: 0.6 },
+  { date: 5, probability: 0.6 },
+  { date: 6, probability: 0.65 },
+  { date: 7, probability: 0.65 },
+  { date: 8, probability: 0.65 },
+  { date: 9, probability: 0.7 },
+];
+
+let getDate = (x) => {
+  let date = new Date(x);
+  return date.toISOString().slice(5, 10).replaceAll("-", "/");
+};
+
+let dataAsXy = data.map((datum) => ({
+  x: getDate(datum.date * (1000 * 60 * 60 * 24)),
+  y: datum.probability,
+}));
+
+export const HistoryChart: React.FC<Props> = ({ question, history }) => {
+  return (
+    <VictoryChart
+      domainPadding={20}
+      theme={VictoryTheme.material}
+      height={300}
+      containerComponent={<VictoryVoronoiContainer />}
+      domain={{
+        y: [0, 1],
+      }}
+    >
+      <VictoryGroup
+        color="#c43a31"
+        data={dataAsXy}
+        labels={({ datum }) => `${datum.y * 100}%`}
+        labelComponent={
+          <VictoryTooltip style={{ fontSize: 10, fill: "black" }} />
+        }
+      >
+        <VictoryLine />
+        <VictoryScatter size={({ active }) => (active ? 8 : 3)} />
+      </VictoryGroup>
+      <VictoryAxis
+        // tickValues specifies both the number of ticks and where
+        // they are placed on the axis
+        tickValues={data.map((datum) => datum.date)}
+        tickFormat={dataAsXy.map((datum) => datum.x)}
+        style={{
+          grid: { stroke: null, strokeWidth: 0.5 },
+        }}
+        tickLabelComponent={
+          <VictoryLabel
+            dy={0}
+            angle={-30}
+            style={{ fontSize: 7, fill: "gray" }}
+          />
+        }
+      />
+      <VictoryAxis
+        dependentAxis
+        // tickFormat specifies how ticks should be displayed
+        tickFormat={(x) => `${x * 100}%`}
+        style={{
+          grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
+        }}
+      />
+    </VictoryChart>
+  );
+};
+
+/*
+    <VictoryChart
+      // domainPadding will add space to each side of VictoryBar to
+      // prevent it from overlapping the axis
+      domainPadding={20}
+      theme={VictoryTheme.material}
+      height={300}
+      title={"Blah"}
+      containerComponent={<VictoryVoronoiContainer />}
+    >
+      <VictoryGroup
+        data={data.map((datum) => ({ x: datum.date, y: datum.probability }))}
+        labels={data.map((datum) => `1%`)}
+        style={{ labels: { fill: "black", fontSize: 10 } }}
+        labelComponent={
+          <VictoryTooltip style={{ fontSize: 10, fill: "black" }} dy={-15} />
+        }
+      >
+        <VictoryLine
+          height={300}
+          width={300}
+          style={{
+            data: { stroke: "#000080" },
+            parent: { border: "1px solid #ccc" },
+          }}
+          domain={{
+            y: [0, 1],
+          }}
+        ></VictoryLine>
+        <VictoryScatter
+          style={{
+            data: { fill: "#000080" },
+          }}
+          size={3}
+        />
+      </VictoryGroup>
+    </VictoryChart>
+*/