Merge pull request #80 from hshoff/harry-axis-export

[axis] export orientation constants. fixes #79

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';

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();
+  });
+});

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>

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;

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,29 +49,29 @@ 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}
             cx={d.x}
             cy={d.y}
             fill="#ffffff"
             fillOpacity={0.2}
-          />
-        ))}
+          />,
+        )}
       </Group>
     </svg>
   );
-}
+};