feat(stream): add support for custom layer

Author: plouc

packages/stream/src/Stream.tsx

@@ -84,6 +84,7 @@ const InnerStream = <RawDatum extends StreamDatum>({
         getDotColor,
         getDotBorderWidth,
         getDotBorderColor,
+        layerContext,
     } = useStream<RawDatum>({
         width: innerWidth,
         height: innerHeight,
@@ -219,7 +220,7 @@ const InnerStream = <RawDatum extends StreamDatum>({
         >
             {chartLayers.map((layer, i) => {
                 if (typeof layer === 'function') {
-                    return <Fragment key={i}>{createElement(layer, {})}</Fragment>
+                    return <Fragment key={i}>{createElement(layer, layerContext)}</Fragment>
                 }
 
                 return layerById?.[layer] ?? null

packages/stream/src/hooks.ts

@@ -15,6 +15,7 @@ import {
 import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
 import {
     StreamCommonProps,
+    StreamCustomLayerProps,
     StreamDataProps,
     StreamDatum,
     StreamLayerData,
@@ -181,6 +182,16 @@ export const useStream = <RawDatum extends StreamDatum>({
         [data.length, enhancedLayers]
     )
 
+    const layerContext: StreamCustomLayerProps = useMemo(
+        () => ({
+            xScale,
+            yScale,
+            layers: enhancedLayers,
+            slices,
+        }),
+        [xScale, yScale, enhancedLayers, slices]
+    )
+
     return {
         xScale,
         yScale,
@@ -191,5 +202,6 @@ export const useStream = <RawDatum extends StreamDatum>({
         getDotColor,
         getDotBorderWidth,
         getDotBorderColor,
+        layerContext,
     }
 }

packages/stream/src/types.ts

@@ -17,6 +17,13 @@ import { LegendProps } from '@nivo/legends'
 
 export type StreamLayerId = 'grid' | 'axes' | 'layers' | 'dots' | 'slices' | 'legends'
 
+export interface StreamCustomLayerProps {
+    xScale: any
+    yScale: any
+    layers: StreamLayerData[]
+    slices: StreamSliceData[]
+}
+
 export interface StreamDatum {
     [key: string]: string | number
 }

packages/stream/tests/Stream.test.tsx

@@ -52,4 +52,4 @@ describe('accessibility', () => {
         expect(svg.prop('aria-labelledby')).toBe('AriaLabelledBy')
         expect(svg.prop('aria-describedby')).toBe('AriaDescribedBy')
     })
-})
+})