From 782d376967f5e67e7ee32b37176a4174ebca0439 Mon Sep 17 00:00:00 2001 From: Giulio De Pasquale Date: Sun, 20 Dec 2020 12:06:31 +0000 Subject: [PATCH] added eventname enum, fixed x/y concatenation on plot --- websrc/components/App.tsx | 8 ++++---- websrc/components/RPlot.tsx | 14 +++++++------- websrc/types.ts | 6 ++++++ 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx index 9bd625f..0b75e53 100644 --- a/websrc/components/App.tsx +++ b/websrc/components/App.tsx @@ -1,6 +1,6 @@ import React, {Component} from "react"; 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 {symbolToPair} from "../utils"; import {Helmet} from "react-helmet"; @@ -37,7 +37,7 @@ class App extends Component<{}, AppState> { } componentDidMount() { - socket.on("first_connect", (data: FirstConnectMessage) => { + socket.on(EventName.FirstConnect, (data: FirstConnectMessage) => { this.setState({ current_price: data.prices[data.prices.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({ current_price: data.price, 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 if (!data.kind.toLowerCase().includes("new_tick")) { const new_event: EventProp = { diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx index 65341d5..5eba83a 100644 --- a/websrc/components/RPlot.tsx +++ b/websrc/components/RPlot.tsx @@ -2,7 +2,7 @@ import React, {Component} from "react" import Plot from "react-plotly.js" import {socket} from '../'; -import {NewTickMessage} from "../types"; +import {EventName, NewTickMessage} from "../types"; type FirstConnectData = { @@ -38,7 +38,7 @@ class RPlot extends Component<{}, PlotState> { } componentDidMount() { - socket.on("first_connect", (data: FirstConnectData) => { + socket.on(EventName.FirstConnect, (data: FirstConnectData) => { const last_tick = data.ticks[data.ticks.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 => { return { x0: 0, @@ -64,9 +64,9 @@ class RPlot extends Component<{}, PlotState> { } }) - this.setState({ - x: x, - y: y, + this.setState((state) => ({ + x: state.x.concat(data.tick), + y: state.y.concat(data.price), current_price_line: { x0: 0, y0: data.price, @@ -74,7 +74,7 @@ class RPlot extends Component<{}, PlotState> { y1: data.price }, positions_price_lines: position_price_lines - }) + })) }) } diff --git a/websrc/types.ts b/websrc/types.ts index b4d56a1..191a892 100644 --- a/websrc/types.ts +++ b/websrc/types.ts @@ -42,3 +42,9 @@ export type Currency = { short_name: string } +export enum EventName { + NewTick = "new_tick", + FirstConnect = "first_connect", + NewEvent = "new_event", +} +