Merge pull request hshoff#2 from hshoff/vs02

[eth] add volume bars

Author: hshoff

components/ethereum/banner/Banner.js

@@ -61,11 +61,11 @@ export default function Banner({
         <Logo />
       </div>
       <div className="controls">
-        <button onClick={decreaseNumItems}>-</button>
+        <button onClick={increaseNumItems}>+</button>
         <span className="numitems">
           {numItems}
         </span>
-        <button onClick={increaseNumItems}>+</button>
+        <button onClick={decreaseNumItems}>-</button>
       </div>
       <style jsx>{`
         .banner {

components/ethereum/chart/Chart.js

@@ -7,14 +7,15 @@ import { AxisLeft, AxisBottom } from '@vx/axis';
 import { Bar } from '@vx/shape';
 import { format } from 'd3-format';
 import { timeFormat } from 'd3-time-format';
+import Volume from './Volume';
 
 const formatPrice = format('$,.2f');
 const formatTime = timeFormat('%I:%M%p');
 
 class Chart extends React.Component {
   render() {
     const { parentWidth, parentHeight, data } = this.props;
-    const { buckets, start, end, maxHighPrice, minLowPrice } = data;
+    const { buckets, start, end, maxHighPrice, minLowPrice, maxVolume } = data;
 
     const margin = {
       top: 0,
@@ -40,6 +41,12 @@ class Chart extends React.Component {
       domain: [minLowPrice - 3, maxHighPrice]
     });
 
+    const volumeHeight = (height - margin.bottom) * 0.25;
+    const yVolumeScale = scaleLinear({
+      range: [volumeHeight, 0],
+      domain: [0, maxVolume]
+    });
+
     return (
       <svg width={width} height={height}>
         <Group top={margin.top} left={margin.left}>
@@ -96,6 +103,13 @@ class Chart extends React.Component {
                 x={xScale(b.closeTime)}
                 y={b.hollow ? yScale(b.closePrice) : yScale(b.openPrice)}
               />
+              <Volume
+                top={height - margin.bottom - volumeHeight}
+                height={volumeHeight}
+                scale={yVolumeScale}
+                xScale={xScale}
+                data={b}
+              />
             </g>
           );
         })}

components/ethereum/chart/Volume.js

@@ -0,0 +1,28 @@
+import { Group } from '@vx/group';
+import { AxisRight } from '@vx/axis';
+import { Bar } from '@vx/shape';
+
+export default function Volume({ top, scale, xScale, height, data }) {
+  return (
+    <Group top={top}>
+      <AxisRight
+        scale={scale}
+        hideZero
+        hideTicks
+        hideAxisLine
+        tickLength={0}
+        tickValues={scale.ticks(5)}
+        tickLabelComponent={<text dx="0.33em" fill="white" fontSize={8} />}
+      />
+      <Bar
+        data={data}
+        width={xScale.bandwidth()}
+        height={height - scale(data.volume)}
+        x={xScale(data.closeTime)}
+        y={scale(data.volume)}
+        fill="white"
+        fillOpacity={0.3}
+      />
+    </Group>
+  );
+}

pages/ethereum.js

@@ -65,6 +65,7 @@ class Ethereum extends React.Component {
     const minLowPrice = Math.min(
       ...buckets.map(b => Math.min(...[b.lowPrice, b.openPrice, b.closePrice]))
     );
+    const maxVolume = Math.max(...buckets.map(b => b.volume));
 
     const start = sortedBuckets[0].closeTime;
     const end = sortedBuckets[sortedBuckets.length - 1].closeTime;
@@ -79,7 +80,8 @@ class Ethereum extends React.Component {
                 start,
                 end,
                 maxHighPrice,
-                minLowPrice
+                minLowPrice,
+                maxVolume
               }}
             />
           </div>