From ac87752c2e15a7cd1336e7c2dee96760ac47a67a Mon Sep 17 00:00:00 2001
From: Harry Shoff <harry@airbnb.com>
Date: Thu, 29 Jun 2017 22:12:43 -0700
Subject: [PATCH] [axis] export orientation constants

---
 packages/vx-axis/src/index.js                |   1 +
 packages/vx-axis/test/Orientation.test.js    |  19 ++
 packages/vx-demo/components/gallery.js       |  24 +-
 packages/vx-demo/components/tiles/legends.js | 199 ++++++++-------
 packages/vx-demo/components/tiles/voronoi.js |  25 +-
 packages/vx-demo/pages/legends.js            | 247 ++++++++++---------
 6 files changed, 283 insertions(+), 232 deletions(-)
 create mode 100644 packages/vx-axis/test/Orientation.test.js

diff --git a/packages/vx-axis/src/index.js b/packages/vx-axis/src/index.js
index 6af30f02f..837ff5d15 100644
--- a/packages/vx-axis/src/index.js
+++ b/packages/vx-axis/src/index.js
@@ -3,3 +3,4 @@ export { default as AxisLeft } from './axis/AxisLeft';
 export { default as AxisRight } from './axis/AxisRight';
 export { default as AxisTop } from './axis/AxisTop';
 export { default as AxisBottom } from './axis/AxisBottom';
+export { default as Orientation } from './constants/orientation';
diff --git a/packages/vx-axis/test/Orientation.test.js b/packages/vx-axis/test/Orientation.test.js
new file mode 100644
index 000000000..3e5aaba53
--- /dev/null
+++ b/packages/vx-axis/test/Orientation.test.js
@@ -0,0 +1,19 @@
+import { Orientation } from '../src';
+
+describe('Orientation', () => {
+  test('it should be defined', () => {
+    expect(Orientation).toBeDefined();
+  });
+  test('top should be defined', () => {
+    expect(Orientation.top).toBeDefined();
+  });
+  test('left should be defined', () => {
+    expect(Orientation.left).toBeDefined();
+  });
+  test('right should be defined', () => {
+    expect(Orientation.right).toBeDefined();
+  });
+  test('bottom should be defined', () => {
+    expect(Orientation.bottom).toBeDefined();
+  });
+});
diff --git a/packages/vx-demo/components/gallery.js b/packages/vx-demo/components/gallery.js
index 1c2573525..005960f69 100644
--- a/packages/vx-demo/components/gallery.js
+++ b/packages/vx-demo/components/gallery.js
@@ -448,13 +448,13 @@ export default class Gallery extends React.Component {
             <Link prefetch href="/legends">
               <div
                 className="gallery-item"
-                style={{ background: 'white' }}
+                style={{ backgroundColor: 'black' }}
                 ref={d => this.nodes.add(d)}
               >
                 <div className="image">
                   <Legends />
                 </div>
-                <div className="details" style={{ color: '#333' }}>
+                <div className="details" style={{ color: '#494949' }}>
                   <div className="title">Legends</div>
                   <div className="description">
                     <pre>{`<Legend />`}</pre>
@@ -463,22 +463,22 @@ export default class Gallery extends React.Component {
               </div>
             </Link>
           </Tilt>
-          <Tilt
-            className="tilt"
-            options={{ max: 8, scale: 1 }}
-          >
+          <Tilt className="tilt" options={{ max: 8, scale: 1 }}>
             <Link prefetch href="/voronoi">
               <div
                 className="gallery-item"
                 ref={d => this.nodes.add(d)}
               >
-                <div className="image">
-                  <Voronoi
-                    width={t16[0]}
-                    height={t16[1]}
-                  />
+                <div
+                  className="image"
+                  style={{
+                    backgroundColor: '#eb6d88',
+                    borderRadius: 14,
+                  }}
+                >
+                  <Voronoi width={t16[0]} height={t16[1]} />
                 </div>
-                <div className="details" style={{ color: '#F54EA2'}}>
+                <div className="details" style={{ color: '#F54EA2' }}>
                   <div className="title">Voronoi</div>
                   <div className="description">
                     <pre>{`<Voronoi.VoronoiPolygon /> `}</pre>
diff --git a/packages/vx-demo/components/tiles/legends.js b/packages/vx-demo/components/tiles/legends.js
index bafc81fb7..1da20d118 100644
--- a/packages/vx-demo/components/tiles/legends.js
+++ b/packages/vx-demo/components/tiles/legends.js
@@ -20,17 +20,22 @@ const twoDecimalFormat = format('.2f');
 
 const quantile = scaleQuantize({
   domain: [0, 0.15],
-  range: ['#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801'],
+  range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'],
 });
 
 const linear = scaleLinear({
   domain: [0, 10],
-  range: ['#0068af', '#c00029'],
+  range: ['#ed4fbb', '#e9a039'],
 });
 
 const ordinalColor = scaleOrdinal({
   domain: ['a', 'b', 'c', 'd'],
-  range: ['#160689', '#a72297', '#f68e44', '#f8e126'].reverse(),
+  range: ['#7d81f6', '#4899f1', '#71f5ef', '#66d981'].reverse(),
+});
+
+const ordinalColor2 = scaleOrdinal({
+  domain: ['a', 'b', 'c', 'd'],
+  range: ['#8386f7', '#e64357', '#f29b38', '#fae856'].reverse(),
 });
 
 const ordinalShape = scaleOrdinal({
@@ -84,6 +89,11 @@ const sizeOpacity = scaleLinear({
   range: [0.4, 1],
 });
 
+const sizeColor = scaleLinear({
+  domain: [0, 10],
+  range: ['#75fcfc', '#3236b8'],
+});
+
 function LegendDemo({ title, children }) {
   return (
     <div className="legend">
@@ -92,16 +102,14 @@ function LegendDemo({ title, children }) {
       <style jsx>{`
         .legend {
           line-height: .9em;
-          color: #333;
-          margin: 0 5px 10px;
-          float: left;
-          clear: top;
+          color: #efefef;
           font-size: 10px;
           font-family: arial;
-          border: 1px solid #efefef;
-          padding: 10px;
-          border-radius: 6px;
-          flex: initial;
+          padding: 10px 10px;
+          float: left;
+          border: 1px solid rgba(255, 255, 255, 0.3);
+          border-radius: 8px;
+          margin: 5px 5px;
         }
         .title {
           font-size: 12px;
@@ -117,91 +125,100 @@ export default ({ width, height, margin }) => {
   if (width < 10) return null;
   return (
     <div className="chart">
-      <div>
-        <LegendDemo title="Size">
-          <LegendSize
-            itemMargin="0"
-            shapeMargin="5px 0"
-            itemDirection="column"
-            scale={size}
-            shapeStyle={props => {
-              return {
-                fill: '#b2212b',
-                fillOpacity: sizeOpacity(props.datum),
-              };
-            }}
-            shape={props => {
-              const { size } = props;
-              return (
-                <svg width={size} height={size}>
-                  <rect {...props} width={size} height={size} />
-                </svg>
-              );
-            }}
-          />
-        </LegendDemo>
-        <LegendDemo title="Quantile">
-          <LegendQuantile shape="circle" scale={quantile} />
-        </LegendDemo>
-        <LegendDemo title="Linear">
-          <LegendLinear
-            shape="circle"
-            scale={linear}
-            labelFormat={(d, i) => {
-              if (i % 2 === 0) return oneDecimalFormat(d);
-              return '';
-            }}
-          />
-        </LegendDemo>
-        <LegendDemo title="Threshold">
-          <LegendThreshold
-            direction="column-reverse"
-            itemDirection="row-reverse"
-            labelMargin="0 20px 0 0"
-            shapeMargin="1px 0 0"
-            scale={threshold}
-          />
-        </LegendDemo>
-        <LegendDemo title="Ordinal">
-          <LegendOrdinal
-            direction="column"
-            scale={ordinalColor}
-            shape="rect"
-            fill={({ datum }) => ordinalColor(datum)}
-            labelFormat={label => `Type ${label.toUpperCase()}`}
-          />
-        </LegendDemo>
-        <LegendDemo title="Custom Legend">
-          <Legend
-            direction="row"
-            itemDirection="column"
-            labelMargin="0"
-            shapeMargin="0 0 8px 0"
-            itemMargin="0 4px 0 0"
-            scale={ordinalShape}
-            fill={({ datum }) => ordinalColor(datum)}
-            shape={props => {
-              return (
-                <svg width={props.width} height={props.height}>
-                  {React.createElement(
-                    ordinalShape(props.label.datum),
-                    {
-                      ...props,
-                    },
-                  )}
-                </svg>
-              );
-            }}
-          />
-        </LegendDemo>
-      </div>
+      <LegendDemo title="Size">
+        <LegendSize
+          itemMargin="0"
+          shapeMargin="5px 0"
+          itemDirection="row"
+          scale={size}
+          shapeStyle={props => {
+            return {
+              fill: sizeColor(props.datum),
+            };
+          }}
+          shape={props => {
+            const { size } = props;
+            return (
+              <svg width={size} height={size}>
+                <circle
+                  {...props}
+                  r={size / 2}
+                  cx={size / 2}
+                  cy={size / 2}
+                />
+              </svg>
+            );
+          }}
+        />
+      </LegendDemo>
+      <LegendDemo title="Quantile">
+        <LegendQuantile shape="circle" scale={quantile} />
+      </LegendDemo>
+      <LegendDemo title="Linear">
+        <LegendLinear
+          shape="circle"
+          scale={linear}
+          labelFormat={(d, i) => {
+            if (i % 2 === 0) return oneDecimalFormat(d);
+            return '';
+          }}
+        />
+      </LegendDemo>
+      <LegendDemo title="Threshold">
+        <LegendThreshold
+          direction="column-reverse"
+          itemDirection="row"
+          labelMargin="2px 0 0 10px"
+          shapeMargin="1px 0 0"
+          scale={threshold}
+        />
+      </LegendDemo>
+      <LegendDemo title="Ordinal">
+        <LegendOrdinal
+          direction="row"
+          itemDirection="row"
+          shapeMargin="0"
+          labelMargin="0 0 0 4px"
+          itemMargin="0 5px"
+          scale={ordinalColor}
+          shape="rect"
+          fill={({ datum }) => ordinalColor(datum)}
+          labelFormat={label => `${label.toUpperCase()}`}
+        />
+      </LegendDemo>
+      <LegendDemo title="Custom Legend">
+        <Legend
+          direction="row"
+          itemDirection="column"
+          labelMargin="0"
+          shapeMargin="0 0 8px 0"
+          itemMargin="0 4px 0 0"
+          scale={ordinalShape}
+          fill={({ datum }) => ordinalColor2(datum)}
+          shape={props => {
+            return (
+              <svg width={props.width} height={props.height}>
+                {React.createElement(
+                  ordinalShape(props.label.datum),
+                  {
+                    ...props,
+                  },
+                )}
+              </svg>
+            );
+          }}
+        />
+      </LegendDemo>
 
       <style jsx>{`
         .chart {
           font-family: arial;
           font-weight: 900;
-          display: flex;
-          flex-direction: column;
+          background-color: black;
+          border-top-left-radius: 14px;
+          border-top-right-radius: 14px;
+          padding: 20px 20px 20px 28px;
+          overflow-y: auto;
         }
         .chart h2 {
           margin-left: 10px;
diff --git a/packages/vx-demo/components/tiles/voronoi.js b/packages/vx-demo/components/tiles/voronoi.js
index ace28b5b8..cf50d66fe 100644
--- a/packages/vx-demo/components/tiles/voronoi.js
+++ b/packages/vx-demo/components/tiles/voronoi.js
@@ -12,9 +12,10 @@ export default ({
     top: 0,
     left: 0,
     right: 0,
-    bottom: 80,
+    bottom: 70,
   },
 }) => {
+  if (width < 10) return <div />;
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
 
@@ -48,19 +49,19 @@ export default ({
         left={margin.left}
         clipPath="url(#voronoi_clip)"
       >
-        {polygons.map((polygon) => (
+        {polygons.map(polygon =>
           <VoronoiPolygon
             key={`polygon-${polygon.data.id}`}
             polygon={polygon}
-            fill={(d) => (
-              d.id.toLowerCase() <= 'a' ?
-              'url(#voronoi_orange_red)' : 'url(#voronoi_pink_red)'
-            )}
+            fill={d =>
+              d.id.toLowerCase() <= 'a'
+                ? 'url(#voronoi_orange_red)'
+                : 'url(#voronoi_pink_red)'}
             stroke="#fff"
             strokeWidth={1}
-          />
-        ))}
-        {data.map((d) => (
+          />,
+        )}
+        {data.map(d =>
           <circle
             key={`circle-${d.id}`}
             r={2}
@@ -68,9 +69,9 @@ export default ({
             cy={d.y}
             fill="#ffffff"
             fillOpacity={0.2}
-          />
-        ))}
+          />,
+        )}
       </Group>
     </svg>
   );
-}
+};
diff --git a/packages/vx-demo/pages/legends.js b/packages/vx-demo/pages/legends.js
index 53b0aef41..f054aa95b 100644
--- a/packages/vx-demo/pages/legends.js
+++ b/packages/vx-demo/pages/legends.js
@@ -35,118 +35,26 @@ import {
 const oneDecimalFormat = format('.1f');
 const twoDecimalFormat = format('.2f');
 
-
-// LegendQuantile
 const quantile = scaleQuantize({
   domain: [0, 0.15],
-  range: ['#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801'],
+  range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'],
 });
 
-function Quantile() {
-  return (
-    <LegendQuantile
-      shape="circle"
-      scale={quantile}
-    />
-  );
-}
-
-// LegendLinear
 const linear = scaleLinear({
   domain: [0, 10],
-  range: ['#0068af', '#c00029'],
+  range: ['#ed4fbb', '#e9a039'],
 });
 
-function Linear() {
-  return (
-    <LegendLinear
-      shape="circle"
-      scale={linear}
-      labelFormat={(d, i) => {
-        if (i % 2 === 0) return oneDecimalFormat(d);
-        return '';
-      }}
-    />
-  );
-}
-
-// LegendThreshold
-const threshold = scaleThreshold({
-  domain: [0.02, 0.04, 0.06, 0.08, 0.1],
-  range: [
-    '#f2f0f7',
-    '#dadaeb',
-    '#bcbddc',
-    '#9e9ac8',
-    '#756bb1',
-    '#54278f',
-  ],
-});
-
-function Threshold() {
-  return (
-    <LegendThreshold
-      direction="column-reverse"
-      itemDirection="row-reverse"
-      labelMargin="0 20px 0 0"
-      shapeMargin="1px 0 0"
-      scale={threshold}
-    />
-  );
-}
-
-// LegendOrdinal
 const ordinalColor = scaleOrdinal({
   domain: ['a', 'b', 'c', 'd'],
-  range: ['#160689', '#a72297', '#f68e44', '#f8e126'].reverse(),
+  range: ['#7d81f6', '#4899f1', '#71f5ef', '#66d981'].reverse(),
 });
 
-function Ordinal() {
-  return (
-    <LegendOrdinal
-      direction="column"
-      scale={ordinalColor}
-      shape="rect"
-      fill={({ datum }) => ordinalColor(datum)}
-      labelFormat={label => \`Type \${label.toUpperCase()}\`}
-    />
-  );
-}
-
-// LegendSize
-const size = scaleLinear({
-  domain: [0, 10],
-  range: [10, 30],
-});
-const sizeOpacity = scaleLinear({
-  domain: [0, 10],
-  range: [0.4, 1],
+const ordinalColor2 = scaleOrdinal({
+  domain: ['a', 'b', 'c', 'd'],
+  range: ['#8386f7', '#e64357', '#f29b38', '#fae856'].reverse(),
 });
 
-function Size() {
-  <LegendSize
-    scale={size}
-    itemMargin="0"
-    shapeMargin="5px 0"
-    itemDirection="column"
-    shapeStyle={props => {
-      return {
-        fill: '#b2212b',
-        fillOpacity: sizeOpacity(props.datum),
-      };
-    }}
-    shape={props => {
-      const { size } = props;
-      return (
-        <svg width={size} height={size}>
-          <rect {...props} width={size} height={size} />
-        </svg>
-      );
-    }}
-  />
-}
-
-// Custom Legend
 const ordinalShape = scaleOrdinal({
   domain: ['a', 'b', 'c', 'd'],
   range: [
@@ -176,28 +84,133 @@ const ordinalShape = scaleOrdinal({
   ],
 });
 
-function CustomLegend() {
+const threshold = scaleThreshold({
+  domain: [0.02, 0.04, 0.06, 0.08, 0.1],
+  range: [
+    '#f2f0f7',
+    '#dadaeb',
+    '#bcbddc',
+    '#9e9ac8',
+    '#756bb1',
+    '#54278f',
+  ],
+});
+
+const size = scaleLinear({
+  domain: [0, 10],
+  range: [10, 30],
+});
+
+const sizeOpacity = scaleLinear({
+  domain: [0, 10],
+  range: [0.4, 1],
+});
+
+const sizeColor = scaleLinear({
+  domain: [0, 10],
+  range: ['#75fcfc', '#3236b8'],
+});
+
+function LegendDemo({ title, children }) {
   return (
-    <Legend
-      direction="row"
-      itemDirection="column"
-      labelMargin="0"
-      shapeMargin="0 0 8px 0"
-      itemMargin="0 4px 0 0"
-      scale={ordinalShape}
-      fill={({ datum }) => ordinalColor(datum)}
-      shape={props => {
-        const { width, height, label } = props;
-        const { datum } = label;
-        return (
-          <svg width={width} height={height}>
-            {React.createElement(ordinalShape(datum), { ...props })}
-          </svg>
-        );
-      }}
-    />
+    <div className="legend">
+      <div className="title">{title}</div>
+      {children}
+    </div>
   );
 }
+
+export default ({ width, height, margin }) => {
+  if (width < 10) return null;
+  return (
+    <div className="chart">
+      <LegendDemo title="Size">
+        <LegendSize
+          itemMargin="0"
+          shapeMargin="5px 0"
+          itemDirection="row"
+          scale={size}
+          shapeStyle={props => {
+            return {
+              fill: sizeColor(props.datum),
+            };
+          }}
+          shape={props => {
+            const { size } = props;
+            return (
+              <svg width={size} height={size}>
+                <circle
+                  {...props}
+                  r={size / 2}
+                  cx={size / 2}
+                  cy={size / 2}
+                />
+              </svg>
+            );
+          }}
+        />
+      </LegendDemo>
+      <LegendDemo title="Quantile">
+        <LegendQuantile shape="circle" scale={quantile} />
+      </LegendDemo>
+      <LegendDemo title="Linear">
+        <LegendLinear
+          shape="circle"
+          scale={linear}
+          labelFormat={(d, i) => {
+            if (i % 2 === 0) return oneDecimalFormat(d);
+            return '';
+          }}
+        />
+      </LegendDemo>
+      <LegendDemo title="Threshold">
+        <LegendThreshold
+          direction="column-reverse"
+          itemDirection="row"
+          labelMargin="2px 0 0 10px"
+          shapeMargin="1px 0 0"
+          scale={threshold}
+        />
+      </LegendDemo>
+      <LegendDemo title="Ordinal">
+        <LegendOrdinal
+          direction="row"
+          itemDirection="row"
+          shapeMargin="0"
+          labelMargin="0 0 0 4px"
+          itemMargin="0 5px"
+          scale={ordinalColor}
+          shape="rect"
+          fill={({ datum }) => ordinalColor(datum)}
+          labelFormat={label => \`\${label.toUpperCase()}\`}
+        />
+      </LegendDemo>
+      <LegendDemo title="Custom Legend">
+        <Legend
+          direction="row"
+          itemDirection="column"
+          labelMargin="0"
+          shapeMargin="0 0 8px 0"
+          itemMargin="0 4px 0 0"
+          scale={ordinalShape}
+          fill={({ datum }) => ordinalColor2(datum)}
+          shape={props => {
+            return (
+              <svg width={props.width} height={props.height}>
+                {React.createElement(
+                  ordinalShape(props.label.datum),
+                  {
+                    ...props,
+                  },
+                )}
+              </svg>
+            );
+          }}
+        />
+      </LegendDemo>
+    </div>
+  );
+};
 `}
     </Show>
   );