Document Sankey layers and labelComponent

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,
 })

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,

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: {