feat(tree): rename the dendogram package to tree

conf/base.yaml

@@ -75,8 +75,8 @@ capture:
         # html is broken for now
         # flavors: [svg, html, canvas]
 
-      - pkg: dendogram
-        chart: dendogram
+      - pkg: tree
+        chart: tree
         flavors: [svg]
 
       - pkg: heatmap

packages/tree/README.md

@@ -0,0 +1,12 @@
+<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>
+
+# `@nivo/tree`
+
+[![version](https://img.shields.io/npm/v/@nivo/tree?style=for-the-badge)](https://www.npmjs.com/package/@nivo/tree)
+[![downloads](https://img.shields.io/npm/dm/@nivo/tree?style=for-the-badge)](https://www.npmjs.com/package/@nivo/tree)
+
+## Tree
+
+[documentation](http://nivo.rocks/tree/)
+
+![Tree](https://raw.githubusercontent.com/plouc/nivo/master/website/src/assets/captures/tree.png)

packages/dendogram/package.json → packages/tree/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@nivo/dendogram",
+    "name": "@nivo/tree",
     "version": "0.86.0",
     "license": "MIT",
     "author": {
@@ -9,18 +9,19 @@
     "repository": {
         "type": "git",
         "url": "https://github.com/plouc/nivo.git",
-        "directory": "packages/dendogram"
+        "directory": "packages/tree"
     },
     "keywords": [
         "nivo",
         "dataviz",
         "react",
         "d3",
         "charts",
-        "dendogram"
+        "hierarchy",
+        "tree"
     ],
-    "main": "./dist/nivo-dendogram.cjs.js",
-    "module": "./dist/nivo-dendogram.es.js",
+    "main": "./dist/nivo-tree.cjs.js",
+    "module": "./dist/nivo-tree.es.js",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",

packages/dendogram/src/Links.tsx → packages/tree/src/Links.tsx

@@ -6,7 +6,8 @@ import {
     LinkComponent,
     LinkMouseEventHandler,
     LinkTooltip,
-    LinkAnimatedProps, LinkGenerator,
+    LinkAnimatedProps,
+    LinkGenerator,
 } from './types'
 
 interface LinksProps<Datum> {

packages/tree/src/ResponsiveTree.tsx

@@ -0,0 +1,9 @@
+import { ResponsiveWrapper } from '@nivo/core'
+import { ResponsiveTreeSvgProps, DefaultDatum } from './types'
+import { Tree } from './Tree'
+
+export const ResponsiveTree = <Datum = DefaultDatum,>(props: ResponsiveTreeSvgProps<Datum>) => (
+    <ResponsiveWrapper>
+        {({ width, height }) => <Tree<Datum> width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
+)

packages/dendogram/src/Dendogram.tsx → packages/tree/src/Tree.tsx

@@ -1,23 +1,25 @@
 import { createElement, Fragment, ReactNode, useMemo } from 'react'
 import { Container, useDimensions, SvgWrapper } from '@nivo/core'
-import { DefaultDatum, LayerId, DendogramSvgProps, CustomLayerProps } from './types'
+import { DefaultDatum, LayerId, TreeSvgProps, CustomLayerProps } from './types'
 import { svgDefaultProps } from './defaults'
-import { useDendogram } from './hooks'
+import { useTree } from './hooks'
 import { Links } from './Links'
 import { Nodes } from './Nodes'
 import { Mesh } from './Mesh'
 
-type InnerDendogramProps<Datum> = Omit<
-    DendogramSvgProps<Datum>,
+type InnerTreeProps<Datum> = Omit<
+    TreeSvgProps<Datum>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerDendogram = <Datum,>({
+const InnerTree = <Datum,>({
     width,
     height,
     margin: partialMargin,
     data,
     identity,
+    mode = svgDefaultProps.mode,
+    layout = svgDefaultProps.layout,
     nodeSize = svgDefaultProps.nodeSize,
     activeNodeSize,
     inactiveNodeSize,
@@ -28,7 +30,6 @@ const InnerDendogram = <Datum,>({
     inactiveLinkThickness,
     linkColor = svgDefaultProps.linkColor,
     linkComponent = svgDefaultProps.linkComponent,
-    layout = svgDefaultProps.layout,
     layers = svgDefaultProps.layers,
     isInteractive = svgDefaultProps.isInteractive,
     useMesh = svgDefaultProps.useMesh,
@@ -52,17 +53,18 @@ const InnerDendogram = <Datum,>({
     ariaLabel,
     ariaLabelledBy,
     ariaDescribedBy,
-}: InnerDendogramProps<Datum>) => {
+}: InnerTreeProps<Datum>) => {
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
         width,
         height,
         partialMargin
     )
 
-    const { nodes, links, linkGenerator, setCurrentNode } = useDendogram<Datum>({
+    const { nodes, links, linkGenerator, setCurrentNode } = useTree<Datum>({
         data,
         identity,
         layout,
+        mode,
         width: innerWidth,
         height: innerHeight,
         nodeSize,
@@ -170,14 +172,14 @@ const InnerDendogram = <Datum,>({
     )
 }
 
-export const Dendogram = <Datum = DefaultDatum,>({
+export const Tree = <Datum = DefaultDatum,>({
     isInteractive = svgDefaultProps.isInteractive,
     animate = svgDefaultProps.animate,
     motionConfig = svgDefaultProps.motionConfig,
     theme,
     renderWrapper,
     ...otherProps
-}: DendogramSvgProps<Datum>) => (
+}: TreeSvgProps<Datum>) => (
     <Container
         {...{
             animate,
@@ -187,6 +189,6 @@ export const Dendogram = <Datum = DefaultDatum,>({
             theme,
         }}
     >
-        <InnerDendogram<Datum> isInteractive={isInteractive} {...otherProps} />
+        <InnerTree<Datum> isInteractive={isInteractive} {...otherProps} />
     </Container>
 )

packages/dendogram/src/defaults.ts → packages/tree/src/defaults.ts

@@ -1,10 +1,11 @@
-import { CommonProps, DendogramSvgProps } from './types'
+import { CommonProps, TreeSvgProps } from './types'
 import { Node } from './Node'
 import { Link } from './Link'
 
 export const commonDefaultProps: Pick<
     CommonProps<any>,
     | 'identity'
+    | 'mode'
     | 'layout'
     | 'nodeSize'
     | 'nodeColor'
@@ -23,6 +24,7 @@ export const commonDefaultProps: Pick<
     | 'motionConfig'
 > = {
     identity: 'id',
+    mode: 'dendogram',
     layout: 'top-to-bottom',
     nodeSize: 16,
     nodeColor: { scheme: 'nivo' },
@@ -42,7 +44,7 @@ export const commonDefaultProps: Pick<
 }
 
 export const svgDefaultProps: typeof commonDefaultProps &
-    Required<Pick<DendogramSvgProps<any>, 'layers' | 'nodeComponent' | 'linkComponent'>> = {
+    Required<Pick<TreeSvgProps<any>, 'layers' | 'nodeComponent' | 'linkComponent'>> = {
     ...commonDefaultProps,
     layers: ['links', 'nodes', 'mesh'],
     nodeComponent: Node,

packages/dendogram/src/hooks.ts → packages/tree/src/hooks.ts

@@ -1,15 +1,15 @@
 import { createElement, MouseEvent, useCallback, useMemo, useState } from 'react'
-import { hierarchy as d3Hierarchy, cluster as d3Cluster } from 'd3-hierarchy'
+import { hierarchy as d3Hierarchy, cluster as d3Cluster, tree as d3Tree } from 'd3-hierarchy'
 import { scaleLinear, ScaleLinear } from 'd3-scale'
 import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape'
 import { usePropertyAccessor, useTheme } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
 import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
 import {
     DefaultDatum,
-    HierarchyDendogramNode,
-    HierarchyDendogramLink,
-    DendogramDataProps,
+    HierarchyTreeNode,
+    HierarchyTreeLink,
+    TreeDataProps,
     CommonProps,
     Layout,
     ComputedNode,
@@ -24,19 +24,22 @@ import {
     CurrentNodeSetter,
     NodeSizeModifierFunction,
     LinkThicknessModifierFunction,
+    TreeMode,
 } from './types'
 import { commonDefaultProps } from './defaults'
 
 export const useRoot = <Datum>({
     data,
+    mode,
     getIdentity,
 }: {
-    data: DendogramDataProps<Datum>['data']
+    data: TreeDataProps<Datum>['data']
+    mode: TreeMode
     getIdentity: (node: Datum) => string
 }) =>
     useMemo(() => {
-        const root = d3Hierarchy<Datum>(data) as HierarchyDendogramNode<Datum>
-        const cluster = d3Cluster<Datum>().size([1, 1])
+        const root = d3Hierarchy<Datum>(data) as HierarchyTreeNode<Datum>
+        const cluster = mode === 'tree' ? d3Tree<Datum>() : d3Cluster<Datum>()
 
         root.eachBefore(node => {
             const ancestors = node
@@ -60,7 +63,7 @@ export const useRoot = <Datum>({
         cluster(root)
 
         return root
-    }, [data, getIdentity])
+    }, [data, mode, getIdentity])
 
 /**
  * By default, the x/y positions are computed for a 0~1 range,
@@ -124,7 +127,7 @@ const useNodes = <Datum>({
     inactiveNodeSize,
     nodeColor,
 }: {
-    root: HierarchyDendogramNode<Datum>
+    root: HierarchyTreeNode<Datum>
     xScale: ScaleLinear<number, number>
     yScale: ScaleLinear<number, number>
     layout: Layout
@@ -226,15 +229,15 @@ const useLinks = <Datum>({
     inactiveLinkThickness,
     linkColor,
 }: {
-    root: HierarchyDendogramNode<Datum>
+    root: HierarchyTreeNode<Datum>
     nodeByUid: Record<string, ComputedNode<Datum>>
     linkThickness: Exclude<CommonProps<Datum>['linkThickness'], undefined>
     activeLinkThickness?: CommonProps<Datum>['activeLinkThickness']
     inactiveLinkThickness?: CommonProps<Datum>['inactiveLinkThickness']
     linkColor: Exclude<CommonProps<Datum>['linkColor'], undefined>
 }) => {
     const intermediateLinks = useMemo<IntermediateComputedLink<Datum>[]>(() => {
-        return (root.links() as HierarchyDendogramLink<Datum>[]).map(link => {
+        return (root.links() as HierarchyTreeLink<Datum>[]).map(link => {
             return {
                 id: `${link.source.uid}:${link.target.uid}`,
                 // Replace with computed nodes.
@@ -371,11 +374,12 @@ const useSetCurrentNode = <Datum>({
         ]
     )
 
-export const useDendogram = <Datum = DefaultDatum>({
+export const useTree = <Datum = DefaultDatum>({
     data,
     width,
     height,
     identity = commonDefaultProps.identity,
+    mode = commonDefaultProps.mode,
     layout = commonDefaultProps.layout,
     nodeSize = commonDefaultProps.nodeSize,
     activeNodeSize,
@@ -390,10 +394,11 @@ export const useDendogram = <Datum = DefaultDatum>({
     highlightAncestorLinks = commonDefaultProps.highlightAncestorLinks,
     highlightDescendantLinks = commonDefaultProps.highlightDescendantLinks,
 }: {
-    data: DendogramDataProps<Datum>['data']
+    data: TreeDataProps<Datum>['data']
     width: number
     height: number
     identity?: CommonProps<Datum>['identity']
+    mode?: TreeMode
     layout?: Layout
     nodeSize?: CommonProps<Datum>['nodeSize']
     activeNodeSize?: CommonProps<Datum>['activeNodeSize']
@@ -409,7 +414,7 @@ export const useDendogram = <Datum = DefaultDatum>({
     highlightDescendantLinks?: boolean
 }) => {
     const getIdentity = usePropertyAccessor(identity)
-    const root = useRoot<Datum>({ data, getIdentity })
+    const root = useRoot<Datum>({ data, mode, getIdentity })
 
     const { xScale, yScale } = useCartesianScales({ width, height, layout })
     const { nodes, nodeByUid, setActiveNodeUids } = useNodes<Datum>({

packages/dendogram/src/index.ts → packages/tree/src/index.ts

@@ -1,5 +1,5 @@
-export * from './Dendogram'
-export * from './ResponsiveDendogram'
+export * from './Tree'
+export * from './ResponsiveTree'
 export * from './hooks'
 export * from './types'
 export * from './defaults'