-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(circle-packing): rename Bubble to CirclePacking
- Loading branch information
Showing
26 changed files
with
409 additions
and
264 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from 'react' | ||
| import { useTransition, animated, to, SpringValue } from 'react-spring' | ||
| import { useMotionConfig } from '@nivo/core' | ||
| import { DatumWithChildren, ComputedDatum } from './types' | ||
|
|
||
| /** | ||
| * A negative radius value is invalid for an SVG circle, | ||
| * this custom interpolation makes sure it's either | ||
| * positive or zero. | ||
| */ | ||
| const interpolateRadius = (radiusValue: SpringValue<number>) => | ||
| to([radiusValue], radius => Math.max(0, radius)) | ||
|
|
||
| export const Circles = <RawDatum extends DatumWithChildren<RawDatum>>({ data }: any) => { | ||
| const { animate, config: springConfig } = useMotionConfig() | ||
|
|
||
| const enter = (node: ComputedDatum<RawDatum>) => ({ | ||
| x: node.x, | ||
| y: node.y, | ||
| radius: 0, | ||
| color: node.color, | ||
| opacity: 0, | ||
| }) | ||
|
|
||
| const update = (node: ComputedDatum<RawDatum>) => ({ | ||
| x: node.x, | ||
| y: node.y, | ||
| radius: node.radius, | ||
| color: node.color, | ||
| opacity: 1, | ||
| }) | ||
|
|
||
| const leave = (node: ComputedDatum<RawDatum>) => ({ | ||
| x: node.x, | ||
| y: node.y, | ||
| radius: 0, | ||
| color: node.color, | ||
| opacity: 0, | ||
| }) | ||
|
|
||
| const transition = useTransition< | ||
| ComputedDatum<RawDatum>, | ||
| { | ||
| x: number | ||
| y: number | ||
| radius: number | ||
| color: string | ||
| opacity: number | ||
| } | ||
| >(data, { | ||
| key: datum => datum.id, | ||
| initial: update, | ||
| from: enter, | ||
| enter: update, | ||
| update, | ||
| leave, | ||
| config: springConfig, | ||
| immediate: !animate, | ||
| }) | ||
|
|
||
| return ( | ||
| <g> | ||
| {transition((transitionProps, datum) => { | ||
| return ( | ||
| <animated.circle | ||
| key={datum.id} | ||
| cx={transitionProps.x} | ||
| cy={transitionProps.y} | ||
| r={interpolateRadius(transitionProps.radius)} | ||
| fill={transitionProps.color} | ||
| opacity={transitionProps.opacity} | ||
| /> | ||
| ) | ||
| })} | ||
| </g> | ||
| ) | ||
| } |
6 changes: 3 additions & 3 deletions
6
...rcle-packing/src/ResponsiveCirclePack.tsx → ...e-packing/src/ResponsiveCirclePacking.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| import React from 'react' | ||
| import { ResponsiveWrapper } from '@nivo/core' | ||
| import { CirclePack } from './CirclePack' | ||
| import { CirclePacking } from './CirclePacking' | ||
| import { CirclePackSvgProps } from './types' | ||
|
|
||
| export const ResponsiveCirclePack = <RawDatum,>( | ||
| export const ResponsiveCirclePacking = <RawDatum,>( | ||
| props: Omit<CirclePackSvgProps<RawDatum>, 'width' | 'height'> | ||
| ) => ( | ||
| <ResponsiveWrapper> | ||
| {({ width, height }: { width: number; height: number }) => ( | ||
| <CirclePack<RawDatum> width={width} height={height} {...props} /> | ||
| <CirclePacking<RawDatum> width={width} height={height} {...props} /> | ||
| )} | ||
| </ResponsiveWrapper> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,94 @@ | ||
| import { pack as d3Pack, hierarchy as d3Hierarchy } from 'd3-hierarchy' | ||
| import cloneDeep from 'lodash/cloneDeep' | ||
| import sortBy from 'lodash/sortBy' | ||
| import { usePropertyAccessor } from '@nivo/core' | ||
| import { DatumWithChildren, CirclePackSvgProps } from './types' | ||
| import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors' | ||
| import { DatumWithChildren, CirclePackSvgProps, ComputedDatum } from './types' | ||
|
|
||
| export const useCirclePack = <RawDatum extends DatumWithChildren<RawDatum>>({ | ||
| export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({ | ||
| data, | ||
| id, | ||
| value, | ||
| width, | ||
| height, | ||
| padding, | ||
| colors, | ||
| childColor, | ||
| }: { | ||
| data: RawDatum | ||
| id: CirclePackSvgProps<RawDatum>['id'] | ||
| value: CirclePackSvgProps<RawDatum>['value'] | ||
| width: number | ||
| height: number | ||
| padding: CirclePackSvgProps<RawDatum>['padding'] | ||
| colors: CirclePackSvgProps<RawDatum>['colors'] | ||
| childColor: CirclePackSvgProps<RawDatum>['childColor'] | ||
| }) => { | ||
| const getId = usePropertyAccessor<RawDatum, string | number>(id) | ||
| const getValue = usePropertyAccessor<RawDatum, number>(value) | ||
|
|
||
| console.log({ | ||
| data, | ||
| getId, | ||
| getValue, | ||
| }) | ||
| const getColor = useOrdinalColorScale<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>( | ||
| colors, | ||
| 'id' | ||
| ) | ||
| const getChildColor = useInheritedColor<ComputedDatum<RawDatum>>(childColor) | ||
|
|
||
| // d3 mutates the data for performance reasons, | ||
| // however it does not work well with reactive programming, | ||
| // this ensures that we don't mutate the input data | ||
| const clonedData = cloneDeep(data) | ||
|
|
||
| const hierarchy = d3Hierarchy(clonedData).sum(getValue) | ||
|
|
||
| const pack = d3Pack().size([width, height]).padding(padding) | ||
|
|
||
| const packedData = pack(hierarchy) | ||
|
|
||
| // let nodes = leavesOnly ? root.leaves() : root.descendants() | ||
| const nodes = packedData.descendants() | ||
|
|
||
| // It's important to sort node by depth, | ||
| // it ensures that we assign a parent node | ||
| // which has already been computed, because parent nodes | ||
| // are gonna be computed first | ||
| const sortedNodes = sortBy(nodes, 'depth') | ||
|
|
||
| const total = hierarchy.value ?? 0 | ||
|
|
||
| const computedNodes = sortedNodes.reduce<ComputedDatum<RawDatum>>((acc, descendant) => { | ||
| const id = getId(descendant.data) | ||
| const value = descendant.value! | ||
| const percentage = (100 * value) / total | ||
| const path = descendant.ancestors().map(ancestor => getId(ancestor.data)) | ||
|
|
||
| let parent: ComputedDatum<RawDatum> | undefined | ||
| if (descendant.parent) { | ||
| parent = acc.find(node => node.id === getId(descendant.parent!.data)) | ||
| } | ||
|
|
||
| const normalizedNode: ComputedDatum<RawDatum> = { | ||
| id, | ||
| path, | ||
| value, | ||
| percentage, | ||
| //formattedValue: valueFormat ? formatValue(value) : `${percentage.toFixed(2)}%`, | ||
| x: descendant.x, | ||
| y: descendant.y, | ||
| radius: descendant.r, | ||
| color: '', | ||
| data: descendant.data, | ||
| depth: descendant.depth, | ||
| height: descendant.height, | ||
| } | ||
|
|
||
| if (childColor !== 'noinherit' && parent && normalizedNode.depth > 1) { | ||
| normalizedNode.color = getChildColor(parent) | ||
| } else { | ||
| normalizedNode.color = getColor(normalizedNode) | ||
| } | ||
|
|
||
| return [...acc, normalizedNode] | ||
| }, []) | ||
|
|
||
| return computedNodes | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.