tweak: add indicators

Various indicators code should probably be moved to its own file.

src/web/display/DisplayQuestion/QuestionFooter.tsx

@@ -4,7 +4,9 @@ type QualityIndicator = QuestionFragment["qualityIndicators"];
 type IndicatorName = keyof QualityIndicator;
 
 // this duplication can probably be simplified with typescript magic, but this is good enough for now
-type UsedIndicatorName =
+export type UsedIndicatorName =
+  // | "numForecasts"
+  // | "stars"
   | "volume"
   | "numForecasters"
   | "spread"
@@ -13,9 +15,9 @@ type UsedIndicatorName =
   | "tradeVolume"
   | "openInterest";
 
-const qualityIndicatorLabels: { [k in UsedIndicatorName]: string } = {
+export const qualityIndicatorLabels: { [k in UsedIndicatorName]: string } = {
-  // numForecasts: null,
+  // numForecasts: "Number of forecasts",
-  // stars: null,
+  // stars: "Stars",
   // yesBid: "Yes bid",
   // yesAsk: "Yes ask",
   volume: "Volume",
@@ -96,6 +98,20 @@ const FirstQualityIndicator: React.FC<{
   }
 };
 
+export const formatIndicatorValue = (
+  value: any,
+  indicator: UsedIndicatorName,
+  platform: string
+): string => {
+  return `${getCurrencySymbolIfNeeded({
+    indicator,
+    platform: platform,
+  })}${formatNumber(value)}${getPercentageSymbolIfNeeded({
+    indicator,
+    platform: platform,
+  })}`;
+};
+
 const QualityIndicatorsList: React.FC<{
   question: QuestionFragment;
 }> = ({ question }) => {
@@ -112,13 +128,7 @@ const QualityIndicatorsList: React.FC<{
           <div key={indicator}>
             <span>{indicatorLabel}:</span>&nbsp;
             <span className="font-bold">
-              {`${getCurrencySymbolIfNeeded({
+              {formatIndicatorValue(value, indicator, question.platform.id)}
-                indicator,
-                platform: question.platform.id,
-              })}${formatNumber(value)}${getPercentageSymbolIfNeeded({
-                indicator,
-                platform: question.platform.id,
-              })}`}
             </span>
           </div>
         );
@@ -182,6 +192,14 @@ function getStarsColor(numstars: number) {
   return color;
 }
 
+export function getStarsElement(numStars) {
+  return (
+    <div className={`self-center col-span-1 ${getStarsColor(numStars)}`}>
+      {getstars(numStars)}
+    </div>
+  );
+}
+
 interface Props {
   question: QuestionFragment;
   expandFooterToFullWidth: boolean;
@@ -197,13 +215,7 @@ export const QuestionFooter: React.FC<Props> = ({
         expandFooterToFullWidth ? "justify-between" : ""
       } text-gray-500 mb-2 mt-1`}
     >
-      <div
+      {getStarsElement(question.qualityIndicators.stars)}
-        className={`self-center col-span-1 ${getStarsColor(
-          question.qualityIndicators.stars
-        )}`}
-      >
-        {getstars(question.qualityIndicators.stars)}
-      </div>
       <div
         className={`${
           expandFooterToFullWidth ? "place-self-center" : "self-center"

src/web/questions/pages/QuestionPage.tsx

@@ -1,9 +1,16 @@
 import { GetServerSideProps, NextPage } from "next";
 import ReactMarkdown from "react-markdown";
+import { QualityIndicatorsObj } from "../../../graphql/schema/questions";
 
 import { Query } from "../../common/Query";
 import { Card } from "../../display/Card";
-import { QuestionFooter } from "../../display/DisplayQuestion/QuestionFooter";
+import {
+  QuestionFooter,
+  qualityIndicatorLabels,
+  formatIndicatorValue,
+  UsedIndicatorName,
+  getStarsElement,
+} from "../../display/DisplayQuestion/QuestionFooter";
 import { Layout } from "../../display/Layout";
 import { QuestionWithHistoryFragment } from "../../fragments.generated";
 import { ssrUrql } from "../../urql";
@@ -40,8 +47,8 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
 const QuestionCardContents: React.FC<{
   question: QuestionWithHistoryFragment;
 }> = ({ question }) => (
-  <div className="grid grid-cols-1 space-y-4 place-items-center">
+  <div className="grid grid-cols-1 space-y-4 place-items-center mb-5">
-    <h1 className="text-4xl place-self-center w-full text-center mt-10">
+    <h1 className="text-4xl place-self-center w-full text-center mt-10 pl-5 pr-5">
       <a
         className="text-black no-underline"
         href={question.url}
@@ -61,20 +68,102 @@ const QuestionCardContents: React.FC<{
 
     */}
 
-    <h1 className="pt-10 text-xl place-self-center w-full text-center ">
+    <h2 className="pt-10 text-xl place-self-center w-full text-center text-gray-900">
       {"Question description"}
-    </h1>
+    </h2>
-
+    <ReactMarkdown
-    <ReactMarkdown linkTarget="_blank" className="font-normal w-9/12">
+      linkTarget="_blank"
+      className="font-normal text-gray-900 w-9/12"
+    >
       {question.description}
     </ReactMarkdown>
+
+    <h2 className="pt-2  text-xl place-self-center w-full text-center text-gray-900">
+      {"Indicators"}
+    </h2>
+    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
+      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          <tr>
+            <th scope="col" className="px-6 py-3">
+              Indicator
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Value
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+            <th
+              scope="row"
+              className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+            >
+              {"Stars"}
+            </th>
+            <td className="px-6 py-4">
+              {getStarsElement(question.qualityIndicators["stars"])}
+            </td>
+          </tr>
+          <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+            <th
+              scope="row"
+              className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+            >
+              {"Platform"}
+            </th>
+            <td className="px-6 py-4">{question.platform.label}</td>
+          </tr>
+          {!!question.qualityIndicators["numForecasts"] ? (
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              <th
+                scope="row"
+                className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+              >
+                {"Number of forecasts"}
+              </th>
+              <td className="px-6 py-4">
+                {question.qualityIndicators["numForecasts"]}
+              </td>
+            </tr>
+          ) : (
+            ""
+          )}
+          {Object.keys(question.qualityIndicators)
+            .filter(
+              (indicator) =>
+                question.qualityIndicators[indicator] != null &&
+                !!qualityIndicatorLabels[indicator]
+            )
+            .map((indicator: UsedIndicatorName) => {
+              return (
+                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                  <th
+                    scope="row"
+                    className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+                  >
+                    {qualityIndicatorLabels[indicator]}
+                  </th>
+                  <td className="px-6 py-4">
+                    {formatIndicatorValue(
+                      question.qualityIndicators[indicator],
+                      indicator,
+                      question.platform.id
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    </div>
   </div>
 );
 
 const QuestionPage: NextPage<Props> = ({ id }) => {
   return (
     <Layout page="question">
-      <div className="max-w-4xl mx-auto">
+      <div className="max-w-4xl mx-auto mb-5">
         <Card highlightOnHover={false}>
           <Query document={QuestionPageDocument} variables={{ id }}>
             {({ data }) => <QuestionCardContents question={data.result} />}