tweak: add indicators
Various indicators code should probably be moved to its own file.
This commit is contained in:
parent
07a7bb0c55
commit
6aea4f6b6d
|
|
@ -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 } = {
|
||||
// numForecasts: null,
|
||||
// stars: null,
|
||||
export const qualityIndicatorLabels: { [k in UsedIndicatorName]: string } = {
|
||||
// numForecasts: "Number of forecasts",
|
||||
// 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>
|
||||
<span className="font-bold">
|
||||
{`${getCurrencySymbolIfNeeded({
|
||||
indicator,
|
||||
platform: question.platform.id,
|
||||
})}${formatNumber(value)}${getPercentageSymbolIfNeeded({
|
||||
indicator,
|
||||
platform: question.platform.id,
|
||||
})}`}
|
||||
{formatIndicatorValue(value, indicator, 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
|
||||
className={`self-center col-span-1 ${getStarsColor(
|
||||
question.qualityIndicators.stars
|
||||
)}`}
|
||||
>
|
||||
{getstars(question.qualityIndicators.stars)}
|
||||
</div>
|
||||
{getStarsElement(question.qualityIndicators.stars)}
|
||||
<div
|
||||
className={`${
|
||||
expandFooterToFullWidth ? "place-self-center" : "self-center"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<h1 className="text-4xl place-self-center w-full text-center mt-10">
|
||||
<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 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>
|
||||
|
||||
<ReactMarkdown linkTarget="_blank" className="font-normal w-9/12">
|
||||
</h2>
|
||||
<ReactMarkdown
|
||||
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} />}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user