Apps > Chart - add method to x,y,z data value selection

minjk-bl · minjk-bl · commit e0fec5a0f38b · 2022-01-21T12:49:39.000+09:00
diff --git a/css/m_apps/chart.css b/css/m_apps/chart.css
@@ -235,8 +235,7 @@
 }
 .vp-var-view-box table.vp-option-table.vp-var-view-list,
 .vp-var-view-box table.vp-option-table.vp-var-view-detail {
-    margin-left: 10px;
-    margin-top: 7px;
+    padding: 5px;
 }
 .vp-var-view-box .vp-var-view-list tbody tr:hover {
     background: #C4C4C4;
@@ -247,19 +246,17 @@
     color:  var(--font-hightlight);
 }
 .vp-var-view-box .var-view-footer {
-    padding-left: 10px;
-    padding-bottom: 7px;
+    margin-top: 7px;
 }
 .vp-var-view-box .var-view-footer input[type="text"] {
-    width: 200px;
+    width: 210px;
 }
 
 /* Column Selector */
 .vp-column-select,
 .vp-method-select {
     border: 0.25px solid #C4C4C4;
     overflow-y: auto;
-    width: 250px;
     height: 100px;
 }
 .vp-column-select-item,
@@ -278,8 +275,4 @@
 .vp-select-data {
     width: 80px;
     height: 30px;
-    background: #F5F5F5;
-    border: 0.25px solid #C4C4C4;
-    box-sizing: border-box;
-    border-radius: 2px;
 }
diff --git a/css/popupComponent.css b/css/popupComponent.css
@@ -270,7 +270,6 @@
     font-size: 13px;
     line-height: 16px;
     height: 30px;
-    margin-bottom: 5px;
     padding: 3px 7px;
     color: var(--font-primary);
     background: #FFFFFF;
diff --git a/css/root.css b/css/root.css
@@ -142,6 +142,7 @@ body {
     box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%);
     border-radius: 2px;
     line-height: 30px;
+    vertical-align: middle;
     font-family: 'AppleSDGothicNeo';
     font-size: 14px;
     text-align: center;
diff --git a/html/m_apps/chart.html b/html/m_apps/chart.html
@@ -4,7 +4,7 @@
         <div id="vp_varViewBox" class="vp-var-view-box vp-close-on-blur">
             <div class="vp-icon-btn vp-close-view"><img src="/nbextensions/visualpython/img/close_big.svg"/></div>
             <div class="vp-var-view-div">
-                <table id="vp_varViewList" class="vp-option-table vp-var-view-list no-selection">
+                <table id="vp_varViewList" class="vp-option-table vp-var-view-list no-selection wp100">
                     <colgroup><col width="40%"/><col width="*"/></colgroup>
                     <thead>
                         <tr><th>Variable</th><th>Data Type</th></tr>
@@ -17,19 +17,26 @@
             </div>
             <hr style="margin: 0px;"/>
             <div id="vp_varViewDetail">   
-                <table class="vp-option-table vp-var-view-detail no-selection">
+                <table class="vp-option-table vp-var-view-detail no-selection wp100">
                     <colgroup>
-                        <col width="*"/>
+                        <col width="50%"/>
+                        <col width="50%"/>
                     </colgroup>
                     <thead>
                         <tr>
                             <th>Column</th>
+                            <th>Method</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>
-                                <div id="vp_varDetailColList" class="vp-column-select">
+                                <div id="vp_varDetailColList" class="vp-column-select vp-scrollbar">
+                                    
+                                </div>
+                            </td>
+                            <td>
+                                <div id="vp_varDetailArray" class="vp-method-select vp-scrollbar">
                                     
                                 </div>
                             </td>
@@ -39,7 +46,7 @@
             </div>
             <div class="var-view-footer">
                 <input id="vp_varSelectCode" type="text" class="vp-input" readonly/>
-                <input id="vp_varSelectBtn" type="button" value="select"/>
+                <input id="vp_varSelectBtn" type="button" class="vp-button w50" value="select"/>
             </div>
         </div>
         <!-- Import option -->
diff --git a/js/m_apps/Chart.js b/js/m_apps/Chart.js
@@ -485,7 +485,6 @@ define([
                     if (varType == 'DataFrame') {
                         if (varResult.length > 0) {
                             varResult.forEach(v => {
-                                // var option = $(`<option value="${v.colName}" data-dtype="${v.dtype}" data-array="${v.array}">${v.colName}</option>`)
                                 var option = $(`<div class="vp-column-select-item" 
                                                 data-dtype="${v.dtype}" data-array="${v.array}" data-col="${v.colName}" title="${v.array}">
                                                     ${v.colName}</div>`);
@@ -551,7 +550,7 @@ define([
                 // allow multi select
                 var methodArrayCode = new com_String();
                 var methodList;
-                // 선택된 항목들 중 categorical variable 존재하면 categorical로 분류
+                // if categorical variable exists, set as categorical
                 var hasObject = false;
                 var selectedColumnList = $(that.wrapSelector('#vp_varDetailColList .vp-column-select-item.selected'));
                 if (selectedColumnList.length > 0) {

Original file line number	Diff line number	Diff line change
`@@ -235,8 +235,7 @@`
`235`	`235`	`}`
`236`	`236`	`.vp-var-view-box table.vp-option-table.vp-var-view-list,`
`237`	`237`	`.vp-var-view-box table.vp-option-table.vp-var-view-detail {`
`238`		`- margin-left: 10px;`
`239`		`- margin-top: 7px;`
	`238`	`+ padding: 5px;`
`240`	`239`	`}`
`241`	`240`	`.vp-var-view-box .vp-var-view-list tbody tr:hover {`
`242`	`241`	`background: #C4C4C4;`
`@@ -247,19 +246,17 @@`
`247`	`246`	`color: var(--font-hightlight);`
`248`	`247`	`}`
`249`	`248`	`.vp-var-view-box .var-view-footer {`
`250`		`- padding-left: 10px;`
`251`		`- padding-bottom: 7px;`
	`249`	`+ margin-top: 7px;`
`252`	`250`	`}`
`253`	`251`	`.vp-var-view-box .var-view-footer input[type="text"] {`
`254`		`- width: 200px;`
	`252`	`+ width: 210px;`
`255`	`253`	`}`
`256`	`254`
`257`	`255`	`/* Column Selector */`
`258`	`256`	`.vp-column-select,`
`259`	`257`	`.vp-method-select {`
`260`	`258`	`border: 0.25px solid #C4C4C4;`
`261`	`259`	`overflow-y: auto;`
`262`		`- width: 250px;`
`263`	`260`	`height: 100px;`
`264`	`261`	`}`
`265`	`262`	`.vp-column-select-item,`
`@@ -278,8 +275,4 @@`
`278`	`275`	`.vp-select-data {`
`279`	`276`	`width: 80px;`
`280`	`277`	`height: 30px;`
`281`		`- background: #F5F5F5;`
`282`		`- border: 0.25px solid #C4C4C4;`
`283`		`- box-sizing: border-box;`
`284`		`- border-radius: 2px;`
`285`	`278`	`}`