This commit is contained in:
Vyacheslav Matyukhin 2022-04-29 23:00:57 +04:00
parent 8e37d5761b
commit 9507579a7a
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
4 changed files with 89 additions and 125 deletions

View File

@ -1,4 +1,5 @@
import { QuestionFragment } from "../../fragments.generated";
import { Stars } from "../Stars";
type QualityIndicator = QuestionFragment["qualityIndicators"];
type IndicatorName = keyof QualityIndicator;
@ -137,69 +138,6 @@ const QualityIndicatorsList: React.FC<{
);
};
// Database-like functions
export function getstars(numstars: number) {
let stars = "★★☆☆☆";
switch (numstars) {
case 0:
stars = "☆☆☆☆☆";
break;
case 1:
stars = "★☆☆☆☆";
break;
case 2:
stars = "★★☆☆☆";
break;
case 3:
stars = "★★★☆☆";
break;
case 4:
stars = "★★★★☆";
break;
case 5:
stars = "★★★★★";
break;
default:
stars = "★★☆☆☆";
}
return stars;
}
function getStarsColor(numstars: number) {
let color = "text-yellow-400";
switch (numstars) {
case 0:
color = "text-red-400";
break;
case 1:
color = "text-red-400";
break;
case 2:
color = "text-orange-400";
break;
case 3:
color = "text-yellow-400";
break;
case 4:
color = "text-green-400";
break;
case 5:
color = "text-blue-400";
break;
default:
color = "text-yellow-400";
}
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;
@ -215,7 +153,7 @@ export const QuestionFooter: React.FC<Props> = ({
expandFooterToFullWidth ? "justify-between" : ""
} text-gray-500 mb-2 mt-1`}
>
{getStarsElement(question.qualityIndicators.stars)}
<Stars num={question.qualityIndicators.stars} />
<div
className={`${
expandFooterToFullWidth ? "place-self-center" : "self-center"

62
src/web/display/Stars.tsx Normal file
View File

@ -0,0 +1,62 @@
// Database-like functions
export function getstars(numstars: number) {
let stars = "★★☆☆☆";
switch (numstars) {
case 0:
stars = "☆☆☆☆☆";
break;
case 1:
stars = "★☆☆☆☆";
break;
case 2:
stars = "★★☆☆☆";
break;
case 3:
stars = "★★★☆☆";
break;
case 4:
stars = "★★★★☆";
break;
case 5:
stars = "★★★★★";
break;
default:
stars = "★★☆☆☆";
}
return stars;
}
function getStarsColor(numstars: number) {
let color = "text-yellow-400";
switch (numstars) {
case 0:
color = "text-red-400";
break;
case 1:
color = "text-red-400";
break;
case 2:
color = "text-orange-400";
break;
case 3:
color = "text-yellow-400";
break;
case 4:
color = "text-green-400";
break;
case 5:
color = "text-blue-400";
break;
default:
color = "text-yellow-400";
}
return color;
}
export const Stars: React.FC<{ num: number }> = ({ num }) => {
return (
<div className={`self-center col-span-1 ${getStarsColor(num)}`}>
{getstars(num)}
</div>
);
};

View File

@ -1,15 +1,7 @@
import React from "react";
import {
VictoryAxis,
VictoryChart,
VictoryGroup,
VictoryLabel,
VictoryLegend,
VictoryScatter,
VictoryLine,
VictoryTheme,
VictoryTooltip,
VictoryVoronoiContainer,
VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLegend, VictoryLine,
VictoryScatter, VictoryTheme, VictoryTooltip, VictoryVoronoiContainer
} from "victory";
import { QuestionWithHistoryFragment } from "../../fragments.generated";
@ -18,19 +10,6 @@ interface Props {
question: QuestionWithHistoryFragment;
}
const buildDataset = (n, fn) => {
return Array.from(Array(n).keys()).map((x) => ({
date: x,
probability: fn(x),
}));
};
let getDate0 = (x) => {
// for fake data
let date = new Date(x);
return date.toISOString().slice(5, 10).replaceAll("-", "/");
};
let formatOptionName = (name) => {
return name.length > 20 ? name.slice(0, 17) + "..." : name;
};
@ -166,11 +145,6 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
return (
<div className="flex justify-center items-center w-full">
<div className="w-10/12">
<a
className="textinherit no-underline"
href={question.url}
target="_blank"
></a>
<VictoryChart
domainPadding={20}
padding={padding}

View File

@ -6,10 +6,11 @@ import { Query } from "../../common/Query";
import { Card } from "../../display/Card";
import { DisplayOneQuestionForCapture } from "../../display/DisplayOneQuestionForCapture";
import {
formatIndicatorValue, getStarsElement, qualityIndicatorLabels, UsedIndicatorName
formatIndicatorValue, qualityIndicatorLabels, UsedIndicatorName
} from "../../display/DisplayQuestion/QuestionFooter";
import { Layout } from "../../display/Layout";
import { LineHeader } from "../../display/LineHeader";
import { Stars } from "../../display/Stars";
import { QuestionWithHistoryFragment } from "../../fragments.generated";
import { ssrUrql } from "../../urql";
import { HistoryChart } from "../components/HistoryChart";
@ -44,7 +45,7 @@ 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 mb-5">
<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 pl-5 pr-5">
<a
className="text-black no-underline hover:text-gray-600"
@ -56,18 +57,9 @@ const QuestionCardContents: React.FC<{
</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} />
*/}
<h2 className="pt-10 text-xl place-self-center w-full text-center text-gray-900">
{"Question description"}
Question description
</h2>
<ReactMarkdown
linkTarget="_blank"
@ -77,11 +69,11 @@ const QuestionCardContents: React.FC<{
</ReactMarkdown>
<h2 className="pt-2 text-xl place-self-center w-full text-center text-gray-900">
{"Indicators"}
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">
<table className="w-full text-sm text-left text-gray-500">
<thead className="text-xs text-gray-700 uppercase bg-gray-100">
<tr>
<th scope="col" className="px-6 py-3">
Indicator
@ -92,41 +84,39 @@ const QuestionCardContents: React.FC<{
</tr>
</thead>
<tbody>
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<tr className="border-b">
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
>
{"Stars"}
Stars
</th>
<td className="px-6 py-4">
{getStarsElement(question.qualityIndicators["stars"])}
<Stars num={question.qualityIndicators.stars} />
</td>
</tr>
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<tr className="border-b">
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
>
{"Platform"}
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">
{question.qualityIndicators.numForecasts ? (
<tr className="border-b">
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
>
{"Number of forecasts"}
Number of forecasts
</th>
<td className="px-6 py-4">
{question.qualityIndicators["numForecasts"]}
{question.qualityIndicators.numForecasts}
</td>
</tr>
) : (
""
)}
) : null}
{Object.keys(question.qualityIndicators)
.filter(
(indicator) =>
@ -135,10 +125,10 @@ const QuestionCardContents: React.FC<{
)
.map((indicator: UsedIndicatorName) => {
return (
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<tr className="bg-white border-b" key={indicator}>
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
>
{qualityIndicatorLabels[indicator]}
</th>