Skip to content

Commit 83aa7fa

Browse files
author
minjk-bl
committed
Seaborn - control preview size using range
1 parent 94a2ad9 commit 83aa7fa

4 files changed

Lines changed: 27 additions & 10 deletions

File tree

‎css/m_visualize/seaborn.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
grid-column-gap: 15px;
4949
align-items: baseline;
5050
align-content: center;
51+
height: 100%;
5152
}
5253
.vp-chart-left-box {
5354

‎css/root.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,9 @@ hr.vp-extra-menu-line {
336336
width: 10px !important;
337337
}
338338
/* temporary margin */
339+
.mt5 {
340+
margin-top: 5px;
341+
}
339342
.mb5 {
340343
margin-bottom: 5px;
341344
}

‎html/m_visualize/seaborn.html‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<body>
2-
<!-- Creating Subplots -->
3-
<div>
2+
<!-- Creating Subplots : Hide for next version -->
3+
<!-- <div>
44
<div>
55
<label class="vp-bold">
66
Creating Subplots
@@ -35,13 +35,14 @@
3535
</div>
3636
</div>
3737
</div>
38-
</div>
38+
</div> -->
3939
<div class="vp-chart-body" style="margin-top:10px;">
4040
<div class="vp-chart-left-box">
4141
<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>
42+
<div class="vp-tab-item vp-focus" data-type="1">Plot</div>
43+
<!-- Hide for next version -->
44+
<!-- <div class="vp-tab-item" data-type="2">Plot 2</div>
45+
<div class="vp-tab-item" data-type="3">Plot 3</div> -->
4546
</div>
4647
<div class="vp-tab-page-box figure vp-grid-border-box">
4748
<div class="vp-tab-page" data-type="1">
@@ -68,21 +69,21 @@
6869
<label><input type="checkbox" id="useData" class="vp-state" checked><span>Use data</span></label>
6970
</div>
7071
<div class="vp-grid-col-p50">
71-
<div>
72+
<div class="vp-grid-box">
7273
<label for="x" class="vp-bold">X-axis Value</label>
7374
<select id="x" class="vp-select vp-state">
7475

7576
</select>
7677
</div>
77-
<div>
78+
<div class="vp-grid-box">
7879
<label for="y" class="vp-bold">Y-axis Value</label>
7980
<select id="y" class="vp-select vp-state">
8081

8182
</select>
8283
</div>
8384
</div>
8485
<label for="hue" class="vp-bold">Hue</label>
85-
<select id="hue" class="vp-select vp-state wp100">
86+
<select id="hue" class="vp-select vp-state">
8687

8788
</select>
8889
</div>
@@ -172,6 +173,10 @@
172173

173174
</div>
174175
</div>
176+
<div class="vp-chart-preview-size-box vp-grid-col-95 mt5">
177+
<label>Preview Size</label>
178+
<input type="range" id="previewSize" max="5" min="-5" value="0"/>
179+
</div>
175180
</div>
176181
</div>
177182

‎js/m_visualize/Seaborn.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,11 @@ define([
153153
that.loadPreview();
154154
}
155155
});
156+
157+
// set preview size
158+
$(this.wrapSelector('#previewSize')).on('change', function() {
159+
that.loadPreview();
160+
});
156161

157162
}
158163

@@ -434,7 +439,10 @@ define([
434439
let convertedData = data;
435440
if (preview && data != '') {
436441
// set figure size for preview chart
437-
code.appendLine('plt.figure(figsize=(6, 5))');
442+
let defaultWidth = 5;
443+
let defaultHeight = 4;
444+
let previewSize = parseInt($(this.wrapSelector('#previewSize')).val());
445+
code.appendFormatLine('plt.figure(figsize=({0}, {1}))', defaultWidth + previewSize, defaultHeight + previewSize);
438446
if (useSampling) {
439447
// data sampling code for preview
440448
convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';

0 commit comments

Comments
 (0)