Skip to content

Commit

Permalink
feat(circle-packing): update website descriptions
Browse files Browse the repository at this point in the history
  • Loading branch information
plouc authored and wyze committed Apr 26, 2021
1 parent 9b7a304 commit b91c057
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 45 deletions.
22 changes: 0 additions & 22 deletions packages/circle-packing/tests/CirclePacking.test.tsx
Expand Up @@ -127,25 +127,3 @@ testCases.forEach(testCase => {
})
})
})

xit(`should send node data to onClick when 'isZoomable' is false`, () => {
const onClickHandler = jest.fn(node => node.data)
const wrapper = mount(
<CirclePackingHtml<SampleDatum>
width={600}
height={600}
data={sampleData}
enableLabels={true}
labelsSkipRadius={24}
onClick={onClickHandler}
/>
)

wrapper
.find('circle')
.at(0) //click the first <circle> (the root)
.simulate('click')

expect(onClickHandler.mock.calls.length).toBe(1)
expect(onClickHandler.mock.results[0].value).toEqual(sampleData)
})
45 changes: 22 additions & 23 deletions website/src/data/components/circle-packing/meta.yml
Expand Up @@ -23,24 +23,23 @@ CirclePacking:
- label: Using custom tooltip
link: circlepacking--custom-tooltip
description: |
CirclePacking chart with zooming ability.
You can fully customize it using `nodeComponent` property
to define your own node component,
if you wish to do so you should have a look at
[native SVG node component](https://github.com/plouc/nivo/blob/master/src/components/charts/bubble/BubbleNode.js)
for available properties.
Hierarchical CirclePacking chart with zooming ability.
You can fully customize it using the `circleComponent` property
to define your own, if you wish to do so you should have a look at
[the default SVG component](https://github.com/plouc/nivo/blob/master/packages/circle-packing/src/CircleSvg.tsx)
to get started.
The responsive alternative of this component is `ResponsiveCirclePacking`.
It also offers various implementations, see
[CirclePackingHtml](self:/circle-packing/html) and
[CirclePackingCanvas](self:/circle-packing/canvas).
It also offers other implementations, see [CirclePackingHtml](self:/circle-packing/html)
and [CirclePackingCanvas](self:/circle-packing/canvas).
You can also see more example usages in [storybook](storybook:circlepacking--default).
# Disabled until the API is fixed
# This component is available in the `@nivo/api`,
# see [sample](api:/samples/circle-packing.svg)
# or [try it using the API client](self:/circle-packing/api).
# You can also see more example usages in
# [the storybook](storybook:circle-packing--default).

CirclePackingHtml:
package: '@nivo/circle-packing'
Expand All @@ -56,19 +55,18 @@ CirclePackingHtml:
- label: Using custom tooltip
link: circlepackinghtml--custom-tooltip
description: |
CirclePacking chart with zooming ability.
You can fully customize it using `nodeComponent` property
to define your own node component, if you wish to do so you should
have a look at
[the native HTML node component](https://github.com/plouc/nivo/blob/master/src/components/charts/bubble/BubbleHtmlNode.js)
for available properties.
Hierarchical CirclePacking chart with zooming ability.
You can fully customize it using the `circleComponent` property
to define your own, if you wish to do so you should have a look at
[the default HTML component](https://github.com/plouc/nivo/blob/master/packages/circle-packing/src/CircleHtml.tsx)
to get started.
The responsive alternative of this component is `ResponsiveCirclePackingHtml`.
It also offers various implementations,
see [CirclePacking](self:/circle-packing) and [CirclePackingCanvas](self:/circle-packing/canvas).
It also offers other implementations, see [CirclePacking](self:/circle-packing)
and [CirclePackingCanvas](self:/circle-packing/canvas).
You can also see more example usages in
[the storybook](storybook:circlepackinghtml--default).
You can also see more example usages in [storybook](storybook:circlepackinghtml--default).
CirclePackingCanvas:
package: '@nivo/circle-packing'
Expand All @@ -77,9 +75,10 @@ CirclePackingCanvas:
- canvas
description: |
A variation around the [CirclePacking](self:/circle-packing) component.
Well suited for large data sets as it does not impact DOM tree depth,
however you lose the isomorphic ability and transitions.
The responsive alternative of this component is `ResponsiveCirclePackingCanvas`.
It also offers various implementations, see
[CirclePacking](self:/circle-packing) and [CirclePackingHtml](self:/circle-packing/html).
It also offers other implementations, see [CirclePacking](self:/circle-packing)
and [CirclePackingHtml](self:/circle-packing/html).

0 comments on commit b91c057

Please sign in to comment.