From fd7fd7875773ecf3edc1403765f365bd3d470a65 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Wed, 30 Apr 2025 11:51:05 +0900
Subject: [PATCH] feat(website): add layers and labelComponent props for the
 Sankey component

---
 website/src/data/components/sankey/mapper.ts | 19 ++++++++++++++--
 website/src/data/components/sankey/props.ts  | 23 ++++++++++++++++++++
 website/src/pages/sankey/index.tsx           | 12 ++--------
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/website/src/data/components/sankey/mapper.ts b/website/src/data/components/sankey/mapper.ts
index cac70512b6..27420350eb 100644
--- a/website/src/data/components/sankey/mapper.ts
+++ b/website/src/data/components/sankey/mapper.ts
@@ -1,5 +1,20 @@
-import { settingsMapper, mapFormat } from '../../../lib/settings'
+import { DefaultLink, DefaultNode, SankeySvgProps } from '@nivo/sankey'
+import { settingsMapper, mapFormat, UnmappedSettings } from '../../../lib/settings'
 
-export default settingsMapper({
+export type MappedSankeyProps = Omit<
+    SankeySvgProps<DefaultNode, DefaultLink>,
+    'data' | 'width' | 'height'
+>
+export type UnmappedSankeyProps = UnmappedSettings<
+    MappedSankeyProps,
+    {
+        valueFormat: {
+            format: string
+            enabled: boolean
+        }
+    }
+>
+
+export default settingsMapper<UnmappedSankeyProps, MappedSankeyProps>({
     valueFormat: mapFormat,
 })
diff --git a/website/src/data/components/sankey/props.ts b/website/src/data/components/sankey/props.ts
index d23480f81f..ebf6410f64 100644
--- a/website/src/data/components/sankey/props.ts
+++ b/website/src/data/components/sankey/props.ts
@@ -291,6 +291,21 @@ const props: ChartProperty[] = [
         group: 'Links',
         defaultValue: svgDefaultProps.linkBlendMode,
     }),
+    {
+        key: 'layers',
+        flavors: ['svg', 'canvas'],
+        help: 'Defines the order of layers.',
+        description: `
+            You can also use this to insert extra layers to the chart,
+            this extra layer must be a function which will receive
+            the chart computed data and must return a valid SVG
+            element.
+        `,
+        type: 'Array<SankeyLayerId | SankeyCustomLayer>',
+        required: false,
+        defaultValue: svgDefaultProps.layers,
+        group: 'Customization',
+    },
     {
         key: 'enableLinkGradient',
         group: 'Links',
@@ -372,6 +387,14 @@ const props: ChartProperty[] = [
             })),
         },
     },
+    {
+        key: 'labelComponent',
+        group: 'Labels',
+        help: 'Label custom component.',
+        type: 'SankeyLabelComponent',
+        required: false,
+        flavors: ['svg'],
+    },
     isInteractive({
         flavors: ['svg'],
         defaultValue: svgDefaultProps.isInteractive,
diff --git a/website/src/pages/sankey/index.tsx b/website/src/pages/sankey/index.tsx
index 85476160b4..f47126c721 100644
--- a/website/src/pages/sankey/index.tsx
+++ b/website/src/pages/sankey/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import omit from 'lodash/omit.js'
 import { generateSankeyData } from '@nivo/generators'
 import {
@@ -10,17 +11,8 @@ import {
 } from '@nivo/sankey'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/sankey/meta.yml'
-import mapper from '../../data/components/sankey/mapper'
+import mapper, { UnmappedSankeyProps, MappedSankeyProps } from '../../data/components/sankey/mapper'
 import { groups } from '../../data/components/sankey/props'
-import { graphql, useStaticQuery } from 'gatsby'
-
-type MappedSankeyProps = Omit<SankeySvgProps<DefaultNode, DefaultLink>, 'data' | 'width' | 'height'>
-type UnmappedSankeyProps = Omit<MappedSankeyProps, 'valueFormat'> & {
-    valueFormat: {
-        format: string
-        enabled: boolean
-    }
-}
 
 const initialProperties: UnmappedSankeyProps = {
     margin: {