|
|
|
@ -3,17 +3,17 @@ |
|
|
|
/* eslint-disable react/no-multi-comp */ |
|
|
|
|
|
|
|
import React, { Fragment, Component, PureComponent } from 'react' |
|
|
|
import { |
|
|
|
VictoryChart, |
|
|
|
VictoryArea, |
|
|
|
VictoryAxis, |
|
|
|
VictoryTooltip, |
|
|
|
VictoryVoronoiContainer, |
|
|
|
} from 'victory' |
|
|
|
|
|
|
|
import VictoryChart from 'victory-chart/lib/components/victory-chart/victory-chart' |
|
|
|
import VictoryArea from 'victory-chart/lib/components/victory-area/victory-area' |
|
|
|
import VictoryAxis from 'victory-chart/lib/components/victory-axis/victory-axis' |
|
|
|
import VictoryTooltip from 'victory-core/lib/victory-tooltip/victory-tooltip' |
|
|
|
import VictoryVoronoiContainer from 'victory-chart/lib/components/containers/victory-voronoi-container' |
|
|
|
|
|
|
|
import { space, colors, fontSizes } from 'styles/theme' |
|
|
|
|
|
|
|
import Box from 'components/base/Box' |
|
|
|
import Text from 'components/base/Text' |
|
|
|
import { TooltipContainer } from 'components/base/Tooltip' |
|
|
|
|
|
|
|
const ANIMATION_DURATION = 600 |
|
|
|
@ -122,7 +122,7 @@ class CustomTooltip extends Component<Object> { |
|
|
|
} |
|
|
|
|
|
|
|
render() { |
|
|
|
const { x, y, active, text, datum } = this.props |
|
|
|
const { x, y, active, text, datum, renderer } = this.props |
|
|
|
|
|
|
|
if (!active) { |
|
|
|
return null |
|
|
|
@ -134,7 +134,7 @@ class CustomTooltip extends Component<Object> { |
|
|
|
mt={-space[1]} |
|
|
|
style={{ position: 'absolute', top: y, left: x, transform: `translate3d(-50%, 0, 0)` }} |
|
|
|
> |
|
|
|
{text(datum)} |
|
|
|
<Text style={{ lineHeight: 1 }}>{renderer(text(datum))}</Text> |
|
|
|
</TooltipContainer> |
|
|
|
</foreignObject> |
|
|
|
) |
|
|
|
@ -152,13 +152,6 @@ type GenericChart = { |
|
|
|
color: string, |
|
|
|
data: Array<Object>, |
|
|
|
} |
|
|
|
type Chart = GenericChart & { |
|
|
|
renderLabels: Function, |
|
|
|
renderTickX: Function, |
|
|
|
renderTickY: Function, |
|
|
|
tickCountX: number, |
|
|
|
tickCountY: number, |
|
|
|
} |
|
|
|
|
|
|
|
export const SimpleAreaChart = ({ |
|
|
|
linearGradient, |
|
|
|
@ -209,7 +202,14 @@ SimpleAreaChart.defaultProps = { |
|
|
|
...DEFAULT_PROPS, |
|
|
|
} |
|
|
|
|
|
|
|
const areaChartTooltip = <CustomTooltip /> |
|
|
|
type Chart = GenericChart & { |
|
|
|
renderLabels: Function, |
|
|
|
renderTickX: Function, |
|
|
|
renderTickY: Function, |
|
|
|
renderTooltip: Function, |
|
|
|
tickCountX: number, |
|
|
|
tickCountY: number, |
|
|
|
} |
|
|
|
|
|
|
|
const AreaChartContainer = <VictoryVoronoiContainer voronoiDimension="x" /> |
|
|
|
|
|
|
|
@ -225,6 +225,8 @@ export class AreaChart extends PureComponent<Chart> { |
|
|
|
...DEFAULT_PROPS, |
|
|
|
} |
|
|
|
|
|
|
|
_tooltip = <CustomTooltip renderer={this.props.renderTooltip} /> |
|
|
|
|
|
|
|
render() { |
|
|
|
const { |
|
|
|
color, |
|
|
|
@ -303,7 +305,7 @@ export class AreaChart extends PureComponent<Chart> { |
|
|
|
data={data} |
|
|
|
x="name" |
|
|
|
y="value" |
|
|
|
labelComponent={areaChartTooltip} |
|
|
|
labelComponent={this._tooltip} |
|
|
|
labels={renderLabels} |
|
|
|
style={{ |
|
|
|
data: { |
|
|
|
|
Loëck Vézien
7 years ago
GitHub