- pie plots now propagate clicks

iongroup · Nov 25, 2016 · a6f5b62 · a6f5b62
1 parent ca3ead1
commit a6f5b62
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,13 @@ https://github.com/plotly/plotly.js/compare/vX.Y.Z...master
 
 where X.Y.Z is the semver of most recent plotly.js release.
 
+
+## [1.20.2-d26] -- 2016-11-25
+
+### Fixed
+
+- Fix pie plots not propagating original click event
+
 ## [1.20.2] -- 2016-11-17
 
 ### Fixed

diff --git a/dist/plotly-cartesian.min.js b/dist/plotly-cartesian.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotly.js",
-  "version": "1.20.2-d25",
+  "version": "1.20.2-d26",
   "description": "The open source javascript graphing library that powers plotly",
   "license": "MIT",
   "main": "./lib/index.js",

diff --git a/sample/chart.js b/sample/chart.js
@@ -0,0 +1,117 @@
+var trace1 = {
+  x: ['A', 'B', 'C'],
+  y: [2.5, 1.5, 2],
+  type: 'bar',
+};
+var trace2 = {
+  x: ['A', 'B', 'C'],
+  y: [-2.5, -1.5, -2],
+  type: 'bar',
+};
+var trace3 = {
+  x: ['A', 'B', 'C'],
+  y: [0.5, 3.5, 1],
+  type: 'bar',
+  marker: {
+    line: {
+      color: ['red', 'green', 'purple'],
+      width: [1, 4, 10]
+    }
+  }
+};
+
+var barLayout = {
+  barmode: 'relative',
+  hovermode: 'closest',
+  width: 600,
+};
+var barData = [trace1, trace2, trace3];
+Plotly.newPlot('barDiv', barData, barLayout);
+var myPlot = document.getElementById('barDiv');
+myPlot.on('plotly_click', function (data) {
+  var point = data.points[0];
+  var singleColors = [];
+  var singleWidths = [];
+  for (var i = 0; i < barData[0].x.length; i++) {
+    if (i === point.pointNumber) {
+      singleColors.push('red');
+      singleWidths.push(2);
+    } else {
+      singleColors.push('white');
+      singleWidths.push(0);
+    }
+  }
+
+  var curves = [];
+  var colors = [];
+  var widths = [];
+
+  for (var j = 0; j < barData.length; j++) {
+    curves.push(j);
+    var sc = [];
+    var sw = [];
+    for (var k = 0; k < barData[j].x.length; k++) {
+      // single trace
+      if (j === point.curveNumber && k === point.pointNumber) {
+        sc.push('red');
+        sw.push(2);
+      } else {
+        sc.push(null);
+        sw.push(0);
+      }
+    }
+    colors.push(sc);
+    widths.push(sw);
+  }
+
+  Plotly.restyle('barDiv', {
+    'marker.line.color': colors,
+    'marker.line.width': widths,
+  }, curves);
+  console.log(data);
+});
+
+var pieData = [{
+  sort: false,
+  values: [27, 11, 25, 8, 1, 3, 25],
+  labels: ['US', 'China', 'European Union', 'Russian Federation', 'Brazil', 'India', 'Rest of World'],
+  text: 'CO2',
+  textposition: 'inside',
+  name: 'CO2 Emissions',
+  hoverinfo: 'label+percent+name',
+  hole: .4,
+  type: 'pie',
+  marker: {
+    line: {
+      color: 'white',
+      width: 2
+    }
+  }
+}];
+
+var pieLayout = {
+  title: 'Global Emissions 1990-2011',
+  height: 400,
+  width: 480
+};
+
+Plotly.newPlot('pieDiv', pieData, pieLayout);
+var myPlot = document.getElementById('pieDiv');
+myPlot.on('plotly_click', function (data) {
+  var point = data.points[0];
+  var colors = [];
+  var pull = [];
+  for (var i = 0; i < pieData[0].values.length; i++) {
+    if (i === point.i) {
+      colors.push('red');
+      pull.push(0.05);
+    } else {
+      colors.push('white');
+      pull.push(0);
+    }
+  }
+  Plotly.restyle('pieDiv', {
+    'marker.line.color': [colors],
+    'pull': [pull]
+  }, [0]);
+});
diff --git a/sample/index.html b/sample/index.html
@@ -0,0 +1,21 @@
+<html>
+
+<head>
+    <!-- Plotly.js -->
+    <script src="../dist/plotly-cartesian.js" charset="utf-8"></script>
+    <style></style>
+</head>
+
+<body>
+
+    <div id="barDiv" style="width: 480px; height: 350px;" class="js-plotly-plot">
+        <!-- Plotly chart will be drawn inside this DIV -->
+    </div>
+    <div id="pieDiv" style="width: 480px; height: 350px;" class="js-plotly-plot">
+        <!-- Plotly chart will be drawn inside this DIV -->
+    </div>
+    <script src="./chart.js"></script>
+
+</body>
+
+</html>
diff --git a/src/assets/geo_assets.js b/src/assets/geo_assets.js
@@ -12,6 +12,6 @@ var saneTopojson = require('sane-topojson');
 
 
 // package version injected by `npm run preprocess`
-exports.version = '1.20.2-d25';
+exports.version = '1.20.2-d26';
 
 exports.topojson = saneTopojson;
diff --git a/src/core.js b/src/core.js
@@ -15,7 +15,7 @@
 var Plotly = require('./plotly');
 
 // package version injected by `npm run preprocess`
-exports.version = '1.20.2-d25';
+exports.version = '1.20.2-d26';
 
 // inject promise polyfill
 require('es6-promise').polyfill();

diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js
@@ -146,7 +146,7 @@ module.exports = function plot(gd, cdpie) {
                     gd._hoverdata = [pt];
                     pt.curveNumber = cd[0].trace.index;
                     gd._hoverdata.trace = cd[0].trace;
-                    Fx.click(gd, { target: true });
+                    Fx.click(gd, window.event || { target: true });
                 }
 
                 slicePath.enter().append('path')