From 11dacbc2cd27b093cb5a61ea0af878d943684f65 Mon Sep 17 00:00:00 2001
From: c9s <yoanlin93@gmail.com>
Date: Mon, 27 Jun 2022 18:20:26 +0800
Subject: [PATCH] show order tag in the order list

---
 apps/backtest-report/components/OrderListTable.tsx   | 12 ++++++++++--
 apps/backtest-report/components/TradingViewChart.tsx |  6 +++++-
 apps/backtest-report/types/order.ts                  |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/backtest-report/components/OrderListTable.tsx b/apps/backtest-report/components/OrderListTable.tsx
index 09dee9f34..4e075b490 100644
--- a/apps/backtest-report/components/OrderListTable.tsx
+++ b/apps/backtest-report/components/OrderListTable.tsx
@@ -1,6 +1,7 @@
 import {Button, Checkbox, Group, Table} from "@mantine/core";
 import React, {useState} from "react";
 import {Order} from "../types";
+import moment from "moment";
 
 interface OrderListTableProps {
   orders: Order[];
@@ -12,7 +13,7 @@ const OrderListTable = (props: OrderListTableProps) => {
   let orders = props.orders;
 
   const [showCanceledOrders, setShowCanceledOrders] = useState(false);
-  const [limit, setLimit] = useState(props.limit || 5);
+  const [limit, setLimit] = useState(props.limit || 100);
 
   if (!showCanceledOrders) {
     orders = orders.filter((order: Order) => {
@@ -40,7 +41,8 @@ const OrderListTable = (props: OrderListTableProps) => {
       <td>{order.price}</td>
       <td>{order.quantity}</td>
       <td>{order.status}</td>
-      <td>{order.creation_time.toString()}</td>
+      <td>{formatDate(order.creation_time)}</td>
+      <td>{order.tag}</td>
     </tr>
   ));
 
@@ -63,6 +65,7 @@ const OrderListTable = (props: OrderListTableProps) => {
         <th>Quantity</th>
         <th>Status</th>
         <th>Creation Time</th>
+        <th>Tag</th>
       </tr>
       </thead>
       <tbody>{rows}</tbody>
@@ -70,4 +73,9 @@ const OrderListTable = (props: OrderListTableProps) => {
   </div>
 }
 
+const formatDate = (d : Date) : string => {
+  return moment(d).format("MMM Do YY hh:mm:ss A Z");
+}
+
+
 export default OrderListTable;
diff --git a/apps/backtest-report/components/TradingViewChart.tsx b/apps/backtest-report/components/TradingViewChart.tsx
index 9bc0cbc0a..426286bf0 100644
--- a/apps/backtest-report/components/TradingViewChart.tsx
+++ b/apps/backtest-report/components/TradingViewChart.tsx
@@ -657,6 +657,10 @@ const createLegendUpdater = (legend: HTMLDivElement, prefix: string) => {
   }
 }
 
+const formatDate = (d : Date) : string => {
+  return moment(d).format("MMM Do YY hh:mm:ss A Z");
+}
+
 const createOHLCLegendUpdater = (legend: HTMLDivElement, prefix: string) => {
   return (param: any, time : any) => {
     if (param) {
@@ -664,7 +668,7 @@ const createOHLCLegendUpdater = (legend: HTMLDivElement, prefix: string) => {
       const changePercentage = Math.round((param.close - param.open) / param.close * 10000.0) / 100.0;
       const ampl = Math.round((param.high - param.low) / param.low * 10000.0) / 100.0;
       const t = new Date(time * 1000);
-      const dateStr = moment(t).format("MMM Do YY hh:mm:ss A Z");
+      const dateStr = formatDate(t);
       legend.innerHTML = prefix + ` O: ${param.open} H: ${param.high} L: ${param.low} C: ${param.close} CHG: ${change} (${changePercentage}%) AMP: ${ampl}% T: ${dateStr}`;
     } else {
       legend.innerHTML = prefix + ' O: - H: - L: - C: - T: -';
diff --git a/apps/backtest-report/types/order.ts b/apps/backtest-report/types/order.ts
index b9045ccd4..1f96cdfa4 100644
--- a/apps/backtest-report/types/order.ts
+++ b/apps/backtest-report/types/order.ts
@@ -11,4 +11,5 @@ export interface Order {
   update_time: Date;
   creation_time: Date;
   time?: Date;
+  tag?: string;
 }