From 40905017318e1dd9321b5a919d42d3a82c5b5ab0 Mon Sep 17 00:00:00 2001
From: Harry Shoff <harry@airbnb.com>
Date: Wed, 8 Nov 2017 14:49:27 -0800
Subject: [PATCH 1/4] [responsive] add <ParentSize /> +
 resize-observer-polyfill

---
 packages/vx-responsive/package.json           | 20 ++-----
 .../src/components/ParentSIze.js              | 57 +++++++++++++++++++
 packages/vx-responsive/src/index.js           |  9 ++-
 .../vx-responsive/test/ParentSize.test.js     |  7 +++
 4 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 packages/vx-responsive/src/components/ParentSIze.js
 create mode 100644 packages/vx-responsive/test/ParentSize.test.js

diff --git a/packages/vx-responsive/package.json b/packages/vx-responsive/package.json
index d1af44be5..990edf298 100644
--- a/packages/vx-responsive/package.json
+++ b/packages/vx-responsive/package.json
@@ -3,9 +3,7 @@
   "version": "0.0.143",
   "description": "vx responsive svg",
   "main": "build/index.js",
-  "files": [
-    "build"
-  ],
+  "files": ["build"],
   "scripts": {
     "build": "make build SRC=./src",
     "prepublish": "make build SRC=./src",
@@ -15,13 +13,7 @@
     "type": "git",
     "url": "git+https://github.com/hshoff/vx.git"
   },
-  "keywords": [
-    "vx",
-    "react",
-    "d3",
-    "visualizations",
-    "charts"
-  ],
+  "keywords": ["vx", "react", "d3", "visualizations", "charts"],
   "author": "@hshoff",
   "license": "MIT",
   "bugs": {
@@ -42,7 +34,8 @@
     "regenerator-runtime": "^0.10.5"
   },
   "dependencies": {
-    "lodash": "^4.0.8"
+    "lodash": "4.0.8",
+    "resize-observer-polyfill": "1.4.2"
   },
   "peerDependencies": {
     "react": "^15.0.0-0 || ^16.0.0-0"
@@ -51,9 +44,6 @@
     "access": "public"
   },
   "jest": {
-    "setupFiles": [
-      "raf/polyfill",
-      "<rootDir>/test/enzyme-setup.js"
-    ]
+    "setupFiles": ["raf/polyfill", "<rootDir>/test/enzyme-setup.js"]
   }
 }
diff --git a/packages/vx-responsive/src/components/ParentSIze.js b/packages/vx-responsive/src/components/ParentSIze.js
new file mode 100644
index 000000000..b7a44e7af
--- /dev/null
+++ b/packages/vx-responsive/src/components/ParentSIze.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export default class ParentSize extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.resize = this.resize.bind(this);
+    this.setTarget = this.setTarget.bind(this);
+  }
+  componentDidMount() {
+    this.ro = new ResizeObserver((entries, observer) => {
+      for (const entry of entries) {
+        const { left, top, width, height } = entry.contentRect;
+        this.resize({
+          width,
+          height,
+          top,
+          left,
+        });
+      }
+    });
+    this.ro.observe(this.target);
+  }
+  componentWillUnmount() {
+    this.ro.disconnect();
+  }
+  resize({ width, height, top, left }) {
+    this.setState(() => ({
+      width,
+      height,
+      top,
+      left,
+    }));
+  }
+  setTarget(ref) {
+    this.target = ref;
+  }
+  render() {
+    const { className, children } = this.props;
+    return (
+      <div ref={this.setTarget} className={className}>
+        {children({
+          ...this.state,
+          ref: this.target,
+          resize: this.resize,
+        })}
+      </div>
+    );
+  }
+}
+
+ParentSize.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.func.isRequired,
+};
diff --git a/packages/vx-responsive/src/index.js b/packages/vx-responsive/src/index.js
index d28c0b69e..226be3340 100644
--- a/packages/vx-responsive/src/index.js
+++ b/packages/vx-responsive/src/index.js
@@ -1,3 +1,8 @@
 export { default as ScaleSVG } from './components/ScaleSVG';
-export { default as withParentSize } from './enhancers/withParentSize';
-export { default as withScreenSize } from './enhancers/withScreenSize';
+export { default as ParentSize } from './components/ParentSize';
+export {
+  default as withParentSize,
+} from './enhancers/withParentSize';
+export {
+  default as withScreenSize,
+} from './enhancers/withScreenSize';
diff --git a/packages/vx-responsive/test/ParentSize.test.js b/packages/vx-responsive/test/ParentSize.test.js
new file mode 100644
index 000000000..8f06130b5
--- /dev/null
+++ b/packages/vx-responsive/test/ParentSize.test.js
@@ -0,0 +1,7 @@
+import { ParentSize } from '../src';
+
+describe('<ParentSize />', () => {
+  test('it should be defined', () => {
+    expect(ParentSize).toBeDefined();
+  });
+});

From 1c5a13bd7e875279a99b4840b4c230dc7c27d40a Mon Sep 17 00:00:00 2001
From: Harry Shoff <harry@airbnb.com>
Date: Wed, 8 Nov 2017 16:06:59 -0800
Subject: [PATCH 2/4] [demo] use <ParentSize /> for responsive tiles

---
 packages/vx-demo/components/gallery.js        | 381 +++++++++++-------
 packages/vx-demo/components/show.js           |   4 +-
 packages/vx-demo/components/tiles/lines.js    |  44 +-
 packages/vx-responsive/package.json           |   2 +-
 .../{ParentSIze.js => ParentSize.js}          |   8 +-
 5 files changed, 264 insertions(+), 175 deletions(-)
 rename packages/vx-responsive/src/components/{ParentSIze.js => ParentSize.js} (86%)

diff --git a/packages/vx-demo/components/gallery.js b/packages/vx-demo/components/gallery.js
index a72c49662..291176a4a 100644
--- a/packages/vx-demo/components/gallery.js
+++ b/packages/vx-demo/components/gallery.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Tilt from 'react-tilt';
 import Link from 'next/link';
+import { ParentSize } from '@vx/responsive';
 import { extent, max } from 'd3-array';
 
 import Page from '../components/page';
@@ -49,59 +50,12 @@ const items = [
 ];
 
 export default class Gallery extends React.Component {
-  constructor() {
-    super();
-    this.nodes = new Set();
-    this.state = { dimensions: [] };
-    this.resize = this.resize.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resize, false);
-    setTimeout(() => {
-      this.resize();
-    }, 1);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
-
-  resize() {
-    const newState = [];
-    this.nodes.forEach(node => {
-      if (!node) return;
-      newState.push([node.offsetWidth, node.clientHeight]);
-    });
-    this.setState({ dimensions: newState });
+  constructor(props) {
+    super(props);
   }
 
   render() {
-    const t1 = this.state.dimensions[0] || [8, 300];
-    const t2 = this.state.dimensions[1] || [8, 300];
-    const t3 = this.state.dimensions[2] || [8, 300];
-    const t4 = this.state.dimensions[3] || [8, 300];
-    const t5 = this.state.dimensions[4] || [8, 300];
-    const t6 = this.state.dimensions[5] || [8, 300];
-    const t7 = this.state.dimensions[6] || [8, 300];
-    const t8 = this.state.dimensions[7] || [8, 300];
-    const t9 = this.state.dimensions[8] || [8, 300];
-    const t10 = this.state.dimensions[9] || [8, 300];
-    const t11 = this.state.dimensions[10] || [8, 300];
-    const t12 = this.state.dimensions[11] || [8, 300];
-    const t13 = this.state.dimensions[12] || [8, 300];
-    const t14 = this.state.dimensions[13] || [8, 300];
-    const t15 = this.state.dimensions[14] || [8, 300];
-    const t16 = this.state.dimensions[15] || [8, 300];
-    const t17 = this.state.dimensions[16] || [8, 300];
-    const t18 = this.state.dimensions[17] || [8, 300];
-    const t19 = this.state.dimensions[18] || [8, 300];
-    const t20 = this.state.dimensions[19] || [8, 300];
-    const t21 = this.state.dimensions[20] || [8, 300];
-    const t22 = this.state.dimensions[21] || [8, 300];
-    const t23 = this.state.dimensions[22] || [8, 300];
-    const t24 = this.state.dimensions[23] || [8, 300];
-
+    const detailsHeight = 76;
     return (
       <div>
         <div className="gallery">
@@ -110,10 +64,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[0] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Lines width={t1[0]} height={t1[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Lines
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details">
                   <div className="title">Lines</div>
@@ -129,10 +89,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[1] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Bars width={t2[0]} height={t2[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Bars
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details color-blue">
                   <div className="title">Bars</div>
@@ -148,10 +114,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[2] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Dots width={t3[0]} height={t3[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Dots
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details color-yellow"
@@ -170,10 +142,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[3] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Patterns width={t4[0]} height={t4[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Patterns
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details color-gray">
                   <div className="title">Patterns</div>
@@ -189,19 +167,22 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[5] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Area
-                    width={t5[0]}
-                    height={t5[1]}
-                    margin={{
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      bottom: 80,
-                    }}
-                  />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Area
+                        width={width}
+                        height={height + detailsHeight}
+                        margin={{
+                          top: 0,
+                          left: 0,
+                          right: 0,
+                          bottom: 80,
+                        }}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ zIndex: 1 }}>
                   <div className="title">Areas</div>
@@ -217,19 +198,22 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[6] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Stacked
-                    width={t6[0]}
-                    height={t6[1]}
-                    margin={{
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      bottom: 80,
-                    }}
-                  />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Stacked
+                        width={width}
+                        height={height + detailsHeight}
+                        margin={{
+                          top: 0,
+                          left: 0,
+                          right: 0,
+                          bottom: 80,
+                        }}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -251,10 +235,22 @@ export default class Gallery extends React.Component {
                   background: 'white',
                   boxShadow: '0 1px 6px rgba(0,0,0,0.1)',
                 }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Gradients width={t7[0]} height={t7[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Gradients
+                        width={width}
+                        height={height + detailsHeight}
+                        margin={{
+                          top: 0,
+                          left: 0,
+                          right: 0,
+                          bottom: 80,
+                        }}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details color-gray">
                   <div className="title">Gradients</div>
@@ -270,19 +266,22 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[7] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <MultiLine
-                    width={t8[0]}
-                    height={t8[1]}
-                    margin={{
-                      top: 10,
-                      left: 0,
-                      right: 0,
-                      bottom: 80,
-                    }}
-                  />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <MultiLine
+                        width={width}
+                        height={height + detailsHeight}
+                        margin={{
+                          top: 0,
+                          left: 0,
+                          right: 0,
+                          bottom: 80,
+                        }}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -301,19 +300,22 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: items[8] }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Axis
-                    width={t9[0]}
-                    height={t9[1]}
-                    margin={{
-                      top: 20,
-                      left: 60,
-                      right: 40,
-                      bottom: 120,
-                    }}
-                  />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Axis
+                        width={width}
+                        height={height + detailsHeight}
+                        margin={{
+                          top: 20,
+                          left: 60,
+                          right: 40,
+                          bottom: 120,
+                        }}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: '#8e205f' }}>
                   <div className="title">Axis</div>
@@ -330,10 +332,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: '#612efb' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <BarGroup width={t10[0]} height={t10[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <BarGroup
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: '#e5fd3d' }}>
                   <div className="title">Bar Group</div>
@@ -349,10 +357,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: '#eaedff' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <BarStack width={t11[0]} height={t11[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <BarStack
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -371,10 +385,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: '#28272c' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Heatmap width={t12[0]} height={t12[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Heatmap
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -393,10 +413,13 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: '#744cca' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <LineRadial width={t13[0]} height={t13[1] - 80} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <LineRadial width={width} height={height} />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: '#919fe5' }}>
                   <div className="title">Radial Lines</div>
@@ -412,10 +435,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: '#c94acc' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Pies width={t14[0]} height={t14[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Pies
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: 'white' }}>
                   <div className="title">Pies</div>
@@ -431,10 +460,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: '#272b4d' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Trees width={t15[0]} height={t15[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Trees
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: '#269688' }}>
                   <div className="title">Trees</div>
@@ -451,10 +486,16 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ background: '#306c90' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
-                  <Cluster width={t15[0]} height={t15[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Cluster
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: '#5dc26f' }}>
                   <div className="title">Dendrograms</div>
@@ -471,7 +512,6 @@ export default class Gallery extends React.Component {
               <div
                 className="gallery-item"
                 style={{ backgroundColor: 'black' }}
-                ref={d => this.nodes.add(d)}
               >
                 <div className="image">
                   <Legends />
@@ -489,7 +529,6 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/voronoi">
               <div
                 className="gallery-item"
-                ref={d => this.nodes.add(d)}
                 style={{
                   boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px',
                 }}
@@ -501,7 +540,14 @@ export default class Gallery extends React.Component {
                     borderRadius: 14,
                   }}
                 >
-                  <Voronoi width={t16[0]} height={t16[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Voronoi
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: '#F54EA2' }}>
                   <div className="title">Voronoi</div>
@@ -517,11 +563,17 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/boxplot">
               <div
                 className="gallery-item"
-                ref={d => this.nodes.add(d)}
-                style={{ background: '#fd7e14' }}
+                style={{ background: '#88d1d9' }}
               >
                 <div className="image">
-                  <BoxPlot width={t17[0]} height={t17[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <BoxPlot
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -538,12 +590,16 @@ export default class Gallery extends React.Component {
 
           <Tilt className="tilt" options={{ max: 8, scale: 1 }}>
             <Link prefetch href="/geo-mercator">
-              <div
-                className="gallery-item"
-                ref={d => this.nodes.add(d)}
-              >
+              <div className="gallery-item">
                 <div className="image">
-                  <GeoMercator width={t18[0]} height={t18[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <GeoMercator
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div className="details" style={{ color: '#f63a48' }}>
                   <div className="title">Geo</div>
@@ -557,12 +613,16 @@ export default class Gallery extends React.Component {
 
           <Tilt className="tilt" options={{ max: 8, scale: 1 }}>
             <Link prefetch href="/network">
-              <div
-                className="gallery-item"
-                ref={d => this.nodes.add(d)}
-              >
+              <div className="gallery-item">
                 <div className="image">
-                  <Network width={t19[0]} height={t19[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Network
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -583,11 +643,17 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/streamgraph">
               <div
                 className="gallery-item"
-                ref={d => this.nodes.add(d)}
                 style={{ background: '#ffd7d9' }}
               >
                 <div className="image">
-                  <Streamgraph width={t20[0]} height={t20[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Streamgraph
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -607,14 +673,20 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/pack">
               <div
                 className="gallery-item"
-                ref={d => this.nodes.add(d)}
                 style={{
                   background: '#ffffff',
                   boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px',
                 }}
               >
                 <div className="image">
-                  <Pack width={t21[0]} height={t21[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Pack
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -634,13 +706,19 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/treemap">
               <div
                 className="gallery-item"
-                ref={d => this.nodes.add(d)}
                 style={{
                   background: '#3436b8',
                 }}
               >
                 <div className="image">
-                  <Treemap width={t22[0]} height={t22[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Treemap
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -660,13 +738,19 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/radar">
               <div
                 className="gallery-item"
-                ref={d => this.nodes.add(d)}
                 style={{
                   background: '#FAF7E9',
                 }}
               >
                 <div className="image">
-                  <Radar width={t23[0]} height={t23[1]} />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Radar
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
@@ -687,16 +771,19 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/barstackhorizontal">
               <div
                 className="gallery-item"
-                ref={d => this.nodes.add(d)}
                 style={{
                   background: '#FAF7E9',
                 }}
               >
                 <div className="image">
-                  <BarStackHorizontal
-                    width={t24[0]}
-                    height={t24[1]}
-                  />
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <BarStackHorizontal
+                        width={width}
+                        height={height + detailsHeight}
+                      />
+                    )}
+                  </ParentSize>
                 </div>
                 <div
                   className="details"
diff --git a/packages/vx-demo/components/show.js b/packages/vx-demo/components/show.js
index cd8ace6bb..2dfc8b1f3 100644
--- a/packages/vx-demo/components/show.js
+++ b/packages/vx-demo/components/show.js
@@ -19,9 +19,9 @@ export default withScreenSize(
     margin = { top: 0, left: 0, right: 0, bottom: 80 },
   }) => {
     const padding = 40;
-    const height = screenHeight * 0.6;
     let width = screenWidth - padding;
     if (width > 800) width = 800;
+    const height = width * 0.6;
 
     return (
       <Page title={title}>
@@ -64,7 +64,7 @@ export default withScreenSize(
           .container h1 {
             margin-top: 15px;
             line-height: 0.9em;
-            letter-spacing: -.03em;
+            letter-spacing: -0.03em;
           }
           .container h2 {
             margin-top: 15px;
diff --git a/packages/vx-demo/components/tiles/lines.js b/packages/vx-demo/components/tiles/lines.js
index db392bb3f..73664d051 100644
--- a/packages/vx-demo/components/tiles/lines.js
+++ b/packages/vx-demo/components/tiles/lines.js
@@ -9,22 +9,19 @@ import { extent, max } from 'd3-array';
 function genLines(num) {
   return new Array(num).fill(1).map(() => {
     return genDateValue(25);
-  })
+  });
 }
 
 const series = genLines(12);
 const data = series.reduce((rec, d) => {
-  return rec.concat(d)
+  return rec.concat(d);
 }, []);
 
 // accessors
 const x = d => d.date;
 const y = d => d.value;
 
-export default ({
-  width,
-  height,
-}) => {
+export default ({ width, height }) => {
   // bounds
   const xMax = width;
   const yMax = height / 8;
@@ -49,22 +46,23 @@ export default ({
         fill="#242424"
         rx={14}
       />
-      {xMax > 8 && series.map((d, i) => {
-        return (
-          <Group key={`lines-${i}`} top={i * yMax/2}>
-            <LinePath
-              data={d}
-              xScale={xScale}
-              yScale={yScale}
-              x={x}
-              y={y}
-              stroke={"#ffffff"}
-              strokeWidth={1}
-              curve={i % 2 == 0 ? curveMonotoneX : undefined}
-            />
-          </Group>
-        );
-      })}
+      {xMax > 8 &&
+        series.map((d, i) => {
+          return (
+            <Group key={`lines-${i}`} top={i * yMax / 2}>
+              <LinePath
+                data={d}
+                xScale={xScale}
+                yScale={yScale}
+                x={x}
+                y={y}
+                stroke={'#ffffff'}
+                strokeWidth={1}
+                curve={i % 2 == 0 ? curveMonotoneX : undefined}
+              />
+            </Group>
+          );
+        })}
     </svg>
   );
-}
+};
diff --git a/packages/vx-responsive/package.json b/packages/vx-responsive/package.json
index 990edf298..df2d998c5 100644
--- a/packages/vx-responsive/package.json
+++ b/packages/vx-responsive/package.json
@@ -34,7 +34,7 @@
     "regenerator-runtime": "^0.10.5"
   },
   "dependencies": {
-    "lodash": "4.0.8",
+    "lodash": "^4.0.8",
     "resize-observer-polyfill": "1.4.2"
   },
   "peerDependencies": {
diff --git a/packages/vx-responsive/src/components/ParentSIze.js b/packages/vx-responsive/src/components/ParentSize.js
similarity index 86%
rename from packages/vx-responsive/src/components/ParentSIze.js
rename to packages/vx-responsive/src/components/ParentSize.js
index b7a44e7af..a04b71c9f 100644
--- a/packages/vx-responsive/src/components/ParentSIze.js
+++ b/packages/vx-responsive/src/components/ParentSize.js
@@ -5,7 +5,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 export default class ParentSize extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = { width: 0, height: 0, top: 0, left: 0 };
     this.resize = this.resize.bind(this);
     this.setTarget = this.setTarget.bind(this);
   }
@@ -40,7 +40,11 @@ export default class ParentSize extends React.Component {
   render() {
     const { className, children } = this.props;
     return (
-      <div ref={this.setTarget} className={className}>
+      <div
+        style={{ width: '100%', height: '100%' }}
+        ref={this.setTarget}
+        className={className}
+      >
         {children({
           ...this.state,
           ref: this.target,

From 67e2eb35792d8da8765f1943f8e764d6944a9825 Mon Sep 17 00:00:00 2001
From: Harry Shoff <harry@airbnb.com>
Date: Mon, 13 Nov 2017 12:22:41 -0800
Subject: [PATCH 3/4] [responsive] add ParentSize component

---
 packages/vx-demo/components/gallery.js        |  42 ++++++-
 packages/vx-demo/components/tiles/axis.js     |   1 -
 .../vx-demo/components/tiles/gradients.js     |  13 ++-
 .../vx-demo/components/tiles/responsive.js    | 100 ++++++++++++++++
 packages/vx-demo/pages/axis.js                |   1 -
 packages/vx-demo/pages/responsive.js          | 108 ++++++++++++++++++
 6 files changed, 258 insertions(+), 7 deletions(-)
 create mode 100644 packages/vx-demo/components/tiles/responsive.js
 create mode 100644 packages/vx-demo/pages/responsive.js

diff --git a/packages/vx-demo/components/gallery.js b/packages/vx-demo/components/gallery.js
index 291176a4a..305eb5445 100644
--- a/packages/vx-demo/components/gallery.js
+++ b/packages/vx-demo/components/gallery.js
@@ -33,6 +33,7 @@ import Streamgraph from '../components/tiles/streamgraph';
 import Pack from '../components/tiles/pack';
 import Treemap from '../components/tiles/treemap';
 import Radar from '../components/tiles/radar';
+import Responsive from '../components/tiles/responsive';
 
 const items = [
   '#242424',
@@ -53,7 +54,6 @@ export default class Gallery extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     const detailsHeight = 76;
     return (
@@ -797,7 +797,45 @@ export default class Gallery extends React.Component {
               </div>
             </Link>
           </Tilt>
-          <div className="gallery-item placeholder" />
+          <Tilt className="tilt" options={{ max: 8, scale: 1 }}>
+            <Link prefetch href="/responsive">
+              <div
+                className="gallery-item"
+                style={{
+                  background: 'white',
+                }}
+              >
+                <div className="image">
+                  <ParentSize>
+                    {({ width, height }) => (
+                      <Responsive
+                        width={width}
+                        height={height}
+                        events={true}
+                      />
+                    )}
+                  </ParentSize>
+                </div>
+                <div
+                  className="details"
+                  style={{
+                    color: '#232323',
+                    zIndex: 1,
+                    border: '1px solid lightgray',
+                    borderTop: 'none',
+                    borderBottomLeftRadius: '14px',
+                    borderBottomRightRadius: '14px',
+                  }}
+                >
+                  <div className="title">Responsive</div>
+                  <div className="description">
+                    <pre>{`<Responsive.ParentSize />`}</pre>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          </Tilt>
+          {false && <div className="gallery-item placeholder" />}
         </div>
 
         <div>
diff --git a/packages/vx-demo/components/tiles/axis.js b/packages/vx-demo/components/tiles/axis.js
index ab0ca96bb..7854b4168 100644
--- a/packages/vx-demo/components/tiles/axis.js
+++ b/packages/vx-demo/components/tiles/axis.js
@@ -132,7 +132,6 @@ export default ({ width, height, margin }) => {
         label="time"
       >
         {props => {
-          console.log('Custom AxisBottom props', props);
           const tickLabelSize = 10;
           const tickRotate = 45;
           const tickColor = '#8e205f';
diff --git a/packages/vx-demo/components/tiles/gradients.js b/packages/vx-demo/components/tiles/gradients.js
index 8196dae7e..69c32c79e 100644
--- a/packages/vx-demo/components/tiles/gradients.js
+++ b/packages/vx-demo/components/tiles/gradients.js
@@ -24,8 +24,10 @@ export default ({
     bottom: 80,
   },
 }) => {
-  const w = width / 4;
-  const h = (height - margin.bottom) / 2;
+  let w = width / 4;
+  let h = (height - margin.bottom) / 2;
+  w = w < 0 ? 0 : w;
+  h = h < 0 ? 0 : h;
   return (
     <svg width={width} height={height}>
       <GradientDarkgreenGreen id="DarkgreenGreen" />
@@ -35,7 +37,12 @@ export default ({
       <GradientPinkRed id="PinkRed" vertical={false} />
       <GradientPurpleOrange id="PurpleOrange" vertical={false} />
       <GradientPurpleRed id="PurpleRed" vertical={false} />
-      <RadialGradient from="#55bdd5" to="#4f3681" id="Radial" r={'80%'} />
+      <RadialGradient
+        from="#55bdd5"
+        to="#4f3681"
+        id="Radial"
+        r={'80%'}
+      />
       <GradientSteelPurple id="SteelPurple" vertical={false} />
       <GradientTealBlue id="TealBlue" vertical={false} />
       <Bar
diff --git a/packages/vx-demo/components/tiles/responsive.js b/packages/vx-demo/components/tiles/responsive.js
new file mode 100644
index 000000000..2e3df3df1
--- /dev/null
+++ b/packages/vx-demo/components/tiles/responsive.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import { ParentSize } from '@vx/responsive';
+import Treemap from './lines';
+
+function Nav() {
+  return (
+    <ul>
+      <li>🤖</li>
+      <li>Home</li>
+      <li>Profile</li>
+      <li>Favorites</li>
+      <li>Settings</li>
+    </ul>
+  );
+}
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { showNav: true };
+    this.toggleNav = this.toggleNav.bind(this);
+  }
+  toggleNav(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.setState(prevState => {
+      return {
+        showNav: !prevState.showNav,
+      };
+    });
+  }
+  render() {
+    const { width, height } = this.props;
+    if (width < 20) return null;
+    if (height < 20) return null;
+    return (
+      <div className="app" style={{ width, height }}>
+        <div
+          className="app-nav"
+          style={{
+            display: this.state.showNav ? 'flex' : 'none',
+          }}
+        >
+          <Nav />
+        </div>
+        <div className="app-content">
+          <div>
+            <button onClick={this.toggleNav}>toggle nav</button>
+          </div>
+          <div className="app-graph">
+            <ParentSize className="graph-container">
+              {({ width: w, height: h }) => {
+                return (
+                  <Treemap
+                    width={w}
+                    height={h}
+                    margin={{
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                    }}
+                  />
+                );
+              }}
+            </ParentSize>
+          </div>
+        </div>
+
+        <style jsx>{`
+          .app {
+            display: flex;
+          }
+
+          .app-nav {
+            border: 1px solid lightgray;
+            border-right: none;
+            display: flex;
+            flex: 0.5;
+            padding: 1rem;
+          }
+
+          .app-content {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            overflow: hidden;
+            padding: 1rem;
+            border: 1px solid lightgray;
+          }
+
+          .app-graph {
+            display: flex;
+            flex: 1;
+          }
+        `}</style>
+      </div>
+    );
+  }
+}
diff --git a/packages/vx-demo/pages/axis.js b/packages/vx-demo/pages/axis.js
index e480d5244..bba888349 100644
--- a/packages/vx-demo/pages/axis.js
+++ b/packages/vx-demo/pages/axis.js
@@ -148,7 +148,6 @@ export default ({ width, height, margin }) => {
         label="time"
       >
         {props => {
-          console.log('Custom AxisBottom props', props);
           const tickLabelSize = 10;
           const tickRotate = 45;
           const tickColor = '#8e205f';
diff --git a/packages/vx-demo/pages/responsive.js b/packages/vx-demo/pages/responsive.js
new file mode 100644
index 000000000..dff34bf0d
--- /dev/null
+++ b/packages/vx-demo/pages/responsive.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import Show from '../components/show';
+import Responsive from '../components/tiles/responsive';
+
+export default () => {
+  return (
+    <Show component={Responsive} title="Responsive">
+      {`import React from 'react';
+import { ParentSize } from '@vx/responsive';
+import Treemap from './treemap';
+
+function Nav() {
+  return (
+    <ul>
+      <li>🤖</li>
+      <li>Home</li>
+      <li>Profile</li>
+      <li>Favorites</li>
+      <li>Settings</li>
+    </ul>
+  );
+}
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { showNav: true };
+    this.toggleNav = this.toggleNav.bind(this);
+  }
+  toggleNav() {
+    this.setState(prevState => {
+      return {
+        showNav: !prevState.showNav,
+      };
+    });
+  }
+  render() {
+    const { width, height } = this.props;
+    return (
+      <div className="app" style={{ width, height }}>
+        <div
+          className="app-nav"
+          style={{
+            display: this.state.showNav ? 'flex' : 'none',
+          }}
+        >
+          <Nav />
+        </div>
+        <div className="app-content">
+          <div>
+            <button onClick={this.toggleNav}>toggle nav</button>
+          </div>
+          <div className="app-graph">
+            <ParentSize className="graph-container">
+              {({ width: w, height: h }) => {
+                return (
+                  <Treemap
+                    width={w}
+                    height={h}
+                    margin={{
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                    }}
+                  />
+                );
+              }}
+            </ParentSize>
+          </div>
+        </div>
+
+        <style jsx>{\`
+          .app {
+            display: flex;
+          }
+
+          .app-nav {
+            border: 1px solid lightgray;
+            border-right: none;
+            display: flex;
+            flex: 0.5;
+            padding: 1rem;
+          }
+
+          .app-content {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            overflow: hidden;
+            padding: 1rem;
+            border: 1px solid lightgray;
+            border-top-right-radius: 14px;
+            border-bottom-right-radius: 14px;
+          }
+
+          .app-graph {
+            display: flex;
+            flex: 1;
+          }
+        \`}</style>
+      </div>
+    );
+  }
+}`}
+    </Show>
+  );
+};

From c0b9df4ed6362f25032dd0d5258cf664eb26c6c8 Mon Sep 17 00:00:00 2001
From: Harry Shoff <harry@airbnb.com>
Date: Mon, 13 Nov 2017 12:29:00 -0800
Subject: [PATCH 4/4] [demo] responsive treemap => lines

---
 packages/vx-demo/components/tiles/responsive.js | 4 ++--
 packages/vx-demo/pages/responsive.js            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vx-demo/components/tiles/responsive.js b/packages/vx-demo/components/tiles/responsive.js
index 2e3df3df1..ba5541fed 100644
--- a/packages/vx-demo/components/tiles/responsive.js
+++ b/packages/vx-demo/components/tiles/responsive.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ParentSize } from '@vx/responsive';
-import Treemap from './lines';
+import Lines from './lines';
 
 function Nav() {
   return (
@@ -51,7 +51,7 @@ export default class App extends React.Component {
             <ParentSize className="graph-container">
               {({ width: w, height: h }) => {
                 return (
-                  <Treemap
+                  <Lines
                     width={w}
                     height={h}
                     margin={{
diff --git a/packages/vx-demo/pages/responsive.js b/packages/vx-demo/pages/responsive.js
index dff34bf0d..2fac576bd 100644
--- a/packages/vx-demo/pages/responsive.js
+++ b/packages/vx-demo/pages/responsive.js
@@ -7,7 +7,7 @@ export default () => {
     <Show component={Responsive} title="Responsive">
       {`import React from 'react';
 import { ParentSize } from '@vx/responsive';
-import Treemap from './treemap';
+import Lines from './lines';
 
 function Nav() {
   return (
@@ -54,7 +54,7 @@ export default class App extends React.Component {
             <ParentSize className="graph-container">
               {({ width: w, height: h }) => {
                 return (
-                  <Treemap
+                  <Lines
                     width={w}
                     height={h}
                     margin={{