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

tweak: Make embedded chart more compressible

Browse Source 
Per pointers here:
<https://github.com/ForumMagnum/ForumMagnum/pull/6096#issuecomment-1317821272>
This commit is contained in:
NunoSempere 2022-11-17 18:19:24 +00:00
parent 67e4b825db
commit 0a7d2d160a
3 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,10 @@ import {
VictoryVoronoiContainer, VictoryVoronoiContainer,
} from "victory"; } from "victory";
import { chartColors, ChartData, ChartSeries, height, width } from "./utils"; import { chartColors, ChartData, ChartSeries, goldenRatio } from "./utils";
const height = 400
const width = height * goldenRatio
let dateFormat = "MMM do y"; // "yyyy-MM-dd" 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

2
src/web/questions/components/HistoryChart/utils.ts
View File

@ -18,7 +18,7 @@ export const chartColors = [
"#F59E0B", // amber-500 "#F59E0B", // amber-500
]; ];
const goldenRatio = (1 + Math.sqrt(5)) / 2; export const goldenRatio = (1 + Math.sqrt(5)) / 2;
// used both for chart and for ssr placeholder // used both for chart and for ssr placeholder
export const width = 750; export const width = 750;
export const height = width / goldenRatio; export const height = width / goldenRatio;

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

@ -40,7 +40,7 @@ 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="p-4"> <div className="flex flex-col p-4 ">
<QuestionTitle question={question} linkToMetaforecast={true} /> <QuestionTitle question={question} linkToMetaforecast={true} />
<div className="mb-5 mt-5"> <div className="mb-5 mt-5">