results_viewer/src/main.js

/**
 * Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */
'use strict';

(function() {
  /**
   * Main results viewer component.
   */
  var Viewer = ui.define('div');
  (function() {
    //"Private" functions for Viewer
    /**
     * Determines the appropriate parser for a given column, using it's first
     * data element.
     * @param {String} firstElement The first (non-header) element of a given
     * column.
     * @return {String} The YUI parser needed for the column.
     */
    function getColumnParser(firstElement) {
      if (isNumeric(firstElement)) {
        return 'number';
      } else if (isDate(firstElement)) {
        return 'date';
      } else {
        return 'string';
      }
    }

    /**
     * Determines whether or not the given element is a date.
     * @param {String} str The string representation of a potential date.
     * @return {boolean} true/false whether or not str can be parsed to
     * a date.
     */
    function isDate(str) {
      var timestamp = Date.parse(str);
      return !isNaN(timestamp);
    }

    /**
     * Generates the YUI column definition for the given dataset.
     * @param {String[][]} dataSet the dataset that will be displayed.
     * @return {JSON[]} The array containing the column definitions.
     */
    function createYUIColumnDefinitions(dataSet) {
      var header = dataSet[0];
      var firstRow = dataSet[1];
      var columnDefinitions = [];
      header.forEach(function (element, index, array) {
        columnDefinitions.push({
          'key' : index.toString(),
          'label':element.toString(),
          'maxAutoWidth':95,
          'sortable':true,
          'parser':getColumnParser(firstRow[index])});
      });
      return columnDefinitions;
    }

    /**
     * Generates the YUI data source for the given dataset.
     * @param {String[][]} dataSet the dataset that will be displayed.
     * @return {YAHOO.util.FunctionDataSource} The YUI data source
     * derived from the dataset.
     */
    function createYUIDataSource(dataSet) {
      var dataSource = [];
      //Starts from the first non-header line.
      for (var i = 1; i < dataSet.length; i++) {
        var dataSourceLine = {};
        dataSet[i].forEach(function (element, index, array) {
          if (isNumeric(element)) {
            dataSourceLine[index.toString()] = parseFloat(element);
          } else {
            dataSourceLine[index.toString()] = element
          }
        });
        dataSource.push(dataSourceLine);
      }
      return new YAHOO.util.FunctionDataSource(function() {
                                               return dataSource});
    }

    /**
     * Un-selects all the columns from the given data table.
     * @param {YAHOO.widget.DataTable} dataTable The data table that
     * contains the results.
     */
    function unselectAllColumns(dataTable) {
      var selectedColumns = dataTable.getSelectedColumns();
      for (var i = 0; i < selectedColumns.length; i++) {
        dataTable.unselectColumn(selectedColumns[i]);
      }
    }

    /**
     * Generates an array that contains the indices of the selected
     * columns in the data table.
     * @param {YAHOO.widget.DataTable} dataTable
     * @return {int[]} An array with the indices of the selected columns.
     */
    function getSelectedColumnIndices(dataTable) {
      var selectedColumnIndices = [];
      var selectedColumns = dataTable.getSelectedColumns();
      for (var i = 0; i < selectedColumns.length; i++) {
        selectedColumnIndices.push(selectedColumns[i].key);
      }
      return selectedColumnIndices;
    }

    Viewer.prototype = {
      __proto__: HTMLDivElement.prototype,
      decorate:function() {
        /**
         * The id for the element that contains the barchart (Optional).
         * @type {String}
         */
        this.barChartElementId_ = undefined;
        /**
         * The rectangular array that contains the contents of the cvs file.
         * @type {String[][]}
         */
        this.dataSet_ = undefined;
      },
      set barChartElementId(e) {
        this.barChartElementId_ = e;
      },
      get barChartElementId() {
        return this.barChartElementId_;
      },
      set dataSet(ds) {
        this.dataSet_ = ds;
      },
      get dataSet() {
        return this.dataSet_;
      },
      /**
       * Renders the Viewer component.
       * @expose
       */
      render: function() {
        document.body.appendChild(this);
        var previousBarChart = this.barChartElementId_ != null ?
                               $(this.barChartElementId_) : null;
        if (previousBarChart != null) {
          document.body.removeChild(previousBarChart);
          window.location.hash = this.id;
        }

        var columnDefinitions = createYUIColumnDefinitions(this.dataSet_);
        var dataSource = createYUIDataSource(this.dataSet_);
        var dataTable = new YAHOO.widget.DataTable(this.id, columnDefinitions,
            dataSource, {caption:'Results'});
        var firstRow = this.dataSet_[1];
        var currentViewer = this;

        dataTable.subscribe('cellClickEvent', function (oArgs) {
          var selectedColumn = dataTable.getColumn(oArgs.target);
          var selectedColumnIndex = parseInt(selectedColumn.key);

          if (selectedColumnIndex == 0) {
            unselectAllColumns(dataTable);
            return;
          }

          if (isNumeric(firstRow[selectedColumnIndex])) {
            dataTable.selectColumn(selectedColumn);
            if (currentViewer.barChartElementId_ != null) {
              var viewerBarChart_ =
                      new ViewerBarChart({ownerDocument:window.document});
              viewerBarChart_.id = currentViewer.barChartElementId_;
              viewerBarChart_.dataSet = currentViewer.dataSet_;
              viewerBarChart_.selectedColumnIndices
                  = getSelectedColumnIndices(dataTable);
              viewerBarChart_.render();
            }
          }
        });
      }
    };
  }());

  /**
   * BarChart component for the results viewer.
   */
  var ViewerBarChart = ui.define('div');
  (function () {
    //"Private" functions for ViewerBarChart
    /**
     * Generates a new array that contains only the first column, and all
     * other selected columns.
     * @param {(string|number)[][]} dataset Array with the csv contents.
     * @param {int[]} selectedColumnIndices Indices for all the selected
     * columns.
     * @return {String[][]} A new array containing the first column
     * and all selected columns.
     */
    function extractColumnsToPlot(dataset, selectedColumnIndices) {
      var lines = [];
      var line = [];
      for (var i = 0; i < dataset.length; ++i) {
        line.push(dataset[i][0]);
        for (var j = 0; j < selectedColumnIndices.length; j++) {
          var elementValue = dataset[i][selectedColumnIndices[j]];
          line.push(isNumeric(elementValue) ? parseFloat(elementValue) :
                        elementValue);
        }
        lines.push(line);
        line = [];
      }
      return lines;
    }

    ViewerBarChart.prototype = {
      __proto__:HTMLDivElement.prototype,
      decorate: function() {
        /**
         * Percetage of the window width that will be used for the chart
         * @const
         * @type {float}
         */
        ViewerBarChart.PERCENTAGE_OF_WINDOW_WIDTH_FOR_CHART = 0.75;
        /**
         * Approximate number of pixels that will be used per line
         * @const
         * @type {int}
         */
        ViewerBarChart.HEIGHT_PER_LINE_IN_PIXELS = 28;

        /**
         * Raw dataset, which contains the csv file contents.
         * @type {(String|number)[][]}
         */
        this.dataSet_ = undefined;
        /**
         * Array that contains the selected indices from the table view.
         * @type {number[]}
         */
        this.selectedColumnIndices_ = undefined;
      },
      /**
       * Renders the ViewerBarChart component.
       * @expose
       */
      render : function() {
        var existingBarChart = $(this.id);
        if (existingBarChart != null) {
          //Remove the previous bar chart
          document.body.removeChild(existingBarChart);
        }
        //Attach this component to the document
        document.body.appendChild(this);
        var lines = extractColumnsToPlot(this.dataSet_,
            this.selectedColumnIndices_);
        var data = google.visualization.arrayToDataTable(lines);

        var barCharWidth = window.width *
                           ViewerBarChart.PERCENTAGE_OF_WINDOW_WIDTH_FOR_CHART;
        var barCharHeight = this.dataSet_.length *
                            ViewerBarChart.HEIGHT_PER_LINE_IN_PIXELS;
        var options = {
          'width': barCharWidth,
          'height':barCharHeight,
          'fontSize':15
        };
        new google.visualization.BarChart(this).draw(data, options);
        window.location.hash = this.id;
      },
      set dataSet(ds) {
        this.dataSet_ = ds;
      },
      set selectedColumnIndices(sci) {
        this.selectedColumnIndices_ = sci;
      }
    };
  }());

  /**
   * Determines whether or not a string can be parsed to a number.
   * @param {String} element String representation of the potential number.
   * @return {boolean} True or false depending on whether the element is
   * numeric or not.
   */
  function isNumeric(element) {
    return !isNaN(parseFloat(element)) && isFinite(element);
  }

  window.Viewer = Viewer;
  window.ViewerBarChart = ViewerBarChart;
})();