table fixes (#4666)

* fix: table fixes * fix: tablaroni * fix: pagination protection * fix: dm much more * fix: colors * fix: colors * fix: colors * fix Timestamp on stocks `get_quote` * fix `call_tob` having `quote` as prog/docstring --------- Co-authored-by: teh_coderer <me@tehcoderer.com>
2026-10-27 04:31:13 +00:00 · 2023-04-04 14:29:33 +01:00
parent c87226e9b6
commit 52cf2f4d5f
7 changed files with 109 additions and 82 deletions
--- a/frontend-components/tables/src/components/Table/Pagination.tsx
+++ b/frontend-components/tables/src/components/Table/Pagination.tsx
@@ -1,8 +1,21 @@
 import clsx from "clsx";
-import { useState } from "react";
-import { DEFAULT_ROWS_PER_PAGE } from ".";
-import useLocalStorage from "../../utils/useLocalStorage";
 import Select from "../Select";
+import { DEFAULT_ROWS_PER_PAGE } from ".";
+
+export function validatePageSize(
+  pageSize: any
+) {
+  if (typeof pageSize !== "number") {
+    if (typeof pageSize === "string" && pageSize.includes("All")) {
+      return pageSize
+    }
+    return DEFAULT_ROWS_PER_PAGE
+  }
+  if (pageSize < 1) {
+    return DEFAULT_ROWS_PER_PAGE
+  }
+  return pageSize
+}

 export default function Pagination({
  table,
@@ -20,9 +33,11 @@ export default function Pagination({
      <Select
        value={currentPage}
        onChange={(value) => {
-          setCurrentPage(value);
-          if (value === `All (${totalRows})`) table.setPageSize(totalRows);
-          else table.setPageSize(value);
+          const newValue = validatePageSize(value)
+          console.log(newValue)
+          setCurrentPage(newValue);
+          if (newValue.toString().includes("All")) table.setPageSize(totalRows);
+          else table.setPageSize(newValue);
        }}
        labelType="row"
        label="Rows per page"
--- a/frontend-components/tables/src/components/Table/Timestamp.tsx
+++ b/frontend-components/tables/src/components/Table/Timestamp.tsx
@@ -40,7 +40,7 @@ export default function Timestamp() {
          </clipPath>
        </defs>
      </svg>
-      <span>
+      <span className="whitespace-nowrap">
        {minutesPassed > 0 ? `${minutesPassed} minutes ago` : "Just now"}
      </span>
    </div>
--- a/frontend-components/tables/src/components/Table/index.tsx
+++ b/frontend-components/tables/src/components/Table/index.tsx
@@ -13,7 +13,7 @@ import { useVirtual } from "react-virtual";
 import Select from "../Select";
 import { formatNumberMagnitude, fuzzyFilter, isEqual } from "../../utils/utils";
 import DraggableColumnHeader from "./ColumnHeader";
-import Pagination from "./Pagination";
+import Pagination, { validatePageSize } from "./Pagination";
 import Export from "./Export";
 import Timestamp from "./Timestamp";
 import FilterColumns from "./FilterColumns";
@@ -33,8 +33,8 @@ function getCellWidth(row, column) {
    const indexLabel = row.hasOwnProperty("index")
      ? "index"
      : row.hasOwnProperty("Index")
-      ? "Index"
-      : null;
+        ? "Index"
+        : null;
    const indexValue = indexLabel ? row[indexLabel] : null;
    const value = row[column];
    const valueType = typeof value;
@@ -115,7 +115,8 @@ export default function Table({
  };
  const [currentPage, setCurrentPage] = useLocalStorage(
    "rowsPerPage",
-    DEFAULT_ROWS_PER_PAGE
+    DEFAULT_ROWS_PER_PAGE,
+    validatePageSize
  );
  const [advanced, setAdvanced] = useLocalStorage("advanced", false);
  const [colors, setColors] = useLocalStorage("colors", false);
@@ -132,7 +133,7 @@ export default function Table({
  );

  const getColumnWidth = (rows, accessor, headerText) => {
-    const maxWidth = 400;
+    const maxWidth = 200;
    const magicSpacing = 12;
    const cellLength = Math.max(
      ...rows.map((row) => getCellWidth(row, accessor)),
@@ -153,25 +154,20 @@ export default function Table({
          const indexLabel = row.original.hasOwnProperty("index")
            ? "index"
            : row.original.hasOwnProperty("Index")
-            ? "Index"
-            : null;
+              ? "Index"
+              : columns[0]
          const indexValue = indexLabel ? row.original[indexLabel] : null;
          const value = row.original[column];
          const valueType = typeof value;
          const probablyDate =
-            column.toLowerCase().includes("date") ||
+            (column.toLowerCase().includes("date") || column.toLowerCase().includes("timestamp")) ||
            column.toLowerCase() === "index" ||
            (indexValue &&
              typeof indexValue == "string" &&
              (indexValue.toLowerCase().includes("date") ||
-                indexValue.toLowerCase().includes("day") ||
                indexValue.toLowerCase().includes("time") ||
                indexValue.toLowerCase().includes("timestamp") ||
-                indexValue.toLowerCase().includes("year") ||
-                indexValue.toLowerCase().includes("month") ||
-                indexValue.toLowerCase().includes("week") ||
-                indexValue.toLowerCase().includes("hour") ||
-                indexValue.toLowerCase().includes("minute")));
+                indexValue.toLowerCase().includes("year")));

          const probablyLink =
            valueType === "string" && value.startsWith("http");
@@ -193,6 +189,12 @@ export default function Table({
              return <p>{value}</p>;
            }

+            if (typeof value === "number") {
+              if (value < 1000000000000) {
+                return <p>{value}</p>
+              }
+            }
+
            try {
              const date = new Date(value);
              let dateFormatted = "";
@@ -257,6 +259,8 @@ export default function Table({
    return !isEqual(currentOrder, defaultOrder);
  }, [columnOrder, rtColumns]);

+  console.log(validatePageSize(currentPage))
+
  const table = useReactTable({
    data,
    columns: rtColumns,
@@ -279,7 +283,7 @@ export default function Table({
    initialState: {
      pagination: {
        pageIndex: 0,
-        pageSize: currentPage,
+        pageSize: typeof currentPage === "string" ? currentPage.includes("All") ? data.length : parseInt(currentPage) : currentPage,
      },
    },
  });
@@ -382,7 +386,7 @@ export default function Table({
                  toggleDarkMode(!darkMode);
                }}
              >
-                {darkMode ? (
+                {!darkMode ? (
                  <MoonIcon className="w-4 h-4" />
                ) : (
                  <SunIcon className="w-4 h-4" />
@@ -487,9 +491,9 @@ export default function Table({
                style={{
                  fontSize: `${Number(fontSize) * 100}%`,
                }}
-                /*style={{
-        width: table.getCenterTotalSize(),
-      }}*/
+              /*style={{
+      width: table.getCenterTotalSize(),
+    }}*/
              >
                <thead>
                  {table.getHeaderGroups().map((headerGroup) => (
@@ -528,7 +532,7 @@ export default function Table({
                            <td
                              key={cell.id}
                              className={clsx(
-                                "whitespace-nowrap overflow-auto p-4",
+                                "whitespace-normal p-4 text-black dark:text-white",
                                {
                                  "bg-grey-100 dark:bg-grey-850": idx % 2 === 0,
                                  "bg-grey-200 dark:bg-[#202020]":
@@ -571,9 +575,9 @@ export default function Table({
                            {header.isPlaceholder
                              ? null
                              : flexRender(
-                                  header.column.columnDef.footer,
-                                  header.getContext()
-                                )}
+                                header.column.columnDef.footer,
+                                header.getContext()
+                              )}
                          </th>
                        ))}
                      </tr>
@@ -584,7 +588,7 @@ export default function Table({
            </div>
          </div>
        </div>
-        <div className="fixed bg-white/70 dark:bg-grey-900/70 backdrop-filter backdrop-blur z-20 bottom-0 left-0 w-full flex gap-10 justify-between py-4 px-6">
+        <div className="max-h-[68px] overflow-x-auto fixed bg-white/70 dark:bg-grey-900/70 backdrop-filter backdrop-blur z-20 bottom-0 left-0 w-full flex gap-10 justify-between py-4 px-6">
          <Export columns={columns} data={data} />
          <div className="flex items-center gap-10">
            <Pagination
--- a/frontend-components/tables/src/utils/useLocalStorage.tsx
+++ b/frontend-components/tables/src/utils/useLocalStorage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";

-export default function useLocalStorage(key: string, initialValue: any) {
+export default function useLocalStorage(key: string, initialValue: any, validateFn?: (value: any) => any) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
@@ -11,7 +11,9 @@ export default function useLocalStorage(key: string, initialValue: any) {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
-      return item ? JSON.parse(item) : initialValue;
+      return item ?
+        validateFn ? validateFn(JSON.parse(item)) :
+          JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
--- a/openbb_terminal/core/plots/table.html
+++ b/openbb_terminal/core/plots/table.html
--- a/openbb_terminal/stocks/stocks_controller.py
+++ b/openbb_terminal/stocks/stocks_controller.py
@@ -266,11 +266,11 @@ class StocksController(StockBaseController):

    @log_start_end(log=logger)
    def call_tob(self, other_args: List[str]):
-        """Process quote command."""
+        """Process tob command."""
        parser = argparse.ArgumentParser(
            add_help=False,
            formatter_class=argparse.ArgumentDefaultsHelpFormatter,
-            prog="quote",
+            prog="tob",
            description="Get top of book for loaded ticker from selected exchange",
        )
        parser.add_argument(
--- a/openbb_terminal/stocks/stocks_model.py
+++ b/openbb_terminal/stocks/stocks_model.py
@@ -330,4 +330,10 @@ def get_quote(symbol: str) -> pd.DataFrame:
            df_fa.loc["Earnings announcement"][
                0
            ] = f"{earning_announcement.date()} {earning_announcement.time()}"
+        # Check if there is a valid timestamp and convert it to a readable format
+        if "Timestamp" in df_fa.index and df_fa.loc["Timestamp"][0]:
+            df_fa.loc["Timestamp"][0] = datetime.fromtimestamp(
+                df_fa.loc["Timestamp"][0]
+            ).strftime("%Y-%m-%d %H:%M:%S")
+
    return df_fa