import React, {Component} from "react"; import {EventName, GetProfitLossMessage, NewTickMessage, PutProfitLossMessage} from "../types"; import {socket} from "../index"; import {DateTime} from "luxon"; type QuoteStatusProps = { percentage?: boolean, quote_symbol?: string, amount: number, subtitle: string, sign?: boolean } export class QuoteStatus extends Component { private whole: number; private decimal: number; private sign: string; private signClass: string; constructor(props) { super(props); this.deriveProps() } deriveProps() { this.whole = Math.abs(Math.trunc(this.props.amount)) this.decimal = Math.trunc(this.props.amount % 1 * 100) this.sign = this.props.amount > 0 ? "+" : "-" this.signClass = this.props.amount > 0 ? "text-green-500" : "text-red-500" } renderSign() { if (this.props.sign) { return ( {this.sign} ) } return null } symbolOrPercentageRender() { if (this.props.percentage) { return ( <> {this.renderSign()} {Math.abs(this.props.amount).toFixed(2)} % ) } else { return ( <> {this.renderSign()}{this.props.quote_symbol} {this.whole.toLocaleString()} .{Math.abs(this.decimal)} ) } } render() { return ( <>
{this.symbolOrPercentageRender()}
{this.props.subtitle}
) } } type DateButtonProps = { label: string, onClick: any, selected_default?: boolean } type DateButtonState = { selected: boolean, } class DateButton extends Component { private classSelected: string = "appearance-none py-4 text-blue-600 border-b border-blue-600 mr-3"; private classNotSelected: string = "appearance-none py-4 text-gray-600 border-b border-transparent hover:border-gray-800 mr-3"; private currentClass: string; state = { selected: this.props.selected_default } constructor(props) { super(props); this.updateClass() } onClick() { this.setState({selected: !this.state.selected}, this.updateClass) this.props.onClick() } updateClass() { this.currentClass = this.state.selected ? this.classSelected : this.classNotSelected } render() { return ( ) } } const PeriodUnit = { SECOND: "second", MINUTE: "minute", HOUR: "hour", DAY: "day", WEEK: "week", MONTH: "month", YEAR: "year" } type StatusBarState = { pl_period_unit: string, pl_period_amount: number, pl: number, pl_perc: number } export class Statusbar extends Component { constructor(props) { super(props); this.state = { pl_period_unit: PeriodUnit.WEEK, pl_period_amount: 1, pl: 0.0, pl_perc: 0.0 } this.emitGetProfitLoss = this.emitGetProfitLoss.bind(this) } componentDidMount() { socket.on(EventName.PutProfitLoss, (data: PutProfitLossMessage) => { this.setState({ pl: data.pl, pl_perc: data.pl_perc }) }) socket.on(EventName.FirstConnect, this.emitGetProfitLoss) socket.on(EventName.NewTick, this.emitGetProfitLoss) } durationObjectfromStr(str: string) { switch (str) { case PeriodUnit.MINUTE: return { minutes: this.state.pl_period_amount } case PeriodUnit.HOUR: return { hours: this.state.pl_period_amount } case PeriodUnit.DAY: return { days: this.state.pl_period_amount } case PeriodUnit.WEEK: return { weeks: this.state.pl_period_amount } case PeriodUnit.MONTH: return { months: this.state.pl_period_amount } case PeriodUnit.YEAR: return { years: this.state.pl_period_amount } default: return {} } } emitGetProfitLoss() { const message: GetProfitLossMessage = { start: DateTime.local().minus(this.durationObjectfromStr(this.state.pl_period_unit)).toMillis(), end: DateTime.local().toMillis() } socket.emit(EventName.GetProfitLoss, message) } changeProfitLossPeriod(amount: number, unit: string) { this.setState({ pl_period_amount: amount, pl_period_unit: unit }, this.emitGetProfitLoss) } render() { return (
Price Charts
this.changeProfitLossPeriod(1, PeriodUnit.MINUTE)}/> this.changeProfitLossPeriod(1, PeriodUnit.DAY)}/> this.changeProfitLossPeriod(1, PeriodUnit.WEEK)}/> this.changeProfitLossPeriod(1, PeriodUnit.MONTH)}/> this.changeProfitLossPeriod(1, PeriodUnit.YEAR)}/> {/* this.changeProfitLossPeriod(1, PeriodUnit.MINUTE)}/>*/}
CA$ 21,404 .74
↑ CA$12,955.35 (154.16%)
) } }