Skip to content

Commit a2c1761

Browse files
author
minjk-bl
committed
Add Xticks, Yticks option to Seaborn Axes tab
1 parent dc97310 commit a2c1761

File tree

4 files changed

+112
-20
lines changed

4 files changed

+112
-20
lines changed

‎css/m_visualize/seaborn.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@
9191
.vp-tab-page label {
9292
margin-bottom: 0px;
9393
}
94+
.vp-tab-group-title {
95+
font-weight: bold;
96+
background: var(--light-gray-color);
97+
}
9498
.vp-chart-setting-footer {
9599
position: absolute;
96100
left: 20px;

‎html/m_visualize/seaborn.html

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,18 +104,49 @@
104104
<label for="userOption" class="vp-bold">User Option</label>
105105
<input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
106106
</div>
107-
<div class="vp-tab-page vp-grid-col-95" data-type="axes" style="display: none;">
107+
<div class="vp-tab-page vp-grid-box" data-type="axes" style="display: none;">
108108
<!-- 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" />
109+
<div class="vp-grid-col-95">
110+
<label for="x_limit_from" class="vp-bold">X Limit</label>
111+
<div class="vp-grid-col-p50">
112+
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
113+
<input type="text" id="x_limit_to" class="vp-input m vp-state" placeholder="To" />
114+
</div>
113115
</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" />
116+
<div class="vp-grid-col-95">
117+
<label for="y_limit_from" class="vp-bold">Y Limit</label>
118+
<div class="vp-grid-col-p50">
119+
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
120+
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
121+
</div>
122+
</div>
123+
<hr style="margin:5px;"/>
124+
<label for="xticks" class="vp-tab-group-title">X ticks</label>
125+
<div class="vp-grid-col-95">
126+
<label>Ticks</label>
127+
<div class="vp-grid-col-p50">
128+
<input type="text" id="xticks" class="vp-input vp-state" placeholder="X ticks location" />
129+
<input type="text" id="xticks_label" class="vp-input vp-state" placeholder="X ticks label" />
130+
</div>
131+
</div>
132+
<div class="vp-grid-col-95">
133+
<label for="xticks_rotate">Rotation</label>
134+
<input type="number" id="xticks_rotate" class="vp-input vp-state" placeholder="45" />
135+
</div>
136+
<label><input type="checkbox" id="removeXticks" class="vp-state"/><span>Remove X ticks</span></label>
137+
<label for="yticks" class="vp-tab-group-title">Y ticks</label>
138+
<div class="vp-grid-col-95">
139+
<label>Ticks</label>
140+
<div class="vp-grid-col-p50">
141+
<input type="text" id="yticks" class="vp-input vp-state" placeholder="Y ticks location" />
142+
<input type="text" id="yticks_label" class="vp-input vp-state" placeholder="Y ticks label" />
143+
</div>
144+
</div>
145+
<div class="vp-grid-col-95">
146+
<label for="yticks_rotate">Rotation</label>
147+
<input type="number" id="yticks_rotate" class="vp-input vp-state" placeholder="45" />
118148
</div>
149+
<label><input type="checkbox" id="removeYticks" class="vp-state"/><span>Remove Y ticks</span></label>
119150
</div>
120151
<div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
121152
<label for="title" class="vp-bold">Title</label>

‎js/com/com_String.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,11 @@ define ([
7575
clear() {
7676
this.buffer = new Array();
7777
}
78+
79+
// get Length
80+
get length() {
81+
return this.buffer.length;
82+
}
7883
}
7984

8085
return com_String;

‎js/m_visualize/Seaborn.js

Lines changed: 63 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ define([
5050
x_limit_to: '',
5151
y_limit_from: '',
5252
y_limit_to: '',
53+
xticks: '',
54+
xticks_label: '',
55+
xticks_rotate: '',
56+
removeXticks: false,
57+
yticks: '',
58+
yticks_label: '',
59+
yticks_rotate: '',
60+
removeYticks: false,
5361
// info options
5462
title: '',
5563
x_label: '',
@@ -621,6 +629,8 @@ define([
621629
let {
622630
chartType, data, x, y, hue, setXY, userOption='',
623631
x_limit_from, x_limit_to, y_limit_from, y_limit_to,
632+
xticks, xticks_label, xticks_rotate, removeXticks,
633+
yticks, yticks_label, yticks_rotate, removeYticks,
624634
title, x_label, y_label, legendPos,
625635
useColor, color, useGrid, gridColor, markerStyle,
626636
userCode1,
@@ -680,6 +690,56 @@ define([
680690

681691
let generatedCode = com_generator.vp_codeGenerator(this, config, state, etcOptionCode.join(', '));
682692

693+
// Axes
694+
if (x_limit_from != '' && x_limit_to != '') {
695+
chartCode.appendFormatLine("plt.xlim(({0}, {1}))", x_limit_from, x_limit_to);
696+
}
697+
if (y_limit_from != '' && y_limit_to != '') {
698+
chartCode.appendFormatLine("plt.ylim(({0}, {1}))", y_limit_from, y_limit_to);
699+
}
700+
if (legendPos != '') {
701+
chartCode.appendFormatLine("plt.legend(loc='{0}')", legendPos);
702+
}
703+
if (removeXticks === true) {
704+
// use empty list to disable xticks
705+
chartCode.appendLine("plt.xticks([])");
706+
} else {
707+
let xticksOptList = [];
708+
if (xticks && xticks !== '') {
709+
xticksOptList.push(xticks);
710+
// Not able to use xticks_label without xticks
711+
if (xticks_label && xticks_label != '') {
712+
xticksOptList.push(xticks_label);
713+
}
714+
}
715+
if (xticks_rotate && xticks_rotate !== '') {
716+
xticksOptList.push('rotation=' + xticks_rotate)
717+
}
718+
// Add option to chart code if available
719+
if (xticksOptList.length > 0) {
720+
chartCode.appendFormatLine("plt.xticks({0})", xticksOptList.join(', '));
721+
}
722+
}
723+
if (removeYticks === true) {
724+
// use empty list to disable yticks
725+
chartCode.appendLine("plt.yticks([])");
726+
} else {
727+
let yticksOptList = [];
728+
if (yticks && yticks !== '') {
729+
yticksOptList.push(yticks);
730+
// Not able to use xticks_label without xticks
731+
if (yticks_label && yticks_label != '') {
732+
yticksOptList.push(yticks_label);
733+
}
734+
}
735+
if (yticks_rotate && yticks_rotate !== '') {
736+
yticksOptList.push('rotation=' + yticks_rotate)
737+
}
738+
// Add option to chart code if available
739+
if (yticksOptList.length > 0) {
740+
chartCode.appendFormatLine("plt.yticks({0})", yticksOptList.join(', '));
741+
}
742+
}
683743
// Info
684744
if (title && title != '') {
685745
chartCode.appendFormatLine("plt.title('{0}')", title);
@@ -690,15 +750,6 @@ define([
690750
if (y_label && y_label != '') {
691751
chartCode.appendFormatLine("plt.ylabel('{0}')", y_label);
692752
}
693-
if (x_limit_from != '' && x_limit_to != '') {
694-
chartCode.appendFormatLine("plt.xlim(({0}, {1}))", x_limit_from, x_limit_to);
695-
}
696-
if (y_limit_from != '' && y_limit_to != '') {
697-
chartCode.appendFormatLine("plt.ylim(({0}, {1}))", y_limit_from, y_limit_to);
698-
}
699-
if (legendPos != '') {
700-
chartCode.appendFormatLine("plt.legend(loc='{0}')", legendPos);
701-
}
702753
// Style - Grid
703754
// plt.grid(True, axis='x', color='red', alpha=0.5, linestyle='--')
704755
let gridCodeList = [];
@@ -712,7 +763,6 @@ define([
712763
chartCode.appendFormatLine("plt.grid({0})", gridCodeList.join(', '));
713764
}
714765

715-
let convertedData = data;
716766
if (preview) {
717767
// Ignore warning
718768
code.appendLine('import warnings');
@@ -728,7 +778,9 @@ define([
728778
code.appendLine(chartCode.toString());
729779
} else {
730780
code.appendLine(generatedCode);
731-
code.appendLine(chartCode.toString());
781+
if (chartCode.length > 0) {
782+
code.append(chartCode.toString());
783+
}
732784
}
733785

734786
if (userCode1 && userCode1 != '') {

0 commit comments

Comments
 (0)