Skip to content

Commit 94bd19f

Browse files
ploucplouc
committed
feat(dendogram): add icons and reviews and improve the capture script
1 parent 79e27db commit 94bd19f

23 files changed

+447
-117
lines changed

‎Makefile

+14-1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ fmt: ##@0 global format code using prettier (js, css, md)
6161
"storybook/.storybook/*.{js,ts,tsx}" \
6262
"storybook/stories/**/*.{js,ts,tsx}" \
6363
"cypress/src/**/*.{js,ts,tsx}" \
64+
"scripts/*.{js,mjs}" \
6465
"README.md"
6566

6667
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
7475
"storybook/.storybook/*.{js,ts,tsx}" \
7576
"storybook/stories/**/*.{js,ts,tsx}" \
7677
"cypress/src/**/*.{js,ts,tsx}" \
78+
"scripts/*.{js,mjs}" \
7779
"README.md"
7880

7981
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
203205
@echo "${YELLOW}Publishing packages${RESET}"
204206
@pnpm lerna publish --exact --npm-tag=next
205207

206-
pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `package-watch-bar`
208+
pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `pkg-dev-bar`
207209
@echo "${YELLOW}Running build watcher for package ${WHITE}@nivo/${*}${RESET}"
208210
@rm -rf ./packages/${*}/cjs
209211
@export PACKAGE=${*}; NODE_ENV=development BABEL_ENV=development ./node_modules/.bin/rollup -c conf/rollup.config.mjs -w
210212

213+
pkg-icons-%: ##@1 capture packages icons for the website, eg. `pkg-icons-bar`
214+
./scripts/capture.mjs icons --pkg ${*}
215+
@$(MAKE) website-sprites
216+
217+
pkg-previews-%: ##@1 capture packages previews for readmes, eg. `pkg-previews-bar`
218+
./scripts/capture.mjs charts --pkg ${*}
219+
220+
pkg-capture-%: ##@1 capture packages previews and icons, eg. `pkg-capture-bar`
221+
./scripts/capture.mjs all --pkg ${*}
222+
@$(MAKE) website-sprites
223+
211224
########################################################################################################################
212225
#
213226
# 2. WEBSITE

‎conf/base.yaml

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
baseUrl: http://localhost:9000
1+
baseUrl: http://localhost:8000
22
capture:
33
pages:
44
- id: home
@@ -57,6 +57,10 @@ capture:
5757
chart: bar
5858
flavors: [svg, canvas]
5959

60+
- pkg: bullet
61+
chart: bullet
62+
flavors: [ svg ]
63+
6064
- pkg: calendar
6165
chart: calendar
6266
flavors: [svg]
@@ -71,8 +75,8 @@ capture:
7175
# html is broken for now
7276
# flavors: [svg, html, canvas]
7377

74-
- pkg: bullet
75-
chart: bullet
78+
- pkg: dendogram
79+
chart: dendogram
7680
flavors: [svg]
7781

7882
- pkg: heatmap

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@
6969
"rollup-plugin-strip-banner": "^3.0.0",
7070
"rollup-plugin-visualizer": "^5.5.2",
7171
"serve": "^13.0.2",
72-
"typescript": "^4.9.5"
72+
"typescript": "^4.9.5",
73+
"yargs": "^17.7.2"
7374
},
7475
"resolutions": {
7576
"@types/react": "^18.2.0",

‎packages/dendogram/src/Dendogram.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ const InnerDendogram = <Datum extends object>({
1717
margin: partialMargin,
1818
data,
1919
identity,
20-
linkThickness = svgDefaultProps.linkThickness,
20+
nodeColor = svgDefaultProps.nodeColor,
2121
nodeComponent = svgDefaultProps.nodeComponent,
22+
linkThickness = svgDefaultProps.linkThickness,
23+
linkColor = svgDefaultProps.linkColor,
2224
linkComponent = svgDefaultProps.linkComponent,
2325
layout = svgDefaultProps.layout,
2426
layers = svgDefaultProps.layers,
@@ -50,7 +52,9 @@ const InnerDendogram = <Datum extends object>({
5052
layout,
5153
width: innerWidth,
5254
height: innerHeight,
55+
nodeColor,
5356
linkThickness,
57+
linkColor,
5458
})
5559

5660
const layerById: Record<LayerId, ReactNode> = {

‎packages/dendogram/src/Link.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const Link = <Datum extends object>({
4141
}
4242
)}
4343
strokeWidth={link.thickness}
44-
stroke="red"
44+
stroke={link.color}
4545
{...eventHandlers}
4646
/>
4747
)

‎packages/dendogram/src/Node.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,13 @@ export const Node = <Datum extends object>({
2121
tooltip,
2222
})
2323

24-
return <animated.circle r={6} cx={animatedProps.x} cy={animatedProps.y} {...eventHandlers} />
24+
return (
25+
<animated.circle
26+
r={6}
27+
fill={node.color}
28+
cx={animatedProps.x}
29+
cy={animatedProps.y}
30+
{...eventHandlers}
31+
/>
32+
)
2533
}

‎packages/dendogram/src/defaults.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,21 @@ import { Link } from './Link'
44

55
export const commonDefaultProps: Pick<
66
CommonProps<any>,
7-
'identity' | 'layout' | 'linkThickness' | 'isInteractive' | 'role' | 'animate' | 'motionConfig'
7+
| 'identity'
8+
| 'layout'
9+
| 'nodeColor'
10+
| 'linkThickness'
11+
| 'linkColor'
12+
| 'isInteractive'
13+
| 'role'
14+
| 'animate'
15+
| 'motionConfig'
816
> = {
917
identity: 'id',
1018
layout: 'top-to-bottom',
19+
nodeColor: '#000000',
1120
linkThickness: 1,
21+
linkColor: '#555555',
1222
isInteractive: true,
1323
role: 'img',
1424
animate: true,

‎packages/dendogram/src/hooks.ts

+56-9
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
LinkThicknessFunction,
1919
LinkMouseEventHandler,
2020
LinkTooltip,
21+
IntermediateComputedNode,
2122
} from './types'
2223
import { commonDefaultProps } from './defaults'
2324

@@ -85,23 +86,31 @@ const useCartesianScales = ({
8586
}
8687
}, [width, height, layout])
8788

89+
const useNodeColor = <Datum extends object>(
90+
color: Exclude<CommonProps<Datum>['nodeColor'], undefined>
91+
) =>
92+
useMemo(() => {
93+
if (typeof color === 'function') return color
94+
return () => color
95+
}, [color])
96+
8897
const useNodes = <Datum extends object>({
8998
root,
9099
xScale,
91100
yScale,
92101
layout,
93102
getIdentity,
103+
nodeColor,
94104
}: {
95105
root: HierarchyDendogramNode<Datum>
96106
xScale: ScaleLinear<number, number>
97107
yScale: ScaleLinear<number, number>
98108
layout: Layout
99109
getIdentity: (node: Datum) => string
100-
}) =>
101-
useMemo(() => {
102-
const nodeByUid: Record<string, ComputedNode<Datum>> = {}
103-
104-
const nodes: ComputedNode<Datum>[] = root.descendants().map(node => {
110+
nodeColor: Exclude<CommonProps<Datum>['nodeColor'], undefined>
111+
}) => {
112+
const intermediateNodes = useMemo<IntermediateComputedNode<Datum>[]>(() => {
113+
return root.descendants().map(node => {
105114
const { pathComponents } = computeNodePath<Datum>(node, getIdentity)
106115

107116
let x: number
@@ -114,7 +123,7 @@ const useNodes = <Datum extends object>({
114123
y = yScale(node.x!)
115124
}
116125

117-
const computedNode: ComputedNode<Datum> = {
126+
return {
118127
uid: node.uid!,
119128
id: getIdentity(node.data),
120129
data: node.data,
@@ -124,6 +133,20 @@ const useNodes = <Datum extends object>({
124133
x,
125134
y,
126135
}
136+
})
137+
}, [root, getIdentity, layout, xScale, yScale])
138+
139+
const getNodeColor = useNodeColor<Datum>(nodeColor)
140+
141+
return useMemo(() => {
142+
const nodeByUid: Record<string, ComputedNode<Datum>> = {}
143+
144+
const nodes: ComputedNode<Datum>[] = intermediateNodes.map(intermediateNode => {
145+
const computedNode: ComputedNode<Datum> = {
146+
...intermediateNode,
147+
color: getNodeColor(intermediateNode),
148+
}
149+
127150
nodeByUid[computedNode.uid] = computedNode
128151

129152
return computedNode
@@ -133,16 +156,27 @@ const useNodes = <Datum extends object>({
133156
nodes,
134157
nodeByUid,
135158
}
136-
}, [root, getIdentity, layout, xScale, yScale])
159+
}, [intermediateNodes, getNodeColor])
160+
}
161+
162+
const useLinkColor = <Datum extends object>(
163+
color: Exclude<CommonProps<Datum>['linkColor'], undefined>
164+
) =>
165+
useMemo(() => {
166+
if (typeof color === 'function') return color
167+
return () => color
168+
}, [color])
137169

138170
const useLinks = <Datum extends object>({
139171
root,
140172
nodeByUid,
141173
linkThickness,
174+
linkColor,
142175
}: {
143176
root: HierarchyDendogramNode<Datum>
144177
nodeByUid: Record<string, ComputedNode<Datum>>
145178
linkThickness: Exclude<CommonProps<Datum>['linkThickness'], undefined>
179+
linkColor: Exclude<CommonProps<Datum>['linkColor'], undefined>
146180
}): ComputedLink<Datum>[] => {
147181
const intermediateLinks = useMemo<IntermediateComputedLink<Datum>[]>(() => {
148182
return (root.links() as HierarchyDendogramLink<Datum>[]).map(link => {
@@ -160,14 +194,17 @@ const useLinks = <Datum extends object>({
160194
return () => linkThickness
161195
}, [linkThickness])
162196

197+
const getLinkColor = useLinkColor<Datum>(linkColor)
198+
163199
return useMemo(() => {
164200
return intermediateLinks.map(intermediateLink => {
165201
return {
166202
...intermediateLink,
167203
thickness: getLinkThickness(intermediateLink),
204+
color: getLinkColor(intermediateLink),
168205
}
169206
})
170-
}, [intermediateLinks, getLinkThickness])
207+
}, [intermediateLinks, getLinkThickness, getLinkColor])
171208
}
172209

173210
export const useDendogram = <Datum extends object = DefaultDatum>({
@@ -176,14 +213,18 @@ export const useDendogram = <Datum extends object = DefaultDatum>({
176213
layout = commonDefaultProps.layout,
177214
width,
178215
height,
216+
nodeColor = commonDefaultProps.nodeColor,
179217
linkThickness = commonDefaultProps.linkThickness,
218+
linkColor = commonDefaultProps.linkColor,
180219
}: {
181220
data: DendogramDataProps<Datum>['data']
182221
identity?: CommonProps<Datum>['identity']
183222
layout?: Layout
184223
width: number
185224
height: number
225+
nodeColor?: CommonProps<Datum>['nodeColor']
186226
linkThickness?: CommonProps<Datum>['linkThickness']
227+
linkColor?: CommonProps<Datum>['linkColor']
187228
}) => {
188229
const getIdentity = usePropertyAccessor(identity)
189230

@@ -205,9 +246,15 @@ export const useDendogram = <Datum extends object = DefaultDatum>({
205246
yScale,
206247
layout,
207248
getIdentity,
249+
nodeColor,
208250
})
209251

210-
const links = useLinks<Datum>({ root, nodeByUid, linkThickness })
252+
const links = useLinks<Datum>({ root, nodeByUid, linkThickness, linkColor })
253+
254+
console.log({
255+
nodes,
256+
links,
257+
})
211258

212259
return {
213260
nodes,

‎packages/dendogram/src/types.ts

+16-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export interface HierarchyDendogramLink<Datum> {
2222
target: HierarchyDendogramNode<Datum>
2323
}
2424

25-
export interface ComputedNode<Datum extends object> {
25+
export interface IntermediateComputedNode<Datum extends object> {
2626
uid: string
2727
id: string
2828
data: Datum
@@ -33,6 +33,10 @@ export interface ComputedNode<Datum extends object> {
3333
y: number
3434
}
3535

36+
export interface ComputedNode<Datum extends object> extends IntermediateComputedNode<Datum> {
37+
color: string
38+
}
39+
3640
export interface IntermediateComputedLink<Datum extends object> {
3741
id: string
3842
source: ComputedNode<Datum>
@@ -41,8 +45,13 @@ export interface IntermediateComputedLink<Datum extends object> {
4145

4246
export interface ComputedLink<Datum extends object> extends IntermediateComputedLink<Datum> {
4347
thickness: number
48+
color: string
4449
}
4550

51+
export type NodeColorFunction<Datum extends object> = (
52+
node: IntermediateComputedNode<Datum>
53+
) => string
54+
4655
export interface NodeComponentProps<Datum extends object> {
4756
node: ComputedNode<Datum>
4857
isInteractive: boolean
@@ -72,6 +81,10 @@ export type LinkThicknessFunction<Datum extends object> = (
7281
link: IntermediateComputedLink<Datum>
7382
) => number
7483

84+
export type LinkColorFunction<Datum extends object> = (
85+
link: IntermediateComputedLink<Datum>
86+
) => string
87+
7588
export interface LinkComponentProps<Datum extends object> {
7689
link: ComputedLink<Datum>
7790
isInteractive: boolean
@@ -118,7 +131,9 @@ export interface CommonProps<Datum extends object> extends MotionProps {
118131
identity: PropertyAccessor<Datum, string>
119132

120133
theme: Theme
134+
nodeColor: string | NodeColorFunction<Datum>
121135
linkThickness: number | LinkThicknessFunction<Datum>
136+
linkColor: string | LinkColorFunction<Datum>
122137

123138
isInteractive: boolean
124139
onNodeMouseEnter: NodeMouseEventHandler<Datum>

0 commit comments

Comments
 (0)