openethereum/js/packages/ui/GasPriceSelector/gasPriceSelector.js

372 lines
9.4 KiB
JavaScript
Raw Normal View History

// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import BigNumber from 'bignumber.js';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Bar, BarChart, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from 'recharts';
import Slider from '../Form/Slider';
import CustomBar from './CustomBar';
import CustomCursor from './CustomCursor';
import CustomShape from './CustomShape';
import CustomTooltip from './CustomTooltip';
import { COLORS, countModifier } from './util';
import styles from './gasPriceSelector.css';
const TOOL_STYLE = {
color: 'rgba(255,255,255,0.5)',
backgroundColor: 'rgba(0, 0, 0, 0.75)',
padding: '0 0.5em',
fontSize: '0.75em'
};
export default class GasPriceSelector extends Component {
static contextTypes = {
intl: PropTypes.object.isRequired
};
static propTypes = {
histogram: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
price: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
])
}
state = {
price: null,
sliderValue: 0.5,
selectedIndex: 0,
chartData: {
values: [],
xDomain: [],
yDomain: [],
N: 0
}
}
componentWillMount () {
this.computeCharts();
this.setprice();
}
componentWillReceiveProps (nextProps) {
if (nextProps.price !== this.props.price) {
this.setprice(nextProps);
}
}
componentWillUpdate (nextProps, nextState) {
if (Math.floor(nextState.sliderValue) !== Math.floor(this.state.sliderValue)) {
this.updateSelectedBarChart(nextState);
}
}
render () {
return (
<div>
{ this.renderChart() }
{ this.renderSlider() }
</div>
);
}
renderChart () {
const { histogram } = this.props;
const { chartData, sliderValue, selectedIndex } = this.state;
if (chartData.values.length === 0) {
return null;
}
const height = 196;
const countIndex = Math.max(0, Math.min(selectedIndex, histogram.counts.length - 1));
const selectedCount = countModifier(histogram.counts[countIndex]);
return (
<div className={ styles.chartRow }>
<div style={ { flex: 1, height } }>
<div className={ styles.chart }>
<ResponsiveContainer height={ height }>
<ScatterChart margin={ { top: 0, right: 0, left: 0, bottom: 0 } }>
<Scatter
data={ [
{ x: sliderValue, y: 0 },
{ x: sliderValue, y: selectedCount },
{ x: sliderValue, y: chartData.yDomain[1] }
] }
isAnimationActive={ false }
line
shape={
<CustomShape showValue={ selectedCount } />
}
/>
<XAxis
dataKey='x'
domain={ [0, 1] }
hide
height={ 0 }
/>
<YAxis
dataKey='y'
domain={ chartData.yDomain }
hide
width={ 0 }
/>
</ScatterChart>
</ResponsiveContainer>
</div>
<div className={ styles.chart }>
<ResponsiveContainer height={ height }>
<BarChart
barCategoryGap={ 1 }
data={ chartData.values }
margin={ { top: 0, right: 0, left: 0, bottom: 0 } }
ref='barChart'
>
<Bar
dataKey='value'
onClick={ this.onClickprice }
shape={ <CustomBar selected={ selectedIndex } onClick={ this.onClickprice } /> }stroke={ COLORS.line }
/>
<Tooltip
content={ this.tooltipContentRenderer }
cursor={ this.renderCustomCursor() }
wrapperStyle={ TOOL_STYLE }
/>
<XAxis
dataKey='index'
domain={ chartData.xDomain }
hide
type='category'
/>
<YAxis
domain={ chartData.yDomain }
hide
type='number'
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
);
}
/**
* Passing the `intl` object as a prop
* so the CustomTooltip can add for child
* context (used by FormattedMessages)
*/
tooltipContentRenderer = (props) => {
const { histogram } = this.props;
return (
<CustomTooltip
histogram={ histogram }
intl={ this.context.intl }
{ ...props }
/>
);
}
renderSlider () {
const { sliderValue } = this.state;
return (
<div className={ styles.sliderRow }>
<Slider
className={ styles.slider }
min={ 0.0 }
max={ 1.0 }
step={ 0.01 }
value={ sliderValue }
onChange={ this.onEditpriceSlider }
/>
</div>
);
}
renderCustomCursor = () => {
const { histogram } = this.props;
const { chartData } = this.state;
return (
<CustomCursor
counts={ histogram.counts }
getIndex={ this.getBarHoverIndex }
onClick={ this.onClickprice }
yDomain={ chartData.yDomain }
/>
);
}
getBarHoverIndex = () => {
const { barChart } = this.refs;
if (!barChart || !barChart.state) {
return -1;
}
return barChart.state.activeTooltipIndex;
}
computeChartsData () {
const { priceChartData } = this.state;
const { histogram } = this.props;
const values = priceChartData
.map((value, index) => ({ value, index }));
const N = values.length - 1;
const maxGasCounts = countModifier(
histogram
.counts
.reduce((max, count) => count.greaterThan(max) ? count : max, 0)
);
const xDomain = [0, N];
const yDomain = [0, maxGasCounts * 1.1];
const chartData = {
values, N,
xDomain, yDomain
};
this.setState({ chartData }, () => {
this.updateSelectedBarChart();
});
}
computeCharts (props = this.props) {
const { histogram } = props;
const priceChartData = histogram
.counts
.map(count => countModifier(count));
this.setState(
{ priceChartData },
() => this.computeChartsData()
);
}
updateSelectedBarChart (state = this.state) {
}
setprice (props = this.props) {
const { price, histogram } = props;
// If no gas price yet...
if (!price) {
return this.setSliderValue(0.5);
}
const bnprice = (typeof price === 'string')
? new BigNumber(price)
: price;
// If gas price hasn't changed
if (this.state.price && bnprice.equals(this.state.price)) {
return;
}
const prices = histogram.bucketBounds;
const startIndex = prices
.findIndex(price => price.greaterThan(bnprice)) - 1;
// price Lower than the max in histogram
if (startIndex === -1) {
return this.setSliderValue(0, bnprice);
}
// price Greater than the max in histogram
if (startIndex === -2) {
return this.setSliderValue(1, bnprice);
}
const priceA = prices[startIndex];
const priceB = prices[startIndex + 1];
const sliderValueDec = bnprice
.minus(priceA)
.dividedBy(priceB.minus(priceA))
.toNumber();
const sliderValue = (startIndex + sliderValueDec) / (prices.length - 1);
this.setSliderValue(sliderValue, bnprice);
}
setSliderValue (value, price = this.state.price) {
const { histogram } = this.props;
const N = histogram.bucketBounds.length - 1;
const sliderValue = Math.max(0, Math.min(value, 1));
const selectedIndex = Math.floor(sliderValue * N);
this.setState({ sliderValue, price, selectedIndex });
}
onBarChartMouseUp = (event) => {
console.log(event);
}
onClickprice = (bar) => {
const { index } = bar;
const ratio = (index + 0.5) / (this.state.chartData.N + 1);
this.onEditpriceSlider(null, ratio);
}
onEditpriceSlider = (event, sliderValue) => {
const { histogram } = this.props;
const prices = histogram.bucketBounds;
const N = prices.length - 1;
const priceAIdx = Math.floor(sliderValue * N);
const priceBIdx = priceAIdx + 1;
if (priceBIdx === N + 1) {
const price = prices[priceAIdx].round();
this.props.onChange(event, price);
return;
}
const priceA = prices[priceAIdx];
const priceB = prices[priceBIdx];
const mult = Math.round((sliderValue % 1) * 100) / 100;
const price = priceA
.plus(priceB.minus(priceA).times(mult))
.round();
this.setSliderValue(sliderValue, price);
this.props.onChange(event, price.toFixed());
}
}