Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add option to enable legends for
- choropleth
- choroplethmapbox
- cone
- densitymapbox
- heatmap
- histogram2d
- isosurface
- mesh3d
- streamtube
- surface
- volume
  • Loading branch information
archmoj committed Nov 25, 2019
commit 706a8830a45cbbcd3082c88294af42d2e8f9ecb5
9 changes: 8 additions & 1 deletion src/components/legend/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,14 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
// *would* be shown by default, toward the two traces you need to
// ensure the legend is shown by default, because this can still help
// disambiguate.
if(trace.showlegend || trace._dfltShowLegend) {
if(trace.showlegend || (
trace._dfltShowLegend && !(
trace._module &&
trace._module.attributes &&
trace._module.attributes.showlegend &&
trace._module.attributes.showlegend.dflt === false
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why we need this extra piece of logic:

!(
                trace._module &&
                trace._module.attributes &&
                trace._module.attributes.showlegend &&
                trace._module.attributes.showlegend.dflt === false

here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question.
This is to keep the baselines to what was in place before.
Otherwise if there are e.g. one scatter3d with other gl3d traces (that now support legend) the legend would show up on the graph for scatter3d.

diff-gl3d_world-cals

)
)) {
legendTraceCount++;
if(trace.showlegend) {
legendReallyHasATrace = true;
Expand Down
119 changes: 119 additions & 0 deletions src/components/legend/style.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ module.exports = function style(s, gd) {
.enter().append('g')
.classed('legendpoints', true);
})
.each(styleSpatial)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Do not address this comment in this PR - I'm just writing down ideas for future development]

I think legend/style.js deserves a refactor. Instead of having the styling logic for all the traces that support legends in here, we should implement a new trace module method named e.g. _module.legendItem. This would be more inline with how colorbar styling works. legend/style.js would then be pretty trivial: a few legend-wide .attr() and then a loop over the items for-each calling their corresponding _module.legendItem method. Moreover, by setting a _module.legendItem method for all the traces that support legend items, we wouldn't need the 'showLegend' trace module category.

.each(styleWaterfalls)
.each(styleFunnels)
.each(styleBars)
Expand Down Expand Up @@ -481,6 +482,124 @@ module.exports = function style(s, gd) {
stylePie(pts, d0Mod, tMod);
}
}

function styleSpatial(d) { // i.e. maninly traces having z and colorscale
var trace = d[0].trace;

var useGradient;
var ptsData = [];
if(trace.visible) {
switch(trace.type) {
case 'histogram2d' :
case 'heatmap' :
ptsData = [
['M-15,-2V4H15V-2Z'] // similar to contour
Copy link
Contributor

@etpinard etpinard Nov 26, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha you went ahead and made the heatmap legend items span rectangles:

image

instead of squares. I like it, but it might be nice to get a few +1s from other folks.

];
useGradient = true;
break;
case 'choropleth' :
case 'choroplethmapbox' :
case 'densitymapbox' :
ptsData = [
['M-6,-6V6H6V-6Z']
];
useGradient = true;
break;
case 'cone' :
ptsData = [
['M-6,2 A2,2 0 0,0 -6,6 V6L6,4Z'],
['M-6,-6 A2,2 0 0,0 -6,-2 L6,-4Z'],
['M-6,-2 A2,2 0 0,0 -6,2 L6,0Z']
];
useGradient = false;
break;
case 'streamtube' :
ptsData = [
['M-6,2 A2,2 0 0,0 -6,6 H6 A2,2 0 0,1 6,2 Z'],
['M-6,-6 A2,2 0 0,0 -6,-2 H6 A2,2 0 0,1 6,-6 Z'],
['M-6,-2 A2,2 0 0,0 -6,2 H6 A2,2 0 0,1 6,-2 Z']
];
useGradient = false;
break;
case 'surface' :
ptsData = [
['M-6,-6 A2,3 0 0,0 -6,0 H6 A2,3 0 0,1 6,-6 Z'],
['M-6,1 A2,3 0 0,1 -6,6 H6 A2,3 0 0,0 6,0 Z']
];
useGradient = true;
break;
case 'mesh3d' :
ptsData = [
['M-6,6H0L-6,-6Z'],
['M6,6H0L6,-6Z'],
['M-6,-6H6L0,6Z']
];
useGradient = false;
break;
case 'volume' :
ptsData = [
['M-6,6H0L-6,-6Z'],
['M6,6H0L6,-6Z'],
['M-6,-6H6L0,6Z']
];
useGradient = true;
break;
case 'isosurface':
ptsData = [
['M-6,6H0L-6,-6Z'],
['M6,6H0L6,-6Z'],
['M-6,-6 A12,24 0 0,0 6,-6 L0,6Z']
];
useGradient = false;
break;
}
}

var pts = d3.select(this).select('g.legendpoints')
.selectAll('path.legend3dandfriends')
.data(ptsData);
pts.enter().append('path').classed('legend3dandfriends', true)
.attr('transform', 'translate(20,0)')
.style('stroke-miterlimit', 1);
pts.exit().remove();

pts.each(function(dd, i) {
var pt = d3.select(this);

var cOpts = extractOpts(trace);
var colorscale = cOpts.colorscale;
var reversescale = cOpts.reversescale;
var fillGradient = function(s) {
if(s.size()) {
var gradientID = 'legendfill-' + trace.uid;
Drawing.gradient(s, gd, gradientID,
reversescale ? 'horizontal' : 'horizontalreversed',
colorscale, 'fill');
}
};

var fillColor;
if(!colorscale) {
var color = trace.vertexcolor || trace.facecolor || trace.color;
fillColor = Lib.isArrayOrTypedArray(color) ? (color[i] || color[0]) : color;
} else {
if(!useGradient) {
var len = colorscale.length;
fillColor =
i === 0 ? colorscale[reversescale ? len - 1 : 0][1] : // minimum
i === 1 ? colorscale[reversescale ? 0 : len - 1][1] : // maximum
colorscale[Math.floor((len - 1) / 2)][1]; // middle
}
}

pt.attr('d', dd[0]);
if(fillColor) {
pt.call(Color.fill, fillColor);
} else {
pt.call(fillGradient);
}
});
}
};

function getGradientDirection(reversescale) {
Expand Down
11 changes: 9 additions & 2 deletions src/plots/plots.js
Original file line number Diff line number Diff line change
Expand Up @@ -1291,9 +1291,16 @@ plots.supplyTraceDefaults = function(traceIn, traceOut, colorIndex, layout, trac
coerce('meta');

if(Registry.traceIs(traceOut, 'showLegend')) {
traceOut._dfltShowLegend = true;
coerce('showlegend');
Lib.coerce(traceIn, traceOut,
_module.attributes.showlegend ?
_module.attributes :
plots.attributes,
'showlegend'
);

coerce('legendgroup');

traceOut._dfltShowLegend = true;
} else {
traceOut._dfltShowLegend = false;
}
Expand Down
3 changes: 2 additions & 1 deletion src/traces/choropleth/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ module.exports = extendFlat({
editType: 'calc',
flags: ['location', 'z', 'text', 'name']
}),
hovertemplate: hovertemplateAttrs()
hovertemplate: hovertemplateAttrs(),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
},

colorScaleAttrs('', {
Expand Down
2 changes: 1 addition & 1 deletion src/traces/choropleth/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ module.exports = {
moduleType: 'trace',
name: 'choropleth',
basePlotModule: require('../../plots/geo'),
categories: ['geo', 'noOpacity'],
categories: ['geo', 'noOpacity', 'showLegend'],
meta: {
description: [
'The data that describes the choropleth value-to-color mapping',
Expand Down
5 changes: 3 additions & 2 deletions src/traces/choroplethmapbox/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
var choroplethAttrs = require('../choropleth/attributes');
var colorScaleAttrs = require('../../components/colorscale/attributes');
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;

var baseAttrs = require('../../plots/attributes');
var extendFlat = require('../../lib/extend').extendFlat;

module.exports = extendFlat({
Expand Down Expand Up @@ -103,7 +103,8 @@ module.exports = extendFlat({
},

hoverinfo: choroplethAttrs.hoverinfo,
hovertemplate: hovertemplateAttrs({}, {keys: ['properties']})
hovertemplate: hovertemplateAttrs({}, {keys: ['properties']}),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
},

colorScaleAttrs('', {
Expand Down
2 changes: 1 addition & 1 deletion src/traces/choroplethmapbox/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ module.exports = {
moduleType: 'trace',
name: 'choroplethmapbox',
basePlotModule: require('../../plots/mapbox'),
categories: ['mapbox', 'gl', 'noOpacity'],
categories: ['mapbox', 'gl', 'noOpacity', 'showLegend'],
meta: {
hr_name: 'choropleth_mapbox',
description: [
Expand Down
4 changes: 3 additions & 1 deletion src/traces/cone/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,9 @@ var attrs = {
editType: 'calc',
description: 'Same as `text`.'
},
hovertemplate: hovertemplateAttrs({editType: 'calc'}, {keys: ['norm']})

hovertemplate: hovertemplateAttrs({editType: 'calc'}, {keys: ['norm']}),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
};

extendFlat(attrs, colorScaleAttrs('', {
Expand Down
2 changes: 1 addition & 1 deletion src/traces/cone/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ module.exports = {
moduleType: 'trace',
name: 'cone',
basePlotModule: require('../../plots/gl3d'),
categories: ['gl3d'],
categories: ['gl3d', 'showLegend'],

attributes: require('./attributes'),
supplyDefaults: require('./defaults'),
Expand Down
3 changes: 2 additions & 1 deletion src/traces/densitymapbox/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,8 @@ module.exports = extendFlat({
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
flags: ['lon', 'lat', 'z', 'text', 'name']
}),
hovertemplate: hovertemplateAttrs()
hovertemplate: hovertemplateAttrs(),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
},
colorScaleAttrs('', {
cLetter: 'z',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/densitymapbox/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ module.exports = {
moduleType: 'trace',
name: 'densitymapbox',
basePlotModule: require('../../plots/mapbox'),
categories: ['mapbox', 'gl'],
categories: ['mapbox', 'gl', 'showLegend'],
meta: {
hr_name: 'density_mapbox',
description: [
Expand Down
4 changes: 3 additions & 1 deletion src/traces/heatmap/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
'use strict';

var scatterAttrs = require('../scatter/attributes');
var baseAttrs = require('../../plots/attributes');
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
var colorScaleAttrs = require('../../components/colorscale/attributes');
var FORMAT_LINK = require('../../constants/docs').FORMAT_LINK;
Expand Down Expand Up @@ -130,7 +131,8 @@ module.exports = extendFlat({
FORMAT_LINK
].join(' ')
},
hovertemplate: hovertemplateAttrs()
hovertemplate: hovertemplateAttrs(),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
}, {
transforms: undefined
},
Expand Down
2 changes: 1 addition & 1 deletion src/traces/heatmap/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ module.exports = {
moduleType: 'trace',
name: 'heatmap',
basePlotModule: require('../../plots/cartesian'),
categories: ['cartesian', 'svg', '2dMap'],
categories: ['cartesian', 'svg', '2dMap', 'showLegend'],
meta: {
description: [
'The data that describes the heatmap value-to-color mapping',
Expand Down
4 changes: 3 additions & 1 deletion src/traces/histogram2d/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
var histogramAttrs = require('../histogram/attributes');
var makeBinAttrs = require('../histogram/bin_attributes');
var heatmapAttrs = require('../heatmap/attributes');
var baseAttrs = require('../../plots/attributes');
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
var colorScaleAttrs = require('../../components/colorscale/attributes');

Expand Down Expand Up @@ -72,7 +73,8 @@ module.exports = extendFlat(
ygap: heatmapAttrs.ygap,
zsmooth: heatmapAttrs.zsmooth,
zhoverformat: heatmapAttrs.zhoverformat,
hovertemplate: hovertemplateAttrs({}, {keys: 'z'})
hovertemplate: hovertemplateAttrs({}, {keys: 'z'}),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
},
colorScaleAttrs('', {cLetter: 'z', autoColorDflt: false})
);
3 changes: 1 addition & 2 deletions src/traces/histogram2d/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
'use strict';

module.exports = {

attributes: require('./attributes'),
supplyDefaults: require('./defaults'),
crossTraceDefaults: require('../histogram/cross_trace_defaults'),
Expand All @@ -24,7 +23,7 @@ module.exports = {
moduleType: 'trace',
name: 'histogram2d',
basePlotModule: require('../../plots/cartesian'),
categories: ['cartesian', 'svg', '2dMap', 'histogram'],
categories: ['cartesian', 'svg', '2dMap', 'histogram', 'showLegend'],
meta: {
hrName: 'histogram_2d',
description: [
Expand Down
3 changes: 2 additions & 1 deletion src/traces/isosurface/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,8 @@ var attrs = module.exports = overrideAll(extendFlat({
arrayOk: true,
description: 'Same as `text`.'
},
hovertemplate: hovertemplateAttrs()
hovertemplate: hovertemplateAttrs(),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
},

colorScaleAttrs('', {
Expand Down
2 changes: 1 addition & 1 deletion src/traces/isosurface/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ module.exports = {
moduleType: 'trace',
name: 'isosurface',
basePlotModule: require('../../plots/gl3d'),
categories: ['gl3d'],
categories: ['gl3d', 'showLegend'],
meta: {
description: [
'Draws isosurfaces between iso-min and iso-max values with coordinates given by',
Expand Down
3 changes: 2 additions & 1 deletion src/traces/mesh3d/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -238,5 +238,6 @@ colorScaleAttrs('', {
editType: 'calc'
}, surfaceAttrs.lighting),

hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {editType: 'calc'})
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {editType: 'calc'}),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
});
2 changes: 1 addition & 1 deletion src/traces/mesh3d/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ module.exports = {
moduleType: 'trace',
name: 'mesh3d',
basePlotModule: require('../../plots/gl3d'),
categories: ['gl3d'],
categories: ['gl3d', 'showLegend'],
meta: {
description: [
'Draws sets of triangles with coordinates given by',
Expand Down
3 changes: 2 additions & 1 deletion src/traces/streamtube/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,8 @@ var attrs = {
'tubeu', 'tubev', 'tubew',
'norm', 'divergence'
]
})
}),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
};

extendFlat(attrs, colorScaleAttrs('', {
Expand Down
2 changes: 1 addition & 1 deletion src/traces/streamtube/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ module.exports = {
moduleType: 'trace',
name: 'streamtube',
basePlotModule: require('../../plots/gl3d'),
categories: ['gl3d'],
categories: ['gl3d', 'showLegend'],

attributes: require('./attributes'),
supplyDefaults: require('./defaults'),
Expand Down
3 changes: 2 additions & 1 deletion src/traces/surface/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,8 @@ colorScaleAttrs('', {
})
},

hoverinfo: extendFlat({}, baseAttrs.hoverinfo)
hoverinfo: extendFlat({}, baseAttrs.hoverinfo),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false}),
}), 'calc', 'nested');

attrs.x.editType = attrs.y.editType = attrs.z.editType = 'calc+clearAxisTypes';
Expand Down
2 changes: 1 addition & 1 deletion src/traces/surface/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ module.exports = {
moduleType: 'trace',
name: 'surface',
basePlotModule: require('../../plots/gl3d'),
categories: ['gl3d', '2dMap'],
categories: ['gl3d', '2dMap', 'showLegend'],
meta: {
description: [
'The data the describes the coordinates of the surface is set in `z`.',
Expand Down
3 changes: 2 additions & 1 deletion src/traces/volume/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,8 @@ colorScaleAttrs('', {
flatshading: isosurfaceAttrs.flatshading,
contour: isosurfaceAttrs.contour,

hoverinfo: extendFlat({}, baseAttrs.hoverinfo)
hoverinfo: extendFlat({}, baseAttrs.hoverinfo),
showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
}), 'calc', 'nested');

attrs.x.editType = attrs.y.editType = attrs.z.editType = attrs.value.editType = 'calc+clearAxisTypes';
Expand Down
Loading