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