Skip to content

Commit 4f53fe1

Browse files
archmojCoding-with-Adam
archmoj
authored and
Coding-with-Adam
committed
start icicle trace by duplicating and adjusting treemap code
1 parent 3f33829 commit 4f53fe1

24 files changed

+1688
-10
lines changed

‎lib/icicle.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use strict';
2+
3+
module.exports = require('../src/traces/icicle');

‎lib/index-strict.js

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Plotly.register([
1919
require('./pie'),
2020
require('./sunburst'),
2121
require('./treemap'),
22+
require('./icicle'),
2223
require('./funnelarea'),
2324
require('./scattergeo'),
2425
require('./choropleth'),

‎lib/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Plotly.register([
1919
require('./pie'),
2020
require('./sunburst'),
2121
require('./treemap'),
22+
require('./icicle'),
2223
require('./funnelarea'),
2324
require('./scatter3d'),
2425
require('./surface'),

‎src/plot_api/plot_api.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -2374,7 +2374,7 @@ var traceUIControlPatterns = [
23742374
{pattern: /(^|value\.)visible$/, attr: 'legend.uirevision'},
23752375
{pattern: /^dimensions\[\d+\]\.constraintrange/},
23762376
{pattern: /^node\.(x|y|groups)/}, // for Sankey nodes
2377-
{pattern: /^level$/}, // for Sunburst & Treemap traces
2377+
{pattern: /^level$/}, // for Sunburst, Treemap and Icicle traces
23782378

23792379
// below this you must be in editable: true mode
23802380
// TODO: I still put name and title with `trace.uirevision`
@@ -3738,6 +3738,9 @@ function makePlotFramework(gd) {
37383738
// single pie layer for the whole plot
37393739
fullLayout._pielayer = fullLayout._paper.append('g').classed('pielayer', true);
37403740

3741+
// single treemap layer for the whole plot
3742+
fullLayout._iciclelayer = fullLayout._paper.append('g').classed('iciclelayer', true);
3743+
37413744
// single treemap layer for the whole plot
37423745
fullLayout._treemaplayer = fullLayout._paper.append('g').classed('treemaplayer', true);
37433746

‎src/plots/plots.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2925,10 +2925,11 @@ plots.doCalcdata = function(gd, traces) {
29252925
gd._hmpixcount = 0;
29262926
gd._hmlumcount = 0;
29272927

2928-
// for sharing colors across pies / sunbursts / treemap / funnelarea (and for legend)
2928+
// for sharing colors across pies / sunbursts / treemap / icicle / funnelarea (and for legend)
29292929
fullLayout._piecolormap = {};
29302930
fullLayout._sunburstcolormap = {};
29312931
fullLayout._treemapcolormap = {};
2932+
fullLayout._iciclecolormap = {};
29322933
fullLayout._funnelareacolormap = {};
29332934

29342935
// If traces were specified and this trace was not included,

‎src/traces/bar/uniform_text.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ function resizeText(gd, gTrace, traceType) {
1717
selector = 'g.slice';
1818
break;
1919
case 'treemap' :
20+
case 'icicle' :
2021
selector = 'g.slice, g.pathbar';
2122
break;
2223
default :

‎src/traces/icicle/attributes.js

+253
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
'use strict';
2+
3+
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
4+
var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
5+
6+
var colorScaleAttrs = require('../../components/colorscale/attributes');
7+
var domainAttrs = require('../../plots/domain').attributes;
8+
var pieAttrs = require('../pie/attributes');
9+
var sunburstAttrs = require('../sunburst/attributes');
10+
var constants = require('./constants');
11+
var extendFlat = require('../../lib/extend').extendFlat;
12+
13+
module.exports = {
14+
labels: sunburstAttrs.labels,
15+
parents: sunburstAttrs.parents,
16+
17+
values: sunburstAttrs.values,
18+
branchvalues: sunburstAttrs.branchvalues,
19+
count: sunburstAttrs.count,
20+
21+
level: sunburstAttrs.level,
22+
maxdepth: sunburstAttrs.maxdepth,
23+
24+
tiling: {
25+
packing: {
26+
valType: 'enumerated',
27+
values: [
28+
'squarify',
29+
'binary',
30+
'dice',
31+
'slice',
32+
'slice-dice',
33+
'dice-slice'
34+
],
35+
dflt: 'squarify',
36+
editType: 'plot',
37+
description: [
38+
'Determines d3 icicle solver.',
39+
'For more info please refer to https://github.com/d3/d3-hierarchy#icicle-tiling'
40+
].join(' ')
41+
},
42+
43+
squarifyratio: {
44+
valType: 'number',
45+
min: 1,
46+
dflt: 1,
47+
editType: 'plot',
48+
description: [
49+
'When using *squarify* `packing` algorithm, according to https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio',
50+
'this option specifies the desired aspect ratio of the generated rectangles.',
51+
'The ratio must be specified as a number greater than or equal to one.',
52+
'Note that the orientation of the generated rectangles (tall or wide)',
53+
'is not implied by the ratio; for example, a ratio of two will attempt',
54+
'to produce a mixture of rectangles whose width:height ratio is either 2:1 or 1:2.',
55+
'When using *squarify*, unlike d3 which uses the Golden Ratio i.e. 1.618034,',
56+
'Plotly applies 1 to increase squares in icicle layouts.'
57+
].join(' ')
58+
},
59+
60+
flip: {
61+
valType: 'flaglist',
62+
flags: [
63+
'x',
64+
'y'
65+
],
66+
dflt: '',
67+
editType: 'plot',
68+
description: [
69+
'Determines if the positions obtained from solver are flipped on each axis.'
70+
].join(' ')
71+
},
72+
73+
pad: {
74+
valType: 'number',
75+
min: 0,
76+
dflt: 3,
77+
editType: 'plot',
78+
description: [
79+
'Sets the inner padding (in px).'
80+
].join(' ')
81+
},
82+
83+
editType: 'calc',
84+
},
85+
86+
marker: extendFlat({
87+
pad: {
88+
t: {
89+
valType: 'number',
90+
min: 0,
91+
editType: 'plot',
92+
description: [
93+
'Sets the padding form the top (in px).'
94+
].join(' ')
95+
},
96+
l: {
97+
valType: 'number',
98+
min: 0,
99+
editType: 'plot',
100+
description: [
101+
'Sets the padding form the left (in px).'
102+
].join(' ')
103+
},
104+
r: {
105+
valType: 'number',
106+
min: 0,
107+
editType: 'plot',
108+
description: [
109+
'Sets the padding form the right (in px).'
110+
].join(' ')
111+
},
112+
b: {
113+
valType: 'number',
114+
min: 0,
115+
editType: 'plot',
116+
description: [
117+
'Sets the padding form the bottom (in px).'
118+
].join(' ')
119+
},
120+
121+
editType: 'calc'
122+
},
123+
124+
colors: sunburstAttrs.marker.colors,
125+
126+
depthfade: {
127+
valType: 'enumerated',
128+
values: [true, false, 'reversed'],
129+
editType: 'style',
130+
description: [
131+
'Determines if the sector colors are faded towards',
132+
'the background from the leaves up to the headers.',
133+
'This option is unavailable when a `colorscale` is present,',
134+
'defaults to false when `marker.colors` is set,',
135+
'but otherwise defaults to true.',
136+
'When set to *reversed*, the fading direction is inverted,',
137+
'that is the top elements within hierarchy are drawn with fully saturated colors',
138+
'while the leaves are faded towards the background color.'
139+
].join(' ')
140+
},
141+
142+
line: sunburstAttrs.marker.line,
143+
144+
editType: 'calc'
145+
},
146+
colorScaleAttrs('marker', {
147+
colorAttr: 'colors',
148+
anim: false // TODO: set to anim: true?
149+
})
150+
),
151+
152+
pathbar: {
153+
visible: {
154+
valType: 'boolean',
155+
dflt: true,
156+
editType: 'plot',
157+
description: [
158+
'Determines if the path bar is drawn',
159+
'i.e. outside the trace `domain` and',
160+
'with one pixel gap.'
161+
].join(' ')
162+
},
163+
164+
side: {
165+
valType: 'enumerated',
166+
values: [
167+
'top',
168+
'bottom'
169+
],
170+
dflt: 'top',
171+
editType: 'plot',
172+
description: [
173+
'Determines on which side of the the icicle the',
174+
'`pathbar` should be presented.'
175+
].join(' ')
176+
},
177+
178+
edgeshape: {
179+
valType: 'enumerated',
180+
values: [
181+
'>',
182+
'<',
183+
'|',
184+
'/',
185+
'\\'
186+
],
187+
dflt: '>',
188+
editType: 'plot',
189+
description: [
190+
'Determines which shape is used for edges between `barpath` labels.'
191+
].join(' ')
192+
},
193+
194+
thickness: {
195+
valType: 'number',
196+
min: 12,
197+
editType: 'plot',
198+
description: [
199+
'Sets the thickness of `pathbar` (in px). If not specified the `pathbar.textfont.size` is used',
200+
'with 3 pixles extra padding on each side.'
201+
].join(' ')
202+
},
203+
204+
textfont: extendFlat({}, pieAttrs.textfont, {
205+
description: 'Sets the font used inside `pathbar`.'
206+
}),
207+
208+
editType: 'calc'
209+
},
210+
211+
text: pieAttrs.text,
212+
textinfo: sunburstAttrs.textinfo,
213+
// TODO: incorporate `label` and `value` in the eventData
214+
texttemplate: texttemplateAttrs({editType: 'plot'}, {
215+
keys: constants.eventDataKeys.concat(['label', 'value'])
216+
}),
217+
218+
hovertext: pieAttrs.hovertext,
219+
hoverinfo: sunburstAttrs.hoverinfo,
220+
hovertemplate: hovertemplateAttrs({}, {
221+
keys: constants.eventDataKeys
222+
}),
223+
224+
textfont: pieAttrs.textfont,
225+
insidetextfont: pieAttrs.insidetextfont,
226+
outsidetextfont: extendFlat({}, pieAttrs.outsidetextfont, {
227+
description: [
228+
'Sets the font used for `textinfo` lying outside the sector.',
229+
'This option refers to the root of the hierarchy',
230+
'presented on top left corner of a icicle graph.',
231+
'Please note that if a hierarchy has multiple root nodes,',
232+
'this option won\'t have any effect and `insidetextfont` would be used.'
233+
].join(' ')
234+
}),
235+
236+
textposition: {
237+
valType: 'enumerated',
238+
values: [
239+
'top left', 'top center', 'top right',
240+
'middle left', 'middle center', 'middle right',
241+
'bottom left', 'bottom center', 'bottom right'
242+
],
243+
dflt: 'top left',
244+
editType: 'plot',
245+
description: [
246+
'Sets the positions of the `text` elements.'
247+
].join(' ')
248+
},
249+
sort: pieAttrs.sort,
250+
root: sunburstAttrs.root,
251+
252+
domain: domainAttrs({name: 'icicle', trace: true, editType: 'calc'}),
253+
};

‎src/traces/icicle/base_plot.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
var plots = require('../../plots/plots');
4+
5+
exports.name = 'icicle';
6+
7+
exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
8+
plots.plotBasePlot(exports.name, gd, traces, transitionOpts, makeOnCompleteCallback);
9+
};
10+
11+
exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
12+
plots.cleanBasePlot(exports.name, newFullData, newFullLayout, oldFullData, oldFullLayout);
13+
};

‎src/traces/icicle/calc.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use strict';
2+
3+
var calc = require('../sunburst/calc');
4+
5+
exports.calc = function(gd, trace) {
6+
return calc.calc(gd, trace);
7+
};
8+
9+
exports.crossTraceCalc = function(gd) {
10+
return calc._runCrossTraceCalc('icicle', gd);
11+
};

‎src/traces/icicle/constants.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
3+
module.exports = {
4+
CLICK_TRANSITION_TIME: 750,
5+
CLICK_TRANSITION_EASING: 'poly',
6+
eventDataKeys: [
7+
// string
8+
'currentPath',
9+
'root',
10+
'entry',
11+
// no need to add 'parent' here
12+
13+
// percentages i.e. ratios
14+
'percentRoot',
15+
'percentEntry',
16+
'percentParent'
17+
],
18+
gapWithPathbar: 1 // i.e. one pixel
19+
};

0 commit comments

Comments
 (0)