quantified.uncertainty/metaforecast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak: Question page style tweaks

Browse Source
This commit is contained in:
NunoSempere 2022-05-18 20:53:00 -04:00
parent 0d0714a5d4
commit 159f9c2b45
4 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -5,6 +5,7 @@
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "metaforecast",
"version": "2.0.0", "version": "2.0.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

27
src/web/questions/components/HistoryChart/InnerChart.tsx
View File

@ -1,11 +1,20 @@
import { differenceInDays, format } from "date-fns"; import { differenceInDays, format } from "date-fns";
import { import {
VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLine, VictoryScatter, VictoryAxis,
VictoryTheme, VictoryTooltip, VictoryVoronoiContainer VictoryChart,
VictoryGroup,
VictoryLabel,
VictoryLine,
VictoryScatter,
VictoryTheme,
VictoryTooltip,
VictoryVoronoiContainer,
} from "victory"; } from "victory";
import { chartColors, ChartData, ChartSeries, height, width } from "./utils"; import { chartColors, ChartData, ChartSeries, height, width } from "./utils";
let dateFormat = "MMM do y"; // "yyyy-MM-dd"
// can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children // can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children
const getVictoryGroup = ({ const getVictoryGroup = ({
data, data,
@ -71,12 +80,12 @@ export const InnerChart: React.FC<Props> = ({
<VictoryLabel <VictoryLabel
style={[ style={[
{ {
fontSize: 18, fontSize: 16,
fill: "black", fill: "black",
strokeWidth: 0.05, strokeWidth: 0.05,
}, },
{ {
fontSize: 18, fontSize: 16,
fill: "#777", fill: "#777",
strokeWidth: 0.05, strokeWidth: 0.05,
}, },
@ -86,11 +95,11 @@ export const InnerChart: React.FC<Props> = ({
text={({ datum }) => text={({ datum }) =>
`${datum.name}: ${Math.round(datum.y * 100)}%\n${format( `${datum.name}: ${Math.round(datum.y * 100)}%\n${format(
datum.x, datum.x,
"yyyy-MM-dd" dateFormat
)}` )}`
} }
style={{ style={{
fontSize: 18, // needs to be set here and not just in labelComponent for text size calculations fontSize: 17, // needs to be set here and not just in labelComponent for text size calculations
fontFamily: fontFamily:
'"Gill Sans", "Gill Sans MT", "Ser­avek", "Trebuchet MS", sans-serif', '"Gill Sans", "Gill Sans MT", "Ser­avek", "Trebuchet MS", sans-serif',
// default font family from Victory, need to be specified explicitly for some reason, otherwise text size gets miscalculated // default font family from Victory, need to be specified explicitly for some reason, otherwise text size gets miscalculated
@ -100,7 +109,7 @@ export const InnerChart: React.FC<Props> = ({
fill: "white", fill: "white",
}} }}
cornerRadius={4} cornerRadius={4}
flyoutPadding={{ top: 4, bottom: 4, left: 12, right: 12 }} flyoutPadding={{ top: 4, bottom: 4, left: 16, right: 16 }}
/> />
} }
radius={50} radius={50}
@ -129,11 +138,11 @@ export const InnerChart: React.FC<Props> = ({
dx={-38} dx={-38}
dy={-5} dy={-5}
angle={-30} angle={-30}
style={{ fontSize: 18, fill: "#777" }} style={{ fontSize: 15, fill: "#777" }}
/> />
} }
scale={{ x: "time" }} scale={{ x: "time" }}
tickFormat={(t) => format(t, "yyyy-MM-dd")} tickFormat={(t) => format(t, dateFormat)}
/> />
<VictoryAxis <VictoryAxis
dependentAxis dependentAxis

4
src/web/questions/components/IndicatorsTable.tsx
View File

@ -1,6 +1,8 @@
import { QuestionFragment } from "../../fragments.generated"; import { QuestionFragment } from "../../fragments.generated";
import { import {
formatIndicatorValue, qualityIndicatorLabels, UsedIndicatorName formatIndicatorValue,
qualityIndicatorLabels,
UsedIndicatorName,
} from "./QuestionCard/QuestionFooter"; } from "./QuestionCard/QuestionFooter";
import { Stars } from "./Stars"; import { Stars } from "./Stars";

12
src/web/questions/pages/QuestionPage.tsx
View File

@ -62,7 +62,7 @@ const LargeQuestionCard: React.FC<{
</a> </a>
</h1> </h1>
<div className="flex gap-2 mb-2"> <div className="flex gap-2 mb-10">
<a <a
className="text-black no-underline bg-red-300 rounded p-1 px-2 text-xs hover:text-gray-600" className="text-black no-underline bg-red-300 rounded p-1 px-2 text-xs hover:text-gray-600"
href={question.url} href={question.url}
@ -73,7 +73,7 @@ const LargeQuestionCard: React.FC<{
<Stars num={question.qualityIndicators.stars} /> <Stars num={question.qualityIndicators.stars} />
</div> </div>
<div className="mb-8"> <div className="mb-10">
{question.platform.id === "guesstimate" && question.visualization ? ( {question.platform.id === "guesstimate" && question.visualization ? (
<a className="no-underline" href={question.url} target="_blank"> <a className="no-underline" href={question.url} target="_blank">
<img <img
@ -96,9 +96,11 @@ const LargeQuestionCard: React.FC<{
{question.description.replaceAll("---", "")} {question.description.replaceAll("---", "")}
</ReactMarkdown> </ReactMarkdown>
</Section> </Section>
<Section title="Indicators"> <div className="mt-5">
<IndicatorsTable question={question} /> <Section title="Indicators">
</Section> <IndicatorsTable question={question} />
</Section>
</div>
</div> </div>
</Card> </Card>
); );