-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#764 Add option to format numbers as currency in tables
- Loading branch information
Showing
10 changed files
with
229 additions
and
56 deletions.
There are no files selected for viewing
53 changes: 53 additions & 0 deletions
53
browser/data-browser/src/chunks/CurrencyPicker/CurrencyPicker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { FC, useEffect } from 'react'; | ||
import { getSupportedCurrencyList } from './currencies'; | ||
import { BasicSelect } from '../../components/forms/BasicSelect'; | ||
import { Resource, dataBrowser, useString } from '@tomic/react'; | ||
|
||
interface CurrencyPickerProps { | ||
resource: Resource; | ||
} | ||
|
||
const supportedCurrencies = getSupportedCurrencyList(); | ||
|
||
const getSymbol = (code: string) => { | ||
return new Intl.NumberFormat('default', { | ||
style: 'currency', | ||
currency: code, | ||
currencyDisplay: 'narrowSymbol', | ||
}) | ||
.formatToParts(0) | ||
.find(part => part.type === 'currency')?.value; | ||
}; | ||
|
||
const CurrencyPicker: FC<CurrencyPickerProps> = ({ resource }) => { | ||
const [currency, setCurrency] = useString( | ||
resource, | ||
dataBrowser.properties.currency, | ||
); | ||
|
||
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => { | ||
setCurrency(e.target.value); | ||
}; | ||
|
||
useEffect(() => { | ||
if (currency === undefined) { | ||
setCurrency('EUR'); | ||
} | ||
}, []); | ||
|
||
return ( | ||
<BasicSelect defaultValue={currency ?? 'EUR'} onChange={handleChange}> | ||
{supportedCurrencies.map(c => ( | ||
<option | ||
key={c.code} | ||
value={c.code} | ||
label={`${c.code} ${c.name ?? ''} (${getSymbol(c.code)})`} | ||
> | ||
{c.code} | ||
</option> | ||
))} | ||
</BasicSelect> | ||
); | ||
}; | ||
|
||
export default CurrencyPicker; |
11 changes: 11 additions & 0 deletions
11
browser/data-browser/src/chunks/CurrencyPicker/currencies.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
// Data taken from https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml | ||
const currencyNames = JSON.parse( | ||
`{"AFN":"Afghani","EUR":"Euro","ALL":"Lek","DZD":"Algerian Dinar","USD":"US Dollar","AOA":"Kwanza","XCD":"East Caribbean Dollar","ARS":"Argentine Peso","AMD":"Armenian Dram","AWG":"Aruban Florin","AUD":"Australian Dollar","AZN":"Azerbaijan Manat","BSD":"Bahamian Dollar","BHD":"Bahraini Dinar","BDT":"Taka","BBD":"Barbados Dollar","BYN":"Belarusian Ruble","BZD":"Belize Dollar","XOF":"CFA Franc BCEAO","BMD":"Bermudian Dollar","INR":"Indian Rupee","BTN":"Ngultrum","BOB":"Boliviano","BOV":"Mvdol","BAM":"Convertible Mark","BWP":"Pula","NOK":"Norwegian Krone","BRL":"Brazilian Real","BND":"Brunei Dollar","BGN":"Bulgarian Lev","BIF":"Burundi Franc","CVE":"Cabo Verde Escudo","KHR":"Riel","XAF":"CFA Franc BEAC","CAD":"Canadian Dollar","KYD":"Cayman Islands Dollar","CLP":"Chilean Peso","CLF":"Unidad de Fomento","CNY":"Yuan Renminbi","COP":"Colombian Peso","COU":"Unidad de Valor Real","KMF":"Comorian Franc ","CDF":"Congolese Franc","NZD":"New Zealand Dollar","CRC":"Costa Rican Colon","CUP":"Cuban Peso","CUC":"Peso Convertible","ANG":"Netherlands Antillean Guilder","CZK":"Czech Koruna","DKK":"Danish Krone","DJF":"Djibouti Franc","DOP":"Dominican Peso","EGP":"Egyptian Pound","SVC":"El Salvador Colon","ERN":"Nakfa","SZL":"Lilangeni","ETB":"Ethiopian Birr","FKP":"Falkland Islands Pound","FJD":"Fiji Dollar","XPF":"CFP Franc","GMD":"Dalasi","GEL":"Lari","GHS":"Ghana Cedi","GIP":"Gibraltar Pound","GTQ":"Quetzal","GBP":"Pound Sterling","GNF":"Guinean Franc","GYD":"Guyana Dollar","HTG":"Gourde","HNL":"Lempira","HKD":"Hong Kong Dollar","HUF":"Forint","ISK":"Iceland Krona","IDR":"Rupiah","XDR":"SDR (Special Drawing Right)","IRR":"Iranian Rial","IQD":"Iraqi Dinar","ILS":"New Israeli Sheqel","JMD":"Jamaican Dollar","JPY":"Yen","JOD":"Jordanian Dinar","KZT":"Tenge","KES":"Kenyan Shilling","KPW":"North Korean Won","KRW":"Won","KWD":"Kuwaiti Dinar","KGS":"Som","LAK":"Lao Kip","LBP":"Lebanese Pound","LSL":"Loti","ZAR":"Rand","LRD":"Liberian Dollar","LYD":"Libyan Dinar","CHF":"Swiss Franc","MOP":"Pataca","MKD":"Denar","MGA":"Malagasy Ariary","MWK":"Malawi Kwacha","MYR":"Malaysian Ringgit","MVR":"Rufiyaa","MRU":"Ouguiya","MUR":"Mauritius Rupee","XUA":"ADB Unit of Account","MXN":"Mexican Peso","MXV":"Mexican Unidad de Inversion (UDI)","MDL":"Moldovan Leu","MNT":"Tugrik","MAD":"Moroccan Dirham","MZN":"Mozambique Metical","MMK":"Kyat","NAD":"Namibia Dollar","NPR":"Nepalese Rupee","NIO":"Cordoba Oro","NGN":"Naira","OMR":"Rial Omani","PKR":"Pakistan Rupee","PAB":"Balboa","PGK":"Kina","PYG":"Guarani","PEN":"Sol","PHP":"Philippine Peso","PLN":"Zloty","QAR":"Qatari Rial","RON":"Romanian Leu","RUB":"Russian Ruble","RWF":"Rwanda Franc","SHP":"Saint Helena Pound","WST":"Tala","STN":"Dobra","SAR":"Saudi Riyal","RSD":"Serbian Dinar","SCR":"Seychelles Rupee","SLE":"Leone","SGD":"Singapore Dollar","XSU":"Sucre","SBD":"Solomon Islands Dollar","SOS":"Somali Shilling","SSP":"South Sudanese Pound","LKR":"Sri Lanka Rupee","SDG":"Sudanese Pound","SRD":"Surinam Dollar","SEK":"Swedish Krona","CHE":"WIR Euro","CHW":"WIR Franc","SYP":"Syrian Pound","TWD":"New Taiwan Dollar","TJS":"Somoni","TZS":"Tanzanian Shilling","THB":"Baht","TOP":"Pa’anga","TTD":"Trinidad and Tobago Dollar","TND":"Tunisian Dinar","TRY":"Turkish Lira","TMT":"Turkmenistan New Manat","UGX":"Uganda Shilling","UAH":"Hryvnia","AED":"UAE Dirham","USN":"US Dollar (Next day)","UYU":"Peso Uruguayo","UYI":"Uruguay Peso en Unidades Indexadas (UI)","UYW":"Unidad Previsional","UZS":"Uzbekistan Sum","VUV":"Vatu","VES":"Bolívar Soberano","VED":"Bolívar Soberano","VND":"Dong","YER":"Yemeni Rial","ZMW":"Zambian Kwacha","ZWL":"Zimbabwe Dollar","XBA":"Bond Markets Unit European Composite Unit (EURCO)","XBB":"Bond Markets Unit European Monetary Unit (E.M.U.-6)","XBC":"Bond Markets Unit European Unit of Account 9 (E.U.A.-9)","XBD":"Bond Markets Unit European Unit of Account 17 (E.U.A.-17)","XTS":"Codes specifically reserved for testing purposes","XXX":"The codes assigned for transactions where no currency is involved","XAU":"Gold","XPD":"Palladium","XPT":"Platinum","XAG":"Silver"}`, | ||
); | ||
|
||
export function getSupportedCurrencyList() { | ||
return Intl.supportedValuesOf('currency').map(code => ({ | ||
code, | ||
name: currencyNames[code] as string, | ||
})); | ||
} |
29 changes: 29 additions & 0 deletions
29
browser/data-browser/src/chunks/CurrencyPicker/processCurrencyFile.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
/** | ||
* Function to map currency codes to names using this list: https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml | ||
* Used to update the string in currencies.ts. | ||
* Only works in the browser. | ||
* | ||
* To use, move the file out of the chunks folder | ||
* @param xmlStr XML String with ISO 4217 data | ||
*/ | ||
export const processCurrencyFile = (xmlStr: string): string => { | ||
const parser = new DOMParser(); | ||
const xmlDoc = parser.parseFromString(xmlStr, 'text/xml'); | ||
const currencyNodes = xmlDoc.getElementsByTagName('CcyNtry'); | ||
const currencyMap = {}; | ||
|
||
for (let i = 0; i < currencyNodes.length; i++) { | ||
const currencyNode = currencyNodes[i]; | ||
const code = currencyNode.getElementsByTagName('Ccy')[0]?.textContent; | ||
|
||
if (!code) { | ||
continue; | ||
} | ||
|
||
const currencyName = | ||
currencyNode.getElementsByTagName('CcyNm')[0]?.textContent; | ||
currencyMap[code] = currencyName; | ||
} | ||
|
||
return JSON.stringify(currencyMap); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { styled } from 'styled-components'; | ||
import { InputWrapper } from './InputStyles'; | ||
import { FC, PropsWithChildren } from 'react'; | ||
|
||
type Props = React.SelectHTMLAttributes<HTMLSelectElement>; | ||
|
||
export const BasicSelect: FC<PropsWithChildren<Props>> = ({ | ||
children, | ||
...props | ||
}) => { | ||
return ( | ||
<StyledInputWrapper> | ||
<SelectWrapper disabled={!!props.disabled}> | ||
<Select {...props}>{children}</Select> | ||
</SelectWrapper> | ||
</StyledInputWrapper> | ||
); | ||
}; | ||
|
||
const StyledInputWrapper = styled(InputWrapper)` | ||
min-width: 15ch; | ||
`; | ||
|
||
const SelectWrapper = styled.span<{ disabled: boolean }>` | ||
width: 100%; | ||
padding-inline: 0.2rem; | ||
background-color: ${p => | ||
p.disabled ? p.theme.colors.bg1 : p.theme.colors.bg}; | ||
`; | ||
|
||
const Select = styled.select` | ||
cursor: pointer; | ||
width: 100%; | ||
border: none; | ||
outline: none; | ||
height: 2rem; | ||
background-color: transparent; | ||
color: ${p => p.theme.colors.text}; | ||
&:disabled { | ||
color: ${props => props.theme.colors.textLight}; | ||
background-color: transparent; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.