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

tweak: change embed page a bit more

Browse Source
This commit is contained in:
NunoSempere 2022-11-17 19:22:46 +00:00
parent 0a7d2d160a
commit dc1e75d99d
3 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,9 +15,9 @@ import {
import { chartColors, ChartData, ChartSeries, goldenRatio } from "./utils"; import { chartColors, ChartData, ChartSeries, goldenRatio } from "./utils";
const height = 400 const height = 200
const width = height * goldenRatio const width = height * goldenRatio
let dateFormat = "MMM do y"; // "yyyy-MM-dd" 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
const getVictoryGroup = ({ const getVictoryGroup = ({
@ -39,7 +39,7 @@ const getVictoryGroup = ({
data: { data: {
// strokeOpacity: highlight ? 1 : 0.5, // strokeOpacity: highlight ? 1 : 0.5,
strokeOpacity: highlight && !isBinary ? 0.8 : 0.6, strokeOpacity: highlight && !isBinary ? 0.8 : 0.6,
strokeWidth: highlight && !isBinary ? 4 : 3, strokeWidth: highlight && !isBinary ? 2.5 : 1.5,
}, },
}} }}
/> />
@ -73,9 +73,9 @@ 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: 20, top: 15,
bottom: 75, bottom: 50,
left: 70, left: 30,
right: 17, right: 17,
}; };
@ -101,12 +101,12 @@ export const InnerChart: React.FC<Props> = ({
<VictoryLabel <VictoryLabel
style={[ style={[
{ {
fontSize: 16, fontSize: 10,
fill: "black", fill: "black",
strokeWidth: 0.05, strokeWidth: 0.05,
}, },
{ {
fontSize: 16, fontSize: 10,
fill: "#777", fill: "#777",
strokeWidth: 0.05, strokeWidth: 0.05,
}, },
@ -120,7 +120,7 @@ export const InnerChart: React.FC<Props> = ({
)}` )}`
} }
style={{ style={{
fontSize: 17, // needs to be set here and not just in labelComponent for text size calculations fontSize: 10, // 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
@ -130,10 +130,10 @@ export const InnerChart: React.FC<Props> = ({
fill: "white", fill: "white",
}} }}
cornerRadius={4} cornerRadius={4}
flyoutPadding={{ top: 4, bottom: 4, left: 16, right: 16 }} flyoutPadding={{ top: 4, bottom: 4, left: 10, right: 10 }}
/> />
} }
radius={50} radius={20}
voronoiBlacklist={ voronoiBlacklist={
[...Array(seriesList.length).keys()].map((i) => `line-${i}`) [...Array(seriesList.length).keys()].map((i) => `line-${i}`)
// see: https://github.com/FormidableLabs/victory/issues/545 // see: https://github.com/FormidableLabs/victory/issues/545
@ -161,10 +161,10 @@ export const InnerChart: React.FC<Props> = ({
}} }}
tickLabelComponent={ tickLabelComponent={
<VictoryLabel <VictoryLabel
dx={-40} dx={-10}
dy={0} dy={0}
angle={-30} angle={-30}
style={{ fontSize: 15, fill: "#777" }} style={{ fontSize: 10, fill: "#777" }}
/> />
} }
scale={{ x: "time" }} scale={{ x: "time" }}
@ -176,7 +176,7 @@ export const InnerChart: React.FC<Props> = ({
grid: { stroke: "#D3D3D3", strokeWidth: 0.5 }, grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
}} }}
tickLabelComponent={ tickLabelComponent={
<VictoryLabel dy={0} style={{ fontSize: 18, fill: "#777" }} /> <VictoryLabel dy={0} dx={5} style={{ fontSize: 9, fill: "#777" }} />
} }
// tickFormat specifies how ticks should be displayed // tickFormat specifies how ticks should be displayed
tickFormat={(x) => `${x * 100}%`} tickFormat={(x) => `${x * 100}%`}
@ -207,6 +207,7 @@ export const InnerChart: React.FC<Props> = ({
}) })
*/ */
} }
</VictoryChart> </VictoryChart>
); );
}; };

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 flex-col 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) => ({

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

@ -40,14 +40,14 @@ const EmbedQuestionPage: NextPage<Props> = ({ id }) => {
<Query document={QuestionPageDocument} variables={{ id }}> <Query document={QuestionPageDocument} variables={{ id }}>
{({ data: { result: question } }) => {({ data: { result: question } }) =>
question ? ( question ? (
<div className="flex flex-col p-4 "> <div className="flex flex-col pl-4 pt-2 ">
<QuestionTitle question={question} linkToMetaforecast={true} /> <QuestionTitle question={question} linkToMetaforecast={true} />
<div className="mb-5 mt-5"> <div className="mb-1 mt-1">
<QuestionInfoRow question={question} /> <QuestionInfoRow question={question} />
</div> </div>
<div className="mb-10"> <div className="mb-0">
<QuestionChartOrVisualization question={question} /> <QuestionChartOrVisualization question={question} />
</div> </div>
</div> </div>