Candlestick can now be combined with a bar chart without axis rescale…

… problem.
iongroup · Nov 27, 2017 · 830ea58 · 830ea58
1 parent 585dbe5
commit 830ea58
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 110 deletions.
diff --git a/CHANGELOG_ION.md b/CHANGELOG_ION.md
@@ -1,5 +1,11 @@
 # plotly.js ION changelog
 
+## [1.28.3-ion46] -- 2017-11-27
+
+### CandleStick with bar chart
+- Disabled code that rescaled multi-bar chart due to negative side effect in candlestick charts
+
+
 ## [1.28.3-ion45] -- 2017-11-22
 
 ### CandleStick

diff --git a/dist_ion/plotly-ion.js b/dist_ion/plotly-ion.js
@@ -1,5 +1,5 @@
 /**
-* plotly.js (ion) v1.28.3-ion44
+* plotly.js (ion) v1.28.3-ion46
 * Copyright 2012-2017, Plotly, Inc.
 * All rights reserved.
 * Licensed under the MIT license
@@ -30008,7 +30008,7 @@ exports.svgAttrs = {
 var Plotly = require('./plotly');
 
 // package version injected by `npm run preprocess`
-exports.version = '1.28.3-ion44';
+exports.version = '1.28.3-ion46';
 
 // inject promise polyfill
 require('es6-promise').polyfill();
@@ -56560,12 +56560,36 @@ module.exports = function setPositions(gd, plotinfo) {
         i;
 
     // ion
+    var allBarChartFlag = 1;
+
     for(i = 0; i < fullTraces.length; i++) {
         var fullTrace = fullTraces[i];
         var calcTrace = calcTraces[i];
 
-        if (!fullTrace.visible || !Registry.traceIs(fullTrace, 'bar') ||
-            calcTraces[i][0].placeholder) continue;
+        // Plotly original code
+        if(
+            fullTrace.visible === true &&
+            Registry.traceIs(fullTrace, 'bar') &&
+            fullTrace.xaxis === xa._id &&
+            fullTrace.yaxis === ya._id
+        ) {
+            if(fullTrace.orientation === 'h') {
+                calcTracesHorizontal.push(calcTraces[i]);
+            }
+            else {
+                calcTracesVertical.push(calcTraces[i]);
+            }
+        }
+
+        // ION code to rescale an 'all-bar' chart without stacking bars
+        if (fullTrace.visible && !Registry.traceIs(fullTrace, 'bar')) {
+            allBarChartFlag = 0;
+            continue;
+        }
+
+        if (!fullTrace.visible || !Registry.traceIs(fullTrace, 'bar') || calcTraces[i][0].placeholder) {
+            continue;
+        }
 
         if(fullTrace.orientation === 'h') {
             calcTracesHorizontalMap[fullTrace.xaxis].push(calcTrace);
@@ -56577,15 +56601,16 @@ module.exports = function setPositions(gd, plotinfo) {
 
     // Detect multi-axes
     var group = (gd._fullLayout.barmode === 'group');
-    if (!group) {
+    if (!group && allBarChartFlag === 1) {
         // standard case
         calcTracesHorizontal = calcTracesHorizontalMap[xa._id].filter(function(t) { return t[0].trace.yaxis === ya._id });
         calcTracesVertical = calcTracesVerticalMap[ya._id].filter(function(t) { return t[0].trace.xaxis === xa._id });
-    } else {
+    } else if (allBarChartFlag === 1) {
         // Ok, grouping mode. Are there traces on both x/y and x2/y2 axes?
         calcTracesHorizontal = calcTracesHorizontalMap.x.concat(calcTracesHorizontalMap.x2);
-        calcTracesVertical = calcTracesVerticalMap.y.concat(calcTracesVerticalMap.y2);
+        calcTracesVertical = calcTracesVerticalMap.y.concat(calcTracesVerticalMap.y2);        
     }
+    // end of the ION code to rescale an 'all-bar' chart without stacking bars
 
     setGroupPositions(gd, xa, ya, calcTracesVertical);
     setGroupPositions(gd, ya, xa, calcTracesHorizontal);

diff --git a/dist_ion/plotly-ion.min.js b/dist_ion/plotly-ion.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotly.js",
-  "version": "1.28.3-ion45",
+  "version": "1.28.3-ion46",
   "description": "The open source javascript graphing library that powers plotly",
   "license": "MIT",
   "main": "./lib/index.js",

diff --git a/samples/chart_perf.js b/samples/chart_perf.js
@@ -1,92 +1,51 @@
-var numTraces = 20; // 10
-var numCats = 25; // 15
-var initialUpdates = 15; // 5
-
-var catBaseName = "THIS_IS_A_VERY_VERY_VERY_VERY_VERY_VERY_LONG_CATEGORY_BASE_NAME";
-var yMin = -100;
-var yMax = 100;
-var plotDiv;
-var timesUpdated = 0;
-var interval = 1000;
-var clearHandle;
-
-// Categories and indices are the same for everyone
-var categories = [];
-for (var c = 1; c <= numCats; c++) {
-  categories.push(c + "_" + catBaseName + "_" + c);
-}
-var updatedIndices = [];
-for (var t = 0; t < numTraces; t++) {
-  updatedIndices.push(t);
+var trace1 = {
+  //x: [2, 3, 4], 
+  //y: [-40, 50, 60],
+  x: ['2017-01-04', '2017-01-05', '2017-01-06'], 
+  y: [-40, 50, 60],
+  close: [116.019997, 116.610001, 117.910004], 
+
+  decreasing: {line: {color: '#7F7F7F'}}, 
+
+  high: [116.510002, 116.860001, 118.160004], 
+
+  increasing: {line: {color: '#17BECF'}}, 
+
+  line: {color: 'rgba(31,119,180,1)'}, 
+
+  low: [115.75, 115.809998, 116.470001], 
+
+  open: [115.849998, 115.919998, 116.779999], 
+
+  type: 'candlestick', 
+  name: 'candlestick',
+  opacity: 0.5
 };
 
-function updateData() {
-  var updatedData = {
-    y: []
-  };
-
-  for (var t = 0; t < numTraces; t++) {
-    var yValues = [];
-    for (var v = 0; v < numCats; v++) {
-      var val = yMin + Math.random() * (yMax - yMin);
-      yValues.push(val);
-    }
-    updatedData.y.push(yValues);
-  }
-
-  Plotly.restyle(plotDiv, updatedData, updatedIndices);
-
-  timesUpdated++;
-}
+var trace2 = {
+  //x: [2, 3, 4], 
+  x: ['2017-01-04', '2017-01-05', '2017-01-06'], 
+  y: [21, 5, 6], 
+  name: 'yaxis2 data', 
+  yaxis: 'y2', 
+  type: 'bar',
+  opacity: 0.3
+};
 
-function generateChart() {
-  var traces = [];
-  for (var t = 1; t <= numTraces; t++) {
-    var trace = {
-      type: 'bar',
-      x: categories,
-      y: [],
-      name: "Trace " + t
-    }
-    for (var v = 0; v < numCats; v++) {
-      trace.y.push((yMin + yMax) / 2);
-    }
-    traces.push(trace);
+var data = [trace2, trace1];
+
+var layout = {
+  title: 'Double Y Axis Example', 
+  yaxis: {title: 'yaxis title'}, 
+  yaxis2: {
+    title: 'yaxis2 title', 
+    titlefont: {color: 'rgb(148, 103, 189)'}, 
+    tickfont: {color: 'rgb(148, 103, 189)'}, 
+    overlaying: 'y', 
+    side: 'right'
   }
+};
 
-  var layout = {
-    barmode: 'group',
-    hovermode: 'closest',
-    // xaxis: {
-    //   showticklabels: false
-    // },
-    // yaxis: {
-    //   showticklabels: false
-    // }
-  };
-  plotDiv = document.getElementById('myDiv');
-
-  Plotly.newPlot(plotDiv, traces, layout, {displayModeBar: false});
-  updateData();
-
-  plotDiv.addEventListener('click', function () {
-    updateData();
-  }, true);
-}
-
+var plotDiv = document.getElementById('myDiv');
 
-function handleTheClick() {
-  window.event.target.innerHTML = "";
-  generateChart();
-  clearHandle = window.setInterval(function () {
-    if (timesUpdated < initialUpdates) {
-      updateData();
-    } else {
-      window.clearInterval(clearHandle);
-      // plotDiv.innerHTML = "<h1 style='position: absolute; top: 50%; left: 50%; font-size: 100px; transform: translate(-50%, -50%);'>COMPLETED</h1>";
-    }
-  }, interval);
-}
-// document.addEventListener('DOMContentLoaded', function() {
-//    generateChart();
-// }, false);
+Plotly.newPlot(plotDiv, data, layout);
diff --git a/samples/index_perf.html b/samples/index_perf.html
@@ -2,17 +2,17 @@
 
 <head>
     <!-- Plotly.js -->
-    <script src="../dist_ion/plotly-ion.js" charset="utf-8"></script>
-    <script src="./chart_perf.js"></script>
+
 </head>
 
 <body style="height: 100%; padding: 0; margin: 0">
-<h3 style="position: absolute" onclick="handleTheClick()">Click to generate chart</h3>
 
-<div id="myDiv" style="width: 100%; height: 100%;">
+<div id="myDiv" style="background: red; width: 100%; height: 100%;">
 <!-- Plotly chart will be drawn inside this DIV -->
 </div>
 
+<script src="../dist_ion/plotly-ion.js" charset="utf-8"></script>
+<script src="./chart_perf.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.28.3-ion44';
+exports.version = '1.28.3-ion46';
 
 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.28.3-ion44';
+exports.version = '1.28.3-ion46';
 
 // inject promise polyfill
 require('es6-promise').polyfill();

diff --git a/src/traces/bar/set_positions.js b/src/traces/bar/set_positions.js
@@ -36,12 +36,36 @@ module.exports = function setPositions(gd, plotinfo) {
         i;
 
     // ion
+    var allBarChartFlag = 1;
+
     for(i = 0; i < fullTraces.length; i++) {
         var fullTrace = fullTraces[i];
         var calcTrace = calcTraces[i];
 
-        if (!fullTrace.visible || !Registry.traceIs(fullTrace, 'bar') ||
-            calcTraces[i][0].placeholder) continue;
+        // Plotly original code
+        if(
+            fullTrace.visible === true &&
+            Registry.traceIs(fullTrace, 'bar') &&
+            fullTrace.xaxis === xa._id &&
+            fullTrace.yaxis === ya._id
+        ) {
+            if(fullTrace.orientation === 'h') {
+                calcTracesHorizontal.push(calcTraces[i]);
+            }
+            else {
+                calcTracesVertical.push(calcTraces[i]);
+            }
+        }
+
+        // ION code to rescale an 'all-bar' chart without stacking bars
+        if (fullTrace.visible && !Registry.traceIs(fullTrace, 'bar')) {
+            allBarChartFlag = 0;
+            continue;
+        }
+
+        if (!fullTrace.visible || !Registry.traceIs(fullTrace, 'bar') || calcTraces[i][0].placeholder) {
+            continue;
+        }
 
         if(fullTrace.orientation === 'h') {
             calcTracesHorizontalMap[fullTrace.xaxis].push(calcTrace);
@@ -53,15 +77,16 @@ module.exports = function setPositions(gd, plotinfo) {
 
     // Detect multi-axes
     var group = (gd._fullLayout.barmode === 'group');
-    if (!group) {
+    if (!group && allBarChartFlag === 1) {
         // standard case
         calcTracesHorizontal = calcTracesHorizontalMap[xa._id].filter(function(t) { return t[0].trace.yaxis === ya._id });
         calcTracesVertical = calcTracesVerticalMap[ya._id].filter(function(t) { return t[0].trace.xaxis === xa._id });
-    } else {
+    } else if (allBarChartFlag === 1) {
         // Ok, grouping mode. Are there traces on both x/y and x2/y2 axes?
         calcTracesHorizontal = calcTracesHorizontalMap.x.concat(calcTracesHorizontalMap.x2);
-        calcTracesVertical = calcTracesVerticalMap.y.concat(calcTracesVerticalMap.y2);
+        calcTracesVertical = calcTracesVerticalMap.y.concat(calcTracesVerticalMap.y2);        
     }
+    // end of the ION code to rescale an 'all-bar' chart without stacking bars
 
     setGroupPositions(gd, xa, ya, calcTracesVertical);
     setGroupPositions(gd, ya, xa, calcTracesHorizontal);