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

Step charts (#520)

Browse Source 
* Use step charts

* Fixed formatting

* Fixed flat line on right side of chart

* Tweaked chart margins

* Restored right margin
This commit is contained in:
ahalekelly 2022-06-16 20:51:48 -07:00 committed by GitHub
parent 2d3088bfc3
commit f063d5cd24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,12 +38,8 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
const isLargeWidth = !width || width > 800 const isLargeWidth = !width || width > 800
const labelLength = isLargeWidth ? 50 : 20 const labelLength = isLargeWidth ? 50 : 20
const endTime = // Add a fake datapoint so the line continues to the right
resolutionTime || isClosed const endTime = latestTime.valueOf()
? latestTime.valueOf()
: // Add a fake datapoint in future so the line continues horizontally
// to the right.
latestTime.add(1, 'month').valueOf()
const times = sortBy([ const times = sortBy([
createdTime, createdTime,
@ -108,11 +104,12 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
}} }}
colors={{ scheme: 'pastel1' }} colors={{ scheme: 'pastel1' }}
pointSize={0} pointSize={0}
curve="stepAfter"
enableSlices="x" enableSlices="x"
enableGridX={!!width && width >= 800} enableGridX={!!width && width >= 800}
enableArea enableArea
areaOpacity={1} areaOpacity={1}
margin={{ top: 20, right: 28, bottom: 22, left: 40 }} margin={{ top: 20, right: 20, bottom: 25, left: 40 }}
legends={[ legends={[
{ {
anchor: 'top-left', anchor: 'top-left',

19
web/components/contract/contract-prob-graph.tsx
View File

@ -34,15 +34,9 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
: resolutionTime ?? Date.now() : resolutionTime ?? Date.now()
) )
if (resolutionTime || isClosed) { // Add a fake datapoint so the line continues to the right
times.push(latestTime.toDate()) times.push(latestTime.toDate())
probs.push(probs[probs.length - 1]) probs.push(probs[probs.length - 1])
} else {
// Add a fake datapoint in future so the line continues horizontally
// to the right.
times.push(latestTime.add(1, 'month').toDate())
probs.push(probs[probs.length - 1])
}
const points = probs.map((prob, i) => ({ x: times[i], y: prob * 100 })) const points = probs.map((prob, i) => ({ x: times[i], y: prob * 100 }))
const data = [{ id: 'Yes', data: points, color: '#11b981' }] const data = [{ id: 'Yes', data: points, color: '#11b981' }]
@ -61,7 +55,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
return ( return (
<div <div
className="w-full overflow-hidden" className="w-full overflow-visible"
style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }} style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }}
> >
<ResponsiveLine <ResponsiveLine
@ -84,13 +78,14 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
format: (time) => formatTime(+time, lessThanAWeek), format: (time) => formatTime(+time, lessThanAWeek),
}} }}
colors={{ datum: 'color' }} colors={{ datum: 'color' }}
pointSize={bets.length > 100 ? 0 : 10} curve="stepAfter"
pointSize={0}
pointBorderWidth={1} pointBorderWidth={1}
pointBorderColor="#fff" pointBorderColor="#fff"
enableSlices="x" enableSlices="x"
enableGridX={!!width && width >= 800} enableGridX={!!width && width >= 800}
enableArea enableArea
margin={{ top: 20, right: 28, bottom: 22, left: 40 }} margin={{ top: 20, right: 20, bottom: 25, left: 40 }}
animate={false} animate={false}
/> />
</div> </div>