diff --git a/packages/client/src/components/ItemResults/MapView.tsx b/packages/client/src/components/ItemResults/MapView.tsx deleted file mode 100644 index 5af4aa5..0000000 --- a/packages/client/src/components/ItemResults/MapView.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { Box } from '@chakra-ui/react'; -import Map, { - type MapRef, - type MapLayerMouseEvent, - Source, - Layer -} from 'react-map-gl/maplibre'; -import { StacItem } from 'stac-ts'; -import getBbox from '@turf/bbox'; -import { BackgroundTiles } from '../Map'; - -type MapViewProps = { - results?: { - type: 'FeatureCollection'; - features: StacItem[]; - }; - highlightItem?: string; - setHighlightItem: (id?: string) => void; - id?: string; - hidden?: boolean; -}; - -const resultsOutline = { - 'line-color': '#C53030', - 'line-width': 1 -}; - -const resultsFill = { - 'fill-color': '#C53030', - 'fill-opacity': 0.1 -}; - -const resultsHighlight = { - 'fill-color': '#F6E05E', - 'fill-opacity': 0.7 -}; - -function MapView({ - id, - hidden, - results, - highlightItem, - setHighlightItem -}: MapViewProps) { - const [map, setMap] = useState(); - const setMapRef = (m: MapRef) => setMap(m); - const highlightFilter = useMemo( - () => ['==', ['get', 'id'], highlightItem || ''], - [highlightItem] - ); - - // MapLibre doesn't preserve IDs so we're adding the ID - // to the properties so we can identify the items for user interactions. - const resultsWithIDs = useMemo(() => { - if (!results?.features) return null; - return { - ...results, - features: results.features.map(addIdToProperties) - }; - }, [results]); - - useEffect(() => { - if (map && !hidden) { - map.resize(); - - // @ts-expect-error results is a STACItem which is geojson compatible. - const bounds = results?.features.length && getBbox(results); - if (bounds) { - const [x1, y1, x2, y2] = bounds; - map.fitBounds([x1, y1, x2, y2], { padding: 30 }); - } - } - }, [hidden, map, results]); - - const handleHover = useCallback( - (e: MapLayerMouseEvent) => { - const interactiveItem = e.features && e.features[0]; - if (interactiveItem) { - setHighlightItem(interactiveItem.properties?.id); - } - }, - [setHighlightItem] - ); - - return ( - - ); -} - -const addIdToProperties = (feature: StacItem) => { - if (feature.properties.id) return feature; - - return { - ...feature, - properties: { - ...feature.properties, - id: feature.id - } - }; -}; - -export default MapView; diff --git a/packages/client/src/components/ItemResults/TableView.tsx b/packages/client/src/components/ItemResults/TableView.tsx deleted file mode 100644 index 46a7541..0000000 --- a/packages/client/src/components/ItemResults/TableView.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import { - TableContainer, - Table, - Thead, - Tr, - Th, - Td, - Tbody, - Alert, - AlertIcon -} from '@chakra-ui/react'; -import { StacItem } from 'stac-ts'; - -import SortableTh, { Sort } from '../SortableTh'; -import { Loading } from '..'; -import { LoadingState } from '../../types'; - -type TableViewProps = { - results?: { - type: 'FeatureCollection'; - features: StacItem[]; - }; - state: LoadingState; - compact: boolean; - sort?: Sort; - handleSort: (sort: Sort) => void; - highlightItem?: string; - setHighlightItem: (id?: string) => void; -}; - -function TableView({ - results, - state, - compact, - sort, - handleSort, - highlightItem, - setHighlightItem -}: TableViewProps) { - const navigate = useNavigate(); - - return ( - - - - - - ID - - {!compact && ( - - Collection - - )} - - - - {(!results || state === 'LOADING') && ( - - - - )} - {results && results.features.length === 0 && ( - - - - )} - {results && - results.features.length > 0 && - results.features.map(({ id, collection }: StacItem) => ( - setHighlightItem(id)} - onMouseLeave={() => setHighlightItem()} - onClick={() => { - navigate(`/collections/${collection}/items/${id}/`); - }} - bgColor={highlightItem === id ? 'gray.50' : 'inherit'} - _hover={{ cursor: 'pointer' }} - > - - {!compact && } - - - ))} - -
-
- Loading items... -
- - - No items are matching your query - -
{id}{collection} - e.stopPropagation()} - > - View - - {/* |{' '} - e.stopPropagation()} - > - Edit - */} -
- - ); -} - -export default TableView; diff --git a/packages/client/src/components/ItemResults/index.tsx b/packages/client/src/components/ItemResults/index.tsx deleted file mode 100644 index 2ee9306..0000000 --- a/packages/client/src/components/ItemResults/index.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { - Box, - Button, - Flex, - Icon, - Select, - Text, - useDisclosure -} from '@chakra-ui/react'; -import { - MdExpandLess, - MdExpandMore, - MdChevronRight, - MdChevronLeft -} from 'react-icons/md'; -import { StacItem } from 'stac-ts'; - -import MapView from './MapView'; -import TableView from './TableView'; -import { Sort } from '../SortableTh'; -import { LoadingState } from '../../types'; -import { usePrevious } from '../../hooks'; - -type ItemResultsProps = { - results?: { - type: 'FeatureCollection'; - features: StacItem[]; - }; - sortby?: Sort[]; - setSortby: (sort: Sort[]) => void; - limit?: number; - setLimit: (limit: number) => void; - previousPage?: () => void; - nextPage?: () => void; - state: LoadingState; - submit: () => void; -}; - -function ItemResults({ - results, - sortby, - setSortby, - limit, - setLimit, - previousPage, - nextPage, - state, - submit -}: ItemResultsProps) { - // Map view state - const { getDisclosureProps, getButtonProps, isOpen } = useDisclosure(); - const [highlightItem, setHighlightItem] = useState(); - - // Sort handlers and effects - const previousSortby = usePrevious(sortby); - const previousLimit = usePrevious(limit); - const sort = sortby?.length ? sortby[0] : undefined; - const handleSort = (sort: Sort) => setSortby([sort]); - - useEffect(() => { - // Automatically execute a new item search if the sorting or limit have changed - if (sortby !== previousSortby || limit !== previousLimit) { - submit(); - } - }, [sortby, previousSortby, submit, limit, previousLimit]); - - return ( - <> - - - - - - - - items per page - - - {previousPage && ( - - )} - {previousPage && nextPage && ' | '} - {nextPage && ( - - )} - - - - - - - - - - - ); -} - -export default ItemResults; diff --git a/packages/client/src/components/Loading.tsx b/packages/client/src/components/Loading.tsx deleted file mode 100644 index 04e61b2..0000000 --- a/packages/client/src/components/Loading.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import { Box, Spinner, Text } from '@chakra-ui/react'; - -function Loading({ children }: React.PropsWithChildren) { - return ( - - - {children && {children}} - - ); -} - -export default Loading; diff --git a/packages/client/src/components/SortableTh.tsx b/packages/client/src/components/SortableTh.tsx deleted file mode 100644 index 776f72c..0000000 --- a/packages/client/src/components/SortableTh.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { Button, Icon, Th } from '@chakra-ui/react'; -import { MdExpandLess, MdExpandMore } from 'react-icons/md'; - -export type Sort = { - field: string; - direction: 'asc' | 'desc'; -}; - -type Props = { - children: string; - fieldName: string; - sort?: Sort; - setSort: (sort: Sort) => void; -}; - -function SortableTh({ children, sort, setSort, fieldName }: Props) { - const { field, direction } = sort || {}; - let SortIcon = undefined; - let ariaSort: 'ascending' | 'descending' | undefined = undefined; - - if (field === fieldName) { - SortIcon = direction === 'asc' ? MdExpandLess : MdExpandMore; - ariaSort = direction === 'asc' ? 'ascending' : 'descending'; - } - - return ( - - - - ); -} - -export default SortableTh; diff --git a/packages/client/src/components/forms.tsx b/packages/client/src/components/forms.tsx deleted file mode 100644 index 048e236..0000000 --- a/packages/client/src/components/forms.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import React, { useEffect, useState, useCallback } from 'react'; -import { MdDelete } from 'react-icons/md'; -import { - Box, - Flex, - FormControl, - FormLabel, - FormErrorMessage, - Input, - IconButton, - forwardRef, - InputProps, - SelectProps, - Select, - FormHelperText -} from '@chakra-ui/react'; - -const FIELD_MARGIN = '4'; - -type ArrayFieldProps = Omit & { - label?: string; - helper?: string; - onChange: (values: string[]) => void; - value?: (string | number)[]; -}; - -export const ArrayInput = forwardRef( - (props, ref) => { - const { value, onChange, label, helper, ...rest } = props; - const [val, setVal] = useState(value?.join(',') || ''); - - useEffect(() => setVal(value?.join(',') || ''), [value]); - - const handleChange: React.ChangeEventHandler = ( - event - ) => { - const { value } = event.target; - setVal(value); - - if (value.length === 0) { - onChange([]); - } else { - onChange(event.target.value?.split(',').map((val) => val.trim())); - } - }; - - return ( - - {label} - - {helper} - - ); - } -); - -interface SelectFieldProps extends SelectProps { - label?: string; -} - -export const SelectInput = forwardRef( - (props, ref) => { - const { label, ...rest } = props; - return ( - - {label} - - } - onClick={() => setDateRangeFrom('')} - /> - - - - - - Date to - - - } - onClick={() => setDateRangeTo('')} - /> - - - - {!!error && {error.message}} - - ); -} diff --git a/packages/client/src/components/index.tsx b/packages/client/src/components/index.tsx deleted file mode 100644 index 05675ff..0000000 --- a/packages/client/src/components/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import Loading from './Loading'; -import MainNavigation from './MainNavigation'; - -export { Loading, MainNavigation }; diff --git a/packages/client/src/hooks/index.ts b/packages/client/src/hooks/index.ts index 1f9857c..b918f5c 100644 --- a/packages/client/src/hooks/index.ts +++ b/packages/client/src/hooks/index.ts @@ -1,7 +1,4 @@ -import usePageTitle from "./usePageTitle"; -import usePrevious from "./usePrevious"; +import usePageTitle from './usePageTitle'; +import usePrevious from './usePrevious'; -export { - usePageTitle, - usePrevious -}; +export { usePageTitle, usePrevious }; diff --git a/packages/client/src/pages/CollectionDetail/index.tsx b/packages/client/src/pages/CollectionDetail/index.tsx index ea6fb90..8a959f1 100644 --- a/packages/client/src/pages/CollectionDetail/index.tsx +++ b/packages/client/src/pages/CollectionDetail/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Box, @@ -18,11 +18,18 @@ import { HStack, VisuallyHidden, Skeleton, - SkeletonText + SkeletonText, + Popover, + PopoverTrigger, + PopoverArrow, + PopoverBody, + PopoverContent, + ButtonGroup } from '@chakra-ui/react'; import { useCollection, useStacSearch } from '@developmentseed/stac-react'; import { CollecticonEllipsisVertical, + CollecticonEye, CollecticonPencil, CollecticonTextBlock } from '@devseed-ui/collecticons-chakra'; @@ -37,6 +44,7 @@ import { zeroPad } from '$utils/format'; import { ButtonWithAuth } from '$components/auth/ButtonWithAuth'; import { DeleteMenuItem } from '$components/DeleteMenuItem'; import SmartLink from '$components/SmartLink'; +import { ItemMap } from '$pages/ItemDetail/ItemMap'; const dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', @@ -48,19 +56,33 @@ function CollectionDetail() { const { collectionId } = useParams(); usePageTitle(`Collection ${collectionId}`); - // const [urlParams, setUrlParams] = useSearchParams({ page: '1' }); - // const page = parseInt(urlParams.get('page') || '1', 10); - // const setPage = useCallback( - // (v: number | ((v: number) => number)) => { - // const newVal = typeof v === 'function' ? v(page) : v; - // setUrlParams({ page: newVal.toString() }); - // }, - // [page] - // ); - const { collection, state } = useCollection(collectionId!); // eslint-disable-line @typescript-eslint/no-non-null-assertion - const { results, collections, setCollections, submit } = useStacSearch(); + const { + results, + collections, + setCollections, + submit, + nextPage, + previousPage + } = useStacSearch(); + + // The stac search pagination is token based and has no pages, but we can fake + // it tracking the prev and next clicks. + const [page, setPage] = useState(1); + + const onPageNavigate = useCallback( + (actions: 'next' | 'previous') => { + if (actions === 'next') { + setPage((prev) => prev + 1); + nextPage?.(); + } else { + setPage((prev) => prev - 1); + previousPage?.(); + } + }, + [nextPage, previousPage] + ); // Initialize the search with the current collection ID useEffect(() => { @@ -121,6 +143,10 @@ function CollectionDetail() { const { id, title, description, keywords, license } = collection as StacCollection; + const resultCount = results?.numberMatched || 0; + const shouldPaginate = + results?.links?.length > 1 && resultCount > results?.numberReturned; + return ( Items{' '} - {results && ( - {zeroPad(results.numberMatched)} - )} + {results && {zeroPad(resultCount)}} + {!!resultCount && ( + + Showing page {page} of{' '} + {Math.ceil(resultCount / results.numberReturned)} + + )} {/* + + + + )} - - {/* - - */} ); } diff --git a/packages/client/src/pages/CollectionList/index.tsx b/packages/client/src/pages/CollectionList/index.tsx index 976da58..8140896 100644 --- a/packages/client/src/pages/CollectionList/index.tsx +++ b/packages/client/src/pages/CollectionList/index.tsx @@ -22,20 +22,33 @@ import { CollecticonPlusSmall, CollecticonTextBlock } from '@devseed-ui/collecticons-chakra'; -import { useCollections } from '@developmentseed/stac-react'; import type { StacCollection } from 'stac-ts'; import { usePageTitle } from '../../hooks'; import { InnerPageHeader } from '$components/InnerPageHeader'; import SmartLink from '$components/SmartLink'; import { ItemCard, ItemCardLoading } from '$components/ItemCard'; -import { zeroPad } from '$utils/format'; import { ButtonWithAuth } from '$components/auth/ButtonWithAuth'; import { MenuItemWithAuth } from '$components/auth/MenuItemWithAuth'; +import { zeroPad } from '$utils/format'; +import { useCollections } from './useCollections'; function CollectionList() { usePageTitle('Collections'); - const { collections, state } = useCollections(); + + // const [urlParams, setUrlParams] = useSearchParams({ page: '1' }); + // const page = parseInt(urlParams.get('page') || '1', 10); + // const setPage = useCallback( + // (v: number | ((v: number) => number)) => { + // const newVal = typeof v === 'function' ? v(page) : v; + // setUrlParams({ page: newVal.toString() }); + // }, + // [page] + // ); + + const { collections, state } = useCollections({ + limit: 1000 + }); // Quick search system. const [searchTerm, setSearchTerm] = useState(''); @@ -71,6 +84,11 @@ function CollectionList() { }); }, [collections, searchTerm, keyword]); + const collectionsCount = collections?.numberMatched || 0; + // const collectionsReturned = collections?.numberReturned || 0; + // const numPages = Math.ceil(collectionsCount / pageSize); + // const shouldPaginate = collectionsCount > collectionsReturned; + return ( Collections{' '} - {collections && ( - - {zeroPad(filteredCollections.length)} - + {!!collectionsCount && ( + {zeroPad(collectionsCount)} )} @@ -186,6 +202,15 @@ function CollectionList() { )) )} + {/* {shouldPaginate && ( + + + + )} */} ); diff --git a/packages/client/src/pages/CollectionList/useCollections.ts b/packages/client/src/pages/CollectionList/useCollections.ts new file mode 100644 index 0000000..8953d6b --- /dev/null +++ b/packages/client/src/pages/CollectionList/useCollections.ts @@ -0,0 +1,123 @@ +/** + * Why this file exists: + * @developmentseed/stac-react does not allow to change the limit and offset of + * the collections endpoint. This file is a temporary workaround to allow + * pagination. + */ + +import { useStacApi } from '@developmentseed/stac-react'; +import { useCallback, useEffect, useState } from 'react'; +import { StacCollection, StacLink } from 'stac-ts'; + +type ApiError = { + detail?: { [key: string]: any } | string; + status: number; + statusText: string; +}; + +type LoadingState = 'IDLE' | 'LOADING'; + +const debounce = any>(fn: F, ms = 250) => { + let timeoutId: ReturnType; + + return function (this: any, ...args: any[]) { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => fn.apply(this, args), ms); + }; +}; + +type ApiResponse = { + collections: StacCollection[]; + links: StacLink[]; + numberMatched: number; + numberReturned: number; +}; + +type StacCollectionsHook = { + collections?: ApiResponse; + reload: () => void; + state: LoadingState; + error?: ApiError; + nextPage?: () => void; + prevPage?: () => void; + setOffset: (newOffset: number) => void; +}; + +export function useCollections(opts?: { + limit?: number; + initialOffset?: number; +}): StacCollectionsHook { + const { limit = 10, initialOffset = 0 } = opts || {}; + + const { stacApi } = useStacApi(process.env.REACT_APP_STAC_API!); + + const [collections, setCollections] = useState(); + const [state, setState] = useState('IDLE'); + const [error, setError] = useState(); + + const [offset, setOffset] = useState(initialOffset); + + const [hasNext, setHasNext] = useState(false); + const [hasPrev, setHasPrev] = useState(false); + + const _getCollections = useCallback( + async (offset: number, limit: number) => { + if (stacApi) { + setState('LOADING'); + + try { + const res = await stacApi.fetch( + `${stacApi.baseUrl}/collections?limit=${limit}&offset=${offset}` + ); + const data: ApiResponse = await res.json(); + + setHasNext(!!data.links.find((l) => l.rel === 'next')); + setHasPrev( + !!data.links.find((l) => ['prev', 'previous'].includes(l.rel)) + ); + + setCollections(data); + } catch (err: any) { + setError(err); + setCollections(undefined); + } finally { + setState('IDLE'); + } + } + }, + [stacApi] + ); + + const getCollections = useCallback( + (offset: number, limit: number) => + debounce(() => _getCollections(offset, limit))(), + [_getCollections] + ); + + const nextPage = useCallback(() => { + setOffset(offset + limit); + }, [offset, limit]); + + const prevPage = useCallback(() => { + setOffset(offset - limit); + }, [offset, limit]); + + useEffect(() => { + if (stacApi && !error && !collections) { + getCollections(offset, limit); + } + }, [getCollections, stacApi, collections, error, offset, limit]); + + return { + collections, + reload: useCallback( + () => getCollections(offset, limit), + [getCollections, offset, limit] + ), + nextPage: hasNext ? nextPage : undefined, + prevPage: hasPrev ? prevPage : undefined, + setOffset, + state, + error + }; +} diff --git a/packages/client/src/pages/ItemDetail/ItemMap.tsx b/packages/client/src/pages/ItemDetail/ItemMap.tsx new file mode 100644 index 0000000..b7028bc --- /dev/null +++ b/packages/client/src/pages/ItemDetail/ItemMap.tsx @@ -0,0 +1,83 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import Map, { Source, Layer, MapRef } from 'react-map-gl/maplibre'; +import { StacAsset } from 'stac-ts'; +import getBbox from '@turf/bbox'; + +import { BackgroundTiles } from '$components/Map'; + +const resultsOutline = { + 'line-color': '#C53030', + 'line-width': 2 +}; + +const resultsFill = { + 'fill-color': '#C53030', + 'fill-opacity': 0.1 +}; + +const cogMediaTypes = [ + 'image/tiff; application=geotiff; profile=cloud-optimized', + 'image/vnd.stac.geotiff' +]; + +export function ItemMap( + props: { item: any } & React.ComponentProps +) { + const { item, ...rest } = props; + + const [map, setMap] = useState(); + const setMapRef = (m: MapRef) => setMap(m); + + // Fit the map view around the current results bbox + useEffect(() => { + const bounds = item && getBbox(item); + + if (map && bounds) { + const [x1, y1, x2, y2] = bounds; + map.fitBounds([x1, y1, x2, y2], { padding: 30, duration: 0 }); + } + }, [item, map]); + + const previewAsset = useMemo(() => { + if (!item) return; + + return Object.values(item.assets).reduce((preview, asset) => { + const { type, href, roles } = asset as StacAsset; + if (cogMediaTypes.includes(type || '')) { + if (!preview) { + return href; + } else { + if (roles && roles.includes('visual')) { + return href; + } + } + } + return preview; + }, undefined); + }, [item]); + + return ( + + + {previewAsset && ( + + + + )} + + + {!previewAsset && ( + + )} + + + ); +} diff --git a/packages/client/src/pages/ItemDetail/index.tsx b/packages/client/src/pages/ItemDetail/index.tsx index 74fef9d..8edf975 100644 --- a/packages/client/src/pages/ItemDetail/index.tsx +++ b/packages/client/src/pages/ItemDetail/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React from 'react'; import { useParams } from 'react-router-dom'; import { Box, @@ -16,35 +16,17 @@ import { Skeleton, SkeletonText } from '@chakra-ui/react'; -import Map, { Source, Layer, MapRef } from 'react-map-gl/maplibre'; -import { StacAsset } from 'stac-ts'; import { useItem } from '@developmentseed/stac-react'; import { CollecticonEllipsisVertical, CollecticonTrashBin } from '@devseed-ui/collecticons-chakra'; -import getBbox from '@turf/bbox'; import { usePageTitle } from '../../hooks'; -import { BackgroundTiles } from '$components/Map'; import AssetList from './AssetList'; import { InnerPageHeader } from '$components/InnerPageHeader'; import { StacBrowserMenuItem } from '$components/StacBrowserMenuItem'; - -const resultsOutline = { - 'line-color': '#C53030', - 'line-width': 2 -}; - -const resultsFill = { - 'fill-color': '#C53030', - 'fill-opacity': 0.1 -}; - -const cogMediaTypes = [ - 'image/tiff; application=geotiff; profile=cloud-optimized', - 'image/vnd.stac.geotiff' -]; +import { ItemMap } from './ItemMap'; const dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', @@ -58,37 +40,6 @@ function ItemDetail() { const itemResource = `${process.env.REACT_APP_STAC_API}/collections/${collectionId}/items/${itemId}`; const { item, state } = useItem(itemResource); - const [map, setMap] = useState(); - const setMapRef = (m: MapRef) => setMap(m); - - // Fit the map view around the current results bbox - useEffect(() => { - const bounds = item && getBbox(item); - - if (map && bounds) { - const [x1, y1, x2, y2] = bounds; - map.fitBounds([x1, y1, x2, y2], { padding: 30, duration: 0 }); - } - }, [item, map]); - - const previewAsset = useMemo(() => { - if (!item) return; - - return Object.values(item.assets).reduce((preview, asset) => { - const { type, href, roles } = asset as StacAsset; - if (cogMediaTypes.includes(type || '')) { - if (!preview) { - return href; - } else { - if (roles && roles.includes('visual')) { - return href; - } - } - } - return preview; - }, undefined); - }, [item]); - if (!item || state === 'LOADING') { return ( @@ -216,36 +167,7 @@ function ItemDetail() { Spacial extent - - - {previewAsset && ( - - - - )} - - - {!previewAsset && ( - - )} - - + diff --git a/packages/client/src/utils/format.ts b/packages/client/src/utils/format.ts index b086a38..22ef255 100644 --- a/packages/client/src/utils/format.ts +++ b/packages/client/src/utils/format.ts @@ -80,7 +80,7 @@ export function formatThousands(num: number, options?: FormatThousandsOptions) { return '--'; } - const repeat = (char, length) => { + const repeat = (char: string, length: number) => { let str = ''; for (let i = 0; i < length; i++) str += char + ''; return str; @@ -104,7 +104,7 @@ export function formatThousands(num: number, options?: FormatThousandsOptions) { dec = (dec || '').substring(0, opts.decimals); // Add decimals if forced. dec = opts.forceDecimals - ? `${dec}${repeat(0, opts.decimals - dec.length)}` + ? `${dec}${repeat('0', opts.decimals - dec.length)}` : dec; return dec !== '' @@ -135,18 +135,18 @@ export function formatAsScientificNotation(num: number, decimals = 2) { if (!isFinite(num)) return `${Math.sign(num) === -1 ? '-' : ''}∞`; const [coefficient, exponent] = num - .toExponential() - .split('e') - .map((item) => Number(item)); + .toExponential() + .split('e') + .map((item) => Number(item)); const sups = '⁰¹²³⁴⁵⁶⁷⁸⁹'; const exponentSup = Math.abs(exponent) .toString() .split('') - .map((v) => sups[v]) + .map((v) => sups[Number(v)]) .join(''); - - const sign = exponent < 0 ? '⁻':''; + + const sign = exponent < 0 ? '⁻' : ''; return `${round(coefficient, decimals)}x10${sign}${exponentSup}`; }