Browse Source

Clean helper, debounce render Chart Tooltip

master
Loëck Vézien 7 years ago
parent
commit
3491a9c59e
No known key found for this signature in database GPG Key ID: CBCDCE384E853AC4
  1. 13
      package.json
  2. 48
      src/components/CalculateBalance.js
  3. 29
      src/components/base/Chart/index.js
  4. 39
      src/helpers/balance.js
  5. 50
      yarn.lock

13
package.json

@ -44,10 +44,10 @@
}, },
"dependencies": { "dependencies": {
"@ledgerhq/currencies": "^4.5.0", "@ledgerhq/currencies": "^4.5.0",
"@ledgerhq/hw-app-btc": "^4.2.2", "@ledgerhq/hw-app-btc": "^4.6.0",
"@ledgerhq/hw-app-eth": "^4.2.0", "@ledgerhq/hw-app-eth": "^4.6.0",
"@ledgerhq/hw-transport": "^4.2.0", "@ledgerhq/hw-transport": "^4.6.0",
"@ledgerhq/hw-transport-node-hid": "^4.2.0", "@ledgerhq/hw-transport-node-hid": "^4.6.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-runtime": "^6.26.0", "babel-runtime": "^6.26.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
@ -89,7 +89,7 @@
"source-map": "0.6.0", "source-map": "0.6.0",
"source-map-support": "^0.5.3", "source-map-support": "^0.5.3",
"styled-components": "^3.2.1", "styled-components": "^3.2.1",
"styled-system": "^2.2.0", "styled-system": "^2.2.1",
"tippy.js": "^2.2.3", "tippy.js": "^2.2.3",
"victory": "^0.25.6" "victory": "^0.25.6"
}, },
@ -102,7 +102,6 @@
"@storybook/react": "^3.3.15", "@storybook/react": "^3.3.15",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
"babel-eslint": "^8.2.1", "babel-eslint": "^8.2.1",
"babel-loader": "^7.1.4",
"babel-plugin-module-resolver": "^3.1.0", "babel-plugin-module-resolver": "^3.1.0",
"babel-plugin-styled-components": "^1.5.0", "babel-plugin-styled-components": "^1.5.0",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
@ -126,7 +125,7 @@
"eslint-plugin-import": "^2.9.0", "eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0", "eslint-plugin-react": "^7.7.0",
"flow-bin": "^0.66.0", "flow-bin": "^0.67.1",
"flow-typed": "^2.3.0", "flow-typed": "^2.3.0",
"hard-source-webpack-plugin": "^0.6.0", "hard-source-webpack-plugin": "^0.6.0",
"husky": "^0.14.3", "husky": "^0.14.3",

48
src/components/CalculateBalance.js

@ -2,45 +2,15 @@
import { PureComponent } from 'react' import { PureComponent } from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import moment from 'moment'
import find from 'lodash/find'
import first from 'lodash/first'
import last from 'lodash/last'
import type { Accounts } from 'types/common' import type { Accounts } from 'types/common'
import { getBalanceHistoryForAccounts } from 'helpers/balance' import calculateBalance from 'helpers/balance'
const mapStateToProps = state => ({ const mapStateToProps = state => ({
counterValues: state.counterValues, counterValues: state.counterValues,
}) })
function calculateBalance(props: Object) {
const interval = {
start: moment()
.subtract(props.daysCount, 'days')
.format('YYYY-MM-DD'),
end: moment().format('YYYY-MM-DD'),
}
const allBalances = getBalanceHistoryForAccounts({
counterValue: props.counterValue,
accounts: props.accounts,
counterValues: props.counterValues,
interval,
}).map(e => ({ name: e.date, value: e.balance }))
const firstNonEmptyDay = find(allBalances, e => e.value)
const refBalance = firstNonEmptyDay ? firstNonEmptyDay.value : 0
return {
allBalances,
totalBalance: last(allBalances).value,
sinceBalance: first(allBalances).value,
refBalance,
}
}
type Props = { type Props = {
accounts: Accounts, accounts: Accounts,
counterValues: Object, counterValues: Object,
@ -55,20 +25,24 @@ type State = {
refBalance: number, refBalance: number,
} }
class CalculateBalance extends PureComponent<Props, State> { function calculateBalanceToState(props: Object) {
state = { const { accounts, counterValue, counterValues, daysCount } = props
...calculateBalance(this.props),
return {
...calculateBalance({ accounts, counterValue, counterValues, daysCount }),
}
} }
class CalculateBalance extends PureComponent<Props, State> {
state = calculateBalanceToState(this.props)
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const sameAccounts = this.props.accounts === nextProps.accounts const sameAccounts = this.props.accounts === nextProps.accounts
const sameCounterValues = this.props.counterValues === nextProps.counterValues const sameCounterValues = this.props.counterValues === nextProps.counterValues
const sameDaysCount = this.props.daysCount === nextProps.daysCount const sameDaysCount = this.props.daysCount === nextProps.daysCount
if (!sameAccounts || !sameCounterValues || !sameDaysCount) { if (!sameAccounts || !sameCounterValues || !sameDaysCount) {
this.setState({ this.setState(calculateBalanceToState(nextProps))
...calculateBalance(nextProps),
})
} }
} }

29
src/components/base/Chart/index.js

@ -111,16 +111,41 @@ function getLinearGradient({
) : null ) : null
} }
class CustomTooltip extends Component<Object> { class CustomTooltip extends Component<any, any> {
static defaultEvents = VictoryTooltip.defaultEvents static defaultEvents = VictoryTooltip.defaultEvents
state = this.props
componentWillMount() {
this._mounted = true
}
componentWillReceiveProps(nextProps) {
this._shouldRender = false
this.updateState(nextProps)
}
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
const isActive = nextProps.active === true const isActive = nextProps.active === true
const wasActive = this.props.active === true && !nextProps.active const wasActive = this.props.active === true && !nextProps.active
return isActive || wasActive return (isActive && this._shouldRender) || wasActive
} }
componentWillUnmount() {
this._mounted = false
}
updateState = props =>
this._mounted &&
window.requestAnimationFrame(() => {
this._shouldRender = true
this.setState(props)
})
_shouldRender = false
_mounted = false
render() { render() {
const { x, y, active, text, datum, renderer } = this.props const { x, y, active, text, datum, renderer } = this.props

39
src/helpers/balance.js

@ -1,9 +1,13 @@
// @flow // @flow
import moment from 'moment' import moment from 'moment'
import isUndefined from 'lodash/isUndefined'
import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
import find from 'lodash/find'
import first from 'lodash/first'
import isUndefined from 'lodash/isUndefined'
import last from 'lodash/last'
import type { Accounts, Account } from 'types/common' import type { Accounts, Account } from 'types/common'
type DateInterval = { type DateInterval = {
@ -16,6 +20,13 @@ type BalanceHistoryDay = {
balance: number, balance: number,
} }
type CalculateBalance = {
accounts: Accounts,
counterValue: string,
counterValues: Object,
daysCount: number,
}
// Map the given date interval // Map the given date interval
// iteratee is given day, index, and currently constructed array // iteratee is given day, index, and currently constructed array
// (exactly like Array.map) // (exactly like Array.map)
@ -115,3 +126,29 @@ export function getBalanceHistoryForAccounts({
}) })
: balances.length > 0 ? balances[0] : [] : balances.length > 0 ? balances[0] : []
} }
export default function calculateBalance(props: CalculateBalance) {
const interval = {
start: moment()
.subtract(props.daysCount, 'days')
.format('YYYY-MM-DD'),
end: moment().format('YYYY-MM-DD'),
}
const allBalances = getBalanceHistoryForAccounts({
counterValue: props.counterValue,
accounts: props.accounts,
counterValues: props.counterValues,
interval,
}).map(e => ({ name: e.date, value: e.balance }))
const firstNonEmptyDay = find(allBalances, e => e.value)
const refBalance = firstNonEmptyDay ? firstNonEmptyDay.value : 0
return {
allBalances,
totalBalance: last(allBalances).value,
sinceBalance: first(allBalances).value,
refBalance,
}
}

50
yarn.lock

@ -124,29 +124,29 @@
numeral "^2.0.6" numeral "^2.0.6"
querystring "^0.2.0" querystring "^0.2.0"
"@ledgerhq/hw-app-btc@^4.2.2": "@ledgerhq/hw-app-btc@^4.6.0":
version "4.3.0" version "4.6.0"
resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-btc/-/hw-app-btc-4.3.0.tgz#15e2b01c5e8493c3de78b59386ec029719dda1dd" resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-btc/-/hw-app-btc-4.6.0.tgz#6cc660d505c8fba9ca228f08e8313bdeef7dd920"
dependencies: dependencies:
"@ledgerhq/hw-transport" "^4.3.0" "@ledgerhq/hw-transport" "^4.6.0"
create-hash "^1.1.3" create-hash "^1.1.3"
"@ledgerhq/hw-app-eth@^4.2.0": "@ledgerhq/hw-app-eth@^4.6.0":
version "4.3.0" version "4.6.0"
resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-4.3.0.tgz#5f365a3560cd78e8cd711737ec56249390cbf5e5" resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-4.6.0.tgz#2054f02625747178e23040f6f2b60105de82e1bb"
dependencies: dependencies:
"@ledgerhq/hw-transport" "^4.3.0" "@ledgerhq/hw-transport" "^4.6.0"
"@ledgerhq/hw-transport-node-hid@^4.2.0": "@ledgerhq/hw-transport-node-hid@^4.6.0":
version "4.3.0" version "4.6.0"
resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-node-hid/-/hw-transport-node-hid-4.3.0.tgz#6438133a2021ecf8db03b0ae4827b9ec454c5577" resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-node-hid/-/hw-transport-node-hid-4.6.0.tgz#3462e65fdfc63427d68d85b631a3d5d974e2a049"
dependencies: dependencies:
"@ledgerhq/hw-transport" "^4.3.0" "@ledgerhq/hw-transport" "^4.6.0"
node-hid "^0.7.2" node-hid "^0.7.2"
"@ledgerhq/hw-transport@^4.2.0", "@ledgerhq/hw-transport@^4.3.0": "@ledgerhq/hw-transport@^4.6.0":
version "4.3.0" version "4.6.0"
resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-4.3.0.tgz#24e1ff819d8aad00a58ae10ed3ee5d60aad54d7c" resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-4.6.0.tgz#38f01eb33a54a0ad9885d25a3a55509ec820ae2d"
dependencies: dependencies:
events "^1.1.1" events "^1.1.1"
@ -1070,14 +1070,6 @@ babel-loader@^7.1.2:
loader-utils "^1.0.2" loader-utils "^1.0.2"
mkdirp "^0.5.1" mkdirp "^0.5.1"
babel-loader@^7.1.4:
version "7.1.4"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.4.tgz#e3463938bd4e6d55d1c174c5485d406a188ed015"
dependencies:
find-cache-dir "^1.0.0"
loader-utils "^1.0.2"
mkdirp "^0.5.1"
babel-messages@^6.23.0: babel-messages@^6.23.0:
version "6.23.0" version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e" resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@ -4507,9 +4499,9 @@ flatten@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
flow-bin@^0.66.0: flow-bin@^0.67.1:
version "0.66.0" version "0.67.1"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.66.0.tgz#a96dde7015dc3343fd552a7b4963c02be705ca26" resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.67.1.tgz#eabb7197cce870ac9442cfd04251c7ddc30377db"
flow-typed@^2.3.0: flow-typed@^2.3.0:
version "2.3.0" version "2.3.0"
@ -9668,9 +9660,9 @@ styled-components@^3.2.1:
stylis-rule-sheet "^0.0.8" stylis-rule-sheet "^0.0.8"
supports-color "^3.2.3" supports-color "^3.2.3"
styled-system@^2.2.0: styled-system@^2.2.1:
version "2.2.0" version "2.2.1"
resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.2.0.tgz#cda71fda14ef87ee592de04c6b09a831f23df63f" resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.2.1.tgz#2b0a486917037934dd7451eebe2e7fd5d1a1c58f"
dependencies: dependencies:
prop-types "^15.6.0" prop-types "^15.6.0"

Loading…
Cancel
Save