fix(circle-packing): add support for controlled zoomed ID

plouc · Apr 26, 2021 · faf00aa · faf00aa
1 parent f83f2f1
commit faf00aa
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 18 deletions.
diff --git a/packages/circle-packing/src/CirclePacking.tsx b/packages/circle-packing/src/CirclePacking.tsx
@@ -52,6 +52,7 @@ const InnerCirclePacking = <RawDatum,>({
     onMouseLeave,
     onClick,
     tooltip = defaultProps.tooltip,
+    zoomedId,
     role = defaultProps.role,
 }: InnerCirclePackingProps<RawDatum>) => {
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
@@ -74,7 +75,7 @@ const InnerCirclePacking = <RawDatum,>({
         childColor,
     })
 
-    const zoomedNodes = useCirclePackingZoom<RawDatum>(nodes, 'ppie', innerWidth, innerHeight)
+    const zoomedNodes = useCirclePackingZoom<RawDatum>(nodes, zoomedId, innerWidth, innerHeight)
 
     const layerById: Record<CirclePackingLayerId, ReactNode> = {
         circles: null,

diff --git a/packages/circle-packing/src/CirclePackingCanvas.tsx b/packages/circle-packing/src/CirclePackingCanvas.tsx
@@ -35,6 +35,7 @@ const InnerCirclePackingCanvas = <RawDatum,>({
     labelsTextColor = defaultProps.labelsTextColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
     // layers = defaultProps.layers,
     isInteractive,
+    zoomedId,
     role = defaultProps.role,
 }: InnerCirclePackingCanvasProps<RawDatum>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
@@ -60,7 +61,7 @@ const InnerCirclePackingCanvas = <RawDatum,>({
         childColor,
     })
 
-    const zoomedNodes = useCirclePackingZoom<RawDatum>(nodes, 'node.64', innerWidth, innerHeight)
+    const zoomedNodes = useCirclePackingZoom<RawDatum>(nodes, zoomedId, innerWidth, innerHeight)
 
     const labels = useCirclePackingLabels({
         nodes: zoomedNodes,

diff --git a/packages/circle-packing/src/CirclePackingHtml.tsx b/packages/circle-packing/src/CirclePackingHtml.tsx
@@ -46,6 +46,7 @@ export const InnerCirclePackingHtml = <RawDatum,>({
     onMouseLeave,
     onClick,
     tooltip = defaultProps.tooltip,
+    zoomedId,
     role = defaultProps.role,
 }: InnerCirclePackingHtmlProps<RawDatum>) => {
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
@@ -68,7 +69,7 @@ export const InnerCirclePackingHtml = <RawDatum,>({
         childColor,
     })
 
-    const zoomedNodes = useCirclePackingZoom<RawDatum>(nodes, 'ppie', innerWidth, innerHeight)
+    const zoomedNodes = useCirclePackingZoom<RawDatum>(nodes, zoomedId, innerWidth, innerHeight)
 
     const layerById: Record<CirclePackingLayerId, ReactNode> = {
         circles: null,

diff --git a/packages/circle-packing/src/hooks.ts b/packages/circle-packing/src/hooks.ts
@@ -105,13 +105,14 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
 
 export const useCirclePackingZoom = <RawDatum>(
     nodes: ComputedDatum<RawDatum>[],
-    zoomedId: string,
+    zoomedId: CirclePackingCommonProps<RawDatum>['zoomedId'],
     width: number,
     height: number
 ) =>
     useMemo(() => {
-        const zoomedNode = nodes.find(({ id }) => id === zoomedId)
+        if (!zoomedId) return nodes
 
+        const zoomedNode = nodes.find(({ id }) => id === zoomedId)
         if (!zoomedNode) return nodes
 
         const ratio = Math.min(width, height) / (zoomedNode.radius * 2)

diff --git a/packages/circle-packing/src/types.ts b/packages/circle-packing/src/types.ts
@@ -77,6 +77,7 @@ export interface CirclePackingCommonProps<RawDatum> {
     layers: CirclePackingLayer<RawDatum>[]
     isInteractive: boolean
     tooltip: (props: ComputedDatum<RawDatum>) => JSX.Element
+    zoomedId?: string | null
     animate: boolean
     motionConfig: ModernMotionProps['motionConfig']
     role: string

diff --git a/website/src/data/components/circle-packing/props.js b/website/src/data/components/circle-packing/props.js
@@ -333,13 +333,16 @@ const props = [
         required: false,
     },
     {
-        key: 'isZoomable',
-        flavors: ['svg', 'html'],
-        help: `Enable/disable zooming ('isInteractive' must also be 'true').`,
-        type: 'boolean',
+        key: 'zoomedId',
+        flavors: ['svg', 'html', 'canvas'],
+        help: `Zoom on a specific node.`,
+        description: `
+            If provided, zoom on the node having the provided ID,
+            this can be used to build a zoomable circle packing chart
+            when used in conjunction with the \`onClick\` property.  
+        `,
+        type: 'string | null',
         required: false,
-        defaultValue: defaultProps.isZoomable,
-        controlType: 'switch',
         group: 'Interactivity',
     },
     ...motionProperties(['svg', 'html'], defaultProps, 'react-spring'),

diff --git a/website/src/pages/circle-packing/canvas.js b/website/src/pages/circle-packing/canvas.js
@@ -48,7 +48,6 @@ const initialProperties = {
         modifiers: [['darker', 0.3]],
     },
     isInteractive: true,
-    isZoomable: true,
 }
 
 const CirclePackingCanvas = () => {

diff --git a/website/src/pages/circle-packing/html.js b/website/src/pages/circle-packing/html.js
@@ -20,10 +20,6 @@ const initialProperties = {
     valueFormat: { format: '', enabled: false },
     colors: { scheme: 'spectral' },
     colorBy: 'depth',
-    //childColor: {
-    //    from: 'color',
-    //    modifiers: [['darker', 0.3]],
-    //},
     childColor: 'noinherit',
     padding: 2,
     leavesOnly: false,
@@ -40,7 +36,6 @@ const initialProperties = {
     animate: true,
     motionConfig: 'gentle',
     isInteractive: true,
-    isZoomable: true,
 }
 
 const CirclePackingHtml = () => {

diff --git a/website/src/pages/circle-packing/index.js b/website/src/pages/circle-packing/index.js
@@ -47,7 +47,6 @@ const initialProperties = {
     animate: true,
     motionConfig: 'gentle',
     isInteractive: true,
-    isZoomable: true,
 }
 
 const generateData = () => generateLibTree()