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

feat: Fix embeds so that they are a bit more compressible.

Browse Source 
Also remove the title, which is variable width & thus
very annoying to account for.
This commit is contained in:
NunoSempere 2022-11-17 20:12:31 +00:00
parent dc1e75d99d
commit 73329df47b
4 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ import {
import { chartColors, ChartData, ChartSeries, goldenRatio } from "./utils"; import { chartColors, ChartData, ChartSeries, goldenRatio } from "./utils";
const height = 200 const height = 200
const width = height * goldenRatio const width = 200 * goldenRatio
let dateFormat = "dd/MM/yy"; // "yyyy-MM-dd" // "MMM do yy" let dateFormat = "dd/MM/yy"; // "yyyy-MM-dd" // "MMM do yy"
// 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
@ -73,8 +73,8 @@ export const InnerChart: React.FC<Props> = ({
const domainMax = const domainMax =
maxProbability < 0.5 ? Math.round(10 * (maxProbability + 0.05)) / 10 : 1; maxProbability < 0.5 ? Math.round(10 * (maxProbability + 0.05)) / 10 : 1;
const padding = { const padding = {
top: 15, top: 12,
bottom: 50, bottom: 33,
left: 30, left: 30,
right: 17, right: 17,
}; };
@ -164,7 +164,7 @@ export const InnerChart: React.FC<Props> = ({
dx={-10} dx={-10}
dy={0} dy={0}
angle={-30} angle={-30}
style={{ fontSize: 10, fill: "#777" }} style={{ fontSize: 9, fill: "#777" }}
/> />
} }
scale={{ x: "time" }} scale={{ x: "time" }}

2
src/web/questions/components/HistoryChart/index.tsx
View File

@ -23,7 +23,7 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
const data = useMemo(() => buildChartData(question), [question]); const data = useMemo(() => buildChartData(question), [question]);
return ( return (
<div className="flex items-center space-y-4 sm:flex-row sm:space-y-0"> <div className="flex items-center space-y-4 sm:flex-row sm:space-y-0 ">
<InnerChart data={data} highlight={highlight} /> <InnerChart data={data} highlight={highlight} />
<Legend <Legend
items={data.seriesNames.map((name, i) => ({ items={data.seriesNames.map((name, i) => ({

2
src/web/questions/components/QuestionTitle.tsx
View File

@ -10,7 +10,7 @@ export const QuestionTitle: React.FC<Props> = ({
question, question,
linkToMetaforecast, linkToMetaforecast,
}) => ( }) => (
<h1 className="sm:text-3xl text-xl"> <h1 className="sm:text-3xl text-lg">
<a <a
className="text-black no-underline hover:text-gray-700" className="text-black no-underline hover:text-gray-700"
href={ href={

7
src/web/questions/pages/EmbedQuestionPage.tsx
View File

@ -30,18 +30,19 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
props: { props: {
urqlState: ssrCache.extractData(), urqlState: ssrCache.extractData(),
id, id,
question
}, },
}; };
}; };
const EmbedQuestionPage: NextPage<Props> = ({ id }) => { const EmbedQuestionPage: NextPage<Props> = ({ id }) => {
return ( return (
<div className="bg-white min-h-screen"> <div className="block bg-white min-h-screen">
<Query document={QuestionPageDocument} variables={{ id }}> <Query document={QuestionPageDocument} variables={{ id }}>
{({ data: { result: question } }) => {({ data: { result: question } }) =>
question ? ( question ? (
<div className="flex flex-col pl-4 pt-2 "> <div className="flex flex-col p-2 w-full h-12/12">
<QuestionTitle question={question} linkToMetaforecast={true} /> {/*<QuestionTitle question={question} linkToMetaforecast={true} /> */}
<div className="mb-1 mt-1"> <div className="mb-1 mt-1">
<QuestionInfoRow question={question} /> <QuestionInfoRow question={question} />