From 1718c37751d4109d37455344b3aa7977e2d4fe2f Mon Sep 17 00:00:00 2001 From: Giulio De Pasquale Date: Mon, 14 Dec 2020 15:37:12 +0000 Subject: [PATCH] added dashed line on last price --- websrc/components/RPlot.tsx | 50 +++++++++++++++++++++++++++++++++---- 1 file changed, 45 insertions(+), 5 deletions(-) diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx index ea36df8..a03ed19 100644 --- a/websrc/components/RPlot.tsx +++ b/websrc/components/RPlot.tsx @@ -10,9 +10,18 @@ type FirstConnectData = { prices: Array } + +type PriceLine = { + x0: number, + y0: number, + x1: number, + y1: number +} + type PlotState = { x: Array, - y: Array + y: Array, + price_line: PriceLine } class RPlot extends Component<{}, PlotState> { @@ -22,14 +31,24 @@ class RPlot extends Component<{}, PlotState> { state = { x: [], - y: [] + y: [], + price_line: { x0: 0, x1: 0, y0: 0, y1: 0 } } componentDidMount() { 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({ 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({ x: x, 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, type: 'scatter', 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={{ scrollZoom: true, displayModeBar: false,