added eventname enum, fixed x/y concatenation on plot

This commit is contained in:
Giulio De Pasquale 2020-12-20 12:06:31 +00:00
parent a8d8d1ec43
commit 782d376967
3 changed files with 17 additions and 11 deletions

View File

@ -1,6 +1,6 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {EventProp} from "./Events"; import {EventProp} from "./Events";
import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types"; import {CurrencyPair, EventName, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types";
import {socket} from "../index"; import {socket} from "../index";
import {symbolToPair} from "../utils"; import {symbolToPair} from "../utils";
import {Helmet} from "react-helmet"; import {Helmet} from "react-helmet";
@ -37,7 +37,7 @@ class App extends Component<{}, AppState> {
} }
componentDidMount() { componentDidMount() {
socket.on("first_connect", (data: FirstConnectMessage) => { socket.on(EventName.FirstConnect, (data: FirstConnectMessage) => {
this.setState({ this.setState({
current_price: data.prices[data.prices.length - 1], current_price: data.prices[data.prices.length - 1],
current_tick: data.ticks[data.ticks.length - 1], current_tick: data.ticks[data.ticks.length - 1],
@ -46,7 +46,7 @@ class App extends Component<{}, AppState> {
}) })
}) })
socket.on("new_tick", (data: NewTickMessage) => { socket.on(EventName.NewTick, (data: NewTickMessage) => {
this.setState({ this.setState({
current_price: data.price, current_price: data.price,
current_tick: data.tick, current_tick: data.tick,
@ -55,7 +55,7 @@ class App extends Component<{}, AppState> {
}) })
}) })
socket.on("new_event", (data: NewEventMessage) => { socket.on(EventName.NewEvent, (data: NewEventMessage) => {
// ignore new tick // ignore new tick
if (!data.kind.toLowerCase().includes("new_tick")) { if (!data.kind.toLowerCase().includes("new_tick")) {
const new_event: EventProp = { const new_event: EventProp = {

View File

@ -2,7 +2,7 @@ import React, {Component} from "react"
import Plot from "react-plotly.js" import Plot from "react-plotly.js"
import {socket} from '../'; import {socket} from '../';
import {NewTickMessage} from "../types"; import {EventName, NewTickMessage} from "../types";
type FirstConnectData = { type FirstConnectData = {
@ -38,7 +38,7 @@ class RPlot extends Component<{}, PlotState> {
} }
componentDidMount() { componentDidMount() {
socket.on("first_connect", (data: FirstConnectData) => { socket.on(EventName.FirstConnect, (data: FirstConnectData) => {
const last_tick = data.ticks[data.ticks.length - 1]; const last_tick = data.ticks[data.ticks.length - 1];
const last_price = data.prices[data.prices.length - 1]; const last_price = data.prices[data.prices.length - 1];
@ -54,7 +54,7 @@ class RPlot extends Component<{}, PlotState> {
}) })
}) })
socket.on("new_tick", (data: NewTickMessage) => { socket.on(EventName.NewTick, (data: NewTickMessage) => {
const position_price_lines = data.positions.map((pstat): PriceLine => { const position_price_lines = data.positions.map((pstat): PriceLine => {
return { return {
x0: 0, x0: 0,
@ -64,9 +64,9 @@ class RPlot extends Component<{}, PlotState> {
} }
}) })
this.setState({ this.setState((state) => ({
x: x, x: state.x.concat(data.tick),
y: y, y: state.y.concat(data.price),
current_price_line: { current_price_line: {
x0: 0, x0: 0,
y0: data.price, y0: data.price,
@ -74,7 +74,7 @@ class RPlot extends Component<{}, PlotState> {
y1: data.price y1: data.price
}, },
positions_price_lines: position_price_lines positions_price_lines: position_price_lines
}) }))
}) })
} }

View File

@ -42,3 +42,9 @@ export type Currency = {
short_name: string short_name: string
} }
export enum EventName {
NewTick = "new_tick",
FirstConnect = "first_connect",
NewEvent = "new_event",
}