diff --git a/packages/circle-packing/src/CirclePacking.tsx b/packages/circle-packing/src/CirclePacking.tsx index 28a849552..822502726 100644 --- a/packages/circle-packing/src/CirclePacking.tsx +++ b/packages/circle-packing/src/CirclePacking.tsx @@ -22,6 +22,7 @@ const InnerCirclePacking = ({ height, margin: partialMargin, padding = defaultProps.padding, + leavesOnly = defaultProps.leavesOnly, colors = defaultProps.colors as OrdinalColorScaleConfig< Omit, 'color' | 'fill'> >, @@ -44,6 +45,7 @@ const InnerCirclePacking = ({ width: innerWidth, height: innerHeight, padding, + leavesOnly, colors, colorBy, childColor, @@ -89,7 +91,8 @@ export const CirclePacking = ({ motionConfig = defaultProps.motionConfig, theme, ...otherProps -}: CirclePackSvgProps) => ( +}: Partial, 'data' | 'width' | 'height'>> & + Pick, 'data' | 'width' | 'height'>) => ( ({ height, margin: partialMargin, padding = defaultProps.padding, + leavesOnly = defaultProps.leavesOnly, colors = defaultProps.colors as OrdinalColorScaleConfig< Omit, 'color' | 'fill'> >, @@ -22,9 +23,11 @@ const InnerCirclePackingCanvas = ({ // layers = defaultProps.layers, isInteractive, role = defaultProps.role, -}: Omit< - Partial>, - 'data' | 'width' | 'height' | 'animate' | 'motionConfig' +}: Partial< + Omit< + CirclePackingCanvasProps, + 'data' | 'width' | 'height' | 'animate' | 'motionConfig' + > > & Pick, 'data' | 'width' | 'height'>) => { const canvasEl = useRef(null) @@ -44,6 +47,7 @@ const InnerCirclePackingCanvas = ({ width: innerWidth, height: innerHeight, padding, + leavesOnly, colors, colorBy, childColor, @@ -120,7 +124,7 @@ export const CirclePackingCanvas = ({ isInteractive = defaultProps.isInteractive, theme, ...otherProps -}: Omit>, 'data' | 'width' | 'height'> & +}: Partial, 'data' | 'width' | 'height'>> & Pick, 'data' | 'width' | 'height'>) => ( isInteractive={isInteractive} {...otherProps} /> diff --git a/packages/circle-packing/src/CirclePackingHtml.tsx b/packages/circle-packing/src/CirclePackingHtml.tsx index a73dd4eb6..4d2ec0b99 100644 --- a/packages/circle-packing/src/CirclePackingHtml.tsx +++ b/packages/circle-packing/src/CirclePackingHtml.tsx @@ -16,6 +16,7 @@ export const InnerCirclePackingHtml = ({ height, margin: partialMargin, padding = defaultProps.padding, + leavesOnly = defaultProps.leavesOnly, colors = defaultProps.colors as OrdinalColorScaleConfig< Omit, 'color' | 'fill'> >, @@ -42,6 +43,7 @@ export const InnerCirclePackingHtml = ({ width: innerWidth, height: innerHeight, padding, + leavesOnly, colors, colorBy, childColor, diff --git a/packages/circle-packing/src/ResponsiveCirclePackingCanvas.tsx b/packages/circle-packing/src/ResponsiveCirclePackingCanvas.tsx index 2d6e79ccd..6af3fbdf9 100644 --- a/packages/circle-packing/src/ResponsiveCirclePackingCanvas.tsx +++ b/packages/circle-packing/src/ResponsiveCirclePackingCanvas.tsx @@ -4,7 +4,7 @@ import { CirclePackingCanvasProps } from './types' import { CirclePackingCanvas } from './CirclePackingCanvas' export const ResponsiveCirclePackingCanvas = ( - props: Omit>, 'data' | 'width' | 'height'> & + props: Partial, 'data' | 'width' | 'height'>> & Pick, 'data'> ) => ( diff --git a/packages/circle-packing/src/hooks.ts b/packages/circle-packing/src/hooks.ts index ee348b119..0d43c0e94 100644 --- a/packages/circle-packing/src/hooks.ts +++ b/packages/circle-packing/src/hooks.ts @@ -12,6 +12,7 @@ export const useCirclePacking = >({ width, height, padding, + leavesOnly, colors, colorBy, childColor, @@ -22,6 +23,7 @@ export const useCirclePacking = >({ width: number height: number padding: CirclePackingCommonProps['padding'] + leavesOnly: CirclePackingCommonProps['leavesOnly'] colors: CirclePackingCommonProps['colors'] colorBy: CirclePackingCommonProps['colorBy'] childColor: CirclePackingCommonProps['childColor'] @@ -47,8 +49,7 @@ export const useCirclePacking = >({ const packedData = pack(hierarchy) - // let nodes = leavesOnly ? root.leaves() : root.descendants() - const nodes = packedData.descendants() + const nodes = leavesOnly ? packedData.leaves() : packedData.descendants() // It's important to sort node by depth, // it ensures that we assign a parent node diff --git a/packages/circle-packing/src/props.ts b/packages/circle-packing/src/props.ts index 6fad970ac..43a871f4e 100644 --- a/packages/circle-packing/src/props.ts +++ b/packages/circle-packing/src/props.ts @@ -5,6 +5,7 @@ export const defaultProps = { id: 'id', value: 'value', padding: 0, + leavesOnly: false, layers: ['circles', 'labels'] as CirclePackingLayerId[], colors: { scheme: 'nivo' } as OrdinalColorScaleConfig, colorBy: 'id' as const, diff --git a/packages/circle-packing/src/types.ts b/packages/circle-packing/src/types.ts index bf8c51b1a..9d48c097d 100644 --- a/packages/circle-packing/src/types.ts +++ b/packages/circle-packing/src/types.ts @@ -50,9 +50,7 @@ export interface CirclePackSvgProps valueFormat?: ValueFormat padding: number - margin: Box - - layers: CirclePackLayer[] + leavesOnly: boolean theme: Theme colors: OrdinalColorScaleConfig, 'color' | 'fill'>>