plotly.js
Version:
The open source javascript graphing library that powers plotly
231 lines (201 loc) • 8.18 kB
JavaScript
'use strict';
const { hovertemplateAttrs, texttemplateAttrs, templatefallbackAttrs } = require('../../plots/template_attributes');
var colorScaleAttrs = require('../../components/colorscale/attributes');
var domainAttrs = require('../../plots/domain').attributes;
var pieAttrs = require('../pie/attributes');
var sunburstAttrs = require('../sunburst/attributes');
var constants = require('./constants');
var extendFlat = require('../../lib/extend').extendFlat;
var pattern = require('../../components/drawing/attributes').pattern;
module.exports = {
labels: sunburstAttrs.labels,
parents: sunburstAttrs.parents,
values: sunburstAttrs.values,
branchvalues: sunburstAttrs.branchvalues,
count: sunburstAttrs.count,
level: sunburstAttrs.level,
maxdepth: sunburstAttrs.maxdepth,
tiling: {
packing: {
valType: 'enumerated',
values: ['squarify', 'binary', 'dice', 'slice', 'slice-dice', 'dice-slice'],
dflt: 'squarify',
editType: 'plot',
description: [
'Determines d3 treemap solver.',
'For more info please refer to https://github.com/d3/d3-hierarchy#treemap-tiling'
].join(' ')
},
squarifyratio: {
valType: 'number',
min: 1,
dflt: 1,
editType: 'plot',
description: [
'When using *squarify* `packing` algorithm, according to https://github.com/d3/d3-hierarchy/blob/v3.1.1/README.md#squarify_ratio',
'this option specifies the desired aspect ratio of the generated rectangles.',
'The ratio must be specified as a number greater than or equal to one.',
'Note that the orientation of the generated rectangles (tall or wide)',
'is not implied by the ratio; for example, a ratio of two will attempt',
'to produce a mixture of rectangles whose width:height ratio is either 2:1 or 1:2.',
'When using *squarify*, unlike d3 which uses the Golden Ratio i.e. 1.618034,',
'Plotly applies 1 to increase squares in treemap layouts.'
].join(' ')
},
flip: {
valType: 'flaglist',
flags: ['x', 'y'],
dflt: '',
editType: 'plot',
description: ['Determines if the positions obtained from solver are flipped on each axis.'].join(' ')
},
pad: {
valType: 'number',
min: 0,
dflt: 3,
editType: 'plot',
description: ['Sets the inner padding (in px).'].join(' ')
},
editType: 'calc'
},
marker: extendFlat(
{
pad: {
t: {
valType: 'number',
min: 0,
editType: 'plot',
description: ['Sets the padding form the top (in px).'].join(' ')
},
l: {
valType: 'number',
min: 0,
editType: 'plot',
description: ['Sets the padding form the left (in px).'].join(' ')
},
r: {
valType: 'number',
min: 0,
editType: 'plot',
description: ['Sets the padding form the right (in px).'].join(' ')
},
b: {
valType: 'number',
min: 0,
editType: 'plot',
description: ['Sets the padding form the bottom (in px).'].join(' ')
},
editType: 'calc'
},
colors: sunburstAttrs.marker.colors,
pattern: pattern,
depthfade: {
valType: 'enumerated',
values: [true, false, 'reversed'],
editType: 'style',
description: [
'Determines if the sector colors are faded towards',
'the background from the leaves up to the headers.',
'This option is unavailable when a `colorscale` is present,',
'defaults to false when `marker.colors` is set,',
'but otherwise defaults to true.',
'When set to *reversed*, the fading direction is inverted,',
'that is the top elements within hierarchy are drawn with fully saturated colors',
'while the leaves are faded towards the background color.'
].join(' ')
},
line: sunburstAttrs.marker.line,
cornerradius: {
valType: 'number',
min: 0,
dflt: 0,
editType: 'plot',
description: ['Sets the maximum rounding of corners (in px).'].join(' ')
},
editType: 'calc'
},
colorScaleAttrs('marker', {
colorAttr: 'colors',
anim: false // TODO: set to anim: true?
})
),
pathbar: {
visible: {
valType: 'boolean',
dflt: true,
editType: 'plot',
description: [
'Determines if the path bar is drawn',
'i.e. outside the trace `domain` and',
'with one pixel gap.'
].join(' ')
},
side: {
valType: 'enumerated',
values: ['top', 'bottom'],
dflt: 'top',
editType: 'plot',
description: ['Determines on which side of the the treemap the', '`pathbar` should be presented.'].join(' ')
},
edgeshape: {
valType: 'enumerated',
values: ['>', '<', '|', '/', '\\'],
dflt: '>',
editType: 'plot',
description: ['Determines which shape is used for edges between `barpath` labels.'].join(' ')
},
thickness: {
valType: 'number',
min: 12,
editType: 'plot',
description: [
'Sets the thickness of `pathbar` (in px). If not specified the `pathbar.textfont.size` is used',
'with 3 pixles extra padding on each side.'
].join(' ')
},
textfont: extendFlat({}, pieAttrs.textfont, {
description: 'Sets the font used inside `pathbar`.'
}),
editType: 'calc'
},
text: pieAttrs.text,
textinfo: sunburstAttrs.textinfo,
// TODO: incorporate `label` and `value` in the eventData
texttemplate: texttemplateAttrs({ editType: 'plot' }, { keys: constants.eventDataKeys.concat(['label', 'value']) }),
texttemplatefallback: templatefallbackAttrs({ editType: 'plot' }),
hovertext: pieAttrs.hovertext,
hoverinfo: sunburstAttrs.hoverinfo,
hovertemplate: hovertemplateAttrs({}, { keys: constants.eventDataKeys }),
hovertemplatefallback: templatefallbackAttrs(),
textfont: pieAttrs.textfont,
insidetextfont: pieAttrs.insidetextfont,
outsidetextfont: extendFlat({}, pieAttrs.outsidetextfont, {
description: [
'Sets the font used for `textinfo` lying outside the sector.',
'This option refers to the root of the hierarchy',
'presented on top left corner of a treemap graph.',
'Please note that if a hierarchy has multiple root nodes,',
"this option won't have any effect and `insidetextfont` would be used."
].join(' ')
}),
textposition: {
valType: 'enumerated',
values: [
'top left',
'top center',
'top right',
'middle left',
'middle center',
'middle right',
'bottom left',
'bottom center',
'bottom right'
],
dflt: 'top left',
editType: 'plot',
description: ['Sets the positions of the `text` elements.'].join(' ')
},
sort: pieAttrs.sort,
root: sunburstAttrs.root,
domain: domainAttrs({ name: 'treemap', trace: true, editType: 'calc' })
};