Skip to content

Commit c95a6be

Browse files
author
minjk-bl
committed
Edit to_datetime ui and functions on Frame app
1 parent a7e7328 commit c95a6be

File tree

2 files changed

+36
-34
lines changed

2 files changed

+36
-34
lines changed

‎visualpython/css/m_apps/frame.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,10 @@
170170
/* background: rgba(66, 165, 245, 0.2); */
171171
}
172172
.vp-fe-table-column-isnumeric {
173-
float: left;
174173
margin-right: 5px;
174+
vertical-align: middle;
175+
height: 15px;
176+
line-height: 15px;
175177
}
176178

177179
/* Row Hover */

‎visualpython/js/m_apps/Frame.js

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ define([
8888
{ id: 'delete', label: 'Delete', selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.DROP },
8989
{ id: 'rename', label: 'Rename', selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.RENAME },
9090
{ id: 'as_type', label: 'As type', selection: FRAME_SELECT_TYPE.NONE, axis: FRAME_AXIS.COLUMN, menuType: FRAME_EDIT_TYPE.AS_TYPE },
91-
{ id: 'to_datetime', label: 'To datetime', selection: FRAME_SELECT_TYPE.SINGLE, axis: FRAME_AXIS.COLUMN, menuType: FRAME_EDIT_TYPE.TO_DATETIME },
91+
{ id: 'to_datetime', label: 'To Datetime', selection: FRAME_SELECT_TYPE.SINGLE, axis: FRAME_AXIS.COLUMN, menuType: FRAME_EDIT_TYPE.TO_DATETIME },
9292
{ id: 'replace', label: 'Replace', selection: FRAME_SELECT_TYPE.SINGLE, axis: FRAME_AXIS.COLUMN, menuType: FRAME_EDIT_TYPE.REPLACE },
9393
{ id: 'discretize', label: 'Discretize', selection: FRAME_SELECT_TYPE.SINGLE, axis: FRAME_AXIS.COLUMN, numeric_only: true, menuType: FRAME_EDIT_TYPE.DISCRETIZE }
9494
]
@@ -724,6 +724,10 @@ define([
724724
$(this.wrapSelector('.vp-inner-popup-fillvalue')).focus();
725725
return;
726726
}
727+
} else if (type === FRAME_EDIT_TYPE.TO_DATETIME) {
728+
if (content.newcol === '') {
729+
$(this.wrapSelector('.vp-inner-popup-todt-new-col')).focus();
730+
}
727731
}
728732
// run check modules for outliers and load codes
729733
if (type === FRAME_EDIT_TYPE.FILL_OUT) {
@@ -1126,16 +1130,6 @@ define([
11261130
}
11271131
});
11281132

1129-
// bind event for checking add column
1130-
$(this.wrapSelector('.vp-inner-popup-todt-use-addcol')).on('change', function() {
1131-
let checked = $(this).prop('checked');
1132-
if (checked === true) {
1133-
$(that.wrapSelector('.vp-inner-popup-todt-addcol-box')).show();
1134-
} else {
1135-
$(that.wrapSelector('.vp-inner-popup-todt-addcol-box')).hide();
1136-
}
1137-
});
1138-
11391133
// Add column set event
11401134
$(this.wrapSelector('.vp-inner-popup-todt-addcol')).on('click', function() {
11411135
let dateTypeList = [ // df[col].dt[{dateType}]
@@ -1159,14 +1153,21 @@ define([
11591153
});
11601154

11611155
let addColItemTag = $(`<div class="vp-inner-popup-todt-addcol-item">
1162-
<input type="text" class="vp-input vp-inner-popup-todt-addcol-colname" placeholder="Type column name" />
1156+
<input type="text" class="vp-input vp-inner-popup-todt-addcol-colname" placeholder="Type column name" value="year" />
11631157
<select class="vp-select vp-inner-popup-todt-addcol-type">
11641158
${dateTypeOptionTag.toString()}
11651159
</select>
11661160
<span class="vp-icon-close-small vp-inner-popup-todt-addcol-del mt5 vp-cursor"></span>
11671161
</div>`);
11681162
$(that.wrapSelector('.vp-inner-popup-todt-addcol-content')).append(addColItemTag);
11691163
$(addColItemTag)[0].scrollIntoView();
1164+
1165+
// bind event for selecting date type option
1166+
$(that.wrapSelector('.vp-inner-popup-todt-addcol-type')).off('change');
1167+
$(that.wrapSelector('.vp-inner-popup-todt-addcol-type')).on('change', function() {
1168+
let dateTypeVal = $(this).val();
1169+
$(this).parent().find('.vp-inner-popup-todt-addcol-colname').val(dateTypeVal);
1170+
});
11701171

11711172
// bind event for deleting
11721173
$(that.wrapSelector('.vp-inner-popup-todt-addcol-del')).off('click');
@@ -2186,15 +2187,15 @@ define([
21862187
var content = new com_String();
21872188
let formatList = [
21882189
{ label: 'Auto', value: 'auto' },
2189-
{ label: 'Year', value: '%Y' },
2190-
{ label: 'Month', value: '%m' },
2191-
{ label: 'Day', value: '%d' },
2192-
{ label: 'Day Of Week', value: '%w' },
21932190
{ label: '%Y/%m/%d', value: '%Y/%m/%d' },
21942191
{ label: '%Y-%m-%d', value: '%Y-%m-%d' },
2192+
{ label: '%y/%m/%d', value: '%y/%m/%d' },
2193+
{ label: '%y-%m-%d', value: '%y-%m-%d' },
21952194
{ label: '%d/%m/%Y', value: '%d/%m/%Y' },
21962195
{ label: '%d-%m-%Y', value: '%d-%m-%Y' },
2197-
{ label: 'Typing', value: 'typing' },
2196+
{ label: '%d/%m/%y', value: '%d/%m/%y' },
2197+
{ label: '%d-%m-%y', value: '%d-%m-%y' },
2198+
{ label: 'Typing', value: 'typing' }
21982199
];
21992200
let formatOptionTag = new com_String();
22002201
formatList.forEach(opt => {
@@ -2224,15 +2225,14 @@ define([
22242225
</select>
22252226
</div>
22262227
<hr style="margin: 5px 0;"/>
2227-
<div>
2228-
<label>
2229-
<input type="checkbox" class="vp-inner-popup-todt-use-addcol" />
2230-
<span>
2231-
Add column with date type
2232-
</span>
2233-
</label>
2228+
<div class="vp-grid-col-110">
2229+
<label class="vp-orange-text">New column</label>
2230+
<input type="text" class="vp-input vp-inner-popup-todt-new-col" value="{2}" placeholder="Type new column" />
22342231
</div>
2235-
<div class="vp-inner-popup-todt-addcol-box vp-grid-border-box" style="display: none;">
2232+
<label class="vp-bold">
2233+
Add sub-columns using date type
2234+
</label>
2235+
<div class="vp-inner-popup-todt-addcol-box vp-grid-border-box">
22362236
<div class="vp-inner-popup-todt-addcol-head">
22372237
<label>New column name</label>
22382238
<label>Date type</label>
@@ -2244,7 +2244,7 @@ define([
22442244
<button class="vp-button vp-inner-popup-todt-addcol">+ Add column</button>
22452245
</div>
22462246
</div>
2247-
`, this.state.selected[0].label, formatOptionTag.toString(), );
2247+
`, this.state.selected[0].label, formatOptionTag.toString(), this.state.selected[0].label);
22482248

22492249
// set content
22502250
$(this.wrapSelector('.vp-inner-popup-body')).html(content.toString());
@@ -2593,7 +2593,7 @@ define([
25932593
content = this.renderAsType();
25942594
break;
25952595
case FRAME_EDIT_TYPE.TO_DATETIME:
2596-
title = 'Convert to datetime';
2596+
title = 'Convert to Datetime';
25972597
size = { width: 500, height: 450 };
25982598
content = this.renderToDatetime();
25992599
break;
@@ -2970,7 +2970,7 @@ define([
29702970
content['format'] = $(this.wrapSelector('.vp-inner-popup-todt-format')).val();
29712971
content['format_typing'] = $(this.wrapSelector('.vp-inner-popup-todt-format-typing')).val();
29722972
content['dayfirst'] = $(this.wrapSelector('.vp-inner-popup-todt-dayfirst')).val();
2973-
content['use_addcol'] = $(this.wrapSelector('.vp-inner-popup-todt-use-addcol')).prop('checked');
2973+
content['newcol'] = $(this.wrapSelector('.vp-inner-popup-todt-new-col')).val();
29742974
var colList = [];
29752975
var addcolItemTags = $(this.wrapSelector('.vp-inner-popup-todt-addcol-item'));
29762976
addcolItemTags && addcolItemTags.each((idx, tag) => {
@@ -3503,7 +3503,7 @@ define([
35033503
code.appendFormat("{0} = {1}.astype({{2}})", tempObj, tempObj, astypeStr.toString());
35043504
break;
35053505
case FRAME_EDIT_TYPE.TO_DATETIME:
3506-
code.appendFormat("{0}[{1}] = pd.to_datetime({2}[{3}]", tempObj, selectedName, tempObj, selectedName);
3506+
code.appendFormat("{0}['{1}'] = pd.to_datetime({2}[{3}]", tempObj, content['newcol'], tempObj, selectedName);
35073507
let optionList = [];
35083508
if (content['format'] === 'auto') {
35093509
if (content['dayfirst'] !== '') {
@@ -3520,10 +3520,10 @@ define([
35203520
code.appendFormat(', {0}', optionList.join(', '));
35213521
}
35223522
code.append(')');
3523-
if (content['use_addcol'] === true && content['collist'].length > 0) {
3523+
if (content['collist'].length > 0) {
35243524
content['collist'].forEach(obj => {
35253525
code.appendLine();
3526-
code.appendFormat("{0}['{1}'] = {2}[{3}].dt.{4}", tempObj, obj.colName, tempObj, selectedName, obj.dateType);
3526+
code.appendFormat("{0}['{1}'] = {2}['{3}'].dt.{4}", tempObj, obj.colName, tempObj, content['newcol'], obj.dateType);
35273527
});
35283528
}
35293529
break;
@@ -3657,7 +3657,7 @@ define([
36573657
} else {
36583658
colClass = VP_FE_TABLE_COLUMN_GROUP;
36593659
}
3660-
table.appendFormatLine('<th data-code="({0})" data-axis="{1}" data-type="{2}" data-parent="{3}" data-label="{4}" class="{5} {6}" colspan="{7}">{8}{9}</th>'
3660+
table.appendFormatLine('<th data-code="({0})" data-axis="{1}" data-type="{2}" data-parent="{3}" data-label="{4}" class="{5} {6}" colspan="{7}">{8}<span>{9}</span></th>'
36613661
, colCode, FRAME_AXIS.COLUMN, col.type, col.label[colLevIdx-1], col.label[colLevIdx], colClass, selected, colSpan, colIcon, col.label[colLevIdx]);
36623662
colSpan = 1;
36633663
}
@@ -3687,7 +3687,7 @@ define([
36873687
if (that.state.axis == FRAME_AXIS.COLUMN && that.state.selected.map(col=>col.code).includes(colCode)) {
36883688
colClass = 'selected';
36893689
}
3690-
table.appendFormatLine('<th data-code="{0}" data-axis="{1}" data-type="{2}" data-label="{3}" class="{4} {5}">{6}{7}</th>'
3690+
table.appendFormatLine('<th data-code="{0}" data-axis="{1}" data-type="{2}" data-label="{3}" class="{4} {5}">{6}<span>{7}</span></th>'
36913691
, colCode, FRAME_AXIS.COLUMN, col.type, col.label, VP_FE_TABLE_COLUMN, colClass, colIcon, col.label);
36923692
});
36933693
// // add column

0 commit comments

Comments
 (0)