cleanups
This commit is contained in:
Vyacheslav Matyukhin
parent
8e37d5761b
commit
9507579a7a
|
|
@ -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
62
src/web/display/Stars.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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="text‑inherit no-underline"
|
||||
href={question.url}
|
||||
target="_blank"
|
||||
></a>
|
||||
<VictoryChart
|
||||
domainPadding={20}
|
||||
padding={padding}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user