Skip to content

Commit 827b7ac

Browse files
mdtuszmdtusz
committed
Add autogeneration for mocks, fuzzy-search on two keys, and build step
1 parent 4937190 commit 827b7ac

File tree

15 files changed

+249
-700
lines changed

15 files changed

+249
-700
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ build/*
66
!build/ploticon.js
77
!build/README.md
88

9+
devtools/test_dashboard/mocks.json
10+
911
npm-debug.log*

‎devtools/test_dashboard/buttons.js‎

Lines changed: 0 additions & 158 deletions
This file was deleted.

‎devtools/test_dashboard_v2/devtools.js‎ renamed to ‎devtools/test_dashboard/devtools.js‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
var Fuse = require('fuse.js');
2+
var mocks = require('./mocks.json');
3+
4+
15
// Our gracious testing object
26
var Tabs = {
37

8+
// Return the specified plot container (or default one)
49
getGraph: function(id) {
510
id = id || 'graph';
611
return document.getElementById(id);
712
},
813

14+
// Create a new plot container
915
fresh: function(id) {
1016
id = id || 'graph';
1117

@@ -25,14 +31,18 @@ var Tabs = {
2531
return graphDiv;
2632
},
2733

34+
// Plot a mock by name (without .json) to the default or specified container
2835
plotMock: function(mockName, id) {
2936
var mockURL = '/test/image/mocks/' + mockName + '.json';
3037

3138
window.Plotly.d3.json(mockURL, function(err, fig) {
3239
window.Plotly.plot(Tabs.fresh(id), fig.data, fig.layout);
40+
41+
console.warn('Plotting:', mockURL);
3342
});
3443
},
3544

45+
// Save a png snapshot and display it below the plot
3646
snapshot: function(id) {
3747
var gd = Tabs.getGraph(id);
3848

@@ -52,9 +62,10 @@ var Tabs = {
5262
});
5363
},
5464

65+
// Remove all plots and snapshots from the page
5566
purge: function() {
5667
var plots = document.getElementsByClassName('dashboard-plot');
57-
var images = document.getElementsById('snapshot');
68+
var images = document.getElementById('snapshot');
5869

5970
while(images.firstChild) {
6071
images.removeChild(images.firstChild);
@@ -65,10 +76,12 @@ var Tabs = {
6576
}
6677
},
6778

79+
// Specify what to do after each plotly.js script reload
6880
onReload: function() {
6981
return;
7082
},
7183

84+
// Refreshes the plotly.js source without needing to refresh the page
7285
reload: function() {
7386
var source = document.getElementById('source');
7487
var reloaded = document.getElementById('reload-time');
@@ -92,6 +105,8 @@ var Tabs = {
92105
};
93106

94107

108+
// Bind things to the window
109+
window.Tabs = Tabs;
95110
setInterval(function() {
96111
window.gd = Tabs.getGraph() || Tabs.fresh();
97112
window.fullLayout = window.gd._fullLayout;
@@ -100,10 +115,19 @@ setInterval(function() {
100115

101116

102117
// Mocks search and plotting
103-
var f = new window.Fuse(window.MOCKS, { keys: ['name'] });
118+
var f = new Fuse(mocks, {
119+
keys: [{
120+
name: 'name',
121+
weight: 0.7
122+
}, {
123+
name: 'keywords',
124+
weight: 0.3
125+
}]
126+
});
104127

105128
var searchBar = document.getElementById('mocks-search');
106129
var mocksList = document.getElementById('mocks-list');
130+
107131
searchBar.addEventListener('keyup', function(e) {
108132

109133
// Clear results.
@@ -120,10 +144,10 @@ searchBar.addEventListener('keyup', function(e) {
120144
result.innerText = r.name;
121145

122146
result.addEventListener('click', function() {
147+
123148
// Clear plots and plot selected.
124149
Tabs.purge();
125150
Tabs.plotMock(r.file.slice(0, -5));
126-
console.warn('Plotting:', r.file);
127151

128152
// Clear results.
129153
while(mocksList.firstChild) {

‎devtools/test_dashboard/index.html‎

Lines changed: 16 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,25 @@
11
<!DOCTYPE html>
2+
<html>
23
<head>
3-
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT" />
4+
<title>Plotly.js Devtools</title>
5+
<link rel="stylesheet" type="text/css" href="./style.css">
46
</head>
57
<body>
8+
<header>
9+
<img src="http://images.plot.ly/logo/plotlyjs-logo@2x.png" onClick="Tabs.reload();">
10+
<span id="reload-time"></span>
611

7-
<div id="plot-list" style="overflow:auto; height:100px;"></div>
8-
<div id="status-info" style="display:block; position:absolute; top:150px;"></div>
9-
<div id="embedded-graph"></div>
10-
<div id="embedded-image" style="display:block; position:absolute; top:800px;"></div>
12+
<input id="mocks-search" type="text" placeholder="mocks search"></input>
13+
</header>
1114

12-
<script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
13-
14-
<!-- use dev plotly.js build -->
15-
<script type="text/javascript" src="../../build/plotly.js" charset="utf-8"></script>
16-
17-
<!-- use local topojson files -->
18-
<script>Plotly.setPlotConfig({ topojsonURL: '../../dist/topojson/' });</script>
19-
20-
<script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
21-
22-
<!-- helper functions to manipulate the graph div -->
23-
<script>
24-
var d3 = Plotly.d3;
25-
26-
var Tabs = {
27-
getGraph: function() {
28-
return document.getElementById('embedded-graph').children[0];
29-
},
30-
31-
fresh: function() {
32-
var anchor = document.getElementById('embedded-graph'),
33-
graphDiv = Tabs.getGraph();
34-
35-
if(graphDiv) anchor.removeChild(graphDiv);
36-
graphDiv = document.createElement('div');
37-
anchor.appendChild(graphDiv);
38-
39-
return graphDiv;
40-
},
41-
42-
plotMock: function(mockName) {
43-
var mockURL = '../../test/image/mocks/' + mockName + '.json';
44-
45-
d3.json(mockURL, function(err, fig) {
46-
Plotly.plot(Tabs.fresh(), fig.data, fig.layout);
47-
});
48-
}
49-
};
50-
</script>
15+
<section id="mocks-list"></section>
16+
<div id="plots">
17+
<div id="graph"></div>
18+
</div>
19+
<div id="snapshot"></div>
5120

21+
<script id="source" type="text/javascript" src="../../build/plotly.js"></script>
22+
<script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
5223
</body>
5324
</html>
25+

0 commit comments

Comments
 (0)