Merge pull request #4330 from plotly/init-slideout-toolpanel

Refactor ToolPanel JS to slide-out instead of floating panels

Author: alexander-daniel

test-dashboard/toolpanel-dashboard/ui.js

@@ -15,48 +15,67 @@ function createRemoveButton () {
     };
 }
 
-function createPlot (divId) {
+function createTrace (type) {
+
+    function rand() {
+        return Math.random() * 360;
+    }
+
+    var traces = {
+        polar: {
+            r: [1, 2, 3, 4],
+            t: [rand(), rand(), rand(), rand()],
+            type: 'scatter',
+            name: new Date()
+        },
+        line: {
+            x: [1, 2, 3, 4],
+            y: [rand(), rand(), rand(), rand()],
+            type: 'scatter',
+            name: new Date()
+        }
+    };
+
+    return traces[type] || traces.line;
+}
+
+function createPlot (divId, type) {
     var containerDiv = document.getElementById('main');
     var graphDiv = document.createElement('div');
     var toolDiv = document.createElement('div');
+
     containerDiv.style.width = '100%';
     containerDiv.style.height = '100%';
-    containerDiv.style.clear = 'both';
 
     graphDiv.id = divId;
-    graphDiv.style.width = '80%';
+    graphDiv.style.width = '50%';
     graphDiv.style.display = 'inline-block';
     graphDiv.style.margin = '0px';
-    graphDiv.style.position = 'relative';
     graphDiv.style.verticalAlign = 'top';
 
     toolDiv.className = 'toolDiv';
-    toolDiv.style.width = '500px';
+    toolDiv.style.display = 'inline-block';
+    toolDiv.style.position = 'relative';
 
-    containerDiv.appendChild(toolDiv);
     containerDiv.appendChild(graphDiv);
+    containerDiv.appendChild(toolDiv);
 
-    var trace1 = {
-        x: [1, 2, 3, 4],
-        y: [10, 15, 13, 17],
-        type: 'scatter'
-    };
-
-    var trace2 = {
-        x: [1, 2, 3, 4],
-        y: [16, 5, 11, 9],
-        type: 'scatter'
-    };
+    var data = [
+        createTrace(type),
+        createTrace(type),
+        createTrace(type)
+    ];
 
-    var data = [trace1, trace2];
     var toolPanel;
 
     Plotly.newPlot(divId, data);
 
     graphDiv.toolPanel = toolPanel = new ToolPanel(Plotly, graphDiv, {
         standalone: true,
+        slideoutDirection: 'right',
         popoverContainer: containerDiv,
-        menuStyle: 'descriptive'
+        menuStyle: 'minimal',
+        orientation: 'horizontal'
     });
 
     window.toolPanel = graphDiv.toolPanel;
@@ -87,7 +106,7 @@ function createPlot (divId) {
 }
 
 ['one'].forEach(function (index) {
-    createPlot(index);
+    createPlot(index, 'polar');
 });
 
 createRemoveButton();