Skip to content

Commit db08d21

Browse files
author
minjk-bl
committed
Temporary Seaborn
1 parent 815cca8 commit db08d21

File tree

3 files changed

+225
-88
lines changed

3 files changed

+225
-88
lines changed

‎css/m_visualize/seaborn.css

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
padding-right: 5px;
55
cursor: pointer;
66
}
7+
.vp-create-subplot-btn {
8+
float: right;
9+
}
710
.vp-tab-bar {
811
width: 100%;
912
overflow-y: hidden;
@@ -29,15 +32,38 @@
2932
}
3033
.vp-tab-page {
3134
width: 100%;
32-
height: 180px;
3335
}
34-
36+
.vp-tab-page-box.plot {
37+
height: calc(100% - 30px);
38+
align-content: baseline;
39+
}
40+
.vp-chart-plot-box {
41+
display: grid;
42+
grid-template-columns: calc(50% - 8px) calc(50% - 8px);
43+
grid-row-gap: 5px;
44+
grid-column-gap: 15px;
45+
align-items: baseline;
46+
align-content: center;
47+
}
48+
.vp-chart-left-box {
49+
display: grid;
50+
grid-row-gap: 3px;
51+
}
52+
.vp-chart-left-box > label {
53+
margin-bottom: 0px;
54+
}
3555
.vp-chart-left-box,
3656
.vp-chart-right-box {
37-
padding: 3px;
38-
height: 250px;
57+
height: 100%;
58+
}
59+
.vp-chart-preview-title {
60+
line-height: 30px;
61+
}
62+
.vp-chart-preview-option {
63+
float: right;
64+
padding-right: 5px;
3965
}
40-
4166
.vp-chart-preview-box {
4267
min-height: 150px;
68+
width: 100%;
4369
}

‎html/m_visualize/seaborn.html

Lines changed: 132 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,148 @@
11
<body>
2-
<div class="vp-grid-col-p50" style="height:270px;">
3-
<!-- Chart & Data Selection Box-->
4-
<div class="vp-chart-left-box">
5-
<div class="vp-bold">
6-
Chart Type
7-
<span id="chartSetting" class="vp-chart-setting vp-no-selection">
8-
<i class="fa fa-gear"></i> Setting
9-
</span>
10-
</div>
11-
<div class="vp-grid-border-box vp-grid-col-95">
12-
<label for="chartType" class="vp-orange-text">Type of Chart</label>
13-
<select id="chartType" class="vp-select vp-state">
14-
15-
</select>
2+
<!-- Creating Subplots -->
3+
<div>
4+
<div>
5+
<label class="vp-bold">
6+
Creating Subplots
7+
<input type="checkbox" class="vp-state" id="createSubplots"/>
8+
<span style="height: 15px;"></span>
9+
</label>
10+
<span id="chartSetting" class="vp-chart-setting vp-no-selection">
11+
<i class="fa fa-gear"></i> Setting
12+
</span>
13+
</div>
14+
<div id="subplotBox" class="vp-grid-border-box vp-grid-col-p50" style="display: none;">
15+
<div class="vp-grid-col-p50">
16+
<div>
17+
<label class="vp-bold" for="figWidth">Figure Size</label><div></div>
18+
<input type="number" class="vp-input sm vp-state" id="figWidth" placeholder="Width"/>
19+
<input type="number" class="vp-input sm vp-state" id="figHeight" placeholder="Height"/>
20+
</div>
21+
<div>
22+
<label class="vp-bold vp-orange-text" for="figRow">Number of subplots</label><div></div>
23+
<input type="number" class="vp-input sm vp-state" id="figRow" placeholder="Row"/>
24+
<input type="number" class="vp-input sm vp-state" id="figColumn" placeholder="Column"/>
25+
</div>
1626
</div>
17-
<div class="vp-bold">Data Selection</div>
18-
<div class="vp-grid-border-box vp-grid-col-95">
19-
<label for="data" class="vp-orange-text">Variable</label>
20-
<input type="text" id="data" class="vp-input vp-state" />
21-
<label for="x" class="vp-orange-text">X Value</label>
22-
<select id="x" class="vp-select">
23-
24-
</select>
25-
<label for="y" class="vp-orange-text">Y Value</label>
26-
<select id="y" class="vp-select">
27-
28-
</select>
27+
<div>
28+
<div>
29+
<label class="vp-bold">Sharing axes?</label>
30+
</div>
31+
<div>
32+
<label><input type="checkbox" class="vp-state" id="shareX" checked/><span>Share X-axis</span></label>
33+
<label><input type="checkbox" class="vp-state" id="shareY" checked/><span>Share Y-axis</span></label>
34+
<button class="vp-button activated vp-create-subplot-btn" id="createSubplotsBtn">Create</button>
35+
</div>
2936
</div>
3037
</div>
31-
<!-- Tab Option Box -->
32-
<div class="vp-chart-right-box">
33-
<div class="vp-tab-bar">
34-
<div class="vp-tab-item vp-focus" data-type="info">Info</div>
35-
<div class="vp-tab-item" data-type="element">Element</div>
36-
<div class="vp-tab-item" data-type="figure">Figure</div>
37-
</div>
38-
<div class="vp-tab-page-box vp-grid-border-box vp-scrollbar">
39-
<div class="vp-tab-page vp-grid-col-95" data-type="info">
40-
<label for="title">Title</label>
41-
<input type="text" id="title" class="vp-input vp-state" placeholder="Title for the chart" />
42-
<label for="x_label">X Label</label>
43-
<input type="text" id="x_label" class="vp-input vp-state" placeholder="X Label" />
44-
<label for="y_label">Y Label</label>
45-
<input type="text" id="y_label" class="vp-input vp-state" placeholder="Y Label" />
46-
<label for="x_limit_from">X Limit</label>
47-
<div class="vp-grid-col-p50">
48-
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
49-
<input type="text" id="x_limit_to" class="vp-input m vp-state placeholder="To" />
38+
</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 Box-->
48+
<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.
5051
</div>
51-
<label for="y_limit_from">Y Limit</label>
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"/>
5258
<div class="vp-grid-col-p50">
53-
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
54-
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
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>
5571
</div>
56-
<label for="useLegend">Legend</label>
57-
<div class="vp-grid-col-p50">
58-
<select id="useLegend" class="vp-select m vp-state">
59-
<option value="False">False</option>
60-
<option value="True">True</option>
61-
</select>
62-
<select id="legendPos" class="vp-select m vp-state">
63-
<!-- Legend Position FIXME: -->
72+
<label for="hue" class="vp-bold">Hue</label>
73+
<select id="hue" class="vp-select vp-state wp100">
6474

65-
</select>
66-
</div>
75+
</select>
6776
</div>
68-
<div class="vp-tab-page vp-grid-col-95" data-type="element" style="display: none;">
69-
ELEMENT
70-
</div>
71-
<div class="vp-tab-page vp-grid-col-95" data-type="figure" style="display: none;">
72-
FIGURE
77+
<!-- Tab Option Box -->
78+
<div class="vp-chart-right-box">
79+
<div class="vp-tab-bar plot" data-level="plot">
80+
<div class="vp-tab-item vp-focus" data-type="info">Info</div>
81+
<div class="vp-tab-item" data-type="style">Style</div>
82+
<div class="vp-tab-item" data-type="setting">Setting</div>
83+
</div>
84+
<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>
87+
<input type="text" id="title" class="vp-input vp-state wp100" placeholder="Title for the chart" />
88+
<div class="vp-grid-col-p50">
89+
<div>
90+
<label for="x_label">X Label</label>
91+
<input type="text" id="x_label" class="vp-input vp-state" placeholder="Type X Label" />
92+
</div>
93+
<div>
94+
<label for="y_label">Y Label</label>
95+
<input type="text" id="y_label" class="vp-input vp-state" placeholder="Type Y Label" />
96+
</div>
97+
</div>
98+
99+
<label for="useLegend">Legend</label>
100+
<div class="vp-grid-col-p50">
101+
<select id="useLegend" class="vp-select vp-state">
102+
<option value="False">False</option>
103+
<option value="True">True</option>
104+
</select>
105+
<select id="legendPos" class="vp-select vp-state">
106+
<!-- Legend Position FIXME: -->
107+
108+
</select>
109+
</div>
110+
</div>
111+
<div class="vp-tab-page vp-grid-col-95" data-type="style" style="display: none;">
112+
STYLE : grid / marker / color
113+
</div>
114+
<div class="vp-tab-page vp-grid-col-95" data-type="setting" style="display: none;">
115+
<!-- SETTING : axis limit / tick interval / rotate tick labels ... -->
116+
<label for="x_limit_from">X Limit</label>
117+
<div class="vp-grid-col-p50">
118+
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
119+
<input type="text" id="x_limit_to" class="vp-input m vp-state" placeholder="To" />
120+
</div>
121+
<label for="y_limit_from">Y Limit</label>
122+
<div class="vp-grid-col-p50">
123+
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
124+
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
125+
</div>
126+
</div>
127+
</div>
73128
</div>
74129
</div>
75130
</div>
76131
</div>
77-
<div>
78-
<div class="vp-bold">Chart Preview <button id="previewTest" class="vp-button activated">Preview Test</button></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>
79146
<div class="vp-chart-preview-box vp-grid-border-box">
80147
<span></span>
81148
<div id="chartPreview" class="vp-center">

0 commit comments

Comments
 (0)