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