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

added dashed line on last price

Browse Source
This commit is contained in:
Giulio De Pasquale 2020-12-14 15:37:12 +00:00
parent dfc9adcd9f
commit 1718c37751
1 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
websrc/components/RPlot.tsx
View File

@ -10,9 +10,18 @@ type FirstConnectData = {
prices: Array<number> prices: Array<number>
} }
type PriceLine = {
x0: number,
y0: number,
x1: number,
y1: number
}
type PlotState = { type PlotState = {
x: Array<number>, x: Array<number>,
y: Array<number> y: Array<number>,
price_line: PriceLine
} }
class RPlot extends Component<{}, PlotState> { class RPlot extends Component<{}, PlotState> {
@ -22,14 +31,24 @@ class RPlot extends Component<{}, PlotState> {
state = { state = {
x: [], x: [],
y: [] y: [],
price_line: { x0: 0, x1: 0, y0: 0, y1: 0 }
} }
componentDidMount() { componentDidMount() {
socket.on("first_connect", (data: FirstConnectData) => { socket.on("first_connect", (data: FirstConnectData) => {
var last_tick = data.ticks[data.ticks.length - 1]
var last_price = data.prices[data.prices.length - 1]
this.setState({ this.setState({
x: data.ticks, x: data.ticks,
y: data.prices y: data.prices,
price_line: {
x0: 0,
y0: last_price,
x1: last_tick,
y1: last_price
}
}) })
}) })
@ -44,6 +63,12 @@ class RPlot extends Component<{}, PlotState> {
this.setState({ this.setState({
x: x, x: x,
y: y, y: y,
price_line: {
x0: 0,
y0: data.price,
x1: data.tick,
y1: data.price
}
}) })
}) })
} }
@ -57,10 +82,25 @@ 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: ".1f" }
}, },
]} ]}
layout={{ dragmode: "pan", autosize: true }} layout={{
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,
line: {
color: 'rgb(50, 171, 96)',
width: 2,
dash: 'dashdot'
}
},
]
}}
config={{ config={{
scrollZoom: true, scrollZoom: true,
displayModeBar: false, displayModeBar: false,