From faf00aa84cc17291573b5dc27dd1c47be6f8b587 Mon Sep 17 00:00:00 2001 From: plouc Date: Wed, 23 Dec 2020 11:34:01 +0900 Subject: [PATCH] fix(circle-packing): add support for controlled zoomed ID --- packages/circle-packing/src/CirclePacking.tsx | 3 ++- .../circle-packing/src/CirclePackingCanvas.tsx | 3 ++- packages/circle-packing/src/CirclePackingHtml.tsx | 3 ++- packages/circle-packing/src/hooks.ts | 5 +++-- packages/circle-packing/src/types.ts | 1 + .../src/data/components/circle-packing/props.js | 15 +++++++++------ website/src/pages/circle-packing/canvas.js | 1 - website/src/pages/circle-packing/html.js | 5 ----- website/src/pages/circle-packing/index.js | 1 - 9 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/circle-packing/src/CirclePacking.tsx b/packages/circle-packing/src/CirclePacking.tsx index 43482300f..6b99c8685 100644 --- a/packages/circle-packing/src/CirclePacking.tsx +++ b/packages/circle-packing/src/CirclePacking.tsx @@ -52,6 +52,7 @@ const InnerCirclePacking = ({ onMouseLeave, onClick, tooltip = defaultProps.tooltip, + zoomedId, role = defaultProps.role, }: InnerCirclePackingProps) => { const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions( @@ -74,7 +75,7 @@ const InnerCirclePacking = ({ childColor, }) - const zoomedNodes = useCirclePackingZoom(nodes, 'ppie', innerWidth, innerHeight) + const zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight) const layerById: Record = { circles: null, diff --git a/packages/circle-packing/src/CirclePackingCanvas.tsx b/packages/circle-packing/src/CirclePackingCanvas.tsx index e787f1735..f6feff85a 100644 --- a/packages/circle-packing/src/CirclePackingCanvas.tsx +++ b/packages/circle-packing/src/CirclePackingCanvas.tsx @@ -35,6 +35,7 @@ const InnerCirclePackingCanvas = ({ labelsTextColor = defaultProps.labelsTextColor as InheritedColorConfig>, // layers = defaultProps.layers, isInteractive, + zoomedId, role = defaultProps.role, }: InnerCirclePackingCanvasProps) => { const canvasEl = useRef(null) @@ -60,7 +61,7 @@ const InnerCirclePackingCanvas = ({ childColor, }) - const zoomedNodes = useCirclePackingZoom(nodes, 'node.64', innerWidth, innerHeight) + const zoomedNodes = useCirclePackingZoom(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 index 24d2fc9f8..2a91b3041 100644 --- a/packages/circle-packing/src/CirclePackingHtml.tsx +++ b/packages/circle-packing/src/CirclePackingHtml.tsx @@ -46,6 +46,7 @@ export const InnerCirclePackingHtml = ({ onMouseLeave, onClick, tooltip = defaultProps.tooltip, + zoomedId, role = defaultProps.role, }: InnerCirclePackingHtmlProps) => { const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions( @@ -68,7 +69,7 @@ export const InnerCirclePackingHtml = ({ childColor, }) - const zoomedNodes = useCirclePackingZoom(nodes, 'ppie', innerWidth, innerHeight) + const zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight) const layerById: Record = { circles: null, diff --git a/packages/circle-packing/src/hooks.ts b/packages/circle-packing/src/hooks.ts index dcdf439d6..d14db6f15 100644 --- a/packages/circle-packing/src/hooks.ts +++ b/packages/circle-packing/src/hooks.ts @@ -105,13 +105,14 @@ export const useCirclePacking = >({ export const useCirclePackingZoom = ( nodes: ComputedDatum[], - zoomedId: string, + zoomedId: CirclePackingCommonProps['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 index 4b4ff4fc5..e20485cff 100644 --- a/packages/circle-packing/src/types.ts +++ b/packages/circle-packing/src/types.ts @@ -77,6 +77,7 @@ export interface CirclePackingCommonProps { layers: CirclePackingLayer[] isInteractive: boolean tooltip: (props: ComputedDatum) => 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 index 6d95f8993..fa9b86f49 100644 --- 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 index b77893e61..2e2df7c5c 100644 --- 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 index 1eb00e94c..e830be762 100644 --- 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 index 9e6ee4a69..3aa46117c 100644 --- 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()