Browse Source

Fix (I think) issue with Tooltip and Chart

master
Loëck Vézien 7 years ago
parent
commit
468d1ee476
No known key found for this signature in database GPG Key ID: CBCDCE384E853AC4
  1. 2
      src/components/base/Chart/Tooltip.js
  2. 11
      src/components/base/Chart/handleMouseEvents.js
  3. 33
      src/components/base/FormattedVal/index.js

2
src/components/base/Chart/Tooltip.js

@ -6,7 +6,7 @@ import type { Unit } from '@ledgerhq/currencies'
import { colors as themeColors } from 'styles/theme'
import { TooltipContainer } from 'components/base/Tooltip'
import FormattedVal from 'components/base/FormattedVal'
import { FormattedVal } from 'components/base/FormattedVal'
import type { Item } from './types'

11
src/components/base/Chart/handleMouseEvents.js

@ -4,6 +4,9 @@ import React from 'react'
import * as d3 from 'd3'
import { renderToString } from 'react-dom/server'
import { ThemeProvider } from 'styled-components'
import { Provider } from 'react-redux'
import createStore from 'renderer/createStore'
import theme from 'styles/theme'
@ -92,9 +95,11 @@ export default function handleMouseEvents({
NODES.tooltip
.html(
renderToString(
<ThemeProvider theme={theme}>
<Tooltip unit={unit} renderTooltip={renderTooltip} d={d.ref} />
</ThemeProvider>,
<Provider store={createStore({})}>
<ThemeProvider theme={theme}>
<Tooltip unit={unit} renderTooltip={renderTooltip} d={d.ref} />
</ThemeProvider>
</Provider>,
),
)
.style('transform', `translate3d(${MARGINS.left + x(d.parsedDate)}px, ${y(d.value)}px, 0)`)

33
src/components/base/FormattedVal/index.js

@ -28,10 +28,14 @@ const T = styled(Box).attrs({
white-space: pre;
`
const I = ({ color, children }: { color: string, children: any }) => (
const I = ({ color, children }: { color?: string, children: any }) => (
<Box color={color}>{children}</Box>
)
I.defaultProps = {
color: undefined,
}
const mapStateToProps = state => ({
settings: state.settings,
})
@ -43,14 +47,14 @@ type Props = {
disableRounding?: boolean,
fiat?: string | null,
isPercent?: boolean,
settings: Settings,
settings?: Settings,
showCode?: boolean,
unit?: Unit | null,
val: number,
withIcon?: boolean,
}
function FormattedVal(props: Props) {
export function FormattedVal(props: Props) {
const {
animateTicker,
disableRounding,
@ -97,25 +101,21 @@ function FormattedVal(props: Props) {
text = <Ticker text={text} />
}
const marketColor = getMarketColor({
marketIndicator: settings.marketIndicator,
isNegative,
})
const marketColor = settings
? getMarketColor({
marketIndicator: settings.marketIndicator,
isNegative,
})
: undefined
return (
<T color={color || marketColor} withIcon={withIcon} {...p}>
{withIcon ? (
<Box horizontal alignItems="center" flow={1}>
<Box>
{isNegative ? (
<I color={marketColor}>
<IconBottom size={16} />
</I>
) : (
<I color={marketColor}>
<IconTop size={16} />
</I>
)}
<I color={marketColor}>
{isNegative ? <IconBottom size={16} /> : <IconTop size={16} />}
</I>
</Box>
<Box horizontal alignItems="center">
{text}
@ -135,6 +135,7 @@ FormattedVal.defaultProps = {
disableRounding: false,
fiat: null,
isPercent: false,
settings: undefined,
showCode: false,
unit: null,
withIcon: false,

Loading…
Cancel
Save