Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite0b9d28

Browse files
author
minjk-bl
committed
Edit show values, sort option layout and operations
1 parentcedc3f3 commite0b9d28

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-
<divclass="vp-grid-box sb-option">
118-
<label><inputtype="checkbox"id="showValues"class="vp-state"/><span>Show values</span></label>
119-
<inputtype="number"id="showValuesPrecision"class="vp-state"placeholder="Type precision (0 ~ 5)"min="0"max="5"/>
120-
</div>
121-
<divclass="vp-grid-col-p50 sb-option"style="grid-column-start: 1;grid-column-end: 3;">
122-
<divclass="vp-grid-box">
123-
<labelclass="vp-bold">Sort values by
124-
<selectid="sortBy"class="vp-state vp-select"style="width: 75px;height:25px;">
117+
<divclass="vp-grid-box sb-option"style="grid-column-start: 1;grid-column-end: 3;">
118+
<hrstyle="margin:5px;"/>
119+
<labelclass="vp-tab-group-title">Sort</label>
120+
<divclass="vp-grid-col-p50">
121+
<divclass="vp-grid-col-95">
122+
<labelfor="sortType">Order</label>
123+
<selectid="sortType"class="vp-state vp-select m">
124+
<optionvalue="">No sorting</option>
125+
<optionvalue="descending">Sort in descending order</option>
126+
<optionvalue="ascending">Sort in ascending order</option>
127+
</select>
128+
</div>
129+
<divclass="vp-grid-col-95">
130+
<labelfor="sortBy">Sort by</label>
131+
<selectid="sortBy"class="vp-state vp-select m">
125132
<optionvalue="y">y axis</option>
126133
<optionvalue="x">x axis</option>
127134
</select>
128-
</label>
129-
<selectid="sortType"class="vp-state">
130-
<optionvalue="">No sorting</option>
131-
<optionvalue="descending">Sort in descending order</option>
132-
<optionvalue="ascending">Sort in ascending order</option>
133-
</select>
135+
</div>
134136
</div>
135-
<divclass="vp-grid-box">
136-
<labelclass="vp-bold">Sort condition</label>
137-
<inputtype="text"id="sortHue"class="vp-input vp-state"placeholder="Type hue condition"/>
138-
<label><inputtype="checkbox"id="sortHueText"class="vp-state"/><span>Text</span></label>
137+
<divclass="vp-grid-col-95 sb-option">
138+
<labelfor="sortHue">Hue condition</label>
139+
<div>
140+
<inputtype="text"id="sortHue"class="vp-input vp-state"placeholder="Type hue condition"/>
141+
<label><inputtype="checkbox"id="sortHueText"class="vp-state"checked/><span>Text</span></label>
142+
</div>
139143
</div>
144+
<hrstyle="margin:5px;"/>
140145
</div>
141146
</div>
142147
<labelfor="userOption"class="vp-bold">User Option</label>
@@ -207,7 +212,16 @@
207212
<inputtype="text"id="y_label"class="vp-input vp-state"placeholder="Type Y Label"/>
208213
</div>
209214
</div>
210-
215+
<divclass="vp-grid-box sb-option">
216+
<hrstyle="margin:5px;"/>
217+
<labelclass="vp-tab-group-title">Show values</label>
218+
<label><inputtype="checkbox"id="showValues"class="vp-state"/><span>Show values on the top of bar</span></label>
219+
<divclass="vp-grid-col-95">
220+
<labelfor="showValuesPrecision">Decimal place</label>
221+
<inputtype="number"id="showValuesPrecision"class="vp-state"placeholder="Type decimal places(0~5)"min="0"max="5"/>
222+
</div>
223+
<hrstyle="margin:5px;"/>
224+
</div>
211225
<labelfor="useLegend"class="vp-bold">Legend</label>
212226
<divclass="vp-grid-col-p50">
213227
<selectid="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
}elseif(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
}elseif(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
lethue=$(this).val();
256-
if(chartType=='barplot'||chartType=='countplot'){
257-
letcolDtype=$(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-
varcategory=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+
letcolDtype=$(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+
varcategory=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
}elseif(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
}elseif(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
letsortCode='';
856888
letsortTypeStr=(sortType==='descending'?'ascending=False':'ascending=True');
857889
letsortX=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-
}elseif(chartType==='countplot'){
902+
}elseif(chartType==='countplot'&&(sortX!==''||sortY!=='')){
881903
letcountVar=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)
[8]ページ先頭
©2009-2025 Movatter.jp