Skip to content

Commit dc97310

Browse files
author
minjk-bl
committed
Change Seaborn tabs and Add user code tab page
1 parent fa56ff8 commit dc97310

2 files changed

Lines changed: 54 additions & 21 deletions

File tree

‎html/m_visualize/seaborn.html‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,10 @@
5656
<!-- Chart & Data Selection & Tab option box -->
5757
<div class="vp-tab-bar plot" data-level="plot">
5858
<div class="vp-tab-item vp-focus" data-type="data">Data</div>
59+
<div class="vp-tab-item" data-type="axes">Axes</div>
5960
<div class="vp-tab-item" data-type="info">Info</div>
6061
<div class="vp-tab-item" data-type="style">Style</div>
61-
<div class="vp-tab-item" data-type="setting">Setting</div>
62+
<div class="vp-tab-item" data-type="code">Code</div>
6263
</div>
6364
<div class="vp-tab-page-box plot vp-grid-border-box vp-scrollbar">
6465
<div class="vp-tab-page vp-grid-box" data-type="data">
@@ -97,12 +98,25 @@
9798
</div>
9899
<div class="vp-grid-box sb-option bins">
99100
<label for="bins" class="vp-bold">Bins</label>
100-
<input type="text" class="vp-input vp-state" id="bins" placeholder="Type bins" />
101+
<input type="number" class="vp-input vp-state" id="bins" placeholder="Type bins" />
101102
</div>
102103
</div>
103104
<label for="userOption" class="vp-bold">User Option</label>
104105
<input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
105106
</div>
107+
<div class="vp-tab-page vp-grid-col-95" data-type="axes" style="display: none;">
108+
<!-- SETTING : axis limit / tick interval / rotate tick labels ... -->
109+
<label for="x_limit_from" class="vp-bold">X Limit</label>
110+
<div class="vp-grid-col-p50">
111+
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
112+
<input type="text" id="x_limit_to" class="vp-input m vp-state" placeholder="To" />
113+
</div>
114+
<label for="y_limit_from" class="vp-bold">Y Limit</label>
115+
<div class="vp-grid-col-p50">
116+
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
117+
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
118+
</div>
119+
</div>
106120
<div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
107121
<label for="title" class="vp-bold">Title</label>
108122
<input type="text" id="title" class="vp-input vp-state wp100" placeholder="Title for the chart" />
@@ -151,18 +165,10 @@
151165
</select>
152166
</div>
153167
</div>
154-
<div class="vp-tab-page vp-grid-col-95" data-type="setting" style="display: none;">
155-
<!-- SETTING : axis limit / tick interval / rotate tick labels ... -->
156-
<label for="x_limit_from" class="vp-bold">X Limit</label>
157-
<div class="vp-grid-col-p50">
158-
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
159-
<input type="text" id="x_limit_to" class="vp-input m vp-state" placeholder="To" />
160-
</div>
161-
<label for="y_limit_from" class="vp-bold">Y Limit</label>
162-
<div class="vp-grid-col-p50">
163-
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
164-
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
165-
</div>
168+
<div class="vp-tab-page vp-grid-box" data-type="code" style="display: none;">
169+
<textarea id="userCode1" class="vp-state" placeholder="plt.text(3.0, 2.0, 'Hello Visual Python')
170+
plt.axvline(x=1, color='b', linestyle='-')
171+
plt.axhline(y=1, color='r', linestyle='-')"></textarea>
166172
</div>
167173
</div>
168174
</div>

‎js/m_visualize/Seaborn.js‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ define([
4545
x: '',
4646
y: '',
4747
hue: '',
48+
// axes options
49+
x_limit_from: '',
50+
x_limit_to: '',
51+
y_limit_from: '',
52+
y_limit_to: '',
4853
// info options
4954
title: '',
5055
x_label: '',
@@ -56,11 +61,8 @@ define([
5661
useGrid: '',
5762
gridColor: '#000000',
5863
markerStyle: '',
59-
// setting options
60-
x_limit_from: '',
61-
x_limit_to: '',
62-
y_limit_from: '',
63-
y_limit_to: '',
64+
// code option
65+
userCode: '',
6466
// preview options
6567
useSampling: true,
6668
sampleCount: 30,
@@ -429,6 +431,25 @@ define([
429431
$(this.wrapSelector('#hue')).prop('disabled', true);
430432
}
431433
}
434+
435+
// load code tab - code mirror
436+
let that = this;
437+
let userCodeKey = 'userCode1';
438+
let userCodeTarget = this.wrapSelector('#' + userCodeKey);
439+
this.codeArea = this.initCodemirror({
440+
key: userCodeKey,
441+
selector: userCodeTarget,
442+
events: [{
443+
key: 'change',
444+
callback: function(instance, evt) {
445+
// save its state
446+
instance.save();
447+
that.state[userCodeKey] = $(userCodeTarget).val();
448+
// refresh preview
449+
that.loadPreview();
450+
}
451+
}]
452+
});
432453

433454
this.loadPreview();
434455
}
@@ -599,9 +620,10 @@ define([
599620
generateCode(preview=false) {
600621
let {
601622
chartType, data, x, y, hue, setXY, userOption='',
623+
x_limit_from, x_limit_to, y_limit_from, y_limit_to,
602624
title, x_label, y_label, legendPos,
603625
useColor, color, useGrid, gridColor, markerStyle,
604-
x_limit_from, x_limit_to, y_limit_from, y_limit_to,
626+
userCode1,
605627
useSampling, sampleCount
606628
} = this.state;
607629

@@ -689,7 +711,6 @@ define([
689711
if (gridCodeList.length > 0) {
690712
chartCode.appendFormatLine("plt.grid({0})", gridCodeList.join(', '));
691713
}
692-
chartCode.append('plt.show()');
693714

694715
let convertedData = data;
695716
if (preview) {
@@ -710,6 +731,12 @@ define([
710731
code.appendLine(chartCode.toString());
711732
}
712733

734+
if (userCode1 && userCode1 != '') {
735+
code.appendLine(userCode1);
736+
}
737+
738+
code.append('plt.show()');
739+
713740
// remove last Enter(\n) from code and then run it
714741
return code.toString().replace(/\n+$/, "");
715742
}

0 commit comments

Comments
 (0)