js/tbl_zoom_plot_jqplot.js

   1 // TODO: change the axis
   2 /* vim: set expandtab sw=4 ts=4 sts=4: */
   3 /**
   4  ** @fileoverview JavaScript functions used on tbl_select.php
   5  **
   6  ** @requires    jQuery
   7  ** @requires    js/functions.js
   8  **/
   9
  10
  11 /**
  12  **  Display Help/Info
  13  **/
  14 function displayHelp () {
  15     $('<div />')
  16         .append(PMA_messages.strDisplayHelp)
  17         .appendTo('#page_content')
  18         .dialog({
  19             width: 450,
  20             height: 'auto',
  21             title: PMA_messages.strHelpTitle
  22         });
  23     return false;
  24 }
  25
  26 /**
  27  ** Extend the array object for max function
  28  ** @param array
  29  **/
  30 Array.max = function (array) {
  31     return Math.max.apply(Math, array);
  32 };
  33
  34 /**
  35  ** Extend the array object for min function
  36  ** @param array
  37  **/
  38 Array.min = function (array) {
  39     return Math.min.apply(Math, array);
  40 };
  41
  42 /**
  43  ** Checks if a string contains only numeric value
  44  ** @param n: String (to be checked)
  45  **/
  46 function isNumeric (n) {
  47     return !isNaN(parseFloat(n)) && isFinite(n);
  48 }
  49
  50 /**
  51  ** Checks if an object is empty
  52  ** @param n: Object (to be checked)
  53  **/
  54 function isEmpty (obj) {
  55     var name;
  56     for (name in obj) {
  57         return false;
  58     }
  59     return true;
  60 }
  61
  62 /**
  63  ** Converts a date/time into timestamp
  64  ** @param val  String Date
  65  ** @param type Sring  Field type(datetime/timestamp/time/date)
  66  **/
  67 function getTimeStamp (val, type) {
  68     if (type.toString().search(/datetime/i) !== -1 ||
  69         type.toString().search(/timestamp/i) !== -1
  70     ) {
  71         return $.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', val);
  72     } else if (type.toString().search(/time/i) !== -1) {
  73         return $.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', '1970-01-01 ' + val);
  74     } else if (type.toString().search(/date/i) !== -1) {
  75         return $.datepicker.parseDate('yy-mm-dd', val);
  76     }
  77 }
  78
  79 /**
  80  ** Classifies the field type into numeric,timeseries or text
  81  ** @param field: field type (as in database structure)
  82  **/
  83 function getType (field) {
  84     if (field.toString().search(/int/i) !== -1 ||
  85         field.toString().search(/decimal/i) !== -1 ||
  86         field.toString().search(/year/i) !== -1
  87     ) {
  88         return 'numeric';
  89     } else if (field.toString().search(/time/i) !== -1 ||
  90         field.toString().search(/date/i) !== -1
  91     ) {
  92         return 'time';
  93     } else {
  94         return 'text';
  95     }
  96 }
  97
  98 /**
  99  ** Scrolls the view to the display section
 100  **/
 101 function scrollToChart () {
 102     var x = $('#dataDisplay').offset().top - 100; // 100 provides buffer in viewport
 103     $('html,body').animate({ scrollTop: x }, 500);
 104 }
 105
 106 /**
 107  * Unbind all event handlers before tearing down a page
 108  */
 109 AJAX.registerTeardown('tbl_zoom_plot_jqplot.js', function () {
 110     $('#tableid_0').off('change');
 111     $('#tableid_1').off('change');
 112     $('#tableid_2').off('change');
 113     $('#tableid_3').off('change');
 114     $('#inputFormSubmitId').off('click');
 115     $('#togglesearchformlink').off('click');
 116     $(document).off('keydown', '#dataDisplay :input');
 117     $('button.button-reset').off('click');
 118     $('div#resizer').off('resizestop');
 119     $('div#querychart').off('jqplotDataClick');
 120 });
 121
 122 AJAX.registerOnload('tbl_zoom_plot_jqplot.js', function () {
 123     var cursorMode = ($('input[name=\'mode\']:checked').val() === 'edit') ? 'crosshair' : 'pointer';
 124     var currentChart = null;
 125     var searchedDataKey = null;
 126     var xLabel = $('#tableid_0').val();
 127     var yLabel = $('#tableid_1').val();
 128     // will be updated via Ajax
 129     var xType = $('#types_0').val();
 130     var yType = $('#types_1').val();
 131     var dataLabel = $('#dataLabel').val();
 132     var lastX;
 133     var lastY;
 134     var zoomRatio = 1;
 135
 136
 137     // Get query result
 138     var searchedData;
 139     try {
 140         searchedData = JSON.parse($('#querydata').html());
 141     } catch (err) {
 142         searchedData = null;
 143     }
 144
 145     /**
 146      ** Input form submit on field change
 147      **/
 148
 149     // first column choice corresponds to the X axis
 150     $('#tableid_0').change(function () {
 151         // AJAX request for field type, collation, operators, and value field
 152         $.post('tbl_zoom_select.php', {
 153             'ajax_request' : true,
 154             'change_tbl_info' : true,
 155             'server' : PMA_commonParams.get('server'),
 156             'db' : PMA_commonParams.get('db'),
 157             'table' : PMA_commonParams.get('table'),
 158             'field' : $('#tableid_0').val(),
 159             'it' : 0
 160         }, function (data) {
 161             $('#tableFieldsId').find('tr:eq(1) td:eq(0)').html(data.field_type);
 162             $('#tableFieldsId').find('tr:eq(1) td:eq(1)').html(data.field_collation);
 163             $('#tableFieldsId').find('tr:eq(1) td:eq(2)').html(data.field_operators);
 164             $('#tableFieldsId').find('tr:eq(1) td:eq(3)').html(data.field_value);
 165             xLabel = $('#tableid_0').val();
 166             $('#types_0').val(data.field_type);
 167             xType = data.field_type;
 168             $('#collations_0').val(data.field_collations);
 169             addDateTimePicker();
 170         });
 171     });
 172
 173     // second column choice corresponds to the Y axis
 174     $('#tableid_1').change(function () {
 175         // AJAX request for field type, collation, operators, and value field
 176         $.post('tbl_zoom_select.php', {
 177             'ajax_request' : true,
 178             'change_tbl_info' : true,
 179             'server' : PMA_commonParams.get('server'),
 180             'db' : PMA_commonParams.get('db'),
 181             'table' : PMA_commonParams.get('table'),
 182             'field' : $('#tableid_1').val(),
 183             'it' : 1
 184         }, function (data) {
 185             $('#tableFieldsId').find('tr:eq(2) td:eq(0)').html(data.field_type);
 186             $('#tableFieldsId').find('tr:eq(2) td:eq(1)').html(data.field_collation);
 187             $('#tableFieldsId').find('tr:eq(2) td:eq(2)').html(data.field_operators);
 188             $('#tableFieldsId').find('tr:eq(2) td:eq(3)').html(data.field_value);
 189             yLabel = $('#tableid_1').val();
 190             $('#types_1').val(data.field_type);
 191             yType = data.field_type;
 192             $('#collations_1').val(data.field_collations);
 193             addDateTimePicker();
 194         });
 195     });
 196
 197     $('#tableid_2').change(function () {
 198         // AJAX request for field type, collation, operators, and value field
 199         $.post('tbl_zoom_select.php', {
 200             'ajax_request' : true,
 201             'change_tbl_info' : true,
 202             'server' : PMA_commonParams.get('server'),
 203             'db' : PMA_commonParams.get('db'),
 204             'table' : PMA_commonParams.get('table'),
 205             'field' : $('#tableid_2').val(),
 206             'it' : 2
 207         }, function (data) {
 208             $('#tableFieldsId').find('tr:eq(4) td:eq(0)').html(data.field_type);
 209             $('#tableFieldsId').find('tr:eq(4) td:eq(1)').html(data.field_collation);
 210             $('#tableFieldsId').find('tr:eq(4) td:eq(2)').html(data.field_operators);
 211             $('#tableFieldsId').find('tr:eq(4) td:eq(3)').html(data.field_value);
 212             $('#types_2').val(data.field_type);
 213             $('#collations_2').val(data.field_collations);
 214             addDateTimePicker();
 215         });
 216     });
 217
 218     $('#tableid_3').change(function () {
 219         // AJAX request for field type, collation, operators, and value field
 220         $.post('tbl_zoom_select.php', {
 221             'ajax_request' : true,
 222             'change_tbl_info' : true,
 223             'server' : PMA_commonParams.get('server'),
 224             'db' : PMA_commonParams.get('db'),
 225             'table' : PMA_commonParams.get('table'),
 226             'field' : $('#tableid_3').val(),
 227             'it' : 3
 228         }, function (data) {
 229             $('#tableFieldsId').find('tr:eq(5) td:eq(0)').html(data.field_type);
 230             $('#tableFieldsId').find('tr:eq(5) td:eq(1)').html(data.field_collation);
 231             $('#tableFieldsId').find('tr:eq(5) td:eq(2)').html(data.field_operators);
 232             $('#tableFieldsId').find('tr:eq(5) td:eq(3)').html(data.field_value);
 233             $('#types_3').val(data.field_type);
 234             $('#collations_3').val(data.field_collations);
 235             addDateTimePicker();
 236         });
 237     });
 238
 239     /**
 240      * Input form validation
 241      **/
 242     $('#inputFormSubmitId').click(function () {
 243         if ($('#tableid_0').get(0).selectedIndex === 0 || $('#tableid_1').get(0).selectedIndex === 0) {
 244             PMA_ajaxShowMessage(PMA_messages.strInputNull);
 245         } else if (xLabel === yLabel) {
 246             PMA_ajaxShowMessage(PMA_messages.strSameInputs);
 247         }
 248     });
 249
 250     /**
 251       ** Prepare a div containing a link, otherwise it's incorrectly displayed
 252       ** after a couple of clicks
 253       **/
 254     $('<div id="togglesearchformdiv"><a id="togglesearchformlink"></a></div>')
 255         .insertAfter('#zoom_search_form')
 256         // don't show it until we have results on-screen
 257         .hide();
 258
 259     $('#togglesearchformlink')
 260         .html(PMA_messages.strShowSearchCriteria)
 261         .bind('click', function () {
 262             var $link = $(this);
 263             $('#zoom_search_form').slideToggle();
 264             if ($link.text() === PMA_messages.strHideSearchCriteria) {
 265                 $link.text(PMA_messages.strShowSearchCriteria);
 266             } else {
 267                 $link.text(PMA_messages.strHideSearchCriteria);
 268             }
 269             // avoid default click action
 270             return false;
 271         });
 272
 273     /**
 274      ** Set dialog properties for the data display form
 275      **/
 276     var buttonOptions = {};
 277     /*
 278      * Handle saving of a row in the editor
 279      */
 280     buttonOptions[PMA_messages.strSave] = function () {
 281         // Find changed values by comparing form values with selectedRow Object
 282         var newValues = {};// Stores the values changed from original
 283         var sqlTypes = {};
 284         var it = 0;
 285         var xChange = false;
 286         var yChange = false;
 287         var key;
 288         var tempGetVal = function () {
 289             return $(this).val();
 290         };
 291         for (key in selectedRow) {
 292             var oldVal = selectedRow[key];
 293             var newVal = ($('#edit_fields_null_id_' + it).prop('checked')) ? null : $('#edit_fieldID_' + it).val();
 294             if (newVal instanceof Array) { // when the column is of type SET
 295                 newVal =  $('#edit_fieldID_' + it).map(tempGetVal).get().join(',');
 296             }
 297             if (oldVal !== newVal) {
 298                 selectedRow[key] = newVal;
 299                 newValues[key] = newVal;
 300                 if (key === xLabel) {
 301                     xChange = true;
 302                     searchedData[searchedDataKey][xLabel] = newVal;
 303                 } else if (key === yLabel) {
 304                     yChange = true;
 305                     searchedData[searchedDataKey][yLabel] = newVal;
 306                 }
 307             }
 308             var $input = $('#edit_fieldID_' + it);
 309             if ($input.hasClass('bit')) {
 310                 sqlTypes[key] = 'bit';
 311             } else {
 312                 sqlTypes[key] = null;
 313             }
 314             it++;
 315         } // End data update
 316
 317         // Update the chart series and replot
 318         if (xChange || yChange) {
 319             // Logic similar to plot generation, replot only if xAxis changes or yAxis changes.
 320             // Code includes a lot of checks so as to replot only when necessary
 321             if (xChange) {
 322                 xCord[searchedDataKey] = selectedRow[xLabel];
 323                 // [searchedDataKey][0] contains the x value
 324                 if (xType === 'numeric') {
 325                     series[0][searchedDataKey][0] = selectedRow[xLabel];
 326                 } else if (xType === 'time') {
 327                     series[0][searchedDataKey][0] =
 328                         getTimeStamp(selectedRow[xLabel], $('#types_0').val());
 329                 } else {
 330                     series[0][searchedDataKey][0] = '';
 331                     // TODO: text values
 332                 }
 333                 currentChart.series[0].data = series[0];
 334                 // TODO: axis changing
 335                 currentChart.replot();
 336             }
 337             if (yChange) {
 338                 yCord[searchedDataKey] = selectedRow[yLabel];
 339                 // [searchedDataKey][1] contains the y value
 340                 if (yType === 'numeric') {
 341                     series[0][searchedDataKey][1] = selectedRow[yLabel];
 342                 } else if (yType === 'time') {
 343                     series[0][searchedDataKey][1] =
 344                         getTimeStamp(selectedRow[yLabel], $('#types_1').val());
 345                 } else {
 346                     series[0][searchedDataKey][1] = '';
 347                     // TODO: text values
 348                 }
 349                 currentChart.series[0].data = series[0];
 350                 // TODO: axis changing
 351                 currentChart.replot();
 352             }
 353         } // End plot update
 354
 355         // Generate SQL query for update
 356         if (!isEmpty(newValues)) {
 357             var sql_query = 'UPDATE `' + PMA_commonParams.get('table') + '` SET ';
 358             for (key in newValues) {
 359                 sql_query += '`' + key + '`=';
 360                 var value = newValues[key];
 361
 362                 // null
 363                 if (value === null) {
 364                     sql_query += 'NULL, ';
 365
 366                 // empty
 367                 } else if ($.trim(value) === '') {
 368                     sql_query += '\'\', ';
 369
 370                 // other
 371                 } else {
 372                     // type explicitly identified
 373                     if (sqlTypes[key] !== null) {
 374                         if (sqlTypes[key] === 'bit') {
 375                             sql_query += 'b\'' + value + '\', ';
 376                         }
 377                     // type not explicitly identified
 378                     } else {
 379                         if (!isNumeric(value)) {
 380                             sql_query += '\'' + value + '\', ';
 381                         } else {
 382                             sql_query += value + ', ';
 383                         }
 384                     }
 385                 }
 386             }
 387             // remove two extraneous characters ', '
 388             sql_query = sql_query.substring(0, sql_query.length - 2);
 389             sql_query += ' WHERE ' + PMA_urldecode(searchedData[searchedDataKey].where_clause);
 390
 391             // Post SQL query to sql.php
 392             $.post('sql.php', {
 393                 'server' : PMA_commonParams.get('server'),
 394                 'db' : PMA_commonParams.get('db'),
 395                 'ajax_request' : true,
 396                 'sql_query' : sql_query,
 397                 'inline_edit' : false
 398             }, function (data) {
 399                 if (typeof data !== 'undefined' && data.success === true) {
 400                     $('#sqlqueryresultsouter').html(data.sql_query);
 401                     PMA_highlightSQL($('#sqlqueryresultsouter'));
 402                 } else {
 403                     PMA_ajaxShowMessage(data.error, false);
 404                 }
 405             }); // End $.post
 406         }// End database update
 407         $('#dataDisplay').dialog('close');
 408     };
 409     buttonOptions[PMA_messages.strCancel] = function () {
 410         $(this).dialog('close');
 411     };
 412     $('#dataDisplay').dialog({
 413         autoOpen: false,
 414         title: PMA_messages.strDataPointContent,
 415         modal: true,
 416         buttons: buttonOptions,
 417         width: $('#dataDisplay').width() + 80,
 418         open: function () {
 419             $(this).find('input[type=checkbox]').css('margin', '0.5em');
 420         }
 421     });
 422     /**
 423      * Attach Ajax event handlers for input fields
 424      * in the dialog. Used to submit the Ajax
 425      * request when the ENTER key is pressed.
 426      */
 427     $(document).on('keydown', '#dataDisplay :input', function (e) {
 428         if (e.which === 13) { // 13 is the ENTER key
 429             e.preventDefault();
 430             if (typeof buttonOptions[PMA_messages.strSave] === 'function') {
 431                 buttonOptions[PMA_messages.strSave].call();
 432             }
 433         }
 434     });
 435
 436
 437     /*
 438      * Generate plot using jqplot
 439      */
 440
 441     if (searchedData !== null) {
 442         $('#zoom_search_form')
 443             .slideToggle()
 444             .hide();
 445         $('#togglesearchformlink')
 446             .text(PMA_messages.strShowSearchCriteria);
 447         $('#togglesearchformdiv').show();
 448         var selectedRow;
 449         var colorCodes = ['#FF0000', '#00FFFF', '#0000FF', '#0000A0', '#FF0080', '#800080', '#FFFF00', '#00FF00', '#FF00FF'];
 450         var series = [];
 451         var xCord = [];
 452         var yCord = [];
 453         var tempX;
 454         var tempY;
 455         var it = 0;
 456         var xMax; // xAxis extreme max
 457         var xMin; // xAxis extreme min
 458         var yMax; // yAxis extreme max
 459         var yMin; // yAxis extreme min
 460         var xVal;
 461         var yVal;
 462         var format;
 463
 464         var options = {
 465             series: [
 466                 // for a scatter plot
 467                 { showLine: false }
 468             ],
 469             grid: {
 470                 drawBorder: false,
 471                 shadow: false,
 472                 background: 'rgba(0,0,0,0)'
 473             },
 474             axes: {
 475                 xaxis: {
 476                     label: $('#tableid_0').val(),
 477                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer
 478                 },
 479                 yaxis: {
 480                     label: $('#tableid_1').val(),
 481                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer
 482                 }
 483             },
 484             highlighter: {
 485                 show: true,
 486                 tooltipAxes: 'y',
 487                 yvalues: 2,
 488                 // hide the first y value
 489                 formatString: '<span class="hide">%s</span>%s'
 490             },
 491             cursor: {
 492                 show: true,
 493                 zoom: true,
 494                 showTooltip: false
 495             }
 496         };
 497
 498         // If data label is not set, do not show tooltips
 499         if (dataLabel === '') {
 500             options.highlighter.show = false;
 501         }
 502
 503         // Classify types as either numeric,time,text
 504         xType = getType(xType);
 505         yType = getType(yType);
 506
 507         // could have multiple series but we'll have just one
 508         series[0] = [];
 509
 510         if (xType === 'time') {
 511             var originalXType = $('#types_0').val();
 512             if (originalXType === 'date') {
 513                 format = '%Y-%m-%d';
 514             }
 515             // TODO: does not seem to work
 516             // else if (originalXType === 'time') {
 517             //  format = '%H:%M';
 518             // } else {
 519             //    format = '%Y-%m-%d %H:%M';
 520             // }
 521             $.extend(options.axes.xaxis, {
 522                 renderer: $.jqplot.DateAxisRenderer,
 523                 tickOptions: {
 524                     formatString: format
 525                 }
 526             });
 527         }
 528         if (yType === 'time') {
 529             var originalYType = $('#types_1').val();
 530             if (originalYType === 'date') {
 531                 format = '%Y-%m-%d';
 532             }
 533             $.extend(options.axes.yaxis, {
 534                 renderer: $.jqplot.DateAxisRenderer,
 535                 tickOptions: {
 536                     formatString: format
 537                 }
 538             });
 539         }
 540
 541         $.each(searchedData, function (key, value) {
 542             if (xType === 'numeric') {
 543                 xVal = parseFloat(value[xLabel]);
 544             }
 545             if (xType === 'time') {
 546                 xVal = getTimeStamp(value[xLabel], originalXType);
 547             }
 548             if (yType === 'numeric') {
 549                 yVal = parseFloat(value[yLabel]);
 550             }
 551             if (yType === 'time') {
 552                 yVal = getTimeStamp(value[yLabel], originalYType);
 553             }
 554             series[0].push([
 555                 xVal,
 556                 yVal,
 557                 // extra Y values
 558                 value[dataLabel], // for highlighter
 559                 // (may set an undefined value)
 560                 value.where_clause, // for click on point
 561                 key               // key from searchedData
 562             ]);
 563         });
 564
 565         // under IE 8, the initial display is mangled; after a manual
 566         // resizing, it's ok
 567         // under IE 9, everything is fine
 568         currentChart = $.jqplot('querychart', series, options);
 569         currentChart.resetZoom();
 570
 571         $('button.button-reset').click(function (event) {
 572             event.preventDefault();
 573             currentChart.resetZoom();
 574         });
 575
 576         $('div#resizer').resizable();
 577         $('div#resizer').bind('resizestop', function (event, ui) {
 578             // make room so that the handle will still appear
 579             $('div#querychart').height($('div#resizer').height() * 0.96);
 580             $('div#querychart').width($('div#resizer').width() * 0.96);
 581             currentChart.replot({ resetAxes: true });
 582         });
 583
 584         $('div#querychart').bind('jqplotDataClick',
 585             function (event, seriesIndex, pointIndex, data) {
 586                 searchedDataKey = data[4]; // key from searchedData (global)
 587                 var field_id = 0;
 588                 var post_params = {
 589                     'ajax_request' : true,
 590                     'get_data_row' : true,
 591                     'server' : PMA_commonParams.get('server'),
 592                     'db' : PMA_commonParams.get('db'),
 593                     'table' : PMA_commonParams.get('table'),
 594                     'where_clause' : data[3]
 595                 };
 596
 597                 $.post('tbl_zoom_select.php', post_params, function (data) {
 598                     // Row is contained in data.row_info,
 599                     // now fill the displayResultForm with row values
 600                     var key;
 601                     for (key in data.row_info) {
 602                         var $field = $('#edit_fieldID_' + field_id);
 603                         var $field_null = $('#edit_fields_null_id_' + field_id);
 604                         if (data.row_info[key] === null) {
 605                             $field_null.prop('checked', true);
 606                             $field.val('');
 607                         } else {
 608                             $field_null.prop('checked', false);
 609                             if ($field.attr('multiple')) { // when the column is of type SET
 610                                 $field.val(data.row_info[key].split(','));
 611                             } else {
 612                                 $field.val(data.row_info[key]);
 613                             }
 614                         }
 615                         field_id++;
 616                     }
 617                     selectedRow = data.row_info;
 618                 });
 619
 620                 $('#dataDisplay').dialog('open');
 621             }
 622         );
 623     }
 624
 625     $('#help_dialog').click(function () {
 626         displayHelp();
 627     });
 628 });