Meriadec Pillet
7 years ago
committed by
GitHub
GitHub
27 changed files with 734 additions and 391 deletions
@ -0,0 +1,66 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import axios from 'axios' |
||||
|
import moment from 'moment' |
||||
|
import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' |
||||
|
|
||||
|
import get from 'lodash/get' |
||||
|
|
||||
|
import db from 'helpers/db' |
||||
|
|
||||
|
type InitCounterValues = () => { type: string, payload: Object } |
||||
|
export const initCounterValues: InitCounterValues = () => ({ |
||||
|
type: 'UPDATE_COUNTER_VALUES', |
||||
|
payload: db.get('counterValues'), |
||||
|
}) |
||||
|
|
||||
|
type UpdateCounterValues = Object => { type: string, payload: Object } |
||||
|
export const updateCounterValues: UpdateCounterValues = payload => ({ |
||||
|
type: 'DB:UPDATE_COUNTER_VALUES', |
||||
|
payload, |
||||
|
}) |
||||
|
|
||||
|
type FetchCounterValues = (?number) => (Dispatch<*>, Function) => void |
||||
|
export const fetchCounterValues: FetchCounterValues = coinType => (dispatch, getState) => { |
||||
|
const { accounts, counterValues } = getState() |
||||
|
|
||||
|
let coinTypes = [] |
||||
|
|
||||
|
if (!coinType) { |
||||
|
coinTypes = [...new Set(accounts.map(a => a.coinType))] |
||||
|
} else { |
||||
|
coinTypes = [coinType] |
||||
|
} |
||||
|
|
||||
|
const today = moment().format('YYYY-MM-DD') |
||||
|
|
||||
|
const fetchCounterValuesByCoinType = coinType => { |
||||
|
const { code } = getDefaultUnitByCoinType(coinType) |
||||
|
const todayCounterValues = get(counterValues, `${code}-USD.${today}`, null) |
||||
|
|
||||
|
if (todayCounterValues !== null) { |
||||
|
return {} |
||||
|
} |
||||
|
|
||||
|
return axios |
||||
|
.get( |
||||
|
`https://min-api.cryptocompare.com/data/histoday?&extraParams=ledger-test&fsym=${code}&tsym=USD&allData=1`, |
||||
|
) |
||||
|
.then(({ data }) => ({ |
||||
|
symbol: `${code}-USD`, |
||||
|
values: data.Data.reduce((result, d) => { |
||||
|
const date = moment(d.time * 1000).format('YYYY-MM-DD') |
||||
|
result[date] = d.close |
||||
|
return result |
||||
|
}, {}), |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
Promise.all(coinTypes.map(fetchCounterValuesByCoinType)).then(result => { |
||||
|
const newCounterValues = result.reduce((r, v) => { |
||||
|
r[v.symbol] = v.values |
||||
|
return r |
||||
|
}, {}) |
||||
|
dispatch(updateCounterValues(newCounterValues)) |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,66 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { Fragment } from 'react' |
||||
|
import moment from 'moment' |
||||
|
|
||||
|
import { formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies' |
||||
|
|
||||
|
import type { Accounts } from 'types/common' |
||||
|
|
||||
|
import { space } from 'styles/theme' |
||||
|
|
||||
|
import { AreaChart } from 'components/base/Chart' |
||||
|
import Box, { Card } from 'components/base/Box' |
||||
|
import CalculateBalance from 'components/CalculateBalance' |
||||
|
|
||||
|
import BalanceInfos from './BalanceInfos' |
||||
|
|
||||
|
type Props = { |
||||
|
accounts: Accounts, |
||||
|
selectedTime: string, |
||||
|
daysCount: number, |
||||
|
} |
||||
|
|
||||
|
const BalanceSummary = ({ accounts, selectedTime, daysCount }: Props) => ( |
||||
|
<Card flow={3} p={0} py={6}> |
||||
|
<CalculateBalance |
||||
|
accounts={accounts} |
||||
|
daysCount={daysCount} |
||||
|
render={({ allBalances, totalBalance, sinceBalance }) => ( |
||||
|
<Fragment> |
||||
|
<Box px={6}> |
||||
|
<BalanceInfos |
||||
|
fiat="USD" |
||||
|
totalBalance={totalBalance} |
||||
|
since={selectedTime} |
||||
|
sinceBalance={sinceBalance} |
||||
|
/> |
||||
|
</Box> |
||||
|
<Box ff="Open Sans" fontSize={4} color="graphite"> |
||||
|
<AreaChart |
||||
|
color="#5286f7" |
||||
|
data={allBalances} |
||||
|
height={250} |
||||
|
id="dashboard-chart" |
||||
|
padding={{ |
||||
|
top: space[6], |
||||
|
bottom: space[6], |
||||
|
left: space[6] * 2, |
||||
|
right: space[6], |
||||
|
}} |
||||
|
strokeWidth={2} |
||||
|
renderLabels={d => |
||||
|
formatCurrencyUnit(getFiatUnit('USD'), d.y * 100, { |
||||
|
showCode: true, |
||||
|
}) |
||||
|
} |
||||
|
renderTickX={t => moment(t).format('MMM. D')} |
||||
|
/> |
||||
|
</Box> |
||||
|
</Fragment> |
||||
|
)} |
||||
|
/> |
||||
|
</Card> |
||||
|
) |
||||
|
|
||||
|
export default BalanceSummary |
||||
@ -0,0 +1,137 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import { PureComponent } from 'react' |
||||
|
import { connect } from 'react-redux' |
||||
|
import moment from 'moment' |
||||
|
|
||||
|
import type { MapStateToProps } from 'react-redux' |
||||
|
import type { Accounts } from 'types/common' |
||||
|
|
||||
|
import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' |
||||
|
|
||||
|
import first from 'lodash/first' |
||||
|
import get from 'lodash/get' |
||||
|
import last from 'lodash/last' |
||||
|
|
||||
|
const mapStateToProps: MapStateToProps<*, *, *> = state => ({ |
||||
|
counterValues: state.counterValues, |
||||
|
}) |
||||
|
|
||||
|
function getAllBalances({ |
||||
|
accounts, |
||||
|
counterValues, |
||||
|
daysCount, |
||||
|
}: { |
||||
|
accounts: Accounts, |
||||
|
counterValues: Object, |
||||
|
daysCount: number, |
||||
|
}) { |
||||
|
const getDate = date => moment(date).format('YYYY-MM-DD') |
||||
|
const getValue = (balance, unit, d) => |
||||
|
balance / 10 ** unit.magnitude * counterValues['BTC-USD'][d] |
||||
|
|
||||
|
const allBalancesByCoinType = accounts.reduce((result, account) => { |
||||
|
const { coinType } = account |
||||
|
|
||||
|
Object.keys(account.balanceByDay).forEach(k => { |
||||
|
if (!result[coinType]) { |
||||
|
result[coinType] = {} |
||||
|
} |
||||
|
result[coinType][k] = account.balanceByDay[k] + get(result, `${coinType}.${k}`, 0) |
||||
|
}) |
||||
|
|
||||
|
return result |
||||
|
}, {}) |
||||
|
|
||||
|
const allBalances = Object.keys(allBalancesByCoinType).reduce((result, coinType) => { |
||||
|
const unit = getDefaultUnitByCoinType(parseInt(coinType, 10)) |
||||
|
|
||||
|
const balanceByDay = allBalancesByCoinType[coinType] |
||||
|
|
||||
|
const balanceByDayKeys = Object.keys(balanceByDay).sort((a, b) => new Date(b) - new Date(a)) |
||||
|
|
||||
|
const lastDay = balanceByDayKeys[0] |
||||
|
const lastBalance = balanceByDay[lastDay] |
||||
|
|
||||
|
let balance = lastBalance |
||||
|
let index = daysCount |
||||
|
|
||||
|
result[lastDay] = getValue(balance, unit, lastDay) |
||||
|
|
||||
|
let d = getDate(moment(lastDay).subtract(1, 'days')) |
||||
|
|
||||
|
while (index !== 0) { |
||||
|
result[d] = getValue(balance, unit, d) + (result[d] || 0) |
||||
|
d = getDate(moment(d).subtract(1, 'days')) |
||||
|
|
||||
|
if (balanceByDay[d]) { |
||||
|
balance = balanceByDay[d] |
||||
|
} |
||||
|
|
||||
|
index-- |
||||
|
} |
||||
|
|
||||
|
return result |
||||
|
}, {}) |
||||
|
|
||||
|
return Object.keys(allBalances) |
||||
|
.sort() |
||||
|
.map(k => ({ |
||||
|
name: k, |
||||
|
value: allBalances[k], |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
function calculateBalance(props) { |
||||
|
const allBalances = getAllBalances({ |
||||
|
accounts: props.accounts, |
||||
|
counterValues: props.counterValues, |
||||
|
daysCount: props.daysCount, |
||||
|
}) |
||||
|
|
||||
|
return { |
||||
|
allBalances, |
||||
|
totalBalance: last(allBalances).value, |
||||
|
sinceBalance: first(allBalances).value, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
type Props = { |
||||
|
accounts: Accounts, |
||||
|
counterValues: Object, |
||||
|
daysCount: number, |
||||
|
render: Function, |
||||
|
} |
||||
|
|
||||
|
type State = { |
||||
|
allBalances: Array<Object>, |
||||
|
totalBalance: number, |
||||
|
sinceBalance: number, |
||||
|
} |
||||
|
|
||||
|
class CalculateBalance extends PureComponent<Props, State> { |
||||
|
state = { |
||||
|
...calculateBalance(this.props), |
||||
|
} |
||||
|
|
||||
|
componentWillReceiveProps(nextProps) { |
||||
|
const sameAccounts = this.props.accounts === nextProps.accounts |
||||
|
const sameCounterValues = this.props.counterValues === nextProps.counterValues |
||||
|
const sameDaysCount = this.props.daysCount === nextProps.daysCount |
||||
|
|
||||
|
if (!sameAccounts || !sameCounterValues || !sameDaysCount) { |
||||
|
this.setState({ |
||||
|
...calculateBalance(nextProps), |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { render } = this.props |
||||
|
const { allBalances, totalBalance, sinceBalance } = this.state |
||||
|
|
||||
|
return render({ allBalances, totalBalance, sinceBalance }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(CalculateBalance) |
||||
@ -0,0 +1,19 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import { handleActions } from 'redux-actions' |
||||
|
|
||||
|
export type CounterValuesState = {} |
||||
|
|
||||
|
const state: CounterValuesState = {} |
||||
|
|
||||
|
const handlers = { |
||||
|
UPDATE_COUNTER_VALUES: ( |
||||
|
state: CounterValuesState, |
||||
|
{ payload: counterValues }: { payload: CounterValuesState }, |
||||
|
): CounterValuesState => ({ |
||||
|
...state, |
||||
|
...counterValues, |
||||
|
}), |
||||
|
} |
||||
|
|
||||
|
export default handleActions(handlers, state) |
||||
Loading…
Reference in new issue