feat(dendogram): add icons and reviews and improve the capture script

Makefile

@@ -61,6 +61,7 @@ fmt: ##@0 global format code using prettier (js, css, md)
 		"storybook/.storybook/*.{js,ts,tsx}" \
 		"storybook/stories/**/*.{js,ts,tsx}" \
 		"cypress/src/**/*.{js,ts,tsx}" \
+		"scripts/*.{js,mjs}" \
 		"README.md"
 
 fmt-check: ##@0 global check if files were all formatted using prettier
@@ -74,6 +75,7 @@ fmt-check: ##@0 global check if files were all formatted using prettier
 		"storybook/.storybook/*.{js,ts,tsx}" \
 		"storybook/stories/**/*.{js,ts,tsx}" \
 		"cypress/src/**/*.{js,ts,tsx}" \
+		"scripts/*.{js,mjs}" \
         "README.md"
 
 test: ##@0 global run all checks/tests (packages, website)
@@ -203,11 +205,22 @@ pkgs-publish-next: ##@1 packages publish all packages for @next npm tag
 	@echo "${YELLOW}Publishing packages${RESET}"
 	@pnpm lerna publish --exact --npm-tag=next
 
-pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `package-watch-bar`
+pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `pkg-dev-bar`
 	@echo "${YELLOW}Running build watcher for package ${WHITE}@nivo/${*}${RESET}"
 	@rm -rf ./packages/${*}/cjs
 	@export PACKAGE=${*}; NODE_ENV=development BABEL_ENV=development ./node_modules/.bin/rollup -c conf/rollup.config.mjs -w
 
+pkg-icons-%: ##@1 capture packages icons for the website, eg. `pkg-icons-bar`
+	./scripts/capture.mjs icons --pkg ${*}
+	@$(MAKE) website-sprites
+
+pkg-previews-%: ##@1 capture packages previews for readmes, eg. `pkg-previews-bar`
+	./scripts/capture.mjs charts --pkg ${*}
+
+pkg-capture-%: ##@1 capture packages previews and icons, eg. `pkg-capture-bar`
+	./scripts/capture.mjs all --pkg ${*}
+	@$(MAKE) website-sprites
+
 ########################################################################################################################
 #
 # 2. WEBSITE

conf/base.yaml

@@ -1,4 +1,4 @@
-baseUrl: http://localhost:9000
+baseUrl: http://localhost:8000
 capture:
     pages:
       - id: home
@@ -57,6 +57,10 @@ capture:
         chart: bar
         flavors: [svg, canvas]
 
+      - pkg: bullet
+        chart: bullet
+        flavors: [ svg ]
+
       - pkg: calendar
         chart: calendar
         flavors: [svg]
@@ -71,8 +75,8 @@ capture:
         # html is broken for now
         # flavors: [svg, html, canvas]
 
-      - pkg: bullet
-        chart: bullet
+      - pkg: dendogram
+        chart: dendogram
         flavors: [svg]
 
       - pkg: heatmap

package.json

@@ -69,7 +69,8 @@
     "rollup-plugin-strip-banner": "^3.0.0",
     "rollup-plugin-visualizer": "^5.5.2",
     "serve": "^13.0.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "yargs": "^17.7.2"
   },
   "resolutions": {
     "@types/react": "^18.2.0",

packages/dendogram/src/Dendogram.tsx

@@ -17,8 +17,10 @@ const InnerDendogram = <Datum extends object>({
     margin: partialMargin,
     data,
     identity,
-    linkThickness = svgDefaultProps.linkThickness,
+    nodeColor = svgDefaultProps.nodeColor,
     nodeComponent = svgDefaultProps.nodeComponent,
+    linkThickness = svgDefaultProps.linkThickness,
+    linkColor = svgDefaultProps.linkColor,
     linkComponent = svgDefaultProps.linkComponent,
     layout = svgDefaultProps.layout,
     layers = svgDefaultProps.layers,
@@ -50,7 +52,9 @@ const InnerDendogram = <Datum extends object>({
         layout,
         width: innerWidth,
         height: innerHeight,
+        nodeColor,
         linkThickness,
+        linkColor,
     })
 
     const layerById: Record<LayerId, ReactNode> = {

packages/dendogram/src/Link.tsx

@@ -41,7 +41,7 @@ export const Link = <Datum extends object>({
                 }
             )}
             strokeWidth={link.thickness}
-            stroke="red"
+            stroke={link.color}
             {...eventHandlers}
         />
     )

packages/dendogram/src/Node.tsx

@@ -21,5 +21,13 @@ export const Node = <Datum extends object>({
         tooltip,
     })
 
-    return <animated.circle r={6} cx={animatedProps.x} cy={animatedProps.y} {...eventHandlers} />
+    return (
+        <animated.circle
+            r={6}
+            fill={node.color}
+            cx={animatedProps.x}
+            cy={animatedProps.y}
+            {...eventHandlers}
+        />
+    )
 }

packages/dendogram/src/defaults.ts

@@ -4,11 +4,21 @@ import { Link } from './Link'
 
 export const commonDefaultProps: Pick<
     CommonProps<any>,
-    'identity' | 'layout' | 'linkThickness' | 'isInteractive' | 'role' | 'animate' | 'motionConfig'
+    | 'identity'
+    | 'layout'
+    | 'nodeColor'
+    | 'linkThickness'
+    | 'linkColor'
+    | 'isInteractive'
+    | 'role'
+    | 'animate'
+    | 'motionConfig'
 > = {
     identity: 'id',
     layout: 'top-to-bottom',
+    nodeColor: '#000000',
     linkThickness: 1,
+    linkColor: '#555555',
     isInteractive: true,
     role: 'img',
     animate: true,

packages/dendogram/src/hooks.ts

@@ -18,6 +18,7 @@ import {
     LinkThicknessFunction,
     LinkMouseEventHandler,
     LinkTooltip,
+    IntermediateComputedNode,
 } from './types'
 import { commonDefaultProps } from './defaults'
 
@@ -85,23 +86,31 @@ const useCartesianScales = ({
         }
     }, [width, height, layout])
 
+const useNodeColor = <Datum extends object>(
+    color: Exclude<CommonProps<Datum>['nodeColor'], undefined>
+) =>
+    useMemo(() => {
+        if (typeof color === 'function') return color
+        return () => color
+    }, [color])
+
 const useNodes = <Datum extends object>({
     root,
     xScale,
     yScale,
     layout,
     getIdentity,
+    nodeColor,
 }: {
     root: HierarchyDendogramNode<Datum>
     xScale: ScaleLinear<number, number>
     yScale: ScaleLinear<number, number>
     layout: Layout
     getIdentity: (node: Datum) => string
-}) =>
-    useMemo(() => {
-        const nodeByUid: Record<string, ComputedNode<Datum>> = {}
-
-        const nodes: ComputedNode<Datum>[] = root.descendants().map(node => {
+    nodeColor: Exclude<CommonProps<Datum>['nodeColor'], undefined>
+}) => {
+    const intermediateNodes = useMemo<IntermediateComputedNode<Datum>[]>(() => {
+        return root.descendants().map(node => {
             const { pathComponents } = computeNodePath<Datum>(node, getIdentity)
 
             let x: number
@@ -114,7 +123,7 @@ const useNodes = <Datum extends object>({
                 y = yScale(node.x!)
             }
 
-            const computedNode: ComputedNode<Datum> = {
+            return {
                 uid: node.uid!,
                 id: getIdentity(node.data),
                 data: node.data,
@@ -124,6 +133,20 @@ const useNodes = <Datum extends object>({
                 x,
                 y,
             }
+        })
+    }, [root, getIdentity, layout, xScale, yScale])
+
+    const getNodeColor = useNodeColor<Datum>(nodeColor)
+
+    return useMemo(() => {
+        const nodeByUid: Record<string, ComputedNode<Datum>> = {}
+
+        const nodes: ComputedNode<Datum>[] = intermediateNodes.map(intermediateNode => {
+            const computedNode: ComputedNode<Datum> = {
+                ...intermediateNode,
+                color: getNodeColor(intermediateNode),
+            }
+
             nodeByUid[computedNode.uid] = computedNode
 
             return computedNode
@@ -133,16 +156,27 @@ const useNodes = <Datum extends object>({
             nodes,
             nodeByUid,
         }
-    }, [root, getIdentity, layout, xScale, yScale])
+    }, [intermediateNodes, getNodeColor])
+}
+
+const useLinkColor = <Datum extends object>(
+    color: Exclude<CommonProps<Datum>['linkColor'], undefined>
+) =>
+    useMemo(() => {
+        if (typeof color === 'function') return color
+        return () => color
+    }, [color])
 
 const useLinks = <Datum extends object>({
     root,
     nodeByUid,
     linkThickness,
+    linkColor,
 }: {
     root: HierarchyDendogramNode<Datum>
     nodeByUid: Record<string, ComputedNode<Datum>>
     linkThickness: Exclude<CommonProps<Datum>['linkThickness'], undefined>
+    linkColor: Exclude<CommonProps<Datum>['linkColor'], undefined>
 }): ComputedLink<Datum>[] => {
     const intermediateLinks = useMemo<IntermediateComputedLink<Datum>[]>(() => {
         return (root.links() as HierarchyDendogramLink<Datum>[]).map(link => {
@@ -160,14 +194,17 @@ const useLinks = <Datum extends object>({
         return () => linkThickness
     }, [linkThickness])
 
+    const getLinkColor = useLinkColor<Datum>(linkColor)
+
     return useMemo(() => {
         return intermediateLinks.map(intermediateLink => {
             return {
                 ...intermediateLink,
                 thickness: getLinkThickness(intermediateLink),
+                color: getLinkColor(intermediateLink),
             }
         })
-    }, [intermediateLinks, getLinkThickness])
+    }, [intermediateLinks, getLinkThickness, getLinkColor])
 }
 
 export const useDendogram = <Datum extends object = DefaultDatum>({
@@ -176,14 +213,18 @@ export const useDendogram = <Datum extends object = DefaultDatum>({
     layout = commonDefaultProps.layout,
     width,
     height,
+    nodeColor = commonDefaultProps.nodeColor,
     linkThickness = commonDefaultProps.linkThickness,
+    linkColor = commonDefaultProps.linkColor,
 }: {
     data: DendogramDataProps<Datum>['data']
     identity?: CommonProps<Datum>['identity']
     layout?: Layout
     width: number
     height: number
+    nodeColor?: CommonProps<Datum>['nodeColor']
     linkThickness?: CommonProps<Datum>['linkThickness']
+    linkColor?: CommonProps<Datum>['linkColor']
 }) => {
     const getIdentity = usePropertyAccessor(identity)
 
@@ -205,9 +246,15 @@ export const useDendogram = <Datum extends object = DefaultDatum>({
         yScale,
         layout,
         getIdentity,
+        nodeColor,
     })
 
-    const links = useLinks<Datum>({ root, nodeByUid, linkThickness })
+    const links = useLinks<Datum>({ root, nodeByUid, linkThickness, linkColor })
+
+    console.log({
+        nodes,
+        links,
+    })
 
     return {
         nodes,

packages/dendogram/src/types.ts

@@ -22,7 +22,7 @@ export interface HierarchyDendogramLink<Datum> {
     target: HierarchyDendogramNode<Datum>
 }
 
-export interface ComputedNode<Datum extends object> {
+export interface IntermediateComputedNode<Datum extends object> {
     uid: string
     id: string
     data: Datum
@@ -33,6 +33,10 @@ export interface ComputedNode<Datum extends object> {
     y: number
 }
 
+export interface ComputedNode<Datum extends object> extends IntermediateComputedNode<Datum> {
+    color: string
+}
+
 export interface IntermediateComputedLink<Datum extends object> {
     id: string
     source: ComputedNode<Datum>
@@ -41,8 +45,13 @@ export interface IntermediateComputedLink<Datum extends object> {
 
 export interface ComputedLink<Datum extends object> extends IntermediateComputedLink<Datum> {
     thickness: number
+    color: string
 }
 
+export type NodeColorFunction<Datum extends object> = (
+    node: IntermediateComputedNode<Datum>
+) => string
+
 export interface NodeComponentProps<Datum extends object> {
     node: ComputedNode<Datum>
     isInteractive: boolean
@@ -72,6 +81,10 @@ export type LinkThicknessFunction<Datum extends object> = (
     link: IntermediateComputedLink<Datum>
 ) => number
 
+export type LinkColorFunction<Datum extends object> = (
+    link: IntermediateComputedLink<Datum>
+) => string
+
 export interface LinkComponentProps<Datum extends object> {
     link: ComputedLink<Datum>
     isInteractive: boolean
@@ -118,7 +131,9 @@ export interface CommonProps<Datum extends object> extends MotionProps {
     identity: PropertyAccessor<Datum, string>
 
     theme: Theme
+    nodeColor: string | NodeColorFunction<Datum>
     linkThickness: number | LinkThicknessFunction<Datum>
+    linkColor: string | LinkColorFunction<Datum>
 
     isInteractive: boolean
     onNodeMouseEnter: NodeMouseEventHandler<Datum>