add limit to the order table

apps/backtest-report/components/OrderListTable.tsx

@@ -1,15 +1,18 @@
-import {Checkbox, Group, Table} from "@mantine/core";
+import {Button, Checkbox, Group, Table} from "@mantine/core";
 import React, {useState} from "react";
 import {Order} from "../types";
 
 interface OrderListTableProps {
   orders: Order[];
   onClick?: (order: Order) => void;
+  limit?: number;
 }
 
 const OrderListTable = (props: OrderListTableProps) => {
   let orders = props.orders;
+
   const [showCanceledOrders, setShowCanceledOrders] = useState(false);
+  const [limit, setLimit] = useState(props.limit || 5);
 
   if (!showCanceledOrders) {
     orders = orders.filter((order: Order) => {
@@ -17,6 +20,10 @@ const OrderListTable = (props: OrderListTableProps) => {
     })
   }
 
+  if (orders.length > limit) {
+    orders = orders.slice(0, limit)
+  }
+
   const rows = orders.map((order: Order) => (
     <tr key={order.order_id} onClick={(e) => {
       props.onClick ? props.onClick(order) : null;
@@ -41,23 +48,25 @@ const OrderListTable = (props: OrderListTableProps) => {
     <Group>
       <Checkbox label="Show Canceled" checked={showCanceledOrders}
                 onChange={(event) => setShowCanceledOrders(event.currentTarget.checked)}/>
-
+      <Button onClick={() => {
+        setLimit(limit + 500)
+      }}>Load More</Button>
     </Group>
     <Table highlightOnHover striped>
-    <thead>
-    <tr>
-      <th>Order ID</th>
-      <th>Symbol</th>
-      <th>Side</th>
-      <th>Order Type</th>
-      <th>Price</th>
-      <th>Quantity</th>
-      <th>Status</th>
-      <th>Creation Time</th>
-    </tr>
-    </thead>
-    <tbody>{rows}</tbody>
-  </Table>
+      <thead>
+      <tr>
+        <th>Order ID</th>
+        <th>Symbol</th>
+        <th>Side</th>
+        <th>Order Type</th>
+        <th>Price</th>
+        <th>Quantity</th>
+        <th>Status</th>
+        <th>Creation Time</th>
+      </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </Table>
   </div>
 }
 

apps/backtest-report/components/TimeRangeSlider/index.scss

@@ -10,7 +10,7 @@ $react-time-range--track--disabled: repeating-linear-gradient( -45deg, transpare
 
 .react_time_range__time_range_container {
   padding: 30px 52px 0 52px;
-  height: 70px;
+  height: 90px;
   // width: 90%;
   box-sizing: border-box;
 }