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 = { type PlotState = {
x: Array<number>, x: Array<number>,
y: Array<number>, y: Array<number>,
price_line: PriceLine h_price_line: PriceLine,
v_price_line: PriceLine
} }
class RPlot extends Component<{}, PlotState> { class RPlot extends Component<{}, PlotState> {
@ -32,7 +33,8 @@ class RPlot extends Component<{}, PlotState> {
state = { state = {
x: [], x: [],
y: [], 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() { componentDidMount() {
@ -43,11 +45,17 @@ class RPlot extends Component<{}, PlotState> {
this.setState({ this.setState({
x: data.ticks, x: data.ticks,
y: data.prices, y: data.prices,
price_line: { h_price_line: {
x0: 0, x0: 0,
y0: last_price, y0: last_price,
x1: last_tick, x1: last_tick,
y1: last_price 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({ this.setState({
x: x, x: x,
y: y, y: y,
price_line: { h_price_line: {
x0: 0, x0: 0,
y0: data.price, y0: data.price,
x1: data.tick, x1: data.tick,
y1: data.price 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, y: this.state.y,
type: 'scatter', type: 'scatter',
mode: 'lines+markers', mode: 'lines+markers',
"marker.colorbar": { tickformat: ".1f" } "marker.colorbar": { tickformat: "r" }
}, },
]} ]}
layout={{ layout={{
dragmode: "pan", autosize: true, shapes: [ margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 4
},
dragmode: "pan",
// autosize: true,
shapes: [
{ {
type: 'line', type: 'line',
x0: this.state.price_line.x0, x0: this.state.h_price_line.x0,
y0: this.state.price_line.y0, y0: this.state.h_price_line.y0,
x1: this.state.price_line.x1, x1: this.state.h_price_line.x1,
y1: this.state.price_line.y1, y1: this.state.h_price_line.y1,
line: { line: {
color: 'rgb(50, 171, 96)', color: 'rgb(50, 171, 96)',
width: 2, width: 2,
dash: 'dashdot' 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={{ config={{
scrollZoom: true, scrollZoom: true,