Skip to content

Commit 3e11947

Browse files
author
minjk-bl
committed
Apps > Groupby - added Grouper
1 parent a4eff82 commit 3e11947

3 files changed

Lines changed: 110 additions & 18 deletions

File tree

‎css/common/groupby.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@
2121
.vp-gb-df-box input {
2222
width: 160px;
2323
}
24+
.vp-gb-by-grouper-box {
25+
display: inline-block;
26+
padding: 0px 5px;
27+
}
28+
.vp-gb-by-number {
29+
width: 80px !important;
30+
}
31+
2432
.vp-gb-adv-box {
2533
border: 1px solid var(--border-gray-color);
2634
padding: 10px;

‎css/main.css‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -104,14 +104,15 @@ body {
104104
}
105105
#vp-wrapper input[type=number] {
106106
font-size: 14px;
107-
line-height: 16px;
108-
padding: 3px 7px;
109-
color: var(--font-primary);
110-
background: #FFFFFF;
111-
outline: none;
112-
border: 0.25px solid var(--border-gray-color);
113-
box-sizing: border-box;
114-
text-align: right;
107+
line-height: 30px;
108+
height: 30px;
109+
padding: 3px 3px;
110+
color: var(--font-primary);
111+
background: #FFFFFF;
112+
outline: var(--highlight-color);
113+
border: 0.25px solid var(--border-gray-color);
114+
box-sizing: border-box;
115+
text-align: right;
115116
}
116117
#vp-wrapper input[type=number]::placeholder {
117118
text-align: left;

‎src/common/vpGroupby.js‎

Lines changed: 93 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,45 @@ define([
7171
this.previewOpened = false;
7272
this.codepreview = undefined;
7373

74+
this.periodList = [
75+
{ label: 'business day', value: 'B'},
76+
{ label: 'custom business day', value: 'C'},
77+
{ label: 'calendar day', value: 'D'},
78+
{ label: 'weekly', value: 'W'},
79+
{ label: 'month end', value: 'M'},
80+
{ label: 'semi-month end', value: 'SM'},
81+
{ label: 'business month end', value: 'BM'},
82+
{ label: 'custom business month end', value: 'CBM'},
83+
{ label: 'month start', value: 'MS'},
84+
{ label: 'semi-month start', value: 'SMS'},
85+
{ label: 'business month start', value: 'BMS'},
86+
{ label: 'custom business month start', value: 'CBMS'},
87+
{ label: 'quarter end', value: 'Q'},
88+
{ label: 'business quarter end', value: 'BQ'},
89+
{ label: 'quarter start', value: 'QS'},
90+
{ label: 'business quarter start', value: 'BQS'},
91+
{ label: 'year end', value: 'Y'},
92+
{ label: 'business year end', value: 'BY'},
93+
{ label: 'year start', value: 'YS'},
94+
{ label: 'business year start', value: 'BYS'},
95+
{ label: 'business hour', value: 'BH'},
96+
{ label: 'hourly', value: 'H'},
97+
{ label: 'minutely', value: 'min'},
98+
{ label: 'secondly', value: 'S'},
99+
{ label: 'milliseconds', value: 'ms'},
100+
{ label: 'microseconds', value: 'us'},
101+
{ label: 'nanoseconds', value: 'N'}
102+
]
103+
74104
this.methodList = [
105+
{ label: 'count', value: 'count'},
106+
{ label: 'size', value: 'size'},
107+
{ label: 'std', value: 'std'},
75108
{ label: 'sum', value: 'sum'},
109+
{ label: 'max', value: 'max'},
76110
{ label: 'mean', value: 'mean'},
111+
{ label: 'median', value: 'median'},
77112
{ label: 'min', value: 'min'},
78-
{ label: 'max', value: 'max'},
79-
{ label: 'std', value: 'std'},
80113
]
81114
}
82115

@@ -97,13 +130,17 @@ define([
97130
*/
98131
_loadState(state) {
99132
var {
100-
variable, groupby, display, method, advanced, allocateTo, resetIndex,
133+
variable, groupby, useGrouper, grouperNumber, grouperPeriod,
134+
display, method, advanced, allocateTo, resetIndex,
101135
advPageDom, advColList, advNamingList
102136
} = state;
103137

104138
$(this._wrapSelector('#vp_gbVariable')).val(variable);
105139
$(this._wrapSelector('#vp_gbBy')).val(groupby.join(','));
106140
$(this._wrapSelector('#vp_gbBy')).data('list', groupby);
141+
$(this._wrapSelector('#vp_gbByGrouper')).prop('checked', useGrouper);
142+
$(this._wrapSelector('#vp_gbByGrouperNumber')).val(grouperNumber);
143+
$(this._wrapSelector('#vp_gbByGrouperPeriod')).val(grouperPeriod);
107144
$(this._wrapSelector('#vp_gbDisplay')).val(display.join(','));
108145
$(this._wrapSelector('#vp_gbDisplay')).data('list', display);
109146
$(this._wrapSelector('#vp_gbMethod')).val(method);
@@ -191,8 +228,11 @@ define([
191228
this.state = {
192229
variable: '',
193230
groupby: [],
231+
useGrouper: false,
232+
grouperNumber: 0,
233+
grouperPeriod: this.periodList[0].value,
194234
display: [],
195-
method: 'sum',
235+
method: this.methodList[0].value,
196236
advanced: false,
197237
allocateTo: '',
198238
resetIndex: false,
@@ -260,6 +300,16 @@ define([
260300
page.appendFormatLine('<label for="{0}" class="{1}">{2}</label>', 'vp_gbBy', 'vp-orange-text wp80', 'Groupby');
261301
page.appendFormatLine('<input type="text" id="{0}" disabled/>', 'vp_gbBy');
262302
page.appendFormatLine('<button id="{0}" class="{1}">{2}</button>', 'vp_gbBySelect', 'vp-button wp50', 'Edit');
303+
page.appendFormatLine('<label style="display: none;"><input type="checkbox" id="{0}"/><span>{1}</span></label>', 'vp_gbByGrouper', 'Grouper');
304+
page.appendFormatLine('<div class="{0}" style="display:none;">', 'vp-gb-by-grouper-box');
305+
page.appendFormatLine('<input type="number" id="{0}" class="{1}"/>', 'vp_gbByGrouperNumber', 'vp-gb-by-number');
306+
page.appendFormatLine('<select id="{0}">', 'vp_gbByGrouperPeriod');
307+
var savedPeriod = this.state.period;
308+
this.periodList.forEach(period => {
309+
page.appendFormatLine('<option value="{0}"{1}>{2}</option>', period.value, savedPeriod==period.value?' selected':'',period.label);
310+
});
311+
page.appendLine('</select>');
312+
page.appendLine('</div>'); // by-grouper-box
263313
page.appendLine('</div>');
264314
page.appendLine('<hr style="margin: 10px 0;"/>');
265315
// display column
@@ -535,6 +585,7 @@ define([
535585
$(document).off('click', this._wrapSelector('.vp-gb-df-refresh'));
536586
$(document).off('change', this._wrapSelector('#vp_gbBy'));
537587
$(document).off('click', this._wrapSelector('#vp_gbBySelect'));
588+
$(document).off('change', this._wrapSelector('#vp_gbByGrouper'));
538589
$(document).off('change', this._wrapSelector('#vp_gbDisplay'));
539590
$(document).off('click', this._wrapSelector('#vp_gbDisplaySelect'));
540591
$(document).off('change', this._wrapSelector('#vp_gbMethodSelect'));
@@ -596,14 +647,41 @@ define([
596647
$(document).on('change', this._wrapSelector('#vp_gbBy'), function(event) {
597648
var colList = event.colList;
598649
that.state.groupby = colList;
599-
console.log('groupby', colList);
650+
651+
if (colList && colList.length == 1) {
652+
$(that._wrapSelector('#vp_gbByGrouper')).parent().show();
653+
} else {
654+
$(that._wrapSelector('#vp_gbByGrouper')).parent().hide();
655+
}
600656
});
601657

602658
// groupby select button event
603659
$(document).on('click', this._wrapSelector('#vp_gbBySelect'), function() {
604660
that.openInnerPopup($(that._wrapSelector('#vp_gbBy')), 'Select columns to group');
605661
});
606662

663+
// groupby grouper event
664+
$(document).on('change', this._wrapSelector('#vp_gbByGrouper'), function() {
665+
var useGrouper = $(this).prop('checked');
666+
that.state.useGrouper = useGrouper;
667+
668+
if (useGrouper == true) {
669+
$(that._wrapSelector('.vp-gb-by-grouper-box')).show();
670+
} else {
671+
$(that._wrapSelector('.vp-gb-by-grouper-box')).hide();
672+
}
673+
});
674+
675+
// grouper number change event
676+
$(document).on('change', this._wrapSelector('#vp_gbByGrouperNumber'), function() {
677+
that.state.grouperNumber = $(this).val();
678+
});
679+
680+
// grouper period change event
681+
$(document).on('change', this._wrapSelector('#vp_gbByGrouperPeriod'), function() {
682+
that.state.grouperPeriod = $(this).val();
683+
});
684+
607685
// display change event
608686
$(document).on('change', this._wrapSelector('#vp_gbDisplay'), function(event) {
609687
var colList = event.colList;
@@ -875,7 +953,8 @@ define([
875953
generateCode() {
876954
var code = new sb.StringBuilder();
877955
var {
878-
variable, groupby, display, method, advanced, allocateTo, resetIndex
956+
variable, groupby, useGrouper, grouperNumber, grouperPeriod,
957+
display, method, advanced, allocateTo, resetIndex
879958
} = this.state;
880959

881960
//====================================================================
@@ -886,7 +965,7 @@ define([
886965
}
887966

888967
//====================================================================
889-
// Dataframe variable & Groupby columns
968+
// Dataframe variable & Groupby(with Grouper) columns
890969
//====================================================================
891970
var byStr = '';
892971
if (groupby.length <= 1) {
@@ -895,12 +974,16 @@ define([
895974
byStr = '[' + groupby.join(',') + ']';
896975
}
897976

898-
var optStr = '';
977+
// Grouper
978+
if (useGrouper) {
979+
byStr = vpCommon.formatString("pd.Grouper(key={0}, freq='{1}')", byStr, grouperNumber + grouperPeriod);
980+
}
981+
899982
if (resetIndex == true) {
900-
optStr = ', as_index=False';
983+
byStr += ', as_index=False';
901984
}
902985
// variable & groupby columns & option
903-
code.appendFormat('{0}.groupby({1}{2})', variable, byStr, optStr);
986+
code.appendFormat('{0}.groupby({1})', variable, byStr);
904987

905988
//====================================================================
906989
// Display columns

0 commit comments

Comments
 (0)