From 8e647f38f8b2dc07121a5c8439a7dd1fbb5a0933 Mon Sep 17 00:00:00 2001 From: Jon Mease Date: Mon, 23 Sep 2019 08:57:15 -0400 Subject: [PATCH 1/2] Only set rawColor if color is an array --- src/traces/parcats/calc.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/traces/parcats/calc.js b/src/traces/parcats/calc.js index 9310e922040..21fbba7aa55 100644 --- a/src/traces/parcats/calc.js +++ b/src/traces/parcats/calc.js @@ -86,14 +86,15 @@ module.exports = function calc(gd, trace) { // Build color generation function function getMarkerColorInfo(index) { - var value; + var value, rawColor; if(Lib.isArrayOrTypedArray(line.color)) { value = line.color[index % line.color.length]; + rawColor = value; } else { value = line.color; } - return {color: markerColorscale(value), rawColor: value}; + return {color: markerColorscale(value), rawColor: rawColor}; } // Number of values and counts From d39442211a9a5f29dd66aeb300e9381f4870afeb Mon Sep 17 00:00:00 2001 From: Jon Mease Date: Mon, 23 Sep 2019 09:01:44 -0400 Subject: [PATCH 2/2] Add constraints object to parcats click/hover events keys are dimensions indices and/or 'color', and values are category values --- src/traces/parcats/parcats.js | 57 +++++++++++++++++++++++++++--- test/jasmine/tests/parcats_test.js | 16 +++++++++ 2 files changed, 68 insertions(+), 5 deletions(-) diff --git a/src/traces/parcats/parcats.js b/src/traces/parcats/parcats.js index 8af8194c2f4..b01e2bd1f19 100644 --- a/src/traces/parcats/parcats.js +++ b/src/traces/parcats/parcats.js @@ -400,7 +400,10 @@ function mouseoverPath(d) { // Emit hover event var points = buildPointsArrayForPath(d); - d.parcatsViewModel.graphDiv.emit('plotly_hover', {points: points, event: d3.event}); + var constraints = buildConstraintsForPath(d); + d.parcatsViewModel.graphDiv.emit('plotly_hover', { + points: points, event: d3.event, constraints: constraints + }); // Handle hover label if(d.parcatsViewModel.hoverinfoItems.indexOf('none') === -1) { @@ -503,7 +506,10 @@ function mouseoutPath(d) { // Emit unhover event if(d.parcatsViewModel.hoverinfoItems.indexOf('skip') === -1) { var points = buildPointsArrayForPath(d); - d.parcatsViewModel.graphDiv.emit('plotly_unhover', {points: points, event: d3.event}); + var constraints = buildConstraintsForPath(d); + d.parcatsViewModel.graphDiv.emit('plotly_unhover', { + points: points, event: d3.event, constraints: constraints + }); } } } @@ -528,6 +534,30 @@ function buildPointsArrayForPath(d) { return points; } +/** + * Build constraints object for a path + * + * For use in click/hover events + * @param {PathViewModel} d + */ +function buildConstraintsForPath(d) { + var constraints = {}; + var dimensions = d.parcatsViewModel.model.dimensions; + + // dimensions + for(var i = 0; i < dimensions.length; i++) { + var dimension = dimensions[i]; + var category = dimension.categories[d.model.categoryInds[i]]; + constraints[dimension.containerInd] = category.categoryValue; + } + + // color + if(d.model.rawColor !== undefined) { + constraints.color = d.model.rawColor; + } + return constraints; +} + /** * Handle path click * @param {PathViewModel} d @@ -536,7 +566,10 @@ function clickPath(d) { if(d.parcatsViewModel.hoverinfoItems.indexOf('skip') === -1) { // hoverinfo it's skip, so interaction events aren't disabled var points = buildPointsArrayForPath(d); - d.parcatsViewModel.graphDiv.emit('plotly_click', {points: points, event: d3.event}); + var constraints = buildConstraintsForPath(d); + d.parcatsViewModel.graphDiv.emit('plotly_click', { + points: points, event: d3.event, constraints: constraints + }); } } @@ -672,6 +705,7 @@ function styleForColorHovermode(bandElement) { function emitPointsEventCategoryHovermode(bandElement, eventName, event) { // Get all bands in the current category var bandViewModel = d3.select(bandElement).datum(); + var categoryModel = bandViewModel.categoryViewModel.model; var gd = bandViewModel.parcatsViewModel.graphDiv; var bandSel = d3.select(bandElement.parentNode).selectAll('rect.bandrect'); @@ -684,7 +718,11 @@ function emitPointsEventCategoryHovermode(bandElement, eventName, event) { }); }); - gd.emit(eventName, {points: points, event: event}); + var constraints = {}; + constraints[categoryModel.dimensionInd] = categoryModel.categoryValue; + gd.emit(eventName, { + points: points, event: event, constraints: constraints + }); } /** @@ -697,6 +735,7 @@ function emitPointsEventCategoryHovermode(bandElement, eventName, event) { */ function emitPointsEventColorHovermode(bandElement, eventName, event) { var bandViewModel = d3.select(bandElement).datum(); + var categoryModel = bandViewModel.categoryViewModel.model; var gd = bandViewModel.parcatsViewModel.graphDiv; var paths = selectPathsThroughCategoryBandColor(bandViewModel); @@ -706,7 +745,15 @@ function emitPointsEventColorHovermode(bandElement, eventName, event) { Array.prototype.push.apply(points, buildPointsArrayForPath(pathViewModel)); }); - gd.emit(eventName, {points: points, event: event}); + var constraints = {}; + constraints[categoryModel.dimensionInd] = categoryModel.categoryValue; + // color + if(bandViewModel.rawColor !== undefined) { + constraints.color = bandViewModel.rawColor; + } + gd.emit(eventName, { + points: points, event: event, constraints: constraints + }); } /** diff --git a/test/jasmine/tests/parcats_test.js b/test/jasmine/tests/parcats_test.js index 5a2aaf75d5a..9255740ba6e 100644 --- a/test/jasmine/tests/parcats_test.js +++ b/test/jasmine/tests/parcats_test.js @@ -1190,6 +1190,10 @@ describe('Click events', function() { {curveNumber: 0, pointNumber: 4}, {curveNumber: 0, pointNumber: 5}, {curveNumber: 0, pointNumber: 8}]); + + // Check constraints + var constraints = clickData.constraints; + expect(constraints).toEqual({1: 'C'}); }) .catch(failTest) .then(done); @@ -1261,6 +1265,10 @@ describe('Click events', function() { expect(pts).toEqual([ {curveNumber: 0, pointNumber: 5}, {curveNumber: 0, pointNumber: 8}]); + + // Check constraints + var constraints = clickData.constraints; + expect(constraints).toEqual({0: 1, 1: 'C', 2: 11}); }) .catch(failTest) .then(done); @@ -1347,6 +1355,10 @@ describe('Click events with hoveron color', function() { // Check points expect(pts).toEqual([ {curveNumber: 0, pointNumber: 5}]); + + // Check constraints + var constraints = clickData.constraints; + expect(constraints).toEqual({1: 'C', color: 1}); }) .catch(failTest) .then(done); @@ -1387,6 +1399,10 @@ describe('Click events with hoveron color', function() { // Check points expect(pts).toEqual([ {curveNumber: 0, pointNumber: 5}]); + + // Check constraints + var constraints = clickData.constraints; + expect(constraints).toEqual({0: 1, 1: 'C', 2: 11, color: 1}); }) .catch(failTest) .then(done);