rustico/core
2
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

improved plot with dashed line and better formatting

Browse Source
This commit is contained in:
Giulio De Pasquale 2020-12-14 16:02:01 +00:00
parent 1718c37751
commit d72421eeb2
1 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
websrc/components/RPlot.tsx
View File

@ -21,7 +21,8 @@ type PriceLine = {
type PlotState = {
x: Array<number>,
y: Array<number>,
price_line: PriceLine
h_price_line: PriceLine,
v_price_line: PriceLine
}
class RPlot extends Component<{}, PlotState> {
@ -32,7 +33,8 @@ class RPlot extends Component<{}, PlotState> {
state = {
x: [],
y: [],
price_line: { x0: 0, x1: 0, y0: 0, y1: 0 }
h_price_line: { x0: 0, x1: 0, y0: 0, y1: 0 },
v_price_line: { x0: 0, x1: 0, y0: 0, y1: 0 },
}
componentDidMount() {
@ -43,11 +45,17 @@ class RPlot extends Component<{}, PlotState> {
this.setState({
x: data.ticks,
y: data.prices,
price_line: {
h_price_line: {
x0: 0,
y0: last_price,
x1: last_tick,
y1: last_price
},
v_price_line: {
x0: last_tick,
y0: 0,
x1: last_tick,
y1: last_price
}
})
})
@ -63,11 +71,17 @@ class RPlot extends Component<{}, PlotState> {
this.setState({
x: x,
y: y,
price_line: {
h_price_line: {
x0: 0,
y0: data.price,
x1: data.tick,
y1: data.price
},
v_price_line: {
x0: data.tick,
y0: 0,
x1: data.tick,
y1: data.price
}
})
})
@ -82,24 +96,54 @@ class RPlot extends Component<{}, PlotState> {
y: this.state.y,
type: 'scatter',
mode: 'lines+markers',
"marker.colorbar": { tickformat: ".1f" }
"marker.colorbar": { tickformat: "r" }
},
]}
layout={{
dragmode: "pan", autosize: true, shapes: [
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 4
},
dragmode: "pan",
// autosize: true,
shapes: [
{
type: 'line',
x0: this.state.price_line.x0,
y0: this.state.price_line.y0,
x1: this.state.price_line.x1,
y1: this.state.price_line.y1,
x0: this.state.h_price_line.x0,
y0: this.state.h_price_line.y0,
x1: this.state.h_price_line.x1,
y1: this.state.h_price_line.y1,
line: {
color: 'rgb(50, 171, 96)',
width: 2,
dash: 'dashdot'
}
},
]
],
xaxis: {
title: {
text: 'Tick',
font: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
},
yaxis: {
title: {
text: 'Price',
font: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
tickformat: 'r',
}
}}
config={{
scrollZoom: true,