Skip to content

Commit aaafc56

Browse files
author
minjk-bl
committed
Seaborn - change layout #1 
1 parent 263ec67 commit aaafc56

File tree

3 files changed

+94
-66
lines changed

3 files changed

+94
-66
lines changed

‎css/m_visualize/seaborn.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
width: 100%;
3535
}
3636
.vp-tab-page-box.plot {
37-
height: calc(100% - 30px);
37+
/* height: calc(100% - 30px); */
38+
min-height: 310px;
3839
align-content: baseline;
3940
}
4041
.vp-chart-plot-box {
@@ -47,7 +48,7 @@
4748
}
4849
.vp-chart-left-box {
4950
display: grid;
50-
grid-row-gap: 3px;
51+
grid-template-rows: 30px calc(100% - 30px);
5152
}
5253
.vp-chart-left-box > label {
5354
margin-bottom: 0px;
@@ -66,4 +67,9 @@
6667
.vp-chart-preview-box {
6768
min-height: 150px;
6869
width: 100%;
70+
height: calc(100% - 30px);
71+
}
72+
73+
.vp-tab-page label {
74+
margin-bottom: 0px;
6975
}

‎html/m_visualize/seaborn.html

Lines changed: 84 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -44,59 +44,62 @@
4444
<div class="vp-tab-page-box figure vp-grid-border-box">
4545
<div class="vp-tab-page" data-type="1">
4646
<div class="vp-chart-plot-box">
47-
<!-- Chart & Data Selection Box-->
47+
<!-- Chart & Data Selection & Tab option box -->
4848
<div class="vp-chart-left-box">
49-
<div class="vp-italic">
50-
<span class="vp-orange-text">NOTE: </span>Options selected from this tab only apply to subplot 1.
51-
</div>
52-
<label for="chartType" class="vp-bold vp-orange-text">Chart Type</label>
53-
<select id="chartType" class="vp-select vp-state wp100">
54-
55-
</select>
56-
<label for="data" class="vp-bold vp-orange-text">Variable</label>
57-
<input type="text" id="data" class="vp-input vp-state"/>
58-
<div class="vp-grid-col-p50">
59-
<div>
60-
<label for="x" class="vp-bold vp-orange-text">X-axis Value</label>
61-
<select id="x" class="vp-select vp-state">
62-
63-
</select>
64-
</div>
65-
<div>
66-
<label for="y" class="vp-bold">Y-axis Value</label>
67-
<select id="y" class="vp-select vp-state">
68-
69-
</select>
70-
</div>
71-
</div>
72-
<label for="hue" class="vp-bold">Hue</label>
73-
<select id="hue" class="vp-select vp-state wp100">
74-
75-
</select>
76-
</div>
77-
<!-- Tab Option Box -->
78-
<div class="vp-chart-right-box">
7949
<div class="vp-tab-bar plot" data-level="plot">
80-
<div class="vp-tab-item vp-focus" data-type="info">Info</div>
50+
<div class="vp-tab-item vp-focus" data-type="data">Data</div>
51+
<div class="vp-tab-item" data-type="info">Info</div>
8152
<div class="vp-tab-item" data-type="style">Style</div>
8253
<div class="vp-tab-item" data-type="setting">Setting</div>
8354
</div>
8455
<div class="vp-tab-page-box plot vp-grid-border-box vp-scrollbar">
85-
<div class="vp-tab-page vp-grid-box" data-type="info">
86-
<label for="title">Title</label>
56+
<div class="vp-tab-page vp-grid-box" data-type="data">
57+
<div class="vp-italic">
58+
<span class="vp-orange-text">NOTE: </span>Options selected from this tab only apply to subplot 1.
59+
</div>
60+
<label for="chartType" class="vp-bold vp-orange-text">Chart Type</label>
61+
<select id="chartType" class="vp-select vp-state wp100">
62+
63+
</select>
64+
<label for="data" class="vp-bold">Data</label>
65+
<div class="vp-grid-col-p50">
66+
<input type="text" id="data" class="vp-input vp-state"/>
67+
<label><input type="checkbox" id="useData" class="vp-state" checked><span>Use data</span></label>
68+
</div>
69+
<div class="vp-grid-col-p50">
70+
<div>
71+
<label for="x" class="vp-bold">X-axis Value</label>
72+
<select id="x" class="vp-select vp-state">
73+
74+
</select>
75+
</div>
76+
<div>
77+
<label for="y" class="vp-bold">Y-axis Value</label>
78+
<select id="y" class="vp-select vp-state">
79+
80+
</select>
81+
</div>
82+
</div>
83+
<label for="hue" class="vp-bold">Hue</label>
84+
<select id="hue" class="vp-select vp-state wp100">
85+
86+
</select>
87+
</div>
88+
<div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
89+
<label for="title" class="vp-bold">Title</label>
8790
<input type="text" id="title" class="vp-input vp-state wp100" placeholder="Title for the chart" />
8891
<div class="vp-grid-col-p50">
8992
<div>
90-
<label for="x_label">X Label</label>
93+
<label for="x_label" class="vp-bold">X Label</label>
9194
<input type="text" id="x_label" class="vp-input vp-state" placeholder="Type X Label" />
9295
</div>
9396
<div>
94-
<label for="y_label">Y Label</label>
97+
<label for="y_label" class="vp-bold">Y Label</label>
9598
<input type="text" id="y_label" class="vp-input vp-state" placeholder="Type Y Label" />
9699
</div>
97100
</div>
98101

99-
<label for="useLegend">Legend</label>
102+
<label for="useLegend" class="vp-bold">Legend</label>
100103
<div class="vp-grid-col-p50">
101104
<select id="useLegend" class="vp-select vp-state">
102105
<option value="False">False</option>
@@ -108,45 +111,64 @@
108111
</select>
109112
</div>
110113
</div>
111-
<div class="vp-tab-page vp-grid-col-95" data-type="style" style="display: none;">
112-
STYLE : grid / marker / color
114+
<div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
115+
<!-- STYLE: grid / marker / color -->
116+
<div class="vp-italic">
117+
<span class="vp-orange-text">STYLE: </span> grid / marker / color
118+
</div>
119+
<label for="useGrid" class="vp-bold">Grid</label>
120+
<select id="useGrid" class="vp-select vp-state">
121+
<option value="False">False</option>
122+
<option value="True">True</option>
123+
</select>
124+
<label for="useMarker" class="vp-bold">Marker</label>
125+
<div class="vp-grid-col-p50">
126+
<select id="useMarker" class="vp-select vp-state">
127+
<option value="False">False</option>
128+
<option value="True">True</option>
129+
</select>
130+
<select id="markerStyle" class="vp-select vp-state">
131+
<!-- TODO: -->
132+
<option></option>
133+
</select>
134+
</div>
113135
</div>
114136
<div class="vp-tab-page vp-grid-col-95" data-type="setting" style="display: none;">
115137
<!-- SETTING : axis limit / tick interval / rotate tick labels ... -->
116-
<label for="x_limit_from">X Limit</label>
138+
<label for="x_limit_from" class="vp-bold">X Limit</label>
117139
<div class="vp-grid-col-p50">
118140
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
119141
<input type="text" id="x_limit_to" class="vp-input m vp-state" placeholder="To" />
120142
</div>
121-
<label for="y_limit_from">Y Limit</label>
143+
<label for="y_limit_from" class="vp-bold">Y Limit</label>
122144
<div class="vp-grid-col-p50">
123145
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
124146
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
125147
</div>
126148
</div>
127149
</div>
128150
</div>
129-
</div>
130-
</div>
131-
</div>
132-
<div style="margin-top:10px;">
133-
<div class="vp-bold">
134-
<span class="vp-chart-preview-title">Chart Preview</span>
135-
<span class="vp-chart-preview-option vp-no-selection">
136-
<label><input type="checkbox" id="useSampling" class="vp-state" checked><span>Sampling</span></label>
137-
<select id="sampleCount" class="vp-select s vp-state">
138-
139-
</select>
140-
<label><input type="checkbox" id="autoRefresh" class="vp-state" checked><span>Auto Refresh</span></label>
141-
<span id="previewRefresh" class="vp-cursor">
142-
<img src="/nbextensions/visualpython/img/refresh.svg"/>
143-
</span>
144-
</span>
145-
</div>
146-
<div class="vp-chart-preview-box vp-grid-border-box">
147-
<span></span>
148-
<div id="chartPreview" class="vp-center">
149-
151+
<div class="vp-chart-right-box">
152+
<div class="vp-bold">
153+
<span class="vp-chart-preview-title">Chart Preview</span>
154+
<span class="vp-chart-preview-option vp-no-selection">
155+
<label><input type="checkbox" id="useSampling" class="vp-state" checked><span>Sampling</span></label>
156+
<select id="sampleCount" class="vp-select s vp-state">
157+
158+
</select>
159+
<label><input type="checkbox" id="autoRefresh" class="vp-state" checked><span>Auto Refresh</span></label>
160+
<span id="previewRefresh" class="vp-cursor">
161+
<img src="/nbextensions/visualpython/img/refresh.svg"/>
162+
</span>
163+
</span>
164+
</div>
165+
<div class="vp-chart-preview-box vp-grid-border-box">
166+
<span></span>
167+
<div id="chartPreview" class="vp-center">
168+
169+
</div>
170+
</div>
171+
</div>
150172
</div>
151173
</div>
152174
</div>

‎js/m_visualize/Seaborn.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ define([
2929
super._init();
3030

3131
this.config.dataview = false;
32-
this.config.sizeLevel = 3;
32+
this.config.size = { width: 900, height: 550 };
3333

3434
this.state = {
3535
chartType: 'scatterplot',
@@ -88,7 +88,7 @@ define([
8888
// change tab
8989
$(this.wrapSelector('.vp-tab-item')).on('click', function() {
9090
let level = $(this).parent().data('level');
91-
let type = $(this).data('type'); // info / element / figure
91+
let type = $(this).data('type'); // data / info / element / figure
9292

9393
$(that.wrapSelector(com_util.formatString('.vp-tab-bar.{0} .vp-tab-item', level))).removeClass('vp-focus');
9494
$(this).addClass('vp-focus');

0 commit comments

Comments
 (0)