Skip to content

Commit e0b9d28

Browse files
author
minjk-bl
committed
Edit show values, sort option layout and operations
1 parent cedc3f3 commit e0b9d28

File tree

2 files changed

+98
-67
lines changed

2 files changed

+98
-67
lines changed

‎html/m_visualize/seaborn.html

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -114,29 +114,34 @@
114114
<!-- Auto-create -->
115115
</select>
116116
</div>
117-
<div class="vp-grid-box sb-option">
118-
<label><input type="checkbox" id="showValues" class="vp-state"/><span>Show values</span></label>
119-
<input type="number" id="showValuesPrecision" class="vp-state" placeholder="Type precision (0 ~ 5)" min="0" max="5"/>
120-
</div>
121-
<div class="vp-grid-col-p50 sb-option" style="grid-column-start: 1;grid-column-end: 3;">
122-
<div class="vp-grid-box">
123-
<label class="vp-bold">Sort values by
124-
<select id="sortBy" class="vp-state vp-select" style="width: 75px;height:25px;">
117+
<div class="vp-grid-box sb-option" style="grid-column-start: 1;grid-column-end: 3;">
118+
<hr style="margin:5px;"/>
119+
<label class="vp-tab-group-title">Sort</label>
120+
<div class="vp-grid-col-p50">
121+
<div class="vp-grid-col-95">
122+
<label for="sortType">Order</label>
123+
<select id="sortType" class="vp-state vp-select m">
124+
<option value="">No sorting</option>
125+
<option value="descending">Sort in descending order</option>
126+
<option value="ascending">Sort in ascending order</option>
127+
</select>
128+
</div>
129+
<div class="vp-grid-col-95">
130+
<label for="sortBy">Sort by</label>
131+
<select id="sortBy" class="vp-state vp-select m">
125132
<option value="y">y axis</option>
126133
<option value="x">x axis</option>
127134
</select>
128-
</label>
129-
<select id="sortType" class="vp-state">
130-
<option value="">No sorting</option>
131-
<option value="descending">Sort in descending order</option>
132-
<option value="ascending">Sort in ascending order</option>
133-
</select>
135+
</div>
134136
</div>
135-
<div class="vp-grid-box">
136-
<label class="vp-bold">Sort condition</label>
137-
<input type="text" id="sortHue" class="vp-input vp-state" placeholder="Type hue condition"/>
138-
<label><input type="checkbox" id="sortHueText" class="vp-state"/><span>Text</span></label>
137+
<div class="vp-grid-col-95 sb-option">
138+
<label for="sortHue">Hue condition</label>
139+
<div>
140+
<input type="text" id="sortHue" class="vp-input vp-state" placeholder="Type hue condition"/>
141+
<label><input type="checkbox" id="sortHueText" class="vp-state" checked/><span>Text</span></label>
142+
</div>
139143
</div>
144+
<hr style="margin:5px;"/>
140145
</div>
141146
</div>
142147
<label for="userOption" class="vp-bold">User Option</label>
@@ -207,7 +212,16 @@
207212
<input type="text" id="y_label" class="vp-input vp-state" placeholder="Type Y Label" />
208213
</div>
209214
</div>
210-
215+
<div class="vp-grid-box sb-option">
216+
<hr style="margin:5px;"/>
217+
<label class="vp-tab-group-title">Show values</label>
218+
<label><input type="checkbox" id="showValues" class="vp-state"/><span>Show values on the top of bar</span></label>
219+
<div class="vp-grid-col-95">
220+
<label for="showValuesPrecision">Decimal place</label>
221+
<input type="number" id="showValuesPrecision" class="vp-state" placeholder="Type decimal places(0~5)" min="0" max="5"/>
222+
</div>
223+
<hr style="margin:5px;"/>
224+
</div>
211225
<label for="useLegend" class="vp-bold">Legend</label>
212226
<div class="vp-grid-col-p50">
213227
<select id="legendPos" class="vp-select vp-state">

‎js/m_visualize/Seaborn.js

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ define([
5454
sortBy: 'y',
5555
sortType: '',
5656
sortHue: '',
57-
sortHueText: false,
57+
sortHueText: true,
5858
// axes options
5959
x_limit_from: '',
6060
x_limit_to: '',
@@ -199,10 +199,20 @@ define([
199199
$(that.wrapSelector('#stat')).closest('.sb-option').show();
200200
} else if (chartType == 'barplot') {
201201
$(that.wrapSelector('#showValues')).closest('.sb-option').show();
202-
$(that.wrapSelector('#sortBy')).closest('.sb-option').show();
202+
if (that.state.setXY === false) {
203+
$(that.wrapSelector('#sortBy')).closest('.sb-option').show();
204+
if (that.state.hue !== '') {
205+
$(that.wrapSelector('#sortHue')).closest('.sb-option').show();
206+
}
207+
}
203208
} else if (chartType == 'countplot') {
204209
$(that.wrapSelector('#showValues')).closest('.sb-option').show();
205-
$(that.wrapSelector('#sortBy')).closest('.sb-option').show();
210+
if (that.state.setXY === false) {
211+
$(that.wrapSelector('#sortBy')).closest('.sb-option').show();
212+
if (that.state.hue !== '') {
213+
$(that.wrapSelector('#sortHue')).closest('.sb-option').show();
214+
}
215+
}
206216
}
207217
});
208218

@@ -243,36 +253,46 @@ define([
243253
// FIXME: hide sort values for barplot/countplot (as temporary)
244254
if (that.state.chartType == 'barplot' || that.state.chartType == 'countplot') {
245255
$(that.wrapSelector('#sortBy')).closest('.sb-option').hide();
256+
$(that.wrapSelector('#sortHue')).closest('.sb-option').hide();
246257
}
247258

248259
}
249260
});
250261

251262
// change hue
252-
$(document).off('change', this.wrapSelector('.vp-state'));
263+
$(document).off('change', this.wrapSelector('#hue'));
253264
$(document).on('change', this.wrapSelector('#hue'), function() {
254265
let { chartType, data } = that.state;
255266
let hue = $(this).val();
256-
if (chartType == 'barplot' || chartType == 'countplot') {
257-
let colDtype = $(that.wrapSelector('#hue')).find('option:selected').data('type');
258-
console.log(data, hue);
259-
// get result and load column list
260-
vpKernel.getColumnCategory(data, hue).then(function (resultObj) {
261-
let { result } = resultObj;
262-
try {
263-
var category = JSON.parse(result);
264-
if (category && category.length > 0 && colDtype == 'object') {
265-
// if it's categorical column and its dtype is object, check 'Text' as default
266-
$(that.wrapSelector('#sortHueText')).prop('checked', true);
267-
} else {
267+
if (hue !== '') {
268+
if (chartType == 'barplot' || chartType == 'countplot') {
269+
let colDtype = $(that.wrapSelector('#hue')).find('option:selected').data('type');
270+
console.log(data, hue);
271+
// get result and load column list
272+
vpKernel.getColumnCategory(data, hue).then(function (resultObj) {
273+
let { result } = resultObj;
274+
try {
275+
var category = JSON.parse(result);
276+
if (category && category.length > 0 && colDtype == 'object') {
277+
// if it's categorical column and its dtype is object, check 'Text' as default
278+
$(that.wrapSelector('#sortHueText')).prop('checked', true);
279+
that.state.sortHueText = true;
280+
} else {
281+
$(that.wrapSelector('#sortHueText')).prop('checked', false);
282+
that.state.sortHueText = false;
283+
}
284+
$(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition(category, colDtype));
285+
} catch {
268286
$(that.wrapSelector('#sortHueText')).prop('checked', false);
287+
that.state.sortHueText = false;
288+
289+
$(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition([], colDtype));
269290
}
270-
$(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition(category, colDtype));
271-
} catch {
272-
$(that.wrapSelector('#sortHueText')).prop('checked', false);
273-
$(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition([], colDtype));
274-
}
275-
});
291+
});
292+
}
293+
$(that.wrapSelector('#sortHue')).closest('.sb-option').show();
294+
} else {
295+
$(that.wrapSelector('#sortHue')).closest('.sb-option').hide();
276296
}
277297
});
278298

@@ -466,8 +486,20 @@ define([
466486
$(page).find('#stat').closest('.sb-option').show();
467487
} else if (this.state.chartType == 'barplot') {
468488
$(page).find('#showValues').closest('.sb-option').show();
489+
if (this.state.setXY === false) {
490+
$(page).find('#sortBy').closest('.sb-option').show();
491+
if (this.state.hue !== '') {
492+
$(page).find('#sortHue').closest('.sb-option').show();
493+
}
494+
}
469495
} else if (this.state.chartType == 'countplot') {
470496
$(page).find('#showValues').closest('.sb-option').show();
497+
if (this.state.setXY === false) {
498+
$(page).find('#sortBy').closest('.sb-option').show();
499+
if (this.state.hue !== '') {
500+
$(page).find('#sortHue').closest('.sb-option').show();
501+
}
502+
}
471503
}
472504

473505
//================================================================
@@ -851,7 +883,7 @@ define([
851883
if (showValues === true && chartType === 'barplot') {
852884
etcOptionCode.push('ci=None');
853885
}
854-
if (sortType != '') {
886+
if (setXY === false && sortType !== '') {
855887
let sortCode = '';
856888
let sortTypeStr = (sortType === 'descending'? 'ascending=False': 'ascending=True');
857889
let sortX = state.x;
@@ -860,35 +892,20 @@ define([
860892
sortX = state.y;
861893
sortY = state.x;
862894
}
863-
if (chartType === 'barplot') {
864-
if (setXY === true) {
865-
// TODO: sort on setXY
866-
// if (hue !== '' && sortHue !== '') {
867-
// sortCode = com_util.formatString("{}.groupby({})[{}].mean().sort_values({}).index")
868-
// } else {
869-
// sortCode = com_util.formatString("pd.concat([{0},{1}], axis=1).groupby({2})[{3}].mean().sort_values({4}).index"
870-
// , sortX, sortY, sortX)
871-
// }
895+
if (chartType === 'barplot' && sortX !== '' && sortY !== '') {
896+
if (hue !== '' && sortHue !== '') {
897+
sortCode = com_util.formatString("{0}[{1}[{2}]=={3}].groupby({4})[{5}].mean().sort_values({6}).index"
898+
, state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), sortX, sortY, sortTypeStr);
872899
} else {
873-
if (hue !== '' && sortHue !== '') {
874-
sortCode = com_util.formatString("{0}[{1}[{2}]=={3}].groupby({4})[{5}].mean().sort_values({6}).index"
875-
, state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), sortX, sortY, sortTypeStr);
876-
} else {
877-
sortCode = com_util.formatString("{0}.groupby({1})[{2}].mean().sort_values({3}).index", state.data, sortX, sortY, sortTypeStr);
878-
}
900+
sortCode = com_util.formatString("{0}.groupby({1})[{2}].mean().sort_values({3}).index", state.data, sortX, sortY, sortTypeStr);
879901
}
880-
} else if (chartType === 'countplot') {
902+
} else if (chartType === 'countplot' && (sortX !== '' || sortY !== '')) {
881903
let countVar = sortX === ''? sortY: sortX;
882-
if (setXY === true) {
883-
// TODO: sort on setXY
884-
;
904+
if (hue !== '' && sortHue !== '') {
905+
sortCode = com_util.formatString("{0}[{1}[{2}]=={3}][{4}].value_counts({5}).index"
906+
, state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), countVar, sortTypeStr);
885907
} else {
886-
if (hue !== '' && sortHue !== '') {
887-
sortCode = com_util.formatString("{0}[{1}[{2}]=={3}][{4}].value_counts({5}).index"
888-
, state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), countVar, sortTypeStr);
889-
} else {
890-
sortCode = com_util.formatString("{0}[{1}].value_counts({2}).index", state.data, countVar, sortTypeStr);
891-
}
908+
sortCode = com_util.formatString("{0}[{1}].value_counts({2}).index", state.data, countVar, sortTypeStr);
892909
}
893910
}
894911

0 commit comments

Comments
 (0)