;
- numberOfColumns: number;
-}) {
- function getTime(value: string | number | Date) {
- if (!value) return null;
- const datetime = new Date(value);
- const date = datetime.toISOString().split("T")[0];
- const time = datetime.toTimeString().split(" ")[0];
- return `${date} ${time}`;
- }
-
- const values = table.getPreFilteredRowModel().flatRows.map(
- (row: { getValue: (arg0: any) => any }) =>
- // @ts-ignore
- row.original[column.id],
- );
-
- const areAllValuesString = values.every(
- (value: null) => typeof value === "string" || value === null,
- );
-
- const areAllValuesNumber = values.every(
- (value: null | number | string) =>
- typeof value === "number" ||
- magnitudeRegex.test(value as string) ||
- value === null ||
- value === "",
- );
-
- const valuesContainStringWithSpaces = values.some(
- (value: string | string[]) =>
- typeof value === "string" && value.includes(" "),
- );
-
- const columnFilterValue = column.getFilterValue();
-
- let dateType = "date";
-
- const isProbablyDate = values.every((value: string) => {
- const only_numbers = value?.toString().replace(/[^0-9]/g, "").trim();
- if (isoDateRegex.test(value?.toString())) {
- dateType = "datetime-local";
- }
- if (isoYearRegex.test(value?.toString())) {
- dateType = "number";
- }
- return (
- only_numbers?.length >= 4 &&
- (includesDateNames(column.id) ||
- (column.id.toLowerCase() === "index" && !valuesContainStringWithSpaces))
- );
- });
-
- if (isProbablyDate && dateType === "number") {
- return (
-
- {
- column.setFilterValue((old: [string, string]) => [
- `${e.target.value}`,
- `${old?.[1]}`,
- ]);
- }}
- min={values.reduce(
- (acc: number, value: string) =>
- Math.min(acc, parseInt(value, 10)),
- Infinity,
- )}
- max={values.reduce(
- (acc: number, value: string) =>
- Math.max(acc, parseInt(value, 10)),
- -Infinity,
- )}
- placeholder={"Start year"}
- className="_input"
- title="Start year"
- />
- {
- column.setFilterValue((old: [string, string]) => [
- `${old?.[0]}`,
- `${e.target.value}`,
- ]);
- }}
- min={values.reduce(
- (acc: number, value: string) =>
- Math.min(acc, parseInt(value, 10)),
- Infinity,
- )}
- max={values.reduce(
- (acc: number, value: string) =>
- Math.max(acc, parseInt(value, 10)),
- -Infinity,
- )}
- placeholder={"End year"}
- className="_input"
- title="End year"
- />
-
- );
- }
-
- if (isProbablyDate && dateType !== "number") {
- return (
-
- {
- const value = new Date(e.target.value).getTime();
- column.setFilterValue((old: [string, string]) => [value, old?.[1]]);
- }}
- placeholder={"Start date"}
- className="_input"
- title="Start date"
- />
- {
- const value = new Date(e.target.value).getTime();
- column.setFilterValue((old: [string, string]) => [old?.[0], value]);
- }}
- placeholder={"End date"}
- className="_input"
- title="End date"
- />
-
- );
- }
-
- if (areAllValuesNumber) {
- return (
-
-
- column.setFilterValue((old: [number, number]) => [
- e.target.value,
- old?.[1],
- ])
- }
- placeholder={"Min"}
- className="_input p-0.5"
- title="Min"
- />
-
- column.setFilterValue((old: [number, number]) => [
- old?.[0],
- e.target.value,
- ])
- }
- placeholder={"Max"}
- className="_input p-0.5"
- title="Max"
- />
-
- );
- }
- if (areAllValuesString) {
- return (
-
- column.setFilterValue(e.target.value)}
- placeholder={"Search..."}
- className="_input"
- title="Search"
- />
-
- );
- }
- return ;
-}
-
-const reorderColumn = (
- draggedColumnId: string,
- targetColumnId: string,
- columnOrder: string[],
-) => {
- columnOrder.splice(
- columnOrder.indexOf(targetColumnId),
- 0,
- columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string,
- );
- return [...columnOrder];
-};
-
-const DraggableColumnHeader: FC<{
- header: any;
- table: any;
- advanced: boolean;
- idx: number;
- lockFirstColumn: boolean;
- setLockFirstColumn: (value: boolean) => void;
-}> = ({
- header,
- table,
- advanced,
- idx,
- lockFirstColumn,
- setLockFirstColumn,
-}) => {
- const { getState, setColumnOrder } = table;
- const { columnOrder } = getState();
- const { column } = header;
-
- const [, dropRef] = useDrop({
- accept: "column",
- drop: (draggedColumn: any) => {
- const newColumnOrder = reorderColumn(
- draggedColumn.id,
- column.id,
- columnOrder,
- );
- setColumnOrder(newColumnOrder);
- },
- });
-
- const [{ isDragging }, dragRef, previewRef] = useDrag({
- collect: (monitor) => ({
- isDragging: monitor.isDragging(),
- }),
- item: () => column,
- type: "column",
- });
-
- const renderField = () => (
-
- {header.isPlaceholder ? null : (
- <>
-
-
- {flexRender(column.columnDef.header, header.getContext())}
- {column.getCanSort() && (
-
- )}
-
- {advanced && column.id !== "select" && (
-
- )}
-
- {advanced && column.getCanFilter() ? (
-
-
-
- ) : null}
-
- )}
-
- {idx === 0 ? (
-
-
- {renderField()}
-
-
-
-
-
-
-
-
-
- ) : (
- renderField()
- )}
-
- |
- );
-};
-
-export default DraggableColumnHeader;
diff --git a/frontend-components/tables/src/components/Table/DebouncedInput.tsx b/frontend-components/tables/src/components/Table/DebouncedInput.tsx
deleted file mode 100644
index 7029bea9cfe..00000000000
--- a/frontend-components/tables/src/components/Table/DebouncedInput.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { FC, useEffect, useState } from "react";
-
-type Props = {
- value: string | number;
- onChange: (value: string | number) => void;
- debounce?: number;
-} & Omit, "onChange">;
-
-const DebouncedInput: FC = ({
- value: initialValue,
- onChange,
- debounce = 500,
- ...props
-}) => {
- const [value, setValue] = useState(initialValue);
-
- const handleInputChange = (event: React.ChangeEvent) =>
- setValue(event.target.value);
-
- useEffect(() => {
- setValue(initialValue);
- }, [initialValue]);
-
- useEffect(() => {
- const timeout = setTimeout(() => {
- onChange(value);
- }, debounce);
-
- return () => clearTimeout(timeout);
- }, [value]);
-
- return (
-
- );
-};
-
-export default DebouncedInput;
diff --git a/frontend-components/tables/src/components/Table/DownloadFinishedDialog.tsx b/frontend-components/tables/src/components/Table/DownloadFinishedDialog.tsx
deleted file mode 100644
index d0207bfb2e8..00000000000
--- a/frontend-components/tables/src/components/Table/DownloadFinishedDialog.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import CloseIcon from "../Icons/Close";
-
-export default function DownloadFinishedDialog({
- open,
- close,
-}: {
- open: boolean;
- close: () => void;
-}) {
- const userHomeDir = window.download_path || "~/OpenBBUserData/exports";
- return (
-
-
-
-
-
-
-
-
-
-
-
- Success
-
-
-
-
- );
-}
diff --git a/frontend-components/tables/src/components/Table/Export.tsx b/frontend-components/tables/src/components/Table/Export.tsx
deleted file mode 100644
index c3084f0d84c..00000000000
--- a/frontend-components/tables/src/components/Table/Export.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useState } from "react";
-import { downloadData, downloadImage } from "../../utils/utils";
-import * as RadioGroup from "@radix-ui/react-radio-group";
-import useLocalStorage from "../../utils/useLocalStorage";
-import { EXPORT_TYPES } from ".";
-import Select from "../Select";
-
-export default function Export({
- columns,
- data,
- type,
- setType,
- downloadFinished,
-}: {
- columns: any;
- data: any;
- type: any;
- setType: any;
- downloadFinished: (change: boolean) => void;
-}) {
- const onExport = () => {
- switch (type) {
- case "csv":
- downloadData("csv", columns, data, downloadFinished);
- break;
- case "png":
- downloadImage("table", downloadFinished);
- break;
- }
- };
- return (
-
-
- );
-}
diff --git a/frontend-components/tables/src/components/Table/FilterColumns.tsx b/frontend-components/tables/src/components/Table/FilterColumns.tsx
deleted file mode 100644
index f12e16be051..00000000000
--- a/frontend-components/tables/src/components/Table/FilterColumns.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { useEffect, useRef, useState } from "react";
-import useOnClickOutside from "../../utils/useClickOutside";
-import clsx from "clsx";
-
-export default function FilterColumns({
- label,
- table,
- onlyIconTrigger = false,
-}: {
- label: string;
- table: any;
- onlyIconTrigger?: boolean;
-}) {
- const [open, setOpen] = useState(false);
- const ref = useRef(null);
-
- useOnClickOutside(ref, () => setOpen(false));
-
- useEffect(() => {
- const handleKeyDown = (event: KeyboardEvent) => {
- if (event.key === "Escape") {
- setOpen(false);
- }
- };
- document.addEventListener("keydown", handleKeyDown);
- return () => document.removeEventListener("keydown", handleKeyDown);
- }, []);
-
- function clearFilters() {
- table.resetColumnFilters();
- setOpen(false);
- }
-
- return (
-
- {onlyIconTrigger ? (
- setOpen(!open)}
- >
-
-
- ) : (
-
-
- {label}
-
- setOpen(!open)}
- className="bg-white text-black dark:bg-grey-900 dark:text-white whitespace-nowrap h-[36px] border-[1.5px] border-grey-700 rounded p-3 inline-flex items-center justify-center leading-none gap-[5px] shadow-[0_2px_10px] shadow-black/10 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-white outline-none"
- aria-label={label}
- >
- Filter columns
-
-
-
- )}
-
-
-
-
-
-
-
-
- {table
- .getAllLeafColumns()
- .filter((column: any) => column.id !== "select")
- .map((column: any) => {
- return (
-
-
-
- );
- })}
-
-
-
- );
-}
-
-/*
-
- */
diff --git a/frontend-components/tables/src/components/Table/InderterminateCheckbox.tsx b/frontend-components/tables/src/components/Table/InderterminateCheckbox.tsx
deleted file mode 100644
index 64b95406115..00000000000
--- a/frontend-components/tables/src/components/Table/InderterminateCheckbox.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { HTMLProps, useEffect, useRef } from "react";
-
-function IndeterminateCheckbox({
- indeterminate,
- className = "",
- ...rest
-}: { indeterminate?: boolean } & HTMLProps) {
- const ref = useRef(null!);
-
- useEffect(() => {
- if (typeof indeterminate === "boolean") {
- ref.current.indeterminate = !rest.checked && indeterminate;
- }
- }, [ref, indeterminate]);
-
- return (
-
- );
-}
-
-export default IndeterminateCheckbox;
diff --git a/frontend-components/tables/src/components/Table/Pagination.tsx b/frontend-components/tables/src/components/Table/Pagination.tsx
deleted file mode 100644
index eb59aeb2108..00000000000
--- a/frontend-components/tables/src/components/Table/Pagination.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import clsx from "clsx";
-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,
- currentPage,
- setCurrentPage,
-}: {
- table: any;
- currentPage: number;
- setCurrentPage: (value: number) => void;
-}) {
- const totalRows = table.getFilteredRowModel().rows.length || 0;
-
- return (
-
-
-
-
- {minutesPassed > 0 ? `${minutesPassed} min ago` : "Just now"}
-
-
{value}
;
- }
- if (probablyDate && !isNaN(new Date(value).getTime())) {
- if (typeof value === "string") {
- const date = value.split("T")[0];
- const time = value.split("T")[1]?.split(".")[0];
- if (time === "00:00:00") {
- return {date}
;
- }
- return (
-
- {date} {time}
-
- );
- }
- try {
- const date = new Date(value);
- let dateFormatted = "";
- if (
- date.getUTCHours() === 0 &&
- date.getUTCMinutes() === 0 &&
- date.getUTCSeconds() === 0 &&
- date.getMilliseconds() === 0
- ) {
- dateFormatted = date.toISOString().split("T")[0];
- } else {
- dateFormatted = date.toISOString();
- dateFormatted = `${dateFormatted.split("T")[0]} ${
- dateFormatted.split("T")[1].split(".")[0]
- }`;
- }
-
- return {dateFormatted}
;
- } catch (e) {
- return {value}
;
- }
- }
- if (
- valueType === "number" ||
- magnitudeRegex.test(value?.toString())
- ) {
- let valueFormatted = formatNumberMagnitude(value, column);
- const valueFormattedNoMagnitude = Number(
- formatNumberNoMagnitude(value),
- );
-
- if (
- typeof indexValue === "string" &&
- includesPriceNames(indexValue)
- ) {
- valueFormatted = Number(formatNumberNoMagnitude(value));
- const maxFixed = valueFormatted < 2 ? 4 : 2;
- valueFormatted = valueFormatted.toLocaleString("en-US", {
- maximumFractionDigits: maxFixed,
- minimumFractionDigits: 2,
- });
- }
-
- return (
- 0 && colors,
- "text-[#F87171]": valueFormattedNoMagnitude < 0 && colors,
- "text-[#404040]": valueFormattedNoMagnitude === 0 && colors,
- })}
- title={formatNumber(value).toString() ?? ""}
- >
- {valueFormattedNoMagnitude !== 0
- ? valueFormattedNoMagnitude > 0
- ? `${valueFormatted}`
- : `${valueFormatted}`
- : valueFormatted}
-
- );
- } else if (valueType === "string") {
- return ;
- }
- return {value}
;
- },
- })),
- ],
- [advanced, colors],
- );
-
- const [lockFirstColumn, setLockFirstColumn] = useState(false);
-
- const [columnOrder, setColumnOrder] = useState(
- rtColumns.map((column) => column.id as string),
- );
-
- const resetOrder = () =>
- setColumnOrder(columns.map((column) => column.id as string));
-
- const needsReorder = useMemo(() => {
- const currentOrder = columnOrder.map((columnId) => columnId);
- const defaultOrder = rtColumns.map((column) => column.id as string);
- return !isEqual(currentOrder, defaultOrder);
- }, [columnOrder, rtColumns]);
-
- const table = useReactTable({
- data,
- columns: rtColumns,
- getCoreRowModel: getCoreRowModel(),
- getSortedRowModel: getSortedRowModel(),
- getFilteredRowModel: getFilteredRowModel(),
- getPaginationRowModel: getPaginationRowModel(),
- columnResizeMode: "onChange",
- onColumnVisibilityChange: setColumnVisibility,
- onColumnOrderChange: setColumnOrder,
- onSortingChange: setSorting,
- onGlobalFilterChange: setGlobalFilter,
- globalFilterFn: fuzzyFilter,
- state: {
- sorting,
- globalFilter,
- columnOrder,
- columnVisibility,
- },
- initialState: {
- pagination: {
- pageIndex: 0,
- pageSize:
- typeof currentPage === "string"
- ? currentPage.includes("All")
- ? data?.length
- : parseInt(currentPage)
- : currentPage,
- },
- },
- });
-
- const tableContainerRef = useRef(null);
- const { rows } = table.getRowModel();
- const visibleColumns = table.getVisibleFlatColumns();
-
- const [downloadFinishedDialogOpen, setDownloadFinishedDialogOpen] =
- useState(false);
-
- useEffect(() => {
- if (downloadFinished) {
- setDownloadFinished(false);
- setDownloadFinishedDialogOpen(true);
- }
- }, [downloadFinished]);
-
- return (
- <>
-
- setDownloadFinishedDialogOpen(false)}
- />
-
-
-
-
-
-
-
-
- {title}
- {/* {source && (
- {`[${source}]`}
- )} */}
-
-
- {new Intl.DateTimeFormat("en-GB", {
- dateStyle: "full",
- timeStyle: "long",
- })
- .format(date)
- .replace(/:\d\d /, " ")}
-
- {cmd}
-
- {/* {source && typeof source === "string" && source.includes("*") && (
-
- *not affiliated
-
- )} */}
-
-
-
-
- {table.getHeaderGroups().map((headerGroup, idx) => (
-
- {headerGroup.headers.map((header, idx2) => {
- return (
-
- );
- })}
-
- ))}
-
-
- {table.getRowModel().rows.map((row, idx) => {
- return (
-
- {row.getVisibleCells().map((cell, idx2) => {
- return (
- |
- {flexRender(
- cell.column.columnDef.cell,
- cell.getContext(),
- )}
- |
- );
- })}
-
- );
- })}
-
- {rows?.length > 30 && visibleColumns?.length > 4 && (
-
- {table.getFooterGroups().map((footerGroup) => (
-
- {footerGroup.headers.map((header) => (
- |
- {header.isPlaceholder
- ? null
- : flexRender(
- header.column.columnDef.footer,
- header.getContext(),
- )}
- |
- ))}
-
- ))}
-
- )}
-
-
-
-
-
-
-
-
- Settings
-
-
-
-
-
-
-
-
- Settings
-
-
- {needsReorder && (
-
- )}
-
-
-
-
-
-
-