[gallery] add horizontal gradient examples

airbnb · Jun 30, 2017 · e380352 · e380352
1 parent dc542da
commit e380352
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 48 deletions.
diff --git a/packages/vx-demo/components/tiles/axis.js b/packages/vx-demo/components/tiles/axis.js
@@ -9,7 +9,6 @@ import { AreaClosed, LinePath } from '@vx/shape';
 import { scaleTime, scaleLinear } from '@vx/scale';
 import { extent, max } from 'd3-array';
 
-
 const data = genDateValue(20);
 
 // accessors
@@ -29,11 +28,7 @@ function numTicksForWidth(width) {
   return 10;
 }
 
-export default ({
-  width,
-  height,
-  margin,
-}) => {
+export default ({ width, height, margin }) => {
   if (width < 10) return null;
 
   // bounds
@@ -57,7 +52,7 @@ export default ({
 
   return (
     <svg width={width} height={height}>
-      <GradientOrangeRed id="linear" />
+      <GradientOrangeRed id="linear" vertical={false} />
       <rect
         x={0}
         y={0}
@@ -71,7 +66,7 @@ export default ({
         left={margin.left}
         xScale={xScale}
         yScale={yScale}
-        stroke='rgba(142, 32, 95, 0.9)'
+        stroke="rgba(142, 32, 95, 0.9)"
         width={xMax}
         height={yMax}
         numTicksRows={numTicksForHeight(height)}
@@ -87,7 +82,7 @@ export default ({
           strokeWidth={2}
           stroke={'transparent'}
           fill={'url(#linear)'}
-          fillOpacity='0.9'
+          fillOpacity="0.9"
           curve={curveBasis}
         />
         <LinePath
@@ -158,4 +153,4 @@ export default ({
       />
     </svg>
   );
-}
+};
diff --git a/packages/vx-demo/components/tiles/gradients.js b/packages/vx-demo/components/tiles/gradients.js
@@ -10,7 +10,7 @@ import {
   GradientPurpleRed,
   GradientPurpleTeal,
   GradientSteelPurple,
-  GradientTealBlue
+  GradientTealBlue,
 } from '@vx/gradient';
 
 export default ({
@@ -20,8 +20,8 @@ export default ({
     top: 0,
     left: 0,
     right: 0,
-    bottom: 80
-  }
+    bottom: 80,
+  },
 }) => {
   const w = width / 4;
   const h = (height - margin.bottom) / 2;
@@ -31,19 +31,19 @@ export default ({
       <GradientLightgreenGreen id="LightgreenGreen" />
       <GradientOrangeRed id="OrangeRed" />
       <GradientPinkBlue id="PinkBlue" />
-      <GradientPinkRed id="PinkRed" />
-      <GradientPurpleOrange id="PurpleOrange" />
-      <GradientPurpleRed id="PurpleRed" />
-      <GradientPurpleTeal id="PurpleTeal" />
-      <GradientSteelPurple id="SteelPurple" />
-      <GradientTealBlue id="TealBlue" />
+      <GradientPinkRed id="PinkRed" vertical={false} />
+      <GradientPurpleOrange id="PurpleOrange" vertical={false} />
+      <GradientPurpleRed id="PurpleRed" vertical={false} />
+      <GradientPurpleTeal id="PurpleTeal" vertical={false} />
+      <GradientSteelPurple id="SteelPurple" vertical={false} />
+      <GradientTealBlue id="TealBlue" vertical={false} />
       <Bar
         x={0}
         y={0}
         width={w}
         height={h}
         fill={`url(#LightgreenGreen)`}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
         rx={14}
       />
@@ -54,7 +54,7 @@ export default ({
         height={h}
         fill={`url(#OrangeRed)`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -64,7 +64,7 @@ export default ({
         height={h}
         fill={`url(#PinkBlue)`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -74,7 +74,7 @@ export default ({
         height={h}
         fill={`url(#DarkgreenGreen)`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -84,7 +84,7 @@ export default ({
         height={h}
         fill={`url(#PinkRed)`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -94,7 +94,7 @@ export default ({
         height={h}
         fill={`url(#TealBlue)`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -104,7 +104,7 @@ export default ({
         height={h}
         fill={`url(#PurpleOrange)`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -114,9 +114,9 @@ export default ({
         height={h}
         fill={`url(#PurpleTeal)`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
     </svg>
   );
-}
+};
diff --git a/packages/vx-demo/pages/axis.js b/packages/vx-demo/pages/axis.js
@@ -4,13 +4,17 @@ import Axis from '../components/tiles/axis';
 
 export default () => {
   return (
-    <Show component={Axis} title="Axis" margin={{
-      top: 20,
-      left: 60,
-      right: 40,
-      bottom: 60,
-    }}>
-{`import React from 'react';
+    <Show
+      component={Axis}
+      title="Axis"
+      margin={{
+        top: 20,
+        left: 60,
+        right: 40,
+        bottom: 60,
+      }}
+    >
+      {`import React from 'react';
 import { Grid } from '@vx/grid';
 import { Group } from '@vx/group';
 import { curveBasis } from '@vx/curve';
@@ -66,7 +70,7 @@ export default ({
 
   return (
     <svg width={width} height={height}>
-      <GradientOrangeRed id="linear" />
+      <GradientOrangeRed id="linear" vertical={false} />
       <Grid
         top={margin.top}
         left={margin.left}
@@ -162,4 +166,4 @@ export default ({
 }`}
     </Show>
   );
-}
+};
diff --git a/packages/vx-demo/pages/gradients.js b/packages/vx-demo/pages/gradients.js
@@ -4,10 +4,15 @@ import Gradients from '../components/tiles/gradients';
 
 export default () => {
   return (
-    <Show component={Gradients} title="Gradients" shadow margin={{
-      bottom: 0,
-    }}>
-{`import React from 'react';
+    <Show
+      component={Gradients}
+      title="Gradients"
+      shadow
+      margin={{
+        bottom: 0,
+      }}
+    >
+      {`import React from 'react';
 import { Bar } from '@vx/shape';
 import {
   GradientDarkgreenGreen,
@@ -34,12 +39,12 @@ export default ({
       <LightgreenGreen id="LightgreenGreen" />
       <OrangeRed id="OrangeRed" />
       <PinkBlue id="PinkBlue" />
-      <PinkRed id="PinkRed" />
-      <PurpleOrange id="PurpleOrange" />
-      <PurpleRed id="PurpleRed" />
-      <PurpleTeal id="PurpleTeal" />
-      <SteelPurple id="SteelPurple" />
-      <TealBlue id="TealBlue" />
+      <PinkRed id="PinkRed" vertical={false} />
+      <PurpleOrange id="PurpleOrange" vertical={false} />
+      <PurpleRed id="PurpleRed" vertical={false} />
+      <PurpleTeal id="PurpleTeal" vertical={false} />
+      <SteelPurple id="SteelPurple" vertical={false} />
+      <TealBlue id="TealBlue" vertical={false} />
       <Bar
         x={0}
         y={0}
@@ -125,4 +130,4 @@ export default ({
 }`}
     </Show>
   );
-}
+};