tbl_zoom_plot_jqplot.js

// todo: change the axis
/* vim: set expandtab sw=4 ts=4 sts=4: */
/**
 ** @fileoverview JavaScript functions used on tbl_select.php
 **
 ** @requires    jQuery
 ** @requires    js/functions.js
 **/


/**
 **  Display Help/Info
 **/
function displayHelp() {
    var msgbox = PMA_ajaxShowMessage(PMA_messages['strDisplayHelp'], 10000);
    msgbox.click(function() {
        PMA_ajaxRemoveMessage(msgbox);
    });
}

/**
 ** Extend the array object for max function
 ** @param array
 **/
Array.max = function (array) {
    return Math.max.apply( Math, array );
};

/**
 ** Extend the array object for min function
 ** @param array
 **/
Array.min = function (array) {
    return Math.min.apply( Math, array );
};

/**
 ** Checks if a string contains only numeric value
 ** @param n: String (to be checked)
 **/
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

/**
 ** Checks if an object is empty
 ** @param n: Object (to be checked)
 **/
function isEmpty(obj) {
    var name;
    for (name in obj) {
        return false;
    }
    return true;
}

/**
 ** Converts a date/time into timestamp
 ** @param val  String Date
 ** @param type Sring  Field type(datetime/timestamp/time/date)
 **/
function getTimeStamp(val, type) {
    if (type.toString().search(/datetime/i) != -1 || type.toString().search(/timestamp/i) != -1) {
        return getDateFromFormat(val, 'yyyy-MM-dd HH:mm:ss', val);
    }
    else if (type.toString().search(/time/i) != -1) {
        return getDateFromFormat('1970-01-01 ' + val, 'yyyy-MM-dd HH:mm:ss');
    }
    else if (type.toString().search(/date/i) != -1) {
        return getDateFromFormat(val, 'yyyy-MM-dd');
    }
}

/**
 ** Classifies the field type into numeric,timeseries or text
 ** @param field: field type (as in database structure)
 **/
function getType(field) {
    if (field.toString().search(/int/i) != -1 || field.toString().search(/decimal/i) != -1
        || field.toString().search(/year/i) != -1) {
        return 'numeric';
    } else if (field.toString().search(/time/i) != -1 || field.toString().search(/date/i) != -1) {
        return 'time';
    } else {
        return 'text';
    }
}
/**
 ** Converts a categorical array into numeric array
 ** @param array categorical values array
 **/
function getCord(arr) {
    var newCord = new Array();
    var original = $.extend(true, [], arr);
    var arr = jQuery.unique(arr).sort();
    $.each(original, function(index, value) {
        newCord.push(jQuery.inArray(value, arr));
    });
    return [newCord, arr, original];
}

/**
 ** Scrolls the view to the display section
 **/
function scrollToChart() {
   var x = $('#dataDisplay').offset().top - 100; // 100 provides buffer in viewport
   $('html,body').animate({scrollTop: x}, 500);
}

/**
 ** Handlers for panning feature
 **/
function includePan(currentChart) {
    var mouseDown;
    var lastX;
    var lastY;
    var chartWidth = $('#resizer').width() - 3;
    var chartHeight = $('#resizer').height() - 20;
    $('#querychart').mousedown(function() {
        mouseDown = 1;
    });

    $('#querychart').mouseup(function() {
        mouseDown = 0;
    });
    $('#querychart').mousemove(function(e) {
        if (mouseDown == 1) {
            if (e.pageX > lastX) {
                var xExtremes = currentChart.xAxis[0].getExtremes();
                var diff = (e.pageX - lastX) * (xExtremes.max - xExtremes.min) / chartWidth;
                currentChart.xAxis[0].setExtremes(xExtremes.min - diff, xExtremes.max - diff);
            } else if (e.pageX < lastX) {
                var xExtremes = currentChart.xAxis[0].getExtremes();
                var diff = (lastX - e.pageX) * (xExtremes.max - xExtremes.min) / chartWidth;
                currentChart.xAxis[0].setExtremes(xExtremes.min + diff, xExtremes.max + diff);
            }

            if (e.pageY > lastY) {
                var yExtremes = currentChart.yAxis[0].getExtremes();
                var ydiff = 1.0 * (e.pageY - lastY) * (yExtremes.max - yExtremes.min) / chartHeight;
                currentChart.yAxis[0].setExtremes(yExtremes.min + ydiff, yExtremes.max + ydiff);
            } else if (e.pageY < lastY) {
                var yExtremes = currentChart.yAxis[0].getExtremes();
                var ydiff = 1.0 * (lastY - e.pageY) * (yExtremes.max - yExtremes.min) / chartHeight;
                currentChart.yAxis[0].setExtremes(yExtremes.min - ydiff, yExtremes.max - ydiff);
            }
        }
        lastX = e.pageX;
        lastY = e.pageY;
    });
}

$(document).ready(function() {
    var cursorMode = ($("input[name='mode']:checked").val() == 'edit') ? 'crosshair' : 'pointer';
    var currentChart = null;
    var searchedDataKey = null;
    var xLabel = $('#tableid_0').val();
    var yLabel = $('#tableid_1').val();
    var xType = $('#types_0').val();
    var yType = $('#types_1').val();
    var dataLabel = $('#dataLabel').val();
    var lastX;
    var lastY;
    var zoomRatio = 1;


    // Get query result
    var searchedData = jQuery.parseJSON($('#querydata').html());

    /**
     ** Input form submit on field change
     **/
    $('#tableid_0').change(function() {
          $('#zoom_search_form').submit();
    });

    $('#tableid_1').change(function() {
          $('#zoom_search_form').submit();
    });

    $('#tableid_2').change(function() {
          $('#zoom_search_form').submit();
    });

    $('#tableid_3').change(function() {
          $('#zoom_search_form').submit();
    });

    /**
     * Input form validation
     **/
    $('#inputFormSubmitId').click(function() {
        if ($('#tableid_0').get(0).selectedIndex == 0 || $('#tableid_1').get(0).selectedIndex == 0) {
            PMA_ajaxShowMessage(PMA_messages['strInputNull']);
        } else if (xLabel == yLabel) {
            PMA_ajaxShowMessage(PMA_messages['strSameInputs']);
        }
    });

    /**
      ** Prepare a div containing a link, otherwise it's incorrectly displayed
      ** after a couple of clicks
      **/
    $('<div id="togglesearchformdiv"><a id="togglesearchformlink"></a></div>')
        .insertAfter('#zoom_search_form')
        // don't show it until we have results on-screen
        .hide();

    $('#togglesearchformlink')
        .html(PMA_messages['strShowSearchCriteria'])
        .bind('click', function() {
            var $link = $(this);
            $('#zoom_search_form').slideToggle();
            if ($link.text() == PMA_messages['strHideSearchCriteria']) {
                $link.text(PMA_messages['strShowSearchCriteria']);
            } else {
                $link.text(PMA_messages['strHideSearchCriteria']);
            }
         // avoid default click action
        return false;
     });

    /**
     ** Set dialog properties for the data display form
     **/
    var buttonOptions = {};
    /*
     * Handle saving of a row in the editor
     */
    buttonOptions[PMA_messages['strSave']] = function () {
        //Find changed values by comparing form values with selectedRow Object
        var newValues = new Object();//Stores the values changed from original
        var sqlTypes = new Object();
        var it = 4;
        var xChange = false;
        var yChange = false;
        for (key in selectedRow) {
            var oldVal = selectedRow[key];
            var newVal = ($('#fields_null_id_' + it).attr('checked')) ? null : $('#fieldID_' + it).val();
            if (newVal instanceof Array) { // when the column is of type SET
                newVal =  $('#fieldID_' + it).map(function(){
                    return $(this).val();
                }).get().join(",");
            }
            if (oldVal != newVal) {
                selectedRow[key] = newVal;
                newValues[key] = newVal;
                if (key == xLabel) {
                    xChange = true;
                    searchedData[searchedDataKey][xLabel] = newVal;
                } else if (key == yLabel) {
                    yChange = true;
                    searchedData[searchedDataKey][yLabel] = newVal;
                }
            }
            var $input = $('#fieldID_' + it);
            if ($input.hasClass('bit')) {
                sqlTypes[key] = 'bit';
            }
            it++;
        } //End data update

        //Update the chart series and replot
        if (xChange || yChange) {
            //Logic similar to plot generation, replot only if xAxis changes or yAxis changes. 
            //Code includes a lot of checks so as to replot only when necessary
            if (xChange) {
                xCord[searchedDataKey] = selectedRow[xLabel];
                // [searchedDataKey][0] contains the x value
                if (xType == 'numeric') {
                    series[0][searchedDataKey][0] = selectedRow[xLabel];
                } else if (xType == 'time') {
                    series[0][searchedDataKey][0] = 
                        getTimeStamp(selectedRow[xLabel], $('#types_0').val());
                } else {
                    // todo: text values
                }
                currentChart.series[0].data = series[0];
                // todo: axis changing
                currentChart.replot();

            }
            if (yChange) {
                yCord[searchedDataKey] = selectedRow[yLabel];
                // [searchedDataKey][1] contains the y value
                if (yType == 'numeric') {
                    series[0][searchedDataKey][1] = selectedRow[yLabel];
                } else if (yType == 'time') {
                    series[0][searchedDataKey][1] = 
                        getTimeStamp(selectedRow[yLabel], $('#types_1').val());
                } else {
                    // todo: text values
                }
                currentChart.series[0].data = series[0];
                // todo: axis changing
                currentChart.replot();
            }
        } //End plot update

        //Generate SQL query for update
        if (!isEmpty(newValues)) {
            var sql_query = 'UPDATE `' + window.parent.table + '` SET ';
            for (key in newValues) {
                sql_query += '`' + key + '`=' ;
                var value = newValues[key];

                // null
                if (value == null) {
                    sql_query += 'NULL, ';

                // empty
                } else if ($.trim(value) == '') {
                    sql_query += "'', ";

                // other
                } else {
                    // type explicitly identified
                    if (sqlTypes[key] != null) {
                        if (sqlTypes[key] == 'bit') {
                            sql_query += "b'" + value + "', ";
                        }
                    // type not explicitly identified
                    } else {
                        if (!isNumeric(value)) {
                            sql_query += "'" + value + "', ";
                        } else {
                            sql_query += value + ', ';
                        }
                    }
                }
            }
            sql_query = sql_query.substring(0, sql_query.length - 2);
            sql_query += ' WHERE ' + PMA_urldecode(searchedData[searchedDataKey]['where_clause']);

            //Post SQL query to sql.php
            $.post('sql.php', {
                    'token' : window.parent.token,
                    'db' : window.parent.db,
                    'ajax_request' : true,
                    'sql_query' : sql_query,
                    'inline_edit' : false
                }, function(data) {
                    if (data.success == true) {
                        $('#sqlqueryresults').html(data.sql_query);
                        $("#sqlqueryresults").trigger('appendAnchor');
                    } else {
                        PMA_ajaxShowMessage(data.error, false);
                    }
            }); //End $.post
        }//End database update
        $("#dataDisplay").dialog('close');
    };
    buttonOptions[PMA_messages['strCancel']] = function () {
        $(this).dialog('close');
    };
    $("#dataDisplay").dialog({
        autoOpen: false,
        title: PMA_messages['strDataPointContent'],
        modal: true,
        buttons: buttonOptions,
        width: $('#dataDisplay').width() + 80,
        open: function () {
            $(this).find('input[type=checkbox]').css('margin', '0.5em');
        }
    });
    /**
     * Attach Ajax event handlers for input fields
     * in the dialog. Used to submit the Ajax
     * request when the ENTER key is pressed.
     */
    $("#dataDisplay").find(':input').live('keydown', function (e) {
        if (e.which === 13) { // 13 is the ENTER key
            e.preventDefault();
            if (typeof buttonOptions[PMA_messages['strSave']] === 'function') {
                buttonOptions[PMA_messages['strSave']].call();
            }
        }
    });


    /*
     * Generate plot using jqplot 
     */

    if (searchedData != null) {
        $('#zoom_search_form')
         .slideToggle()
         .hide();
        $('#togglesearchformlink')
         .text(PMA_messages['strShowSearchCriteria']);
        $('#togglesearchformdiv').show();
        var selectedRow;
        var colorCodes = ['#FF0000', '#00FFFF', '#0000FF', '#0000A0', '#FF0080', '#800080', '#FFFF00', '#00FF00', '#FF00FF'];
        var series = new Array();
        var xCord = new Array();
        var yCord = new Array();
        var tempX, tempY;
        var it = 0;
        var xMax; // xAxis extreme max
        var xMin; // xAxis extreme min
        var yMax; // yAxis extreme max
        var yMin; // yAxis extreme min

        var options = {
            series: [
                // for a scatter plot
                { showLine: false }
            ],
            axes: {
                xaxis: {
                    label: $('#tableid_0').val(),
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
                },
                yaxis: {
                    label: $('#tableid_1').val(),
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
                },
            },
            highlighter: {
                show: true,
                tooltipAxes: 'y',
                yvalues: 2,
                // hide the first y value
                formatString: '<span class="hide">%s</span>%s'
            },
            cursor: {
                show: true,
                zoom: true,
                showTooltip: false
            }
        }

        // If data label is not set, do not show tooltips
        if (dataLabel == '') {
            options.highlighter.show = false;
        }

        // Classify types as either numeric,time,text
        xType = getType(xType);
        yType = getType(yType);

        // could have multiple series but we'll have just one
        series[0] = new Array();

        if (xType == 'time') {
            originalXType = $('#types_0').val();
            if (originalXType == 'date') {
                format = '%Y-%m-%d';
            } 
            // todo: does not seem to work
            //else if (originalXType == 'time') {
              //  format = '%H:%M';
            //} else {
            //    format = '%Y-%m-%d %H:%M';
            //}
            $.extend(options.axes.xaxis, {
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: format 
                }
            });
        }
        if (yType == 'time') {
            originalYType = $('#types_1').val();
            if (originalYType == 'date') {
                format = '%Y-%m-%d';
            } 
            $.extend(options.axes.yaxis, {
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: format 
                }
            });
        }
        
        $.each(searchedData, function(key, value) {
            if (xType == 'numeric') {
                var xVal = parseFloat(value[xLabel]);
            }
            if (xType == 'time') {
                var xVal = getTimeStamp(value[xLabel], originalXType);
            }
            if (yType == 'numeric') {
                var yVal = parseFloat(value[yLabel]);
            }
            if (yType == 'time') {
                var yVal = getTimeStamp(value[yLabel], originalYType);
            }
            series[0].push([
                xVal, 
                yVal, 
                // extra Y values
                value[dataLabel], // for highlighter
                                  // (may set an undefined value)
                value['where_clause'], // for click on point
                key               // key from searchedData
            ]);
        });

        currentChart = $.jqplot('querychart', series, options);

        $('button.button-reset').click(function(event) {
            event.preventDefault();
            currentChart.resetZoom();
        });

        $('div#querychart').resizable({
            resize: function(event, ui) {
                currentChart.replot( {resetAxes: true})
            }
        });

        $('div#querychart').bind('jqplotDataClick',
            function(event, seriesIndex, pointIndex, data) {
                searchedDataKey = data[4]; // key from searchedData (global)
                var field_id = 4;
                var post_params = {
                    'ajax_request' : true,
                    'get_data_row' : true,
                    'db' : window.parent.db,
                    'table' : window.parent.table,
                    'where_clause' : data[3],
                    'token' : window.parent.token
                };

                $.post('tbl_zoom_select.php', post_params, function(data) {
                    // Row is contained in data.row_info, 
                    // now fill the displayResultForm with row values
                    for (key in data.row_info) {
                        $field = $('#fieldID_' + field_id);
                        $field_null = $('#fields_null_id_' + field_id);
                        if (data.row_info[key] == null) {
                            $field_null.attr('checked', true);
                            $field.val('');
                        } else {
                            $field_null.attr('checked', false);
                            if ($field.attr('multiple')) { // when the column is of type SET
                                $field.val(data.row_info[key].split(','));
                            } else {
                                $field.val(data.row_info[key]);
                            }
                        }
                        field_id++;
                    }
                    selectedRow = new Object();
                    selectedRow = data.row_info;
                });

                $("#dataDisplay").dialog("open");
            }
        );
    }
});