open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use a stacked line graph for FR answers

Browse Source
This commit is contained in:
Austin Chen 2022-03-15 15:20:37 -07:00
parent 77b2c9893d
commit 958dc2b431
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/answers/answers-graph.tsx
View File

@ -43,10 +43,7 @@ export function AnswersGraph(props: {
const colors = ['#2a81e3', '#c72ae3', '#b91111', '#f3ad28', '#11b981']
const maxProb = _.max(
Object.values(probsByOutcome).map((probs) => Math.max(...probs))
)
const yMax = Math.min(100, Math.max(50, (maxProb ?? 0) * 100 * 1.2))
const yMax = 100
const times = _.sortBy([
contract.createdTime,
@ -100,7 +97,7 @@ export function AnswersGraph(props: {
>
<ResponsiveLine
data={data}
yScale={{ min: 0, max: yMax, type: 'linear' }}
yScale={{ min: 0, max: yMax, type: 'linear', stacked: true }}
yFormat={formatPercent}
gridYValues={yTickValues}
axisLeft={{
@ -117,11 +114,12 @@ export function AnswersGraph(props: {
tickValues: numXTickValues,
format: (time) => formatTime(+time, lessThanAWeek),
}}
colors={{ datum: 'color' }}
colors={{ scheme: 'pastel1' }}
pointSize={0}
enableSlices="x"
enableGridX={!!width && width >= 800}
enableArea
areaOpacity={1}
margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
/>
</div>