@@ -200,15 +200,19 @@ define([
200200} else if ( chartType == 'barplot' ) {
201201$ ( that . wrapSelector ( '#showValues' ) ) . closest ( '.sb-option' ) . show ( ) ;
202202if ( that . state . setXY === false ) {
203- $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
203+ if ( that . state . x !== '' && that . state . y !== '' ) {
204+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
205+ }
204206if ( that . state . hue !== '' ) {
205207$ ( that . wrapSelector ( '#sortHue' ) ) . closest ( '.sb-option' ) . show ( ) ;
206208}
207209}
208210} else if ( chartType == 'countplot' ) {
209211$ ( that . wrapSelector ( '#showValues' ) ) . closest ( '.sb-option' ) . show ( ) ;
210212if ( that . state . setXY === false ) {
211- $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
213+ if ( that . state . x !== '' || that . state . y !== '' ) {
214+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
215+ }
212216if ( that . state . hue !== '' ) {
213217$ ( that . wrapSelector ( '#sortHue' ) ) . closest ( '.sb-option' ) . show ( ) ;
214218}
@@ -226,11 +230,6 @@ define([
226230$ ( that . wrapSelector ( '#x' ) ) . closest ( '.vp-ds-box' ) . replaceWith ( '<select id="x"></select>' ) ;
227231$ ( that . wrapSelector ( '#y' ) ) . closest ( '.vp-ds-box' ) . replaceWith ( '<select id="y"></select>' ) ;
228232$ ( that . wrapSelector ( '#hue' ) ) . closest ( '.vp-ds-box' ) . replaceWith ( '<select id="hue"></select>' ) ;
229-
230- // FIXME: hide sort values for barplot/countplot (as temporary)
231- if ( that . state . chartType == 'barplot' || that . state . chartType == 'countplot' ) {
232- $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
233- }
234233} else {
235234// set X Y indivisually
236235// disable data selection
@@ -250,7 +249,7 @@ define([
250249let dataSelectorHue = new DataSelector ( { pageThis :that , id :'hue' } ) ;
251250$ ( that . wrapSelector ( '#hue' ) ) . replaceWith ( dataSelectorHue . toTagString ( ) ) ;
252251
253- // FIXME: hide sort values for barplot/countplot (as temporary)
252+ // FIXME: hide sort values for barplot/countplot
254253if ( that . state . chartType == 'barplot' || that . state . chartType == 'countplot' ) {
255254$ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . hide ( ) ;
256255$ ( that . wrapSelector ( '#sortHue' ) ) . closest ( '.sb-option' ) . hide ( ) ;
@@ -259,6 +258,49 @@ define([
259258}
260259} ) ;
261260
261+ // change x, y
262+ $ ( document ) . off ( 'change' , this . wrapSelector ( '#x' ) ) ;
263+ $ ( document ) . on ( 'change' , this . wrapSelector ( '#x' ) , function ( ) {
264+ let { chartType, y, setXY} = that . state ;
265+ let x = $ ( this ) . val ( ) ;
266+ if ( setXY === false ) {
267+ if ( chartType == 'barplot' ) {
268+ if ( x !== '' && y !== '' ) {
269+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
270+ } else {
271+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . hide ( ) ;
272+ }
273+ } else if ( chartType == 'countplot' ) {
274+ if ( x !== '' || y !== '' ) {
275+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
276+ } else {
277+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . hide ( ) ;
278+ }
279+ }
280+ }
281+ } ) ;
282+
283+ $ ( document ) . off ( 'change' , this . wrapSelector ( '#y' ) ) ;
284+ $ ( document ) . on ( 'change' , this . wrapSelector ( '#y' ) , function ( ) {
285+ let { chartType, x, setXY} = that . state ;
286+ let y = $ ( this ) . val ( ) ;
287+ if ( setXY === false ) {
288+ if ( chartType == 'barplot' ) {
289+ if ( x !== '' && y !== '' ) {
290+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
291+ } else {
292+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . hide ( ) ;
293+ }
294+ } else if ( chartType == 'countplot' ) {
295+ if ( x !== '' || y !== '' ) {
296+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . show ( ) ;
297+ } else {
298+ $ ( that . wrapSelector ( '#sortBy' ) ) . closest ( '.sb-option' ) . hide ( ) ;
299+ }
300+ }
301+ }
302+ } ) ;
303+
262304// change hue
263305$ ( document ) . off ( 'change' , this . wrapSelector ( '#hue' ) ) ;
264306$ ( document ) . on ( 'change' , this . wrapSelector ( '#hue' ) , function ( ) {
@@ -487,15 +529,19 @@ define([
487529} else if ( this . state . chartType == 'barplot' ) {
488530$ ( page ) . find ( '#showValues' ) . closest ( '.sb-option' ) . show ( ) ;
489531if ( this . state . setXY === false ) {
490- $ ( page ) . find ( '#sortBy' ) . closest ( '.sb-option' ) . show ( ) ;
532+ if ( this . state . x !== '' && this . state . y !== '' ) {
533+ $ ( page ) . find ( '#sortBy' ) . closest ( '.sb-option' ) . show ( ) ;
534+ }
491535if ( this . state . hue !== '' ) {
492536$ ( page ) . find ( '#sortHue' ) . closest ( '.sb-option' ) . show ( ) ;
493537}
494538}
495539} else if ( this . state . chartType == 'countplot' ) {
496540$ ( page ) . find ( '#showValues' ) . closest ( '.sb-option' ) . show ( ) ;
497541if ( this . state . setXY === false ) {
498- $ ( page ) . find ( '#sortBy' ) . closest ( '.sb-option' ) . show ( ) ;
542+ if ( this . state . x !== '' || this . state . y !== '' ) {
543+ $ ( page ) . find ( '#sortBy' ) . closest ( '.sb-option' ) . show ( ) ;
544+ }
499545if ( this . state . hue !== '' ) {
500546$ ( page ) . find ( '#sortHue' ) . closest ( '.sb-option' ) . show ( ) ;
501547}