Seaborn - control preview size using range

minjk-bl · minjk-bl · commit 83aa7fae80c9 · 2022-04-24T05:34:23.000+09:00
diff --git a/css/m_visualize/seaborn.css b/css/m_visualize/seaborn.css
@@ -48,6 +48,7 @@
     grid-column-gap: 15px;
     align-items: baseline;
     align-content: center;
+    height: 100%;
 }
 .vp-chart-left-box {
 
diff --git a/css/root.css b/css/root.css
@@ -336,6 +336,9 @@ hr.vp-extra-menu-line {
     width: 10px !important;
 }
 /* temporary margin */
+.mt5 {
+    margin-top: 5px;
+}
 .mb5 {
     margin-bottom: 5px;
 }
diff --git a/html/m_visualize/seaborn.html b/html/m_visualize/seaborn.html
@@ -1,6 +1,6 @@
 <body>
-    <!-- Creating Subplots -->
-    <div>
+    <!-- Creating Subplots : Hide for next version -->
+    <!-- <div>
         <div>
             <label class="vp-bold">
                 Creating Subplots
@@ -35,13 +35,14 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div> -->
     <div class="vp-chart-body" style="margin-top:10px;">
         <div class="vp-chart-left-box">
             <div class="vp-tab-bar figure" data-level="figure">
-                <div class="vp-tab-item vp-focus" data-type="1">Plot 1</div>
-                <div class="vp-tab-item" data-type="2">Plot 2</div>
-                <div class="vp-tab-item" data-type="3">Plot 3</div>
+                <div class="vp-tab-item vp-focus" data-type="1">Plot</div>
+                <!-- Hide for next version -->
+                <!-- <div class="vp-tab-item" data-type="2">Plot 2</div>
+                <div class="vp-tab-item" data-type="3">Plot 3</div> -->
             </div>
             <div class="vp-tab-page-box figure vp-grid-border-box">
                 <div class="vp-tab-page" data-type="1">
@@ -68,21 +69,21 @@
                                         <label><input type="checkbox" id="useData" class="vp-state" checked><span>Use data</span></label>
                                     </div>
                                     <div class="vp-grid-col-p50">
-                                        <div>
+                                        <div class="vp-grid-box">
                                             <label for="x" class="vp-bold">X-axis Value</label>
                                             <select id="x" class="vp-select vp-state">
                     
                                             </select>
                                         </div>
-                                        <div>
+                                        <div class="vp-grid-box">
                                             <label for="y" class="vp-bold">Y-axis Value</label>
                                             <select id="y" class="vp-select vp-state">
                     
                                             </select>
                                         </div>
                                     </div>
                                     <label for="hue" class="vp-bold">Hue</label>
-                                    <select id="hue" class="vp-select vp-state wp100">
+                                    <select id="hue" class="vp-select vp-state">
                 
                                     </select>
                                 </div>
@@ -172,6 +173,10 @@
     
                 </div>
             </div>
+            <div class="vp-chart-preview-size-box vp-grid-col-95 mt5">
+                <label>Preview Size</label>
+                <input type="range" id="previewSize" max="5" min="-5" value="0"/>
+            </div>
         </div>
     </div>
     
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
@@ -153,6 +153,11 @@ define([
                     that.loadPreview();
                 }
             });
+            
+            // set preview size
+            $(this.wrapSelector('#previewSize')).on('change', function() {
+                that.loadPreview();
+            });
 
         }
 
@@ -434,7 +439,10 @@ define([
             let convertedData = data;
             if (preview && data != '') {
                 // set figure size for preview chart
-                code.appendLine('plt.figure(figsize=(6, 5))');
+                let defaultWidth = 5;
+                let defaultHeight = 4;
+                let previewSize = parseInt($(this.wrapSelector('#previewSize')).val());
+                code.appendFormatLine('plt.figure(figsize=({0}, {1}))', defaultWidth + previewSize, defaultHeight + previewSize);
                 if (useSampling) {
                     // data sampling code for preview
                     convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@`
`48`	`48`	`grid-column-gap: 15px;`
`49`	`49`	`align-items: baseline;`
`50`	`50`	`align-content: center;`
	`51`	`+ height: 100%;`
`51`	`52`	`}`
`52`	`53`	`.vp-chart-left-box {`
`53`	`54`
Original file line number	Diff line number	Diff line change
`@@ -336,6 +336,9 @@ hr.vp-extra-menu-line {`
`336`	`336`	`width: 10px !important;`
`337`	`337`	`}`
`338`	`338`	`/* temporary margin */`
	`339`	`+.mt5 {`
	`340`	`+ margin-top: 5px;`
	`341`	`+}`
`339`	`342`	`.mb5 {`
`340`	`343`	`margin-bottom: 5px;`
`341`	`344`	`}`