tweak: Charts

Add line, reorganize display

Also fix nasty bug where probabilities are inverted in frontpage

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["next", "prettier"], 
+	"rules": {
+		"next/no-document-import-in-page": "off"
+  }
+}

src/web/questions/components/HistoryChart.tsx

@@ -1,7 +1,15 @@
 import React from "react";
 import {
-    VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLegend, VictoryScatter,
+  VictoryAxis,
-    VictoryTheme, VictoryTooltip, VictoryVoronoiContainer
+  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}`}
+        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,19 +104,47 @@ 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">
+    <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}
@@ -118,7 +154,9 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
           width={width}
           containerComponent={
             <VictoryVoronoiContainer
-            labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
+              labels={({ datum }) =>
+                `${datum.x}: ${Math.round(datum.y * 100)}%`
+              }
               labelComponent={
                 <VictoryTooltip
                   pointerLength={0}
@@ -138,7 +176,7 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
                 />
               }
               voronoiBlacklist={
-              ["line0", "line1", "line2", "line3", "line4"]
+                ["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
@@ -168,7 +206,9 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
             }
           />
 
-        {dataSets.slice(0, 5).map((dataset, i) => getVictoryGroup(dataset, i))}
+          {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
@@ -203,5 +243,6 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
           />
         </VictoryChart>
       </div>
+    </div>
   );
 };

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>
     );

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">
+  <div className="grid grid-cols-1 space-y-4 place-items-center">
-    <h1>
+    <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>
+    <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} />}