19 |

20 |

21 | Bitcoin Price
22 | last 30 days 23 |

24 |

25 |

26 |

27 | {formatPrice(currentPrice)} 28 |

29 |

30 | {hasIncreased ? '+' : '-'} 31 | {formatPrice(diffPrice)} 32 |

33 |

34 |

35 |

36 | 47 |

48 | 99 |

100 | ); 101 | } 102 | -------------------------------------------------------------------------------- /components/ethereum/banner/Banner.js: -------------------------------------------------------------------------------- 1 | import { withParentSize } from '@vx/responsive'; 2 | 3 | const Logo = withParentSize(function({ parentWidth, parentHeight }) { 4 | const margin = { 5 | top: 5, 6 | bottom: 5, 7 | right: 22, 8 | left: 22 9 | }; 10 | const width = parentWidth - margin.left - margin.right; 11 | const wCenter = parentWidth / 2; 12 | const hCenter = parentHeight / 2; 13 | const topCenter = hCenter - hCenter * 0.25; 14 | const bottomCenter = hCenter + hCenter * 0.25; 15 | return ( 16 | 50 | ); 51 | }); 52 | 53 | export default function Banner({ 54 | increaseNumItems, 55 | decreaseNumItems, 56 | numItems 57 | }) { 58 | return ( 59 |

60 |

61 | 62 |

63 |

64 | 65 | 66 | {numItems} 67 | 68 | 69 |

70 | 120 |

121 | ); 122 | } 123 | -------------------------------------------------------------------------------- /pages/ethereum.js: -------------------------------------------------------------------------------- 1 | import 'isomorphic-fetch'; 2 | import { TopCorner, Banner, Chart, Footer } from '../components/ethereum'; 3 | 4 | class Ethereum extends React.Component { 5 | static async getInitialProps() { 6 | const res = await fetch( 7 | `https://api.cryptowat.ch/markets/gdax/ethusd/ohlc?period=180` 8 | ); 9 | const json = await res.json(); 10 | return { data: json.result['180'] }; 11 | } 12 | 13 | constructor(props) { 14 | super(props); 15 | this.state = { numItems: 180 }; 16 | this.increaseNumItems = this.increaseNumItems.bind(this); 17 | this.decreaseNumItems = this.decreaseNumItems.bind(this); 18 | } 19 | 20 | increaseNumItems() { 21 | if (this.state.numItems === 500) return; 22 | this.setState(() => ({ numItems: this.state.numItems + 20 })); 23 | } 24 | 25 | decreaseNumItems() { 26 | if (this.state.numItems === 40) return; 27 | this.setState(() => ({ numItems: this.state.numItems - 20 })); 28 | } 29 | 30 | render() { 31 | const { data } = this.props; 32 | 33 | const unix = d => new Date(d * 1000); 34 | 35 | const buckets = data 36 | .map(b => { 37 | const [ 38 | closeTime, 39 | openPrice, 40 | highPrice, 41 | lowPrice, 42 | closePrice, 43 | volume 44 | ] = b; 45 | return { 46 | closeTime: unix(closeTime), 47 | openPrice, 48 | highPrice, 49 | lowPrice, 50 | closePrice, 51 | volume, 52 | hollow: closePrice > openPrice 53 | }; 54 | }) 55 | .reverse() 56 | .slice(0, this.state.numItems); 57 | 58 | const sortedBuckets = buckets.sort((a, b) => { 59 | return a.closeTime - b.closeTime; 60 | }); 61 | 62 | const maxHighPrice = Math.max( 63 | ...buckets.map(b => Math.max(...[b.highPrice, b.openPrice, b.closePrice])) 64 | ); 65 | const minLowPrice = Math.min( 66 | ...buckets.map(b => Math.min(...[b.lowPrice, b.openPrice, b.closePrice])) 67 | ); 68 | const maxVolume = Math.max(...buckets.map(b => b.volume)); 69 | 70 | const start = sortedBuckets[0].closeTime; 71 | const end = sortedBuckets[sortedBuckets.length - 1].closeTime; 72 | 73 | return ( 74 |

75 |

76 |

77 | 87 |

88 | 89 | 94 |

95 |

130 | ); 131 | } 132 | } 133 | 134 | export default Ethereum; 135 | -------------------------------------------------------------------------------- /components/chart.js: -------------------------------------------------------------------------------- 1 | import { Group } from '@vx/group'; 2 | import { AreaClosed, LinePath, Bar } from '@vx/shape'; 3 | import { withParentSize } from '@vx/responsive'; 4 | import { scaleTime, scaleLinear } from '@vx/scale'; 5 | import { LinearGradient } from '@vx/gradient'; 6 | import { PatternLines } from '@vx/pattern'; 7 | import { AxisBottom } from '@vx/axis'; 8 | import { withTooltip } from '@vx/tooltip'; 9 | import { localPoint } from '@vx/event'; 10 | import { bisector } from 'd3-array'; 11 | 12 | import Tooltips from './tooltips'; 13 | import HoverLine from './hoverline'; 14 | import MaxPrice from './maxprice'; 15 | import MinPrice from './minprice'; 16 | import formatPrice from '../utils/formatPrice'; 17 | import formatDate from '../utils/formatDate'; 18 | 19 | class Chart extends React.Component { 20 | constructor(props) { 21 | super(props); 22 | } 23 | render() { 24 | const { 25 | data, 26 | parentWidth = 600, 27 | parentHeight = 400, 28 | margin = {}, 29 | tooltipData, 30 | tooltipLeft, 31 | tooltipTop, 32 | showTooltip, 33 | hideTooltip 34 | } = this.props; 35 | 36 | const width = parentWidth - margin.left - margin.right; 37 | const height = parentHeight - margin.top - margin.bottom; 38 | 39 | const x = d => new Date(d.time); 40 | const y = d => d.price; 41 | const bisectDate = bisector(d => x(d)).left; 42 | 43 | const firstPoint = data[0]; 44 | const currentPoint = data[data.length - 1]; 45 | const minPrice = Math.min(...data.map(y)); 46 | const maxPrice = Math.max(...data.map(y)); 47 | const firstPrice = y(firstPoint); 48 | const currentPrice = y(currentPoint); 49 | const maxData = [ 50 | { time: x(firstPoint), price: maxPrice }, 51 | { time: x(currentPoint), price: maxPrice } 52 | ]; 53 | const minData = [ 54 | { time: x(firstPoint), price: minPrice }, 55 | { time: x(currentPoint), price: minPrice } 56 | ]; 57 | 58 | const xScale = scaleTime({ 59 | range: [0, width], 60 | domain: [x(firstPoint), x(currentPoint)] 61 | }); 62 | const yScale = scaleLinear({ 63 | range: [height, 0], 64 | domain: [minPrice, maxPrice + 100] 65 | }); 66 | 67 | return ( 68 |

69 | 190 | {tooltipData && 191 | } 199 |

200 | ); 201 | } 202 | } 203 | 204 | export default withTooltip(Chart); 205 | -------------------------------------------------------------------------------- /components/ethereum/chart/Chart.js: -------------------------------------------------------------------------------- 1 | import { Bar } from '@vx/shape'; 2 | import { Group } from '@vx/group'; 3 | import { localPoint } from '@vx/event'; 4 | import { withTooltip, Tooltip } from '@vx/tooltip'; 5 | import { LinearGradient } from '@vx/gradient'; 6 | import { withParentSize } from '@vx/responsive'; 7 | import { GridRows, GridColumns } from '@vx/grid'; 8 | import { AxisLeft, AxisBottom, AxisRight } from '@vx/axis'; 9 | import { scaleTime, scaleLinear, scaleBand } from '@vx/scale'; 10 | import { format } from 'd3-format'; 11 | import { timeFormat } from 'd3-time-format'; 12 | import Volume from './Volume'; 13 | import Details from './Details'; 14 | import TimeMarker from './TimeMarker'; 15 | import HoverMarkers from './HoverMarkers'; 16 | 17 | const formatPrice = format('$,.2f'); 18 | const formatNumber = format(',.0f'); 19 | const formatTime = timeFormat('%I:%M%p'); 20 | 21 | class Chart extends React.Component { 22 | constructor(props) { 23 | super(props); 24 | this.state = { 25 | activeBucket: undefined, 26 | yPoint: undefined 27 | }; 28 | } 29 | render() { 30 | const { parentWidth, parentHeight, data } = this.props; 31 | const { 32 | buckets, 33 | start, 34 | end, 35 | maxHighPrice, 36 | minLowPrice, 37 | maxVolume, 38 | showTooltip, 39 | hideTooltip, 40 | tooltipLeft, 41 | tooltipTop, 42 | tooltipData 43 | } = data; 44 | 45 | const { activeBucket, yPoint } = this.state; 46 | 47 | const margin = { 48 | top: 0, 49 | left: 0, 50 | right: 0, 51 | bottom: 80 52 | }; 53 | 54 | const width = parentWidth; 55 | const height = parentHeight; 56 | 57 | const xScale = scaleBand({ 58 | range: [0, width - 50], 59 | domain: buckets.map(b => b.closeTime), 60 | padding: 0.3 61 | }); 62 | const timeScale = scaleTime({ 63 | range: [0, width - 50], 64 | domain: [start, end] 65 | }); 66 | const yScale = scaleLinear({ 67 | range: [height - margin.bottom, 20], 68 | domain: [minLowPrice - 3, maxHighPrice] 69 | }); 70 | 71 | const volumeHeight = (height - margin.bottom) * 0.25; 72 | const yVolumeScale = scaleLinear({ 73 | range: [volumeHeight, 0], 74 | domain: [0, maxVolume] 75 | }); 76 | 77 | return ( 78 |

79 | 222 | {activeBucket && 223 |

224 | 230 |

237 |

} 238 |

239 | ); 240 | } 241 | } 242 | 243 | export default withParentSize(withTooltip(Chart)); 244 | --------------------------------------------------------------------------------