Skip to content

Commit

Permalink
feat(stream): add support for custom layer
Browse files Browse the repository at this point in the history
plouc committed Aug 17, 2021
1 parent e202437 commit fa5d6e6
Showing 4 changed files with 22 additions and 2 deletions.
3 changes: 2 additions & 1 deletion packages/stream/src/Stream.tsx
Original file line number Diff line number Diff line change
@@ -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
12 changes: 12 additions & 0 deletions packages/stream/src/hooks.ts
Original file line number Diff line number Diff line change
@@ -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,
}
}
7 changes: 7 additions & 0 deletions packages/stream/src/types.ts
Original file line number Diff line number Diff line change
@@ -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
}
2 changes: 1 addition & 1 deletion packages/stream/tests/Stream.test.tsx
Original file line number Diff line number Diff line change
@@ -52,4 +52,4 @@ describe('accessibility', () => {
expect(svg.prop('aria-labelledby')).toBe('AriaLabelledBy')
expect(svg.prop('aria-describedby')).toBe('AriaDescribedBy')
})
})
})

0 comments on commit fa5d6e6

Please sign in to comment.