feat(website): complete icicles page

plouc · Apr 22, 2022 · 5708279 · 5708279
1 parent 748ecc7
commit 5708279
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 5 deletions.
diff --git a/packages/rects/src/centers.ts b/packages/rects/src/centers.ts
@@ -14,7 +14,7 @@ export const interpolateRectCenter =
         to(
             [x0Value, y0Value, widthValue, heightValue],
             (x0, y0, width, height) =>
-                `translate(${Math.abs(baseOffsetLeft - (x0 + width / 2) * offset)}, ${Math.abs(
+                `translate(${Math.abs(baseOffsetLeft - (x0 + width / 2))}, ${Math.abs(
                     baseOffsetTop - (y0 + height / 2) * offset
                 )})`
         )

diff --git a/packages/static/src/mappings/icicles.ts b/packages/static/src/mappings/icicles.ts
@@ -33,6 +33,9 @@ export const iciclesMapping = {
         enableRectLabels: Joi.boolean(),
         rectLabel: Joi.string(),
         rectLabelsTextColor: inheritedColor,
+        rectLabelsOffset: Joi.number(),
+        rectLabelsSkipLength: Joi.number().min(0),
+        rectLabelsSkipPercentage: Joi.number().min(0).max(100),
     }),
     runtimeProps: ['width', 'height', 'colors'],
     defaults: {

diff --git a/website/src/data/components/icicles/meta.yml b/website/src/data/components/icicles/meta.yml
@@ -22,10 +22,14 @@ Icicles:
       link: icicles--custom-tooltip
     - label: with enter and leave actions
       link: icicles--enter-leave-check-actions
+    - label: with wheel and contextmenu actions
+      link: icicles--wheel-contextmenu-check-actions
     - label: with patterns and gradients
       link: icicles--patterns-gradients
     - label: drill down to children
       link: icicles--children-drill-down
+    - label: with different direction
+      link: icicles--change-direction
   description: |
     The responsive alternative of this component is
     `ResponsiveIcicles`.
diff --git a/website/src/data/components/icicles/props.ts b/website/src/data/components/icicles/props.ts
@@ -122,7 +122,7 @@ const props: ChartProperty[] = [
     }),
     {
         key: 'colorBy',
-        help: `Define the property to use to assign a color to arcs.`,
+        help: `Define the property to use to assign a color to rects.`,
         flavors: allFlavors,
         description: `
             When using \`id\`, each node will get a new color,
@@ -172,7 +172,7 @@ const props: ChartProperty[] = [
     },
     {
         key: 'borderColor',
-        help: 'Defines how to compute arcs color.',
+        help: 'Defines how to compute rects border color.',
         flavors: allFlavors,
         type: 'string | object | Function',
         required: false,
@@ -224,6 +224,63 @@ const props: ChartProperty[] = [
             ),
         },
     },
+    {
+        key: 'rectLabelsOffset',
+        help: `
+            Define the ratio offset when centering a label.
+            The offset affects the vertical postion.
+        `,
+        flavors: allFlavors,
+        type: 'number',
+        required: false,
+        defaultValue: defaultProps.rectLabelsOffset,
+        group: 'Rect labels',
+        control: {
+            type: 'range',
+            min: 0.5,
+            max: 2,
+            step: 0.05,
+        },
+    },
+    {
+        key: 'rectLabelsSkipLength',
+        help: `
+            Skip label if corresponding rect's length is lower than provided value.
+            "Length" is determined by width when direction is top or bottom,
+            and by height when direction is left or right.
+        `,
+        flavors: allFlavors,
+        type: 'number',
+        required: false,
+        defaultValue: defaultProps.rectLabelsSkipLength,
+        group: 'Rect labels',
+        control: {
+            type: 'range',
+            unit: 'px',
+            min: 0,
+            max: 900,
+            step: 1,
+        },
+    },
+    {
+        key: 'rectLabelsSkipPercentage',
+        help: `
+            Skip label if corresponding rect's relative size is lower than provided value.
+            The size is relative to the root node considered as 100%.
+            This value is a percentage.
+        `,
+        flavors: allFlavors,
+        type: 'number',
+        required: false,
+        defaultValue: defaultProps.rectLabelsSkipPercentage,
+        group: 'Rect labels',
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
     {
         key: 'rectLabelsTextColor',
         help: 'Defines how to compute rect label text color.',
@@ -252,6 +309,8 @@ const props: ChartProperty[] = [
             \`\`\`
             {
                 nodes:  ComputedDatum<RawDatum>[]
+                baseOffsetLeft: number
+                baseOffsetTop:  number
             }
             \`\`\`
         `,
@@ -312,6 +371,58 @@ const props: ChartProperty[] = [
             onClick handler, will receive node data as first argument
             & event as second one. The node data has the following shape:
 
+            \`\`\`
+            {
+                id:         string | number,
+                value:      number,
+                depth:      number,
+                color:      string,
+                name:       string
+                loc:        number
+                percentage: number
+                // the parent datum
+                ancestor:   object
+            }
+            \`\`\`
+        `,
+    },
+    {
+        key: 'onWheel',
+        flavors: ['svg'],
+        group: 'Interactivity',
+        type: 'Function',
+        required: false,
+        help: 'onWheel handler',
+        description: `
+            onWheel handler, will receive node data as first argument
+            & event as second one. The node data has the following shape:
+
+            \`\`\`
+            {
+                id:         string | number,
+                value:      number,
+                depth:      number,
+                color:      string,
+                name:       string
+                loc:        number
+                percentage: number
+                // the parent datum
+                ancestor:   object
+            }
+            \`\`\`
+        `,
+    },
+    {
+        key: 'onContextMenu',
+        flavors: ['svg'],
+        group: 'Interactivity',
+        type: 'Function',
+        required: false,
+        help: 'onContextMenu handler',
+        description: `
+            onContextMenu handler, will receive node data as first argument
+            & event as second one. The node data has the following shape:
+
             \`\`\`
             {
                 id:         string | number,

diff --git a/website/src/pages/icicles/api.tsx b/website/src/pages/icicles/api.tsx
@@ -14,9 +14,10 @@ const IciclesApi = () => {
         image: {
             childImageSharp: { gatsbyImageData: image },
         },
+    // TODO: change with icicles capture
     } = useStaticQuery(graphql`
         query {
-            image: file(absolutePath: { glob: "**/src/assets/captures/icicles.png" }) {
+            image: file(absolutePath: { glob: "**/src/assets/captures/sunburst.png" }) {
                 childImageSharp {
                     gatsbyImageData(layout: FIXED, width: 700, quality: 100)
                 }
@@ -55,7 +56,7 @@ const IciclesApi = () => {
                     valueFormat: { format: '', enabled: false },
                     cornerRadius: 2,
                     borderWidth: 1,
-                    borderColor: 'white',
+                    borderColor: '#fff',
                     colors: { scheme: 'nivo' },
                     colorBy: 'id',
                     inheritColorFromParent: true,
@@ -68,6 +69,9 @@ const IciclesApi = () => {
                         from: 'color',
                         modifiers: [['darker', 1.4]],
                     },
+                    rectLabelsSkipLength: 0,
+                    rectLabelsSkipPercentage: 0,
+                    rectLabelsOffset: 1,
                 }}
             />
         </>

diff --git a/website/src/pages/icicles/index.js b/website/src/pages/icicles/index.js
@@ -48,13 +48,17 @@ const initialProperties = {
     tooltip: null,
     'showcase pattern usage': false,
     direction: 'bottom',
+    rectLabelsSkipLength: defaultProps.rectLabelsSkipLength,
+    rectLabelsSkipPercentage: defaultProps.rectLabelsSkipPercentage,
+    rectLabelsOffset: defaultProps.rectLabelsOffset,
 }
 
 const Icicles = () => {
     const {
         image: {
             childImageSharp: { gatsbyImageData: image },
         },
+    // TODO: change with icicles capture
     } = useStaticQuery(graphql`
         query {
             image: file(absolutePath: { glob: "**/src/assets/captures/sunburst.png" }) {