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

tweak: charts

Browse Source
This commit is contained in:
NunoSempere 2022-04-19 11:57:07 -04:00
parent 93ffc838ee
commit ed19f8b391
2 changed files with 79 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/charts/view/[id].tsx
View File

@ -45,9 +45,11 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
const Chart: NextPage<Props> = ({ question, history }) => { const Chart: NextPage<Props> = ({ question, history }) => {
return ( return (
<Layout page={"chart"}> <Layout page={"chart"}>
<div className="w-6/12 mb-4 mt-8 flex flex-row justify-center items-center bg-white"> <div className="flex flex-col w-12/12 mb-4 mt-8 justify-center items-center self-center">
<div className="grid bg-white p-10">
<HistoryChart question={question} history={history} /> <HistoryChart question={question} history={history} />
</div> </div>
</div>
</Layout> </Layout>
); );
}; };

70
src/web/display/HistoryChart.tsx
View File

@ -33,10 +33,10 @@ const data0 = [
{ date: 9, probability: 0.7 }, { date: 9, probability: 0.7 },
]; ];
let l = 5; let l = 50;
const data = Array.from(Array(l).keys()).map((x) => ({ const data = Array.from(Array(l).keys()).map((x) => ({
date: x, date: x,
probability: x / l, probability: Math.abs(Math.sin((5 * x) / l)),
})); }));
let getDate = (x) => { let getDate = (x) => {
@ -51,15 +51,24 @@ let dataAsXy = data.map((datum) => ({
export const HistoryChart: React.FC<Props> = ({ question, history }) => { export const HistoryChart: React.FC<Props> = ({ question, history }) => {
return ( return (
<div className="">
<VictoryChart <VictoryChart
domainPadding={20} domainPadding={20}
theme={VictoryTheme.material} theme={VictoryTheme.material}
height={300} height={400}
width={500}
containerComponent={<VictoryVoronoiContainer />} containerComponent={<VictoryVoronoiContainer />}
domain={{ domain={{
y: [0, 1], y: [0, 1],
}} }}
> >
<VictoryLabel
text="Chart Title"
x={250}
y={25}
textAnchor="middle"
style={{ fontSize: 20 }}
/>
<VictoryGroup <VictoryGroup
color="darkblue" color="darkblue"
data={dataAsXy} data={dataAsXy}
@ -69,7 +78,7 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
pointerLength={0} pointerLength={0}
dy={-12} dy={-12}
style={{ style={{
fontSize: 9, fontSize: 16,
fill: "black", fill: "black",
strokeWidth: 0.05, strokeWidth: 0.05,
}} }}
@ -77,7 +86,7 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
stroke: "black", stroke: "black",
fill: "white", fill: "white",
}} }}
flyoutWidth={60} flyoutWidth={110}
cornerRadius={0} cornerRadius={0}
flyoutPadding={7} flyoutPadding={7}
/> />
@ -89,9 +98,9 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
<VictoryAxis <VictoryAxis
// tickValues specifies both the number of ticks and where // tickValues specifies both the number of ticks and where
// they are placed on the axis // they are placed on the axis
tickValues={data.map((datum) => datum.date)} // tickValues={dataAsXy.map((datum) => datum.x)}
tickCount={10} // tickFormat={dataAsXy.map((datum) => datum.x)}
tickFormat={dataAsXy.map((datum) => datum.x)} tickCount={7}
style={{ style={{
grid: { stroke: null, strokeWidth: 0.5 }, grid: { stroke: null, strokeWidth: 0.5 },
}} }}
@ -99,7 +108,7 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
<VictoryLabel <VictoryLabel
dy={0} dy={0}
angle={-30} angle={-30}
style={{ fontSize: 7, fill: "gray" }} style={{ fontSize: 12, fill: "gray" }}
/> />
} }
/> />
@ -110,46 +119,11 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
style={{ style={{
grid: { stroke: "#D3D3D3", strokeWidth: 0.5 }, grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
}} }}
tickLabelComponent={
<VictoryLabel dy={0} style={{ fontSize: 12, fill: "gray" }} />
}
/> />
</VictoryChart> </VictoryChart>
</div>
); );
}; };
/*
<VictoryChart
// domainPadding will add space to each side of VictoryBar to
// prevent it from overlapping the axis
domainPadding={20}
theme={VictoryTheme.material}
height={300}
title={"Blah"}
containerComponent={<VictoryVoronoiContainer />}
>
<VictoryGroup
data={data.map((datum) => ({ x: datum.date, y: datum.probability }))}
labels={data.map((datum) => `1%`)}
style={{ labels: { fill: "black", fontSize: 10 } }}
labelComponent={
<VictoryTooltip style={{ fontSize: 10, fill: "black" }} dy={-15} />
}
>
<VictoryLine
height={300}
width={300}
style={{
data: { stroke: "#000080" },
parent: { border: "1px solid #ccc" },
}}
domain={{
y: [0, 1],
}}
></VictoryLine>
<VictoryScatter
style={{
data: { fill: "#000080" },
}}
size={3}
/>
</VictoryGroup>
</VictoryChart>
*/