Skip to content

Commit f8e8d2b

Browse files
author
minjk-bl
committed
Add ML > DataSplit
1 parent a21e473 commit f8e8d2b

File tree

5 files changed

+154
-19
lines changed

5 files changed

+154
-19
lines changed

‎css/m_ml/dataSplit.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.vp-ds-grid-box {
2+
display: grid;
3+
width: 100%;
4+
height: 100%;
5+
grid-row-gap: 5px;
6+
grid-template-rows: 60px 140px auto;
7+
}

‎css/popupComponent.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,8 @@
265265
box-sizing: border-box;
266266
}
267267
/* popup frame input, select */
268-
.vp-popup-frame input[type=text] {
268+
.vp-popup-frame input[type=text],
269+
.vp-popup-frame input[type=number] {
269270
width: 160px;
270271
font-size: 13px;
271272
line-height: 16px;
@@ -277,7 +278,8 @@
277278
border: 0.25px solid var(--border-gray-color);
278279
box-sizing: border-box;
279280
}
280-
.vp-popup-frame input[type=text]::placeholder {
281+
.vp-popup-frame input[type=text]::placeholder,
282+
.vp-popup-frame input[type=number]::placeholder {
281283
color: var(--gray-color);
282284
}
283285

‎css/root.css

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,35 @@ hr.vp-extra-menu-line {
325325
.mr5 {
326326
margin-right: 5px;
327327
}
328-
/* table style */
328+
/* Layout */
329+
/* Grid style */
330+
.vp-grid-box {
331+
display: grid;
332+
}
333+
.vp-grid-border-box {
334+
display: grid;
335+
align-items: baseline;
336+
align-content: center;
337+
border: 1px solid var(--border-gray-color);
338+
border-radius: 5px;
339+
box-sizing: border-box;
340+
padding: 15px;
341+
}
342+
.vp-grid-col-p50 {
343+
display: grid;
344+
grid-template-columns: 50% 50%;
345+
grid-row-gap: 3px;
346+
align-items: baseline;
347+
align-content: center;
348+
}
349+
.vp-grid-col-95 {
350+
display: grid;
351+
grid-template-columns: 95px auto;
352+
grid-row-gap: 3px;
353+
align-items: baseline;
354+
align-content: space-evenly;
355+
}
356+
/* Table style */
329357
.vp-tbl-gap5 {
330358
border-spacing: 5px;
331359
border-collapse: separate;

‎html/m_ml/dataSplit.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<body>
2+
<div class="vp-ds-grid-box">
3+
<div class="vp-grid-border-box vp-grid-col-p50">
4+
<label class="vp-orange-text">Import Library</label>
5+
<button class="vp-button vp-import-btn" id="vp_importLibrary">Import</button>
6+
</div>
7+
<div class="vp-grid-border-box vp-grid-col-95">
8+
<label for="dataType" class="vp-orange-text">Data type</label>
9+
<select id="dataType" class="vp-select vp-state">
10+
<option value="with_target_value">with Target values</option>
11+
</select>
12+
<label for="featureData" class="vp-orange-text">Feature data</label>
13+
<input type="text" class="vp-input vp-state" id="featureData" placeholder="Select feature data"/>
14+
<label for="targetData" class="vp-orange-text">Target data</label>
15+
<input type="text" class="vp-input vp-state" id="targetData" placeholder="Select target data"/>
16+
</div>
17+
<div class="vp-grid-border-box vp-grid-col-95">
18+
<label for="testSize">Test size</label>
19+
<select id="testSize" class="vp-select vp-state">
20+
<!-- Auto Crate -->
21+
</select>
22+
<label for="randomState">Random state</label>
23+
<input type="number" class="vp-input vp-state" id="randomState" placeholder="1234"/>
24+
<label for="shuffle">Shuffle</label>
25+
<select id="shuffle" class="vp-select vp-state">
26+
<option value="True">True</option>
27+
<option value="False">False</option>
28+
</select>
29+
<label for="startify">Startify</label>
30+
<select id="startify" class="vp-select vp-state">
31+
32+
</select>
33+
</div>
34+
<div class="vp-grid-border-box vp-grid-col-p50">
35+
<label for="vp_pfReturn" class="vp-orange-text">Allocate to</label><label></label>
36+
<div class="vp-grid-col-95">
37+
<label for="trainFeatures">Train_features</label>
38+
<input type="text" id="trainFeatures" class="vp-input" placeholder="New variable name" value="X_train">
39+
</div>
40+
<div class="vp-grid-col-95">
41+
<label for="trainTarget">Train_target</label>
42+
<input type="text" id="trainTarget" class="vp-input" placeholder="New variable name" value="y_train">
43+
</div>
44+
<div class="vp-grid-col-95">
45+
<label for="testFeatures">Test_features</label>
46+
<input type="text" id="testFeatures" class="vp-input" placeholder="New variable name" value="X_test">
47+
</div>
48+
<div class="vp-grid-col-95">
49+
<label for="testTarget">Test_target</label>
50+
<input type="text" id="testTarget" class="vp-input" placeholder="New variable name" value="y_test">
51+
</div>
52+
</div>
53+
</div>
54+
</body>

‎js/m_ml/dataSplit.js

Lines changed: 60 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,45 +13,89 @@
1313
// [CLASS] Data split
1414
//============================================================================
1515
define([
16+
'text!vp_base/html/m_ml/dataSplit.html!strip',
17+
'css!vp_base/css/m_ml/dataSplit.css',
1618
'vp_base/js/com/com_util',
19+
'vp_base/js/com/com_interface',
1720
'vp_base/js/com/com_Const',
1821
'vp_base/js/com/com_String',
1922
'vp_base/js/com/component/PopupComponent'
20-
], function(com_util, com_Const, com_String, PopupComponent) {
23+
], function(dsHtml, dsCss, com_util, com_interface, com_Const, com_String, PopupComponent) {
2124

2225
/**
2326
* Data split
2427
*/
2528
class DataSplit extends PopupComponent {
2629
_init() {
2730
super._init();
28-
/** Write codes executed before rendering */
31+
this.config.sizeLevel = 2;
32+
this.config.dataview = false;
33+
34+
this.state = {
35+
testSize: 0.25,
36+
trainFeatures: 'X_train',
37+
trainTarget: 'y_train',
38+
testFeatures: 'X_test',
39+
testTarget: 'y_test',
40+
...this.state
41+
}
2942
}
3043

3144
_bindEvent() {
3245
super._bindEvent();
33-
/** Implement binding events */
3446
var that = this;
35-
this.$target.on('click', function(evt) {
36-
var target = evt.target;
37-
if ($(that.wrapSelector()).find(target).length > 0) {
38-
// Sample : getDataList from Kernel
39-
vpKernel.getDataList().then(function(resultObj) {
40-
vpLog.display(VP_LOG_TYPE.DEVELOP, resultObj);
41-
}).catch(function(err) {
42-
vpLog.display(VP_LOG_TYPE.DEVELOP, err);
43-
});
44-
}
47+
48+
// import library
49+
$(this.wrapSelector('#vp_libaryImport')).on('click', function() {
50+
com_interface.insertCell('code', 'from sklearn.model_selection import train_test_split');
4551
});
4652
}
4753

4854
templateForBody() {
49-
/** Implement generating template */
50-
return 'This is sample.';
55+
let page = $(dsHtml);
56+
57+
// test size generating
58+
let sizeOptions = '';
59+
for (let i=5; i<95; i+=5) {
60+
sizeOptions += `<option value="0.${i}" ${this.state.testSize==('0.'+i)?'selected':''}>${i}%</option>`;
61+
}
62+
$(page).find('#testSize').html(sizeOptions);
63+
return page;
64+
}
65+
66+
render() {
67+
super.render();
68+
69+
70+
5171
}
5272

5373
generateCode() {
54-
return "print('sample code')";
74+
let {
75+
trainFeatures, trainTarget, testFeatures, testTarget,
76+
dataType, featureData, targetData,
77+
testSize, randomState, shuffle, startify
78+
} = this.state;
79+
80+
let options = new com_String();
81+
if (testSize != '0.25') {
82+
options.appendFormat(', test_size={0}', testSize);
83+
}
84+
if (randomState && randomState != '') {
85+
options.appendFormat(', random_state={0}', randomState);
86+
}
87+
if (shuffle && shuffle != '') {
88+
options.appendFormat(', shuffle={0}', shuffle);
89+
}
90+
if (startify && startify != '') {
91+
options.appendFormat(', startify={0}', startify);
92+
}
93+
94+
let code = new com_String();
95+
code.appendFormat('{0}, {1}, {2}, {3} = train_test_split({4}, {5}{6})',
96+
trainFeatures, testFeatures, trainTarget, testTarget,
97+
featureData, targetData, options.toString());
98+
return code.toString();
5599
}
56100

57101
}

0 commit comments

Comments
 (0)