feat(circle-packing): restore leavesOnly support

plouc · Apr 26, 2021 · 0713581 · 0713581
1 parent 478da0e
commit 0713581
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 11 deletions.
diff --git a/packages/circle-packing/src/CirclePacking.tsx b/packages/circle-packing/src/CirclePacking.tsx
@@ -22,6 +22,7 @@ const InnerCirclePacking = <RawDatum,>({
     height,
     margin: partialMargin,
     padding = defaultProps.padding,
+    leavesOnly = defaultProps.leavesOnly,
     colors = defaultProps.colors as OrdinalColorScaleConfig<
         Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>
     >,
@@ -44,6 +45,7 @@ const InnerCirclePacking = <RawDatum,>({
         width: innerWidth,
         height: innerHeight,
         padding,
+        leavesOnly,
         colors,
         colorBy,
         childColor,
@@ -89,7 +91,8 @@ export const CirclePacking = <RawDatum,>({
     motionConfig = defaultProps.motionConfig,
     theme,
     ...otherProps
-}: CirclePackSvgProps<RawDatum>) => (
+}: Partial<Omit<CirclePackingSvgProps<RawDatum>, 'data' | 'width' | 'height'>> &
+    Pick<CirclePackingSvgProps<RawDatum>, 'data' | 'width' | 'height'>) => (
     <Container
         isInteractive={isInteractive}
         animate={animate}

diff --git a/packages/circle-packing/src/CirclePackingCanvas.tsx b/packages/circle-packing/src/CirclePackingCanvas.tsx
@@ -14,6 +14,7 @@ const InnerCirclePackingCanvas = <RawDatum,>({
     height,
     margin: partialMargin,
     padding = defaultProps.padding,
+    leavesOnly = defaultProps.leavesOnly,
     colors = defaultProps.colors as OrdinalColorScaleConfig<
         Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>
     >,
@@ -22,9 +23,11 @@ const InnerCirclePackingCanvas = <RawDatum,>({
     // layers = defaultProps.layers,
     isInteractive,
     role = defaultProps.role,
-}: Omit<
-    Partial<CirclePackingCanvasProps<RawDatum>>,
-    'data' | 'width' | 'height' | 'animate' | 'motionConfig'
+}: Partial<
+    Omit<
+        CirclePackingCanvasProps<RawDatum>,
+        'data' | 'width' | 'height' | 'animate' | 'motionConfig'
+    >
 > &
     Pick<CirclePackingCanvasProps<RawDatum>, 'data' | 'width' | 'height'>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
@@ -44,6 +47,7 @@ const InnerCirclePackingCanvas = <RawDatum,>({
         width: innerWidth,
         height: innerHeight,
         padding,
+        leavesOnly,
         colors,
         colorBy,
         childColor,
@@ -120,7 +124,7 @@ export const CirclePackingCanvas = <RawDatum,>({
     isInteractive = defaultProps.isInteractive,
     theme,
     ...otherProps
-}: Omit<Partial<CirclePackingCanvasProps<RawDatum>>, 'data' | 'width' | 'height'> &
+}: Partial<Omit<CirclePackingCanvasProps<RawDatum>, 'data' | 'width' | 'height'>> &
     Pick<CirclePackingCanvasProps<RawDatum>, 'data' | 'width' | 'height'>) => (
     <Container isInteractive={isInteractive} theme={theme}>
         <InnerCirclePackingCanvas<RawDatum> isInteractive={isInteractive} {...otherProps} />

diff --git a/packages/circle-packing/src/CirclePackingHtml.tsx b/packages/circle-packing/src/CirclePackingHtml.tsx
@@ -16,6 +16,7 @@ export const InnerCirclePackingHtml = <RawDatum,>({
     height,
     margin: partialMargin,
     padding = defaultProps.padding,
+    leavesOnly = defaultProps.leavesOnly,
     colors = defaultProps.colors as OrdinalColorScaleConfig<
         Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>
     >,
@@ -42,6 +43,7 @@ export const InnerCirclePackingHtml = <RawDatum,>({
         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
@@ -4,7 +4,7 @@ import { CirclePackingCanvasProps } from './types'
 import { CirclePackingCanvas } from './CirclePackingCanvas'
 
 export const ResponsiveCirclePackingCanvas = <RawDatum,>(
-    props: Omit<Partial<CirclePackingCanvasProps<RawDatum>>, 'data' | 'width' | 'height'> &
+    props: Partial<Omit<CirclePackingCanvasProps<RawDatum>, 'data' | 'width' | 'height'>> &
         Pick<CirclePackingCanvasProps<RawDatum>, 'data'>
 ) => (
     <ResponsiveWrapper>

diff --git a/packages/circle-packing/src/hooks.ts b/packages/circle-packing/src/hooks.ts
@@ -12,6 +12,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
     width,
     height,
     padding,
+    leavesOnly,
     colors,
     colorBy,
     childColor,
@@ -22,6 +23,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
     width: number
     height: number
     padding: CirclePackingCommonProps<RawDatum>['padding']
+    leavesOnly: CirclePackingCommonProps<RawDatum>['leavesOnly']
     colors: CirclePackingCommonProps<RawDatum>['colors']
     colorBy: CirclePackingCommonProps<RawDatum>['colorBy']
     childColor: CirclePackingCommonProps<RawDatum>['childColor']
@@ -47,8 +49,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
 
     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
@@ -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
@@ -50,9 +50,7 @@ export interface CirclePackSvgProps<RawDatum extends DatumWithChildren<RawDatum>
     valueFormat?: ValueFormat<number>
 
     padding: number
-    margin: Box
-
-    layers: CirclePackLayer<RawDatum>[]
+    leavesOnly: boolean
 
     theme: Theme
     colors: OrdinalColorScaleConfig<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>