From 3dcb364ddb847603fad0d2ac2f31da3adb004104 Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Mon, 11 Jan 2021 11:02:13 -0800 Subject: [PATCH 1/2] Add image attrs to scatter plot --- src/components/fx/image_attributes.js | 45 +++++++++++++++++++++++++++ src/traces/scatter/attributes.js | 3 ++ src/traces/scatter/defaults.js | 3 ++ src/traces/scatter/image_defaults.js | 20 ++++++++++++ 4 files changed, 71 insertions(+) create mode 100644 src/components/fx/image_attributes.js create mode 100644 src/traces/scatter/image_defaults.js diff --git a/src/components/fx/image_attributes.js b/src/components/fx/image_attributes.js new file mode 100644 index 00000000000..213e3b1e7b1 --- /dev/null +++ b/src/components/fx/image_attributes.js @@ -0,0 +1,45 @@ +/** +* Copyright 2012-2021, Plotly, Inc. +* All rights reserved. +* +* This source code is licensed under the MIT license found in the +* LICENSE file in the root directory of this source tree. +*/ + +'use strict'; + +module.exports = { + imageAttrs: { + source: { + dflt: '', + valType: 'string', + role: 'info', + editType: 'none', + arrayOk: true, + description: 'A URL to specify the image shown on hover.' + }, + width: { + dflt: 0, + valType: 'integer', + role: 'info', + editType: 'none', + arrayOk: true, + description: ['Hover image width. Optional if image dimensions can be determined', + 'synchronously from image data URL, otherwise must be specified up-front', + 'for asynchronously loaded images' + ].join(' ') + }, + height: { + dflt: 0, + valType: 'integer', + role: 'info', + editType: 'none', + arrayOk: true, + description: ['Hover image height. Optional if image dimensions can be determined', + 'synchronously from image data URL, otherwise must be specified up-front', + 'for asynchronously loaded images' + ].join(' ') + }, + editType: 'none' + } +}; diff --git a/src/traces/scatter/attributes.js b/src/traces/scatter/attributes.js index 7927a13ee7f..0b184100e92 100644 --- a/src/traces/scatter/attributes.js +++ b/src/traces/scatter/attributes.js @@ -10,6 +10,7 @@ var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs; var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs; +var imageAttrs = require('../../components/fx/image_attributes').imageAttrs; var colorScaleAttrs = require('../../components/colorscale/attributes'); var fontAttrs = require('../../plots/font_attributes'); var dash = require('../../components/drawing/attributes').dash; @@ -134,6 +135,8 @@ module.exports = { xperiodalignment: axisPeriodAlignment('x'), yperiodalignment: axisPeriodAlignment('y'), + image: imageAttrs, + stackgroup: { valType: 'string', role: 'info', diff --git a/src/traces/scatter/defaults.js b/src/traces/scatter/defaults.js index 1f74cf42884..79b7951dda9 100644 --- a/src/traces/scatter/defaults.js +++ b/src/traces/scatter/defaults.js @@ -22,6 +22,7 @@ var handleLineDefaults = require('./line_defaults'); var handleLineShapeDefaults = require('./line_shape_defaults'); var handleTextDefaults = require('./text_defaults'); var handleFillColorDefaults = require('./fillcolor_defaults'); +var handleImageDefaults= require('./image_defaults'); module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) { function coerce(attr, dflt) { @@ -59,6 +60,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout handleTextDefaults(traceIn, traceOut, layout, coerce); } + handleImageDefaults(traceIn, traceOut, layout, coerce); + var dfltHoverOn = []; if(subTypes.hasMarkers(traceOut) || subTypes.hasText(traceOut)) { diff --git a/src/traces/scatter/image_defaults.js b/src/traces/scatter/image_defaults.js new file mode 100644 index 00000000000..73823c9b980 --- /dev/null +++ b/src/traces/scatter/image_defaults.js @@ -0,0 +1,20 @@ +/** +* Copyright 2012-2021, Plotly, Inc. +* All rights reserved. +* +* This source code is licensed under the MIT license found in the +* LICENSE file in the root directory of this source tree. +*/ + + +'use strict'; + +var Lib = require('../../lib'); + +module.exports = function(traceIn, traceOut, layout, coerce, opts) { + opts = opts || {}; + + coerce('image.source'); + coerce('image.width'); + coerce('image.height'); +}; From b5e4c9daed453822aefb1a61ce7a866b70c59a6c Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Mon, 11 Jan 2021 11:52:45 -0800 Subject: [PATCH 2/2] Wrap text.nums in group --- src/components/fx/hover.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 9a511a5f3ec..4925d273c6a 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1104,11 +1104,10 @@ function createHoverText(hoverData, opts, gd) { g.append('rect') .call(Color.fill, Color.addOpacity(bgColor, 0.8)); g.append('text').classed('name', true); - // trace data label (path and text.nums) + // trace data label (path and g.nums) g.append('path') .style('stroke-width', '1px'); - g.append('text').classed('nums', true) - .call(Drawing.font, fontFamily, fontSize); + g.append('g').classed('numbox', true); }); hoverLabels.exit().remove(); @@ -1142,8 +1141,17 @@ function createHoverText(hoverData, opts, gd) { var name = texts[1]; // main label - var tx = g.select('text.nums') - .call(Drawing.font, + var tj = g.select('g.numbox') + .selectAll('text.nums') + .data([0]) + + tj.enter().append('text').classed('nums', true); + tj.exit().remove(); + + // Reselect nested text.nums element(s) + var tx = g.select('g.numbox').selectAll('text.nums'); + + tx.call(Drawing.font, d.fontFamily || fontFamily, d.fontSize || fontSize, d.fontColor || contrastColor)