feat(defs): allow gradientTransform to be passed to gradient definiti…

…ons, fixes #1098 (#1812)
plouc · Nov 8, 2021 · 76062b5 · 76062b5
1 parent 0b3bdb0
commit 76062b5
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 8 deletions.
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -255,6 +255,7 @@ declare module '@nivo/core' {
             color: string
             opacity?: number
         }[]
+        gradientTransform?: string
     }
 
     export type PatternDotsDef = {

diff --git a/packages/core/src/components/defs/gradients/LinearGradient.js b/packages/core/src/components/defs/gradients/LinearGradient.js
@@ -8,8 +8,8 @@
  */
 import PropTypes from 'prop-types'
 
-export const LinearGradient = ({ id, colors }) => (
-    <linearGradient id={id} x1={0} x2={0} y1={0} y2={1}>
+export const LinearGradient = ({ id, colors, ...rest }) => (
+    <linearGradient id={id} x1={0} x2={0} y1={0} y2={1} {...rest}>
         {colors.map(({ offset, color, opacity }) => (
             <stop
                 key={offset}
@@ -30,6 +30,7 @@ LinearGradient.propTypes = {
             opacity: PropTypes.number,
         })
     ).isRequired,
+    gradientTransform: PropTypes.string,
 }
 
 export const linearGradientDef = (id, colors, options = {}) => ({

diff --git a/packages/core/tests/lib/defs.test.js b/packages/core/tests/lib/defs.test.js
@@ -163,6 +163,24 @@ describe('bindDefs()', () => {
             ])
         })
 
+        it('should allow gradientTransform to be used', () => {
+            const defs = [
+                {
+                    id: 'gradient',
+                    type: 'linearGradient',
+                    colors: [],
+                    gradientTransform: 'rotate(90 0.5 0.5)',
+                },
+            ]
+            const nodes = [{}, {}]
+
+            const boundDefs = bindDefs(defs, nodes, [{ match: '*', id: 'gradient' }], {
+                targetKey: 'style.fill',
+            })
+
+            expect(boundDefs).toEqual(defs)
+        })
+
         it('should support inheritance', () => {
             const defs = [
                 {

diff --git a/packages/treemap/stories/treemap.stories.js b/packages/treemap/stories/treemap.stories.js
@@ -46,11 +46,15 @@ stories.add('patterns & gradients', () => (
             modifiers: [['darker', 3]],
         }}
         defs={[
-            linearGradientDef('gradient', [
-                { offset: 0, color: '#ffffff' },
-                { offset: 15, color: 'inherit' },
-                { offset: 100, color: 'inherit' },
-            ]),
+            linearGradientDef(
+                'gradient',
+                [
+                    { offset: 0, color: '#ffffff' },
+                    { offset: 15, color: 'inherit' },
+                    { offset: 100, color: 'inherit' },
+                ],
+                { gradientTransform: 'rotate(-90 0.5 0.5)' }
+            ),
             patternDotsDef('pattern', {
                 background: 'inherit',
                 color: '#ffffff',

diff --git a/website/src/components/guides/gradients/GradientsExample.js b/website/src/components/guides/gradients/GradientsExample.js
@@ -20,7 +20,13 @@ const MyChart = () => (
             linearGradientDef('gradientB', [
                 { offset: 0, color: '#000' },
                 { offset: 100, color: 'inherit' },
-            ]),
+            ],
+            // you may specify transforms for your gradients, e.g. rotations and skews,
+            // following the transform attribute format.
+            // For instance here we rotate 90 degrees relative to the center of the object.
+            {
+                gradientTransform: 'rotate(90 0.5 0.5)'
+            }),
             // using plain object
             {
                 id: 'gradientC',