Merge pull request #90 from hshoff/harry-radial

[gradient] add <RadialGradient />. fixes #83
airbnb · Jul 6, 2017 · 3834dc1 · 3834dc1
2 parents d7b9497 + 79aab76
commit 3834dc1
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 31 deletions.
diff --git a/packages/vx-demo/components/tiles/gradients.js b/packages/vx-demo/components/tiles/gradients.js
@@ -11,6 +11,7 @@ import {
   GradientPurpleTeal,
   GradientSteelPurple,
   GradientTealBlue,
+  RadialGradient,
 } from '@vx/gradient';
 
 export default ({
@@ -34,7 +35,7 @@ export default ({
       <GradientPinkRed id="PinkRed" vertical={false} />
       <GradientPurpleOrange id="PurpleOrange" vertical={false} />
       <GradientPurpleRed id="PurpleRed" vertical={false} />
-      <GradientPurpleTeal id="PurpleTeal" vertical={false} />
+      <RadialGradient from="#55bdd5" to="#4f3681" id="Radial" r={'80%'} />
       <GradientSteelPurple id="SteelPurple" vertical={false} />
       <GradientTealBlue id="TealBlue" vertical={false} />
       <Bar
@@ -112,7 +113,7 @@ export default ({
         y={h}
         width={w}
         height={h}
-        fill={`url(#PurpleTeal)`}
+        fill={`url(#Radial)`}
         rx={14}
         stroke="#ffffff"
         strokeWidth={8}

diff --git a/packages/vx-demo/components/tiles/lineradial.js b/packages/vx-demo/components/tiles/lineradial.js
@@ -10,7 +10,9 @@ import { LinearGradient } from '@vx/gradient';
 const x = d => new Date(d.date);
 const y = d => d.close;
 
-const capPoints = [appleStock[0]].concat([appleStock[appleStock.length - 1]]);
+const capPoints = [appleStock[0]].concat([
+  appleStock[appleStock.length - 1],
+]);
 
 export default function LineRadialTile({
   width,
@@ -20,7 +22,7 @@ export default function LineRadialTile({
     left: 10,
     right: 10,
     bottom: 120,
-  }
+  },
 }) {
   if (width < 10) return null;
 
@@ -36,7 +38,11 @@ export default function LineRadialTile({
   });
   return (
     <svg width={width} height={height}>
-      <LinearGradient from="#e5fd3d" to="#aeeef8" id="line-gradient" />
+      <LinearGradient
+        from="#e5fd3d"
+        to="#aeeef8"
+        id="line-gradient"
+      />
       <rect
         x={0}
         y={0}
@@ -45,7 +51,7 @@ export default function LineRadialTile({
         fill="#744cca"
         rx={14}
       />
-      <Group top={height / 2 } left={width / 2}>
+      <Group top={height / 2} left={width / 2}>
         {yScale.ticks().map((tick, i) => {
           return (
             <g key={`radial-grid-${i}`}>
@@ -54,7 +60,7 @@ export default function LineRadialTile({
                 stroke="#aeeef8"
                 strokeWidth={1}
                 fill="#aeeef8"
-                fillOpacity={(1 / (i + 1)) - ((1 / i) * .2)}
+                fillOpacity={1 / (i + 1) - 1 / i * 0.2}
                 strokeOpacity={0.2}
               />
               <text
@@ -77,7 +83,7 @@ export default function LineRadialTile({
           fill="none"
           stroke={"url('#line-gradient')"}
           strokeWidth={2}
-          strokeOpacity={.8}
+          strokeOpacity={0.8}
           curve={curveBasisOpen}
           strokeLinecap="round"
         />
@@ -95,4 +101,4 @@ export default function LineRadialTile({
       </Group>
     </svg>
   );
-}
+}
diff --git a/packages/vx-demo/pages/gradients.js b/packages/vx-demo/pages/gradients.js
@@ -24,34 +24,41 @@ import {
   GradientPurpleRed,
   GradientPurpleTeal,
   GradientSteelPurple,
-  GradientTealBlue
+  GradientTealBlue,
+  RadialGradient,
 } from '@vx/gradient';
 
 export default ({
   width,
   height,
+  margin = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 80,
+  },
 }) => {
   const w = width / 4;
-  const h = (height - 80) / 2;
+  const h = (height - margin.bottom) / 2;
   return (
     <svg width={width} height={height}>
-      <DarkgreenGreen id="DarkgreenGreen" />
-      <LightgreenGreen id="LightgreenGreen" />
-      <OrangeRed id="OrangeRed" />
-      <PinkBlue id="PinkBlue" />
-      <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} />
+      <GradientDarkgreenGreen id="DarkgreenGreen" />
+      <GradientLightgreenGreen id="LightgreenGreen" />
+      <GradientOrangeRed id="OrangeRed" />
+      <GradientPinkBlue id="PinkBlue" />
+      <GradientPinkRed id="PinkRed" vertical={false} />
+      <GradientPurpleOrange id="PurpleOrange" vertical={false} />
+      <GradientPurpleRed id="PurpleRed" vertical={false} />
+      <RadialGradient from="#55bdd5" to="#4f3681" id="Radial" r={'80%'} />
+      <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}
       />
@@ -62,7 +69,7 @@ export default ({
         height={h}
         fill={\`url(#OrangeRed)\`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -72,7 +79,7 @@ export default ({
         height={h}
         fill={\`url(#PinkBlue)\`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -82,7 +89,7 @@ export default ({
         height={h}
         fill={\`url(#DarkgreenGreen)\`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -92,7 +99,7 @@ export default ({
         height={h}
         fill={\`url(#PinkRed)\`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -102,7 +109,7 @@ export default ({
         height={h}
         fill={\`url(#TealBlue)\`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
@@ -112,22 +119,23 @@ export default ({
         height={h}
         fill={\`url(#PurpleOrange)\`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
       <Bar
         x={w * 3}
         y={h}
         width={w}
         height={h}
-        fill={\`url(#PurpleTeal)\`}
+        fill={\`url(#Radial)\`}
         rx={14}
-        stroke='#ffffff'
+        stroke="#ffffff"
         strokeWidth={8}
       />
     </svg>
   );
-}`}
+};
+`}
     </Show>
   );
 };
diff --git a/packages/vx-gradient/src/gradients/RadialGradient.js b/packages/vx-gradient/src/gradients/RadialGradient.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+RadialGradient.propTypes = {
+  id: PropTypes.string.isRequired,
+  from: PropTypes.string,
+  to: PropTypes.string,
+  fromOffset: PropTypes.string,
+  fromOpacity: PropTypes.number,
+  toOffset: PropTypes.string,
+  toOpacity: PropTypes.number,
+  rotate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  transform: PropTypes.string,
+};
+
+export default function RadialGradient({
+  children,
+  id,
+  from,
+  to,
+  fromOffset = '0%',
+  fromOpacity = 1,
+  toOffset = '100%',
+  toOpacity = 1,
+  rotate,
+  transform,
+  ...restProps
+}) {
+  return (
+    <defs>
+      <radialGradient
+        id={id}
+        gradientTransform={rotate ? `rotate(${rotate})` : transform}
+        {...restProps}
+      >
+        {!!children && children}
+        {!children &&
+          <stop
+            offset={fromOffset}
+            stopColor={from}
+            stopOpacity={fromOpacity}
+          />}
+        {!children &&
+          <stop
+            offset={toOffset}
+            stopColor={to}
+            stopOpacity={toOpacity}
+          />}
+      </radialGradient>
+    </defs>
+  );
+}
diff --git a/packages/vx-gradient/src/index.js b/packages/vx-gradient/src/index.js
@@ -1,4 +1,5 @@
 export { default as LinearGradient } from './gradients/LinearGradient';
+export { default as RadialGradient } from './gradients/RadialGradient';
 export { default as GradientDarkgreenGreen } from './gradients/DarkgreenGreen';
 export { default as GradientLightgreenGreen } from './gradients/LightgreenGreen';
 export { default as GradientOrangeRed } from './gradients/OrangeRed';

diff --git a/packages/vx-gradient/test/LinearGradient.test.js b/packages/vx-gradient/test/LinearGradient.test.js
@@ -0,0 +1,7 @@
+import { LinearGradient } from '../src';
+
+describe('<LinearGradient />', () => {
+  it('should be defined', () => {
+    expect(LinearGradient).toBeDefined();
+  });
+});
diff --git a/packages/vx-gradient/test/RadialGradient.test.js b/packages/vx-gradient/test/RadialGradient.test.js
@@ -0,0 +1,7 @@
+import { RadialGradient } from '../src';
+
+describe('<RadialGradient />', () => {
+  it('should be defined', () => {
+    expect(RadialGradient).toBeDefined();
+  });
+});