From 76062b534db9bf46208661cf05c7b549ec797cce Mon Sep 17 00:00:00 2001
From: Benjamin Tran Dinh <benjamin.tdm@gmail.com>
Date: Mon, 8 Nov 2021 01:25:39 +0100
Subject: [PATCH] feat(defs): allow gradientTransform to be passed to gradient
 definitions, fixes #1098 (#1812)

---
 packages/core/index.d.ts                       |  1 +
 .../defs/gradients/LinearGradient.js           |  5 +++--
 packages/core/tests/lib/defs.test.js           | 18 ++++++++++++++++++
 packages/treemap/stories/treemap.stories.js    | 14 +++++++++-----
 .../guides/gradients/GradientsExample.js       |  8 +++++++-
 5 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
index 3238523ec3..6a94e3ff0f 100644
--- 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
index 6b2a3c7e28..46f10e448b 100644
--- 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
index da49ce2b04..1f0fd24115 100644
--- 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
index 4999b39001..08603555c8 100644
--- 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
index 00a7923fc7..978a4dc365 100644
--- 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',