Commit 36bb2338 authored by Florian Pagnoux's avatar Florian Pagnoux
Browse files

Format values statically

parent 4d585ba0
import {formatNumber, formatDate} from '../../services/formatter'
it('formatNumber should format numbers in a French style', () => {
expect(formatNumber(3000)).toEqual('3\xa0000')
});
it('formatNumber should format currencies in a French style', () => {
expect(formatNumber(3000, {style: 'currency', currency: 'EUR'})).toEqual('3\xa0000,00\xa0€')
});
it('formatDate should format dates in a French style', () => {
expect(formatDate('2019-02-01')).toEqual('01/02/2019')
});
......@@ -5,24 +5,21 @@ import size from 'lodash.size'
import isString from 'lodash.isstring'
import sortBy from 'lodash.sortby'
import flow from 'lodash.flow'
import { FormattedDate, IntlProvider, addLocaleData, FormattedNumber} from 'react-intl'
import fr from 'react-intl/locale-data/fr'
import extractData from '../services/dataPreprocesser'
import {formatNumber, formatDate} from '../services/formatter'
import Table from '../components/Table'
addLocaleData(fr)
function cellFormatter({value, metadata}) {
if ((! value && ! value !== 0) || ! metadata || ! metadata.unit) {
return value
}
if (metadata.unit == '/1') {
return <FormattedNumber value={value} style="percent" maximumFractionDigits={3}/>
return formatNumber(value, { style: 'percent', maximumFractionDigits: 3 })
}
if (metadata.unit.startsWith('currency')) {
const currency = metadata.unit.split('-')[1]
return <FormattedNumber value={value} style="currency" maximumFractionDigits={3} currency={currency}/>
return formatNumber(value, { style: 'currency', currency, maximumFractionDigits: 3 })
}
return value
}
......@@ -102,19 +99,17 @@ const ParameterTable = ({parameter}) => {
Header: 'Date d’effet',
accessor: item => item.date,
id: 'date',
Cell: props => <FormattedDate value={props.value} timeZone="UTC"/> // Input is considered to be in UTC, so dates should be formatted for the same timezone.
Cell: props => formatDate(props.value)
}
const columns = [dateColumn, buildColumn(parameter)]
return (
<IntlProvider locale="fr">
<div>
<Table
columns={columns}
data={data}
/>
<p className="table-doc">{parameter.documentation}</p>
</div>
</IntlProvider>
<div>
<Table
columns={columns}
data={data}
/>
<p className="table-doc">{parameter.documentation}</p>
</div>
)
}
......
......@@ -9,6 +9,7 @@
"bluebird": "^3.5.1",
"dotenv": "^6.1.0",
"express": "^4.16.3",
"intl": "^1.2.5",
"isomorphic-unfetch": "^2.0.0",
"js-yaml-loader": "^0.1.0",
"lodash.filter": "^4.6.0",
......@@ -35,8 +36,7 @@
"lodash.union": "^4.6.0",
"next": "^6.0.3",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-intl": "^2.4.0"
"react-dom": "^16.4.1"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
......
// Polyfill to be able to use french locale
import IntlPolyfill from 'intl'
import 'intl/locale-data/jsonp/fr.js';
Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
export function formatNumber(value, options) {
return (new Intl.NumberFormat('fr', options)).format(value)
}
export function formatDate(value) {
return new Intl.DateTimeFormat('fr', {timeZone: 'UTC'}).format(new Date(value))
}
......@@ -3022,27 +3022,15 @@ interpret@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
intl-format-cache@^2.0.5:
version "2.1.0"
resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.1.0.tgz#04a369fecbfad6da6005bae1f14333332dcf9316"
intl-messageformat-parser@1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
intl-messageformat@^2.0.0, intl-messageformat@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc"
dependencies:
intl-messageformat-parser "1.4.0"
intl-locales-supported@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/intl-locales-supported/-/intl-locales-supported-1.0.0.tgz#9a9d94dbf104a87818881952dcb782053f0aeefa"
intl-relativeformat@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-2.1.0.tgz#010f1105802251f40ac47d0e3e1a201348a255df"
dependencies:
intl-messageformat "^2.0.0"
intl@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.2:
invariant@^2.2.0, invariant@^2.2.2:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
dependencies:
......@@ -5321,15 +5309,6 @@ react-dom@^16.4.1:
object-assign "^4.1.1"
prop-types "^15.6.0"
react-intl@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.4.0.tgz#66c14dc9df9a73b2fbbfbd6021726e80a613eb15"
dependencies:
intl-format-cache "^2.0.5"
intl-messageformat "^2.1.0"
intl-relativeformat "^2.0.0"
invariant "^2.1.1"
react-is@^16.4.1:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment