added eventname enum, fixed x/y concatenation on plot

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 = {

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
-            })
+            }))
         })
     }
 

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",
+}
+