diff --git a/packages/rects/src/centers.ts b/packages/rects/src/centers.ts index 604b8d1b2e..c1eac8fd7c 100644 --- 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 index aa25448966..5a702b1a51 100644 --- 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 index 3f6fb8c451..32866f6b4a 100644 --- 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 index 9b5bf8167c..1c6bded684 100644 --- 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[] + 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 index 4ea69edfae..6b917b2de2 100644 --- 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 index c06f816489..d15f91f56e 100644 --- a/website/src/pages/icicles/index.js +++ b/website/src/pages/icicles/index.js @@ -48,6 +48,9 @@ const initialProperties = { tooltip: null, 'showcase pattern usage': false, direction: 'bottom', + rectLabelsSkipLength: defaultProps.rectLabelsSkipLength, + rectLabelsSkipPercentage: defaultProps.rectLabelsSkipPercentage, + rectLabelsOffset: defaultProps.rectLabelsOffset, } const Icicles = () => { @@ -55,6 +58,7 @@ const Icicles = () => { image: { childImageSharp: { gatsbyImageData: image }, }, + // TODO: change with icicles capture } = useStaticQuery(graphql` query { image: file(absolutePath: { glob: "**/src/assets/captures/sunburst.png" }) {