tweak: Charts

Add line, reorganize display Also fix nasty bug where probabilities are inverted in frontpage
2022-04-28 15:22:22 -04:00 · 2022-04-28 15:22:22 -04:00 · 340d99b485
commit 340d99b485
parent 55b320c528
4 changed files with 174 additions and 116 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,6 @@
+{
+  "extends": ["next", "prettier"], 
+	"rules": {
+		"next/no-document-import-in-page": "off"
+  }
+}
--- a/src/web/questions/components/HistoryChart.tsx
+++ b/src/web/questions/components/HistoryChart.tsx
@ -1,7 +1,15 @@
 import React from "react";
 import {
-    VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLegend, VictoryScatter,
-    VictoryTheme, VictoryTooltip, VictoryVoronoiContainer
+  VictoryAxis,
+  VictoryChart,
+  VictoryGroup,
+  VictoryLabel,
+  VictoryLegend,
+  VictoryScatter,
+  VictoryLine,
+  VictoryTheme,
+  VictoryTooltip,
+  VictoryVoronoiContainer,
 } from "victory";

 import { QuestionWithHistoryFragment } from "../../fragments.generated";
@ -48,26 +56,25 @@ const getVictoryGroup = (data, i) => {
  return (
    <VictoryGroup color={colors[i] || "darkgray"} data={dataAsXy(data)}>
      <VictoryScatter
+        name={`scatter-${i}`}
        //style={{ labels: { display: "none" } }}
        size={({ active }) => (active ? 3.75 : 3)}
        //labels={() => null}
        //labelComponent={<span></span>}
      />

-      {/* Doesn't work well with tooltips
-        <VictoryLine
-          name={`line${i}`}
-          //style={{ labels: { display: "none" } }}
-          //labels={() => null}
-          //labelComponent={<span></span>}
-        />
-        */}
+      <VictoryLine
+        name={`line-${i}`}
+        //style={{ labels: { display: "none" } }}
+        //labels={() => null}
+        //labelComponent={<span></span>}
+      />
    </VictoryGroup>
  );
 };

 export const HistoryChart: React.FC<Props> = ({ question }) => {
-  let height = 400;
+  let height = 300;
  let width = 500;
  let padding = { top: 20, bottom: 50, left: 50, right: 100 };
  // let dataSetsNames = ["Yes", "No", "Maybe", "Perhaps", "Possibly"];
@ -78,6 +85,7 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
  });
  dataSetsNames = [...new Set(dataSetsNames)].slice(0, 5); // take the first 5
  let dataSets = [];
+  /*
  dataSetsNames.forEach((name) => {
    let newDataset = [];
    question.history.forEach((item) => {
@ -96,112 +104,145 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
    });
    dataSets.push(newDataset);
  });
+  */
+
+  dataSetsNames.forEach((name) => {
+    let newDataset = [];
+    let previousDate = -Infinity;
+    for (let item of question.history) {
+      let relevantItemsArray = item.options.filter((x) => x.name == name);
+      let date = new Date(item.timestamp * 1000);
+      if (
+        relevantItemsArray.length == 1 &&
+        item.timestamp - previousDate > 12 * 60 * 60
+      ) {
+        let relevantItem = relevantItemsArray[0];
+        // if (relevantItem.type == "PROBABILITY") {
+        let result = {
+          date,
+          probability: relevantItem.probability,
+        };
+        newDataset.push(result);
+        // }
+        previousDate = item.timestamp;
+      }
+    }
+    dataSets.push(newDataset);
+  });

  let dataSetsLength = dataSets.length;

  return (
-    <div className="grid grid-rows-1 bg-white p-10">
-      <a
-        className="text‑inherit no-underline"
-        href={question.url}
-        target="_blank"
-      >
+    <div className="flex justify-center items-center w-full">
+      <div className="w-9/12">
+        <a
+          className="text‑inherit no-underline"
+          href={question.url}
+          target="_blank"
+        >
+          {/*
        <h1 className="text-3xl font-normal text-center mt-5">
          {question.title}
        </h1>
-      </a>
-      <VictoryChart
-        domainPadding={20}
-        padding={padding}
-        theme={VictoryTheme.material}
-        height={height}
-        width={width}
-        containerComponent={
-          <VictoryVoronoiContainer
-            labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
-            labelComponent={
-              <VictoryTooltip
-                pointerLength={0}
-                dy={-12}
-                style={{
-                  fontSize: 10,
-                  fill: "black",
-                  strokeWidth: 0.05,
-                }}
-                flyoutStyle={{
-                  stroke: "black",
-                  fill: "white",
-                }}
-                flyoutWidth={80}
-                cornerRadius={0}
-                flyoutPadding={7}
-              />
-            }
-            voronoiBlacklist={
-              ["line0", "line1", "line2", "line3", "line4"]
+        */}
+        </a>
+        <VictoryChart
+          domainPadding={20}
+          padding={padding}
+          theme={VictoryTheme.material}
+          height={height}
+          width={width}
+          containerComponent={
+            <VictoryVoronoiContainer
+              labels={({ datum }) =>
+                `${datum.x}: ${Math.round(datum.y * 100)}%`
+              }
+              labelComponent={
+                <VictoryTooltip
+                  pointerLength={0}
+                  dy={-12}
+                  style={{
+                    fontSize: 10,
+                    fill: "black",
+                    strokeWidth: 0.05,
+                  }}
+                  flyoutStyle={{
+                    stroke: "black",
+                    fill: "white",
+                  }}
+                  flyoutWidth={80}
+                  cornerRadius={0}
+                  flyoutPadding={7}
+                />
+              }
+              voronoiBlacklist={
+                ["line-0", "line-1", "line-2", "line-3", "line-4"]

-              //Array.from(Array(5).keys()).map((x, i) => `line${i}`)
-              // see: https://github.com/FormidableLabs/victory/issues/545
-            }
-          />
-        }
-        domain={{
-          y: [0, 1],
-        }}
-      >
-        <VictoryLegend
-          x={width - 100}
-          y={height / 2 - 18 - (dataSetsLength - 1) * 13}
-          orientation="vertical"
-          gutter={20}
-          style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
-          data={
-            Array.from(Array(dataSetsLength).keys()).map((i) => ({
-              name: dataSetsNames[i],
-              symbol: { fill: colors[i] },
-            }))
-            /*[
+                //Array.from(Array(5).keys()).map((x, i) => `line${i}`)
+                // see: https://github.com/FormidableLabs/victory/issues/545
+              }
+            />
+          }
+          domain={{
+            y: [0, 1],
+          }}
+        >
+          <VictoryLegend
+            x={width - 100}
+            y={height / 2 - 18 - (dataSetsLength - 1) * 13}
+            orientation="vertical"
+            gutter={20}
+            style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
+            data={
+              Array.from(Array(dataSetsLength).keys()).map((i) => ({
+                name: dataSetsNames[i],
+                symbol: { fill: colors[i] },
+              }))
+              /*[
            { name: "One", symbol: { fill: "tomato", type: "star" } },
            { name: "Two", symbol: { fill: "orange" } },
            { name: "Three", symbol: { fill: "gold" } },
          ]*/
-          }
-        />
+            }
+          />

-        {dataSets.slice(0, 5).map((dataset, i) => getVictoryGroup(dataset, i))}
-        <VictoryAxis
-          // tickValues specifies both the number of ticks and where
-          // they are placed on the axis
-          // tickValues={dataAsXy.map((datum) => datum.x)}
-          // tickFormat={dataAsXy.map((datum) => datum.x)}
-          tickCount={7}
-          style={{
-            grid: { stroke: null, strokeWidth: 0.5 },
-          }}
-          //axisLabelComponent={
-          //  <VictoryLabel dy={40} style={{ fontSize: 10, fill: "gray" }} />
-          //}
-          // label="Date (dd/mm/yy)"
-          tickLabelComponent={
-            <VictoryLabel
-              dy={0}
-              angle={-30}
-              style={{ fontSize: 10, fill: "gray" }}
-            />
-          }
-        />
-        <VictoryAxis
-          dependentAxis
-          // tickFormat specifies how ticks should be displayed
-          tickFormat={(x) => `${x * 100}%`}
-          style={{
-            grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
-          }}
-          tickLabelComponent={
-            <VictoryLabel dy={0} style={{ fontSize: 10, fill: "gray" }} />
-          }
-        />
-      </VictoryChart>
+          {dataSets
+            .slice(0, 5)
+            .map((dataset, i) => getVictoryGroup(dataset, i))}
+          <VictoryAxis
+            // tickValues specifies both the number of ticks and where
+            // they are placed on the axis
+            // tickValues={dataAsXy.map((datum) => datum.x)}
+            // tickFormat={dataAsXy.map((datum) => datum.x)}
+            tickCount={7}
+            style={{
+              grid: { stroke: null, strokeWidth: 0.5 },
+            }}
+            //axisLabelComponent={
+            //  <VictoryLabel dy={40} style={{ fontSize: 10, fill: "gray" }} />
+            //}
+            // label="Date (dd/mm/yy)"
+            tickLabelComponent={
+              <VictoryLabel
+                dy={0}
+                angle={-30}
+                style={{ fontSize: 10, fill: "gray" }}
+              />
+            }
+          />
+          <VictoryAxis
+            dependentAxis
+            // tickFormat specifies how ticks should be displayed
+            tickFormat={(x) => `${x * 100}%`}
+            style={{
+              grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
+            }}
+            tickLabelComponent={
+              <VictoryLabel dy={0} style={{ fontSize: 10, fill: "gray" }} />
+            }
+          />
+        </VictoryChart>
+      </div>
    </div>
  );
 };
--- a/src/web/questions/components/QuestionOptions.tsx
+++ b/src/web/questions/components/QuestionOptions.tsx
@ -112,7 +112,8 @@ export const QuestionOptions: React.FC<{ options: Option[] }> = ({
  const isBinary =
    options.length === 2 &&
    (options[0].name === "Yes" || options[0].name === "No");
-
+  const getYesOption = (options) =>
+    options.find((option) => option.name == "Yes");
  const optionsSorted = options.sort((a, b) => b.probability - a.probability);
  const optionsMax5 = !!optionsSorted.slice ? optionsSorted.slice(0, 5) : []; // display max 5 options.

@ -121,17 +122,17 @@ export const QuestionOptions: React.FC<{ options: Option[] }> = ({
      <div className="space-x-2">
        <span
          className={`${primaryForecastColor(
-            options[0].probability
+            getYesOption(options).probability
          )} text-white w-16 rounded-md px-1.5 py-0.5 font-bold`}
        >
-          {formatProbability(options[0].probability)}
+          {formatProbability(getYesOption(options).probability)}
        </span>
        <span
          className={`${textColor(
-            options[0].probability
+            getYesOption(options).probability
          )} text-gray-500 inline-block`}
        >
-          {primaryEstimateAsText(options[0].probability)}
+          {primaryEstimateAsText(getYesOption(options).probability)}
        </span>
      </div>
    );
--- a/src/web/questions/pages/QuestionPage.tsx
+++ b/src/web/questions/pages/QuestionPage.tsx
@ -40,8 +40,8 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
 const QuestionCardContents: React.FC<{
  question: QuestionWithHistoryFragment;
 }> = ({ question }) => (
-  <div className="space-y-4">
-    <h1>
+  <div className="grid grid-cols-1 space-y-4 place-items-center">
+    <h1 className="text-4xl place-self-center w-full text-center mt-10">
      <a
        className="text-black no-underline"
        href={question.url}
@ -50,21 +50,31 @@ const QuestionCardContents: React.FC<{
        {question.title}
      </a>
    </h1>
-    <QuestionFooter question={question} expandFooterToFullWidth={true} />
+    <HistoryChart question={question} />
+    {/*
+        <div className="flex justify-center items-center w-full">
+      <div className="w-6/12">
+        <QuestionFooter question={question} expandFooterToFullWidth={true} />
+      </div>
+    </div>
    <QuestionOptions options={question.options} />

-    <ReactMarkdown linkTarget="_blank" className="font-normal">
+    */}
+
+    <h1 className="text-xl place-self-center w-full text-center mt-20">
+      {"Question description"}
+    </h1>
+
+    <ReactMarkdown linkTarget="_blank" className="font-normal w-9/12">
      {question.description}
    </ReactMarkdown>
-
-    <HistoryChart question={question} />
  </div>
 );

 const QuestionPage: NextPage<Props> = ({ id }) => {
  return (
    <Layout page="question">
-      <div className="max-w-2xl mx-auto">
+      <div className="max-w-4xl mx-auto">
        <Card highlightOnHover={false}>
          <Query document={QuestionPageDocument} variables={{ id }}>
            {({ data }) => <QuestionCardContents question={data.result} />}