diff --git a/draftlogs/6839_change.md b/draftlogs/6839_change.md new file mode 100644 index 00000000000..6fe959ed85d --- /dev/null +++ b/draftlogs/6839_change.md @@ -0,0 +1 @@ +- Update Sankey trace to allow user-defined link hover style override [[#6839](https://github.com/plotly/plotly.js/pull/6839)] \ No newline at end of file diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index 8907d1fc02f..b6bd948f8c7 100644 --- a/src/traces/sankey/plot.js +++ b/src/traces/sankey/plot.js @@ -10,6 +10,8 @@ var cn = require('./constants').cn; var _ = Lib._; +var linkStyleInitialized = false; + function renderableValuePresent(d) {return d !== '';} function ownTrace(selection, d) { @@ -62,9 +64,42 @@ function nodeNonHoveredStyle(sankeyNode, d, sankey) { } function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { - sankeyLink.style('fill-opacity', function(l) { + if(!linkStyleInitialized) { + // Figure out whether the user has provided their own sankey-link-hover style. + var styleExists = false; + for(var i = 0; i < document.styleSheets.length; i++) { + try { + var rules = document.styleSheets[i].cssRules; + for(var j = 0; j < rules.length; j++) { + if(rules[j].selectorText === '.sankey-link-hover') { + styleExists = true; + break; + } + } + if(styleExists) break; + } catch(e) { + // This particular style sheet cannot be accessed (due to CORS policy) + } + } + + // If not, insert a default one + if(!styleExists) { + var style = document.querySelector('style'); + if(!style) { + style = document.createElement('style'); + document.head.appendChild(style); + } + var sheet = style.sheet; + // If these are not flagged as !important chrome won't render the change + sheet.insertRule('.sankey-link-hover { fill-opacity: 0.4 !important; }', 0); + } + + linkStyleInitialized = true; + } + + sankeyLink.classed('sankey-link-hover', function(l) { if(!l.link.concentrationscale) { - return 0.4; + return true; } }); @@ -74,9 +109,9 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { ownTrace(sankey, d) .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) - .style('fill-opacity', function(l) { + .classed('sankey-link-hover', function(l) { if(!l.link.concentrationscale) { - return 0.4; + return true; } }); } @@ -91,7 +126,7 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { } function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { - sankeyLink.style('fill-opacity', function(d) {return d.tinyColorAlpha;}); + sankeyLink.classed('sankey-link-hover', false); sankeyLink.each(function(curLink) { var label = curLink.link.label; @@ -99,7 +134,7 @@ function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { ownTrace(sankey, d) .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) - .style('fill-opacity', function(d) {return d.tinyColorAlpha;}); + .classed('sankey-link-hover', false); } }); diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index 18506de1eee..65b0fc07cde 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/test/jasmine/tests/sankey_test.js @@ -1087,7 +1087,7 @@ describe('sankey tests', function() { .filter(function(obj) { return obj.link.label === 'stream 1'; })[0].forEach(function(l) { - expect(l.style.fillOpacity).toEqual('0.4'); + expect(l.classList.contains('sankey-link-hover')).toBe(true); }); }).then(function() { mouseEvent('mouseout', 200, 250); @@ -1096,7 +1096,7 @@ describe('sankey tests', function() { .filter(function(obj) { return obj.link.label === 'stream 1'; })[0].forEach(function(l) { - expect(l.style.fillOpacity).toEqual('0.2'); + expect(l.classList.contains('sankey-link-hover')).toBe(false); }); }) .then(done, done.fail);