70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { QuestionFragment } from "../../fragments.generated";
|
|
import {
|
|
formatIndicatorValue, qualityIndicatorLabels, UsedIndicatorName
|
|
} from "./QuestionCard/QuestionFooter";
|
|
import { Stars } from "./Stars";
|
|
|
|
interface Props {
|
|
question: QuestionFragment;
|
|
}
|
|
|
|
const TableRow: React.FC<{ title: string }> = ({ title, children }) => (
|
|
<tr className="border-b">
|
|
<th
|
|
scope="row"
|
|
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
|
|
>
|
|
{title}
|
|
</th>
|
|
<td className="px-6 py-4">{children}</td>
|
|
</tr>
|
|
);
|
|
|
|
export const IndicatorsTable: React.FC<Props> = ({ question }) => (
|
|
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
|
|
<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
|
|
</th>
|
|
<th scope="col" className="px-6 py-3">
|
|
Value
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<TableRow title="Stars">
|
|
<Stars num={question.qualityIndicators.stars} />
|
|
</TableRow>
|
|
<TableRow title="Platform">{question.platform.label}</TableRow>
|
|
{question.qualityIndicators.numForecasts ? (
|
|
<TableRow title="Number of forecasts">
|
|
{question.qualityIndicators.numForecasts}
|
|
</TableRow>
|
|
) : null}
|
|
{Object.keys(question.qualityIndicators)
|
|
.filter(
|
|
(indicator): indicator is UsedIndicatorName =>
|
|
(question.qualityIndicators as any)[indicator] != null &&
|
|
indicator in qualityIndicatorLabels
|
|
)
|
|
.map((indicator) => {
|
|
return (
|
|
<TableRow
|
|
title={qualityIndicatorLabels[indicator]}
|
|
key={indicator}
|
|
>
|
|
{formatIndicatorValue(
|
|
Number(question.qualityIndicators[indicator]), // must be non-null due to former check
|
|
indicator,
|
|
question.platform.id
|
|
)}
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|