Hotfix/ table fixes (OpenBB-finance#4848)

* Update helper_funcs.py * init * Update test_display_cashflow_comparison.txt * Update test_display_cashflow_comparison.txt * fix copy paste fail * Update helper_funcs.py * Update backend.py
jbhurat · Apr 21, 2023 · 98ec295 · 98ec295
1 parent 3d243b3
commit 98ec295
Show file tree

Hide file tree

Showing 13 changed files with 293 additions and 130 deletions.
diff --git a/frontend-components/tables/package-lock.json b/frontend-components/tables/package-lock.json
diff --git a/frontend-components/tables/package.json b/frontend-components/tables/package.json
@@ -37,6 +37,7 @@
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-table": "^7.7.14",
+    "@types/wicg-file-system-access": "^2020.9.6",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",

diff --git a/frontend-components/tables/src/components/Table/ColumnHeader.tsx b/frontend-components/tables/src/components/Table/ColumnHeader.tsx
@@ -1,8 +1,10 @@
 import { flexRender } from "@tanstack/react-table";
 import clsx from "clsx";
 import { FC } from "react";
+import { includesDateNames } from "../../utils/utils";
 import { useDrag, useDrop } from "react-dnd";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+
 function Filter({
   column,
   table,
@@ -29,9 +31,15 @@ function Filter({
 
   const columnFilterValue = column.getFilterValue();
 
-  const isProbablyDate =
-    column.id.toLowerCase().includes("date") ||
-    (column.id.toLowerCase() === "index" && !valuesContainStringWithSpaces);
+  const isProbablyDate = values.every((value) => {
+    if (typeof value !== "string") return false;
+    const only_numbers = value.replace(/[^0-9]/g, "");
+    return (
+      only_numbers.length >= 4 &&
+      (includesDateNames(column.id) ||
+        (column.id.toLowerCase() === "index" && !valuesContainStringWithSpaces))
+    );
+  });
 
   if (isProbablyDate) {
     function getTime(value) {

diff --git a/frontend-components/tables/src/components/Table/index.tsx b/frontend-components/tables/src/components/Table/index.tsx
@@ -11,7 +11,12 @@ import clsx from "clsx";
 import { useMemo, useRef, useState } from "react";
 import { useVirtual } from "react-virtual";
 import Select from "../Select";
-import { formatNumberMagnitude, fuzzyFilter, isEqual } from "../../utils/utils";
+import {
+  formatNumberMagnitude,
+  fuzzyFilter,
+  isEqual,
+  includesDateNames,
+} from "../../utils/utils";
 import DraggableColumnHeader from "./ColumnHeader";
 import Pagination, { validatePageSize } from "./Pagination";
 import Export from "./Export";
@@ -39,20 +44,24 @@ function getCellWidth(row, column) {
     const indexValue = indexLabel ? row[indexLabel] : null;
     const value = row[column];
     const valueType = typeof value;
+    const only_numbers = value?.toString().replace(/[^0-9]/g, "");
+
     const probablyDate =
-      column.toLowerCase().includes("date") ||
-      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")));
+      only_numbers.length >= 4 &&
+      (includesDateNames(column) ||
+        column.toLowerCase() === "index" ||
+        (indexValue &&
+          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"))));
 
     const probablyLink = valueType === "string" && value.startsWith("http");
     if (probablyLink) {
@@ -165,16 +174,17 @@ export default function Table({
           const indexValue = indexLabel ? row.original[indexLabel] : null;
           const value = row.original[column];
           const valueType = typeof value;
+          const only_numbers = value?.toString().replace(/[^0-9]/g, "");
           const probablyDate =
-            column.toLowerCase().includes("date") ||
-            column.toLowerCase().includes("timestamp") ||
-            column.toLowerCase() === "index" ||
-            (indexValue &&
-              typeof indexValue == "string" &&
-              (indexValue.toLowerCase().includes("date") ||
-                indexValue.toLowerCase().includes("time") ||
-                indexValue.toLowerCase().includes("timestamp") ||
-                indexValue.toLowerCase().includes("year")));
+            only_numbers.length >= 4 &&
+            (includesDateNames(column) ||
+              column.toLowerCase() === "index" ||
+              (indexValue &&
+                typeof indexValue == "string" &&
+                (indexValue.toLowerCase().includes("date") ||
+                  indexValue.toLowerCase().includes("time") ||
+                  indexValue.toLowerCase().includes("timestamp") ||
+                  indexValue.toLowerCase().includes("year"))));
 
           const probablyLink =
             valueType === "string" && value.startsWith("http");
@@ -193,7 +203,16 @@ export default function Table({
           }
           if (probablyDate) {
             if (typeof value === "string") {
-              return <p>{value}</p>;
+              const date = value.split("T")[0];
+              const time = value.split("T")[1]?.split(".")[0];
+              if (time === "00:00:00") {
+                return <p>{date}</p>;
+              }
+              return (
+                <p>
+                  {date} {time}
+                </p>
+              );
             }
 
             if (typeof value === "number") {

diff --git a/frontend-components/tables/src/index.css b/frontend-components/tables/src/index.css
@@ -95,3 +95,23 @@ tr {
     opacity: 1;
   }
 }
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}
diff --git a/frontend-components/tables/src/utils/utils.ts b/frontend-components/tables/src/utils/utils.ts
@@ -3,25 +3,28 @@ import domtoimage from "dom-to-image";
 import { utils, writeFile } from "xlsx";
 
 export function formatNumberMagnitude(number: number) {
-  if (number < 10) {
-    return number.toFixed(4);
-  } else if (number < 100) {
-    return number.toFixed(3);
-  } else if (number < 1000) {
-    return number.toFixed(2);
+  if (number % 1 !== 0) {
+    const decimalPlaces = Math.max(2, number.toString().split(".")[1].length);
+    const toFixed = Math.min(4, decimalPlaces);
+    if (number < 1000) {
+      return number.toFixed(toFixed) || 0;
+    }
   }
-  const abs = Math.abs(number);
-  if (abs >= 1000000000000) {
-    return `${(number / 1000000000).toFixed(2)}T`;
-  } else if (abs >= 1000000000) {
-    return `${(number / 1000000000).toFixed(2)}B`;
-  } else if (abs >= 1000000) {
-    return `${(number / 1000000).toFixed(2)}M`;
-  } else if (abs >= 1000) {
-    return `${(number / 1000).toFixed(2)}K`;
-  } else {
-    return number.toFixed(2);
+
+  if (number > 1000) {
+    const magnitude = Math.min(4, Math.floor(Math.log10(Math.abs(number)) / 3));
+    const suffix = ["", "K", "M", "B", "T"][magnitude];
+    const formatted = (number / 10 ** (magnitude * 3)).toFixed(2);
+    return `${formatted} ${suffix}`;
   }
+
+  return number;
+}
+
+export function includesDateNames(column: string) {
+  return ["date", "day", "time", "timestamp", "year"].some((dateName) =>
+    column.toLowerCase().includes(dateName)
+  );
 }
 
 export function isEqual(a: any, b: any) {
@@ -46,7 +49,82 @@ export const fuzzyFilter = (
   return itemRank;
 };
 
-export const saveToFile = (blob: Blob, fileName: string) => {
+const writeFileHandler = async ({
+  fileHandle,
+  blob,
+}: {
+  fileHandle?: FileSystemFileHandle | null;
+  blob: Blob;
+}) => {
+  if (!fileHandle) {
+    throw new Error("Cannot access filesystem");
+  }
+  const writer = await fileHandle.createWritable();
+  await writer.write(blob);
+  await writer.close();
+};
+
+const IMAGE_TYPE: FilePickerAcceptType[] = [
+  {
+    description: "PNG Image",
+    accept: {
+      "image/png": [".png"],
+    },
+  },
+  {
+    description: "JPEG Image",
+    accept: {
+      "image/jpeg": [".jpeg"],
+    },
+  },
+  {
+    description: "SVG Image",
+    accept: {
+      "image/svg+xml": [".svg"],
+    },
+  },
+];
+
+const getNewFileHandle = ({
+  filename,
+  is_image,
+}: {
+  filename: string;
+  is_image?: boolean;
+}): Promise<FileSystemFileHandle | null> => {
+  if ("showSaveFilePicker"! in window) {
+    return new Promise((resolve) => {
+      resolve(null);
+    });
+  }
+
+  const opts: SaveFilePickerOptions = {
+    suggestedName: filename,
+    types: is_image
+      ? IMAGE_TYPE
+      : [
+          {
+            description: "CSV File",
+            accept: {
+              "image/csv": [".csv"],
+            },
+          },
+        ],
+    excludeAcceptAllOption: true,
+  };
+
+  return showSaveFilePicker(opts);
+};
+
+export const saveToFile = (
+  blob: Blob,
+  fileName: string,
+  fileHandle?: FileSystemFileHandle | null
+) => {
+  if ("showSaveFilePicker" in window) {
+    return writeFileHandler({ fileHandle, blob });
+  }
+
   const url = URL.createObjectURL(blob);
   const link = document.createElement("a");
   link.setAttribute("href", url);
@@ -63,21 +141,33 @@ export const downloadData = (type: "csv" | "xlsx", columns: any, data: any) => {
     headers.map((column: any) => row[column])
   );
   const csvData = [headers, ...rows];
+
   if (type === "csv") {
     const csvContent = csvData.map((e) => e.join(",")).join("\n");
     const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-    saveToFile(blob, `${window.title}.csv`);
-  } else {
-    const wb = utils.book_new();
-    const ws = utils.aoa_to_sheet(csvData);
-    utils.book_append_sheet(wb, ws, "Sheet1");
-    writeFile(wb, `${window.title}.xlsx`);
+    const filename = `${window.title}.csv`;
+    return getNewFileHandle({
+      filename: filename,
+    }).then((fileHandle) => {
+      saveToFile(blob, filename, fileHandle);
+    });
   }
+
+  const wb = utils.book_new();
+  const ws = utils.aoa_to_sheet(csvData);
+  utils.book_append_sheet(wb, ws, "Sheet1");
+  writeFile(wb, `${window.title}.xlsx`);
 };
 
 export const downloadImage = (id: string) => {
   const table = document.getElementById(id);
-  domtoimage.toBlob(table).then(function (blob) {
-    saveToFile(blob, `${window.title}.png`);
+  const filename = `${window.title}.png`;
+  getNewFileHandle({
+    filename: filename,
+    is_image: true,
+  }).then((fileHandle) => {
+    domtoimage.toBlob(table).then(function (blob: Blob) {
+      saveToFile(blob, filename, fileHandle);
+    });
   });
 };
diff --git a/openbb_terminal/alternative/covid/covid_model.py b/openbb_terminal/alternative/covid/covid_model.py
@@ -110,7 +110,7 @@ def get_covid_ov(
         return pd.DataFrame()
     data = pd.concat([cases, deaths], axis=1)
     data.columns = ["Cases", "Deaths"]
-    data.index = [x.strftime("%Y-%m-%d") for x in data.index]
+    data.index = pd.to_datetime(data.index, format="%Y-%m-%d")
     return data
 
 

diff --git a/openbb_terminal/core/plots/backend.py b/openbb_terminal/core/plots/backend.py
@@ -262,13 +262,13 @@ def send_table(
         # pylint: disable=C0415
         from openbb_terminal.helper_funcs import command_location
 
-        json_data = json.loads(df_table.to_json(orient="split"))
+        json_data = json.loads(df_table.to_json(orient="split", date_format="iso"))
         json_data.update(
             dict(
                 title=title,
                 source=source or "",
                 theme=theme or "dark",
-                command_location=command_location or "",
+                command_location=command_location,
             )
         )
 
@@ -279,7 +279,7 @@ def send_table(
                     "json_data": json.dumps(json_data),
                     "width": width,
                     "height": self.HEIGHT - 100,
-                    **self.get_kwargs(title),
+                    **self.get_kwargs(command_location),
                 }
             )
         )