MAINHACK

Viewing / Editing File: zoom_plot_jqplot.js

// TODO: change the axis
/**
 * @fileoverview JavaScript functions used on /table/search
 *
 * @requires    jQuery
 * @requires    js/functions.js
 **/

/* global changeValueFieldType, verifyAfterSearchFieldChange */ // js/table/change.js

/**
 *  Display Help/Info
 * @return {false}
 **/
function displayHelp () {
    var modal = $('#helpModal');
    modal.modal('show');
    modal.find('.modal-body').first().html(Messages.strDisplayHelp);
    $('#helpModalLabel').first().html(Messages.strHelpTitle);
    return false;
}

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

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

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

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

/**
 * Converts a date/time into timestamp
 * @param {string} val Date
 * @param {string} type Field type(datetime/timestamp/time/date)
 * @return {any} A value
 **/
function getTimeStamp (val, type) {
    if (type.toString().search(/datetime/i) !== -1 ||
        type.toString().search(/timestamp/i) !== -1
    ) {
        return $.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', val);
    } else if (type.toString().search(/time/i) !== -1) {
        return $.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', '1970-01-01 ' + val);
    } else if (type.toString().search(/date/i) !== -1) {
        return $.datepicker.parseDate('yy-mm-dd', val);
    }
}

/**
 * Classifies the field type into numeric,timeseries or text
 * @param {object} field field type (as in database structure)
 * @return {'text'|'numeric'|'time'}
 **/
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';
    }
}

/**
 * Unbind all event handlers before tearing down a page
 */
AJAX.registerTeardown('table/zoom_plot_jqplot.js', function () {
    $('#tableid_0').off('change');
    $('#tableid_1').off('change');
    $('#tableid_2').off('change');
    $('#tableid_3').off('change');
    $('#inputFormSubmitId').off('click');
    $('#togglesearchformlink').off('click');
    $(document).off('keydown', '#dataDisplay :input');
    $('button.button-reset').off('click');
    $('div#resizer').off('resizestop');
    $('div#querychart').off('jqplotDataClick');
});

AJAX.registerOnload('table/zoom_plot_jqplot.js', function () {
    var currentChart = null;
    var searchedDataKey = null;
    var xLabel = $('#tableid_0').val();
    var yLabel = $('#tableid_1').val();
    // will be updated via Ajax
    var xType = $('#types_0').val();
    var yType = $('#types_1').val();
    var dataLabel = $('#dataLabel').val();

// Get query result
    var searchedData;
    try {
        searchedData = JSON.parse($('#querydata').html());
    } catch (err) {
        searchedData = null;
    }

// adding event listener on select after AJAX request
    var comparisonOperatorOnChange = function () {
        var tableRows = $('#inputSection select.column-operator');
        $.each(tableRows, function (index, item) {
            $(item).on('change', function () {
                changeValueFieldType(this, index);
                verifyAfterSearchFieldChange(index, '#zoom_search_form');
            });
        });
    };

/**
     ** Input form submit on field change
     **/

// first column choice corresponds to the X axis
    $('#tableid_0').on('change', function () {
        // AJAX request for field type, collation, operators, and value field
        $.post('index.php?route=/table/zoom-search', {
            'ajax_request' : true,
            'change_tbl_info' : true,
            'server' : CommonParams.get('server'),
            'db' : CommonParams.get('db'),
            'table' : CommonParams.get('table'),
            'field' : $('#tableid_0').val(),
            'it' : 0
        }, function (data) {
            $('#tableFieldsId').find('tr').eq(1).find('td').eq(0).html(data.field_type);
            $('#tableFieldsId').find('tr').eq(1).find('td').eq(1).html(data.field_collation);
            $('#tableFieldsId').find('tr').eq(1).find('td').eq(2).html(data.field_operators);
            $('#tableFieldsId').find('tr').eq(1).find('td').eq(3).html(data.field_value);
            xLabel = $('#tableid_0').val();
            $('#types_0').val(data.field_type);
            xType = data.field_type;
            $('#collations_0').val(data.field_collations);
            comparisonOperatorOnChange();
            Functions.addDateTimePicker();
        });
    });

// second column choice corresponds to the Y axis
    $('#tableid_1').on('change', function () {
        // AJAX request for field type, collation, operators, and value field
        $.post('index.php?route=/table/zoom-search', {
            'ajax_request' : true,
            'change_tbl_info' : true,
            'server' : CommonParams.get('server'),
            'db' : CommonParams.get('db'),
            'table' : CommonParams.get('table'),
            'field' : $('#tableid_1').val(),
            'it' : 1
        }, function (data) {
            $('#tableFieldsId').find('tr').eq(2).find('td').eq(0).html(data.field_type);
            $('#tableFieldsId').find('tr').eq(2).find('td').eq(1).html(data.field_collation);
            $('#tableFieldsId').find('tr').eq(2).find('td').eq(2).html(data.field_operators);
            $('#tableFieldsId').find('tr').eq(2).find('td').eq(3).html(data.field_value);
            yLabel = $('#tableid_1').val();
            $('#types_1').val(data.field_type);
            yType = data.field_type;
            $('#collations_1').val(data.field_collations);
            comparisonOperatorOnChange();
            Functions.addDateTimePicker();
        });
    });

$('#tableid_2').on('change', function () {
        // AJAX request for field type, collation, operators, and value field
        $.post('index.php?route=/table/zoom-search', {
            'ajax_request' : true,
            'change_tbl_info' : true,
            'server' : CommonParams.get('server'),
            'db' : CommonParams.get('db'),
            'table' : CommonParams.get('table'),
            'field' : $('#tableid_2').val(),
            'it' : 2
        }, function (data) {
            $('#tableFieldsId').find('tr').eq(4).find('td').eq(0).html(data.field_type);
            $('#tableFieldsId').find('tr').eq(4).find('td').eq(1).html(data.field_collation);
            $('#tableFieldsId').find('tr').eq(4).find('td').eq(2).html(data.field_operators);
            $('#tableFieldsId').find('tr').eq(4).find('td').eq(3).html(data.field_value);
            $('#types_2').val(data.field_type);
            $('#collations_2').val(data.field_collations);
            comparisonOperatorOnChange();
            Functions.addDateTimePicker();
        });
    });

$('#tableid_3').on('change', function () {
        // AJAX request for field type, collation, operators, and value field
        $.post('index.php?route=/table/zoom-search', {
            'ajax_request' : true,
            'change_tbl_info' : true,
            'server' : CommonParams.get('server'),
            'db' : CommonParams.get('db'),
            'table' : CommonParams.get('table'),
            'field' : $('#tableid_3').val(),
            'it' : 3
        }, function (data) {
            $('#tableFieldsId').find('tr').eq(5).find('td').eq(0).html(data.field_type);
            $('#tableFieldsId').find('tr').eq(5).find('td').eq(1).html(data.field_collation);
            $('#tableFieldsId').find('tr').eq(5).find('td').eq(2).html(data.field_operators);
            $('#tableFieldsId').find('tr').eq(5).find('td').eq(3).html(data.field_value);
            $('#types_3').val(data.field_type);
            $('#collations_3').val(data.field_collations);
            comparisonOperatorOnChange();
            Functions.addDateTimePicker();
        });
    });

/**
     * Input form validation
     **/
    $('#inputFormSubmitId').on('click', function () {
        if ($('#tableid_0').get(0).selectedIndex === 0 || $('#tableid_1').get(0).selectedIndex === 0) {
            Functions.ajaxShowMessage(Messages.strInputNull);
        } else if (xLabel === yLabel) {
            Functions.ajaxShowMessage(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(Messages.strShowSearchCriteria)
        .on('click', function () {
            var $link = $(this);
            $('#zoom_search_form').slideToggle();
            if ($link.text() === Messages.strHideSearchCriteria) {
                $link.text(Messages.strShowSearchCriteria);
            } else {
                $link.text(Messages.strHideSearchCriteria);
            }
            // avoid default click action
            return false;
        });

/**
     * Handle saving of a row in the editor
     */
    var dataPointSave = function () {
        // Find changed values by comparing form values with selectedRow Object
        var newValues = {};// Stores the values changed from original
        var sqlTypes = {};
        var it = 0;
        var xChange = false;
        var yChange = false;
        var key;
        var tempGetVal = function () {
            return $(this).val();
        };
        for (key in selectedRow) {
            var oldVal = selectedRow[key];
            var newVal = ($('#edit_fields_null_id_' + it).prop('checked')) ? null : $('#edit_fieldID_' + it).val();
            if (newVal instanceof Array) { // when the column is of type SET
                newVal =  $('#edit_fieldID_' + it).map(tempGetVal).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 = $('#edit_fieldID_' + it);
            if ($input.hasClass('bit')) {
                sqlTypes[key] = 'bit';
            } else {
                sqlTypes[key] = null;
            }
            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 {
                    series[0][searchedDataKey][0] = '';
                    // 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 {
                    series[0][searchedDataKey][1] = '';
                    // 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 sqlQuery = 'UPDATE `' + CommonParams.get('table') + '` SET ';
            for (key in newValues) {
                sqlQuery += '`' + key + '`=';
                var value = newValues[key];

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

// empty
                } else if (value.trim() === '') {
                    sqlQuery += '\'\', ';

// other
                } else {
                    // type explicitly identified
                    if (sqlTypes[key] !== null) {
                        if (sqlTypes[key] === 'bit') {
                            sqlQuery += 'b\'' + value + '\', ';
                        }
                    // type not explicitly identified
                    } else {
                        if (!isNumeric(value)) {
                            sqlQuery += '\'' + value + '\', ';
                        } else {
                            sqlQuery += value + ', ';
                        }
                    }
                }
            }
            // remove two extraneous characters ', '
            sqlQuery = sqlQuery.substring(0, sqlQuery.length - 2);
            sqlQuery += ' WHERE ' + Sql.urlDecode(searchedData[searchedDataKey].where_clause);

$.post('index.php?route=/sql', {
                'server' : CommonParams.get('server'),
                'db' : CommonParams.get('db'),
                'ajax_request' : true,
                'sql_query' : sqlQuery,
                'inline_edit' : false
            }, function (data) {
                if (typeof data !== 'undefined' && data.success === true) {
                    $('#sqlqueryresultsouter').html(data.sql_query);
                    Functions.highlightSql($('#sqlqueryresultsouter'));
                } else {
                    Functions.ajaxShowMessage(data.error, false);
                }
            }); // End $.post
        }// End database update
    };

$('#dataPointSaveButton').on('click', function () {
        dataPointSave();
    });

$('#dataPointModalLabel').first().html(Messages.strDataPointContent);

/**
     * Attach Ajax event handlers for input fields
     * in the dialog. Used to submit the Ajax
     * request when the ENTER key is pressed.
     */
    $(document).on('keydown', '#dataDisplay :input', function (e) {
        if (e.which === 13) { // 13 is the ENTER key
            e.preventDefault();
            if (typeof dataPointSave === 'function') {
                dataPointSave();
            }
        }
    });

/*
     * Generate plot using jqplot
     */

if (searchedData !== null) {
        $('#zoom_search_form')
            .slideToggle()
            .hide();
        $('#togglesearchformlink')
            .text(Messages.strShowSearchCriteria);
        $('#togglesearchformdiv').show();
        var selectedRow;
        var series = [];
        var xCord = [];
        var yCord = [];
        var xVal;
        var yVal;
        var format;

var options = {
            series: [
                // for a scatter plot
                { showLine: false }
            ],
            grid: {
                drawBorder: false,
                shadow: false,
                background: 'rgba(0,0,0,0)'
            },
            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] = [];

if (xType === 'time') {
            var 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') {
            var 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') {
                xVal = parseFloat(value[xLabel]);
            }
            if (xType === 'time') {
                xVal = getTimeStamp(value[xLabel], originalXType);
            }
            if (yType === 'numeric') {
                yVal = parseFloat(value[yLabel]);
            }
            if (yType === 'time') {
                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
                value.where_clause_sign
            ]);
        });

// under IE 8, the initial display is mangled; after a manual
        // resizing, it's ok
        // under IE 9, everything is fine
        currentChart = $.jqplot('querychart', series, options);
        currentChart.resetZoom();

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

$('div#resizer').resizable();
        $('div#resizer').on('resizestop', function () {
            // make room so that the handle will still appear
            $('div#querychart').height($('div#resizer').height() * 0.96);
            $('div#querychart').width($('div#resizer').width() * 0.96);
            currentChart.replot({ resetAxes: true });
        });

$('div#querychart').on('jqplotDataClick',
            function (event, seriesIndex, pointIndex, data) {
                searchedDataKey = data[4]; // key from searchedData (global)
                var fieldId = 0;
                var postParams = {
                    'ajax_request' : true,
                    'get_data_row' : true,
                    'server' : CommonParams.get('server'),
                    'db' : CommonParams.get('db'),
                    'table' : CommonParams.get('table'),
                    'where_clause' : data[3],
                    'where_clause_sign' : data[5]
                };

$.post('index.php?route=/table/zoom-search', postParams, function (data) {
                    // Row is contained in data.row_info,
                    // now fill the displayResultForm with row values
                    var key;
                    for (key in data.row_info) {
                        var $field = $('#edit_fieldID_' + fieldId);
                        var $fieldNull = $('#edit_fields_null_id_' + fieldId);
                        if (data.row_info[key] === null) {
                            $fieldNull.prop('checked', true);
                            $field.val('');
                        } else {
                            $fieldNull.prop('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]);
                            }
                        }
                        fieldId++;
                    }
                    selectedRow = data.row_info;
                });

$('#dataPointModal').modal('show');
            }
        );
    }

$('#help_dialog').on('click', function () {
        displayHelp();
    });
});

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: zoom_plot_jqplot.js

Server Info

System Features

User Info