Skip to content

Commit 771c893

Browse files
author
minjk-bl
committed
Seaborn - change layout #2 
1 parent aaafc56 commit 771c893

3 files changed

Lines changed: 198 additions & 161 deletions

File tree

‎css/m_visualize/seaborn.css‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@
3939
align-content: baseline;
4040
}
4141
.vp-chart-plot-box {
42+
43+
}
44+
.vp-chart-body {
4245
display: grid;
4346
grid-template-columns: calc(50% - 8px) calc(50% - 8px);
4447
grid-row-gap: 5px;
@@ -47,8 +50,7 @@
4750
align-content: center;
4851
}
4952
.vp-chart-left-box {
50-
display: grid;
51-
grid-template-rows: 30px calc(100% - 30px);
53+
5254
}
5355
.vp-chart-left-box > label {
5456
margin-bottom: 0px;
@@ -72,4 +74,9 @@
7274

7375
.vp-tab-page label {
7476
margin-bottom: 0px;
77+
}
78+
.vp-chart-setting-footer {
79+
position: absolute;
80+
left: 20px;
81+
bottom: 15px;
7582
}

‎html/m_visualize/seaborn.html‎

Lines changed: 126 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -36,140 +36,143 @@
3636
</div>
3737
</div>
3838
</div>
39-
<div class="vp-tab-bar figure" data-level="figure" style="margin-top:10px;">
40-
<div class="vp-tab-item vp-focus" data-type="1">Plot 1</div>
41-
<div class="vp-tab-item" data-type="2">Plot 2</div>
42-
<div class="vp-tab-item" data-type="3">Plot 3</div>
43-
</div>
44-
<div class="vp-tab-page-box figure vp-grid-border-box">
45-
<div class="vp-tab-page" data-type="1">
46-
<div class="vp-chart-plot-box">
47-
<!-- Chart & Data Selection & Tab option box -->
48-
<div class="vp-chart-left-box">
49-
<div class="vp-tab-bar plot" data-level="plot">
50-
<div class="vp-tab-item vp-focus" data-type="data">Data</div>
51-
<div class="vp-tab-item" data-type="info">Info</div>
52-
<div class="vp-tab-item" data-type="style">Style</div>
53-
<div class="vp-tab-item" data-type="setting">Setting</div>
54-
</div>
55-
<div class="vp-tab-page-box plot vp-grid-border-box vp-scrollbar">
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>
39+
<div class="vp-chart-body" style="margin-top:10px;">
40+
<div class="vp-chart-left-box">
41+
<div class="vp-tab-bar figure" data-level="figure">
42+
<div class="vp-tab-item vp-focus" data-type="1">Plot 1</div>
43+
<div class="vp-tab-item" data-type="2">Plot 2</div>
44+
<div class="vp-tab-item" data-type="3">Plot 3</div>
45+
</div>
46+
<div class="vp-tab-page-box figure vp-grid-border-box">
47+
<div class="vp-tab-page" data-type="1">
48+
<div class="vp-chart-plot-box">
49+
<!-- Chart & Data Selection & Tab option box -->
50+
<div class="vp-tab-bar plot" data-level="plot">
51+
<div class="vp-tab-item vp-focus" data-type="data">Data</div>
52+
<div class="vp-tab-item" data-type="info">Info</div>
53+
<div class="vp-tab-item" data-type="style">Style</div>
54+
<div class="vp-tab-item" data-type="setting">Setting</div>
6855
</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-
56+
<div class="vp-tab-page-box plot vp-grid-border-box vp-scrollbar">
57+
<div class="vp-tab-page vp-grid-box" data-type="data">
58+
<div class="vp-italic">
59+
<span class="vp-orange-text">NOTE: </span>Options selected from this tab only apply to subplot 1.
60+
</div>
61+
<label for="chartType" class="vp-bold vp-orange-text">Chart Type</label>
62+
<select id="chartType" class="vp-select vp-state wp100">
63+
7464
</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-
65+
<label for="data" class="vp-bold">Data</label>
66+
<div class="vp-grid-col-p50">
67+
<input type="text" id="data" class="vp-input vp-state"/>
68+
<label><input type="checkbox" id="useData" class="vp-state" checked><span>Use data</span></label>
69+
</div>
70+
<div class="vp-grid-col-p50">
71+
<div>
72+
<label for="x" class="vp-bold">X-axis Value</label>
73+
<select id="x" class="vp-select vp-state">
74+
75+
</select>
76+
</div>
77+
<div>
78+
<label for="y" class="vp-bold">Y-axis Value</label>
79+
<select id="y" class="vp-select vp-state">
80+
81+
</select>
82+
</div>
83+
</div>
84+
<label for="hue" class="vp-bold">Hue</label>
85+
<select id="hue" class="vp-select vp-state wp100">
86+
8087
</select>
8188
</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>
90-
<input type="text" id="title" class="vp-input vp-state wp100" placeholder="Title for the chart" />
91-
<div class="vp-grid-col-p50">
92-
<div>
93-
<label for="x_label" class="vp-bold">X Label</label>
94-
<input type="text" id="x_label" class="vp-input vp-state" placeholder="Type X Label" />
89+
<div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
90+
<label for="title" class="vp-bold">Title</label>
91+
<input type="text" id="title" class="vp-input vp-state wp100" placeholder="Title for the chart" />
92+
<div class="vp-grid-col-p50">
93+
<div>
94+
<label for="x_label" class="vp-bold">X Label</label>
95+
<input type="text" id="x_label" class="vp-input vp-state" placeholder="Type X Label" />
96+
</div>
97+
<div>
98+
<label for="y_label" class="vp-bold">Y Label</label>
99+
<input type="text" id="y_label" class="vp-input vp-state" placeholder="Type Y Label" />
100+
</div>
101+
</div>
102+
103+
<label for="useLegend" class="vp-bold">Legend</label>
104+
<div class="vp-grid-col-p50">
105+
<select id="useLegend" class="vp-select vp-state">
106+
<option value="False">False</option>
107+
<option value="True">True</option>
108+
</select>
109+
<select id="legendPos" class="vp-select vp-state">
110+
<!-- Legend Position FIXME: -->
111+
112+
</select>
113+
</div>
95114
</div>
96-
<div>
97-
<label for="y_label" class="vp-bold">Y Label</label>
98-
<input type="text" id="y_label" class="vp-input vp-state" placeholder="Type Y Label" />
115+
<div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
116+
<!-- STYLE: grid / marker / color -->
117+
<div class="vp-italic">
118+
<span class="vp-orange-text">STYLE: </span> grid / marker / color
119+
</div>
120+
<label for="useGrid" class="vp-bold">Grid</label>
121+
<select id="useGrid" class="vp-select vp-state">
122+
<option value="False">False</option>
123+
<option value="True">True</option>
124+
</select>
125+
<label for="useMarker" class="vp-bold">Marker</label>
126+
<div class="vp-grid-col-p50">
127+
<select id="useMarker" class="vp-select vp-state">
128+
<option value="False">False</option>
129+
<option value="True">True</option>
130+
</select>
131+
<select id="markerStyle" class="vp-select vp-state">
132+
<!-- TODO: -->
133+
<option></option>
134+
</select>
135+
</div>
136+
</div>
137+
<div class="vp-tab-page vp-grid-col-95" data-type="setting" style="display: none;">
138+
<!-- SETTING : axis limit / tick interval / rotate tick labels ... -->
139+
<label for="x_limit_from" class="vp-bold">X Limit</label>
140+
<div class="vp-grid-col-p50">
141+
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
142+
<input type="text" id="x_limit_to" class="vp-input m vp-state" placeholder="To" />
143+
</div>
144+
<label for="y_limit_from" class="vp-bold">Y Limit</label>
145+
<div class="vp-grid-col-p50">
146+
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
147+
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
148+
</div>
99149
</div>
100150
</div>
101-
102-
<label for="useLegend" class="vp-bold">Legend</label>
103-
<div class="vp-grid-col-p50">
104-
<select id="useLegend" class="vp-select vp-state">
105-
<option value="False">False</option>
106-
<option value="True">True</option>
107-
</select>
108-
<select id="legendPos" class="vp-select vp-state">
109-
<!-- Legend Position FIXME: -->
110-
111-
</select>
112-
</div>
113-
</div>
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>
135-
</div>
136-
<div class="vp-tab-page vp-grid-col-95" data-type="setting" style="display: none;">
137-
<!-- SETTING : axis limit / tick interval / rotate tick labels ... -->
138-
<label for="x_limit_from" class="vp-bold">X Limit</label>
139-
<div class="vp-grid-col-p50">
140-
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
141-
<input type="text" id="x_limit_to" class="vp-input m vp-state" placeholder="To" />
142-
</div>
143-
<label for="y_limit_from" class="vp-bold">Y Limit</label>
144-
<div class="vp-grid-col-p50">
145-
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
146-
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
147-
</div>
148-
</div>
149151
</div>
150152
</div>
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>
153+
</div>
154+
</div>
155+
<div class="vp-chart-right-box">
156+
<div class="vp-bold">
157+
<span class="vp-chart-preview-title">Chart Preview</span>
158+
<span class="vp-chart-preview-option vp-no-selection">
159+
<label><input type="checkbox" id="useSampling" class="vp-state" checked><span>Sampling</span></label>
160+
<select id="sampleCount" class="vp-select s vp-state">
161+
162+
</select>
163+
<label style="margin-left:10px;"><input type="checkbox" id="autoRefresh" class="vp-state" checked><span>Auto Refresh</span></label>
164+
<span id="previewRefresh" class="vp-cursor">
165+
<img src="/nbextensions/visualpython/img/refresh.svg"/>
166+
</span>
167+
</span>
168+
</div>
169+
<div class="vp-chart-preview-box vp-grid-border-box">
170+
<span></span>
171+
<div id="chartPreview" class="vp-center">
172+
171173
</div>
172174
</div>
173175
</div>
174176
</div>
177+
175178
</body>

0 commit comments

Comments
 (0)