feat(circle-packing): add colorBy property to control which property …

…should be used to assign a color
plouc · Apr 26, 2021 · 1091468 · 1091468
1 parent 82cb7c5
commit 1091468
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/packages/circle-packing/src/props.ts b/packages/circle-packing/src/props.ts
@@ -9,7 +9,7 @@ export const defaultProps = {
     leavesOnly: false,
     layers: ['circles', 'labels'] as CirclePackingLayerId[],
     colors: { scheme: 'nivo' } as OrdinalColorScaleConfig,
-    colorBy: 'id' as const,
+    colorBy: 'depth' as const,
     childColor: {
         from: 'color',
         modifiers: [['darker', 0.3]],

diff --git a/packages/circle-packing/stories/bubble.stories.js b/packages/circle-packing/stories/bubble.stories.js
@@ -6,11 +6,11 @@ import { Bubble } from '../src'
 const commonProperties = {
     width: 900,
     height: 500,
-    root: generateLibTree(),
-    identity: 'name',
+    data: generateLibTree(),
+    id: 'name',
     value: 'loc',
     label: 'name',
-    labelSkipRadius: 16,
+    labelsSkipRadius: 16,
 }
 
 storiesOf('Bubble', module)

diff --git a/website/src/data/components/circle-packing/props.js b/website/src/data/components/circle-packing/props.js
@@ -177,7 +177,7 @@ const props = [
     themeProperty,
     {
         key: 'colors',
-        help: 'Defines how to compute node color.',
+        help: 'Define how to compute node color.',
         description: `
             colors used to colorize the circles,
             [see dedicated documentation](self:/guides/colors).
@@ -188,6 +188,25 @@ const props = [
         controlType: 'ordinalColors',
         group: 'Style',
     },
+    {
+        key: 'colorBy',
+        help: `Define the property to use to assign a color to circles.`,
+        description: `
+            When using \`id\`, each node will get a new color,
+            and when using \`depth\` the nodes' color will depend on their depth.
+        `,
+        type: `'id' | 'depth'`,
+        required: false,
+        defaultValue: defaultProps.colorBy,
+        controlType: 'radio',
+        group: 'Style',
+        controlOptions: {
+            choices: [
+                { label: 'id', value: 'id' },
+                { label: 'depth', value: 'depth' },
+            ],
+        },
+    },
     {
         key: 'childColor',
         help: 'Defines how to compute child nodes color.',
@@ -257,6 +276,23 @@ const props = [
             ),
         },
     },
+    {
+        key: 'labelsFilter',
+        help: 'Filter labels using custom conditions.',
+        description: `
+            Can be used to only show labels at a certain depth for example:
+            
+            \`\`\`
+            <CirclePacking
+                labelsFilter={label => label.node.depth == 2}
+                {...props}
+            />
+            \`\`\`
+        `,
+        type: '(label) => boolean',
+        required: false,
+        group: 'Labels',
+    },
     {
         key: 'labelsSkipRadius',
         help: 'Skip label rendering if node radius is lower than given value, 0 to disable.',

diff --git a/website/src/pages/circle-packing/canvas.js b/website/src/pages/circle-packing/canvas.js
@@ -32,6 +32,7 @@ const initialProperties = {
     value: 'value',
     valueFormat: { format: '', enabled: false },
     colors: { scheme: 'spectral' },
+    colorBy: 'id',
     childColor: 'noinherit',
     padding: 1,
     leavesOnly: true,