diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx index a03ed19..f40cbef 100644 --- a/websrc/components/RPlot.tsx +++ b/websrc/components/RPlot.tsx @@ -21,7 +21,8 @@ type PriceLine = { type PlotState = { x: Array, y: Array, - 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,