px-heatmap-grid-table.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!--
    Relative paths assume component is being run from inside an app or another component, where dependencies are flat
    siblings. When this component is run from its own repo (e.g. tests, examples), we assume the server is started with
    'gulp serve' (or similar server setup) to enable correct finding of bower dependencies for local runs.
-->
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="css/px-heatmap-grid-styles.html">
<link rel="import" href="../px-tooltip/px-tooltip.html">
<link rel="import" href="../px-icon-set/px-icon-set-utility.html">
<link rel="import" href="../px-icon-set/px-icon.html">

<dom-module id="px-heatmap-grid-table">
  <template>
    <style include="px-heatmap-grid-styles"></style>
    <div class="table-container flex flex--row">
      <template is="dom-if" if="{{!hideRowHeader}}">
        <div class$="u-pl- u-pr- table-row-header flex flex--col flex--justify {{disabledHeader}}">
          <template is="dom-if" if="{{showAggregation}}">
            <div class="row-header">
              <div class="row-header-text"><span>{{aggregationType}}</span></div>
            </div>
          </template>
          <template is="dom-repeat" items="{{rows}}" as="row">
            <div class="row-header flex flex--row flex--middle flex--justify" on-click="_sortRow">
              <div class="row-header-text" id="row-header-{{index}}">{{_getHeader("row", index, rows)}}</div>
              <px-icon class="actionable actionable--select u-ml-" icon="px-utl:chevron-left" hidden$="{{_sortingIcon(index,'row','up', heatmapData)}}"></px-icon>
              <px-icon class="actionable actionable--select u-ml-" icon="px-utl:chevron-right" hidden$="{{_sortingIcon(index,'row','down', heatmapData)}}"></px-icon>
              <px-tooltip smart-orientation="true" orientation="right" for="row-header-{{index}}" delay="100" tooltip-message="{{_getHeader('row', index, rows)}}">
              </px-tooltip>
            </div>
          </template>
        </div>
      </template>
      <div class="table-container flex flex--row flex--left flex--top">
        <template is="dom-if" if="{{showRowAggregation}}">
          <div class="table-column">
            <div class="u-pr-- u-pb-- u-pl-- col-header" hidden$="{{hideColHeader}}">
              <div class="col-header-text">{{aggregationType}}</div>
            </div>
            <div class="u-p-- table-empty-cell" hidden$="{{!showColAggregation}}">
              <span>&nbsp;</span>
            </div>
            <template is="dom-repeat" items="{{rowAggregatedData}}">
              <div class="u-p-- table-cell">
                <span>{{item}}</span>
              </div>
            </template>
          </div>
        </template>
        <template is="dom-repeat" items="{{heatmapData}}" as="items" id="heatmapDataRepeat">
          <div class="table-column">
            <template is="dom-if" if="{{!hideColHeader}}">
              <div class="u-pr-- u-pb-- u-pl-- col-header flex flex--row flex--middle flex--justify" on-click="_sortCol">
                <div class="col-header-text" id="col-header-{{index}}">
                  {{_getHeader("col", index, cols)}}
                </div>
                <px-icon class="actionable actionable--select u-ml-" icon="px-utl:chevron-up" hidden$="{{_sortingIcon(index,'col','up',heatmapData)}}"></px-icon>
                <px-icon class="actionable actionable--select u-ml-" icon="px-utl:chevron" hidden$="{{_sortingIcon(index,'col','down',heatmapData)}}"></px-icon>
                <px-tooltip smart-orientation="true" orientation="bottom" for="col-header-{{index}}" delay="100" tooltip-message="{{_getHeader('col', index, cols)}}">
                </px-tooltip>
              </div>
            </template>
            <template is="dom-if" if="{{showColAggregation}}">
              <div class="u-p-- table-cell">
                <span>{{_getColAggregation(index, colAggregatedData)}}</span>
              </div>
            </template>
            <template is="dom-repeat" items="{{items}}" as="item">
              <div class="u-p-- table-cell cell-values" style$="[[item.color]]">
                <span hidden$="{{hideValues}}">{{item.value}}</span>
                <template is="dom-if" if="{{hideValues}}">
                  <px-tooltip smart-orientation="true" orientation="bottom" delay="100" tooltip-message="{{item.value}}"></px-tooltip>
                </template>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-heatmap-grid-table',

    properties: {
      /**
       * Holds the data.
       *
       * @property data
       */
      data: {
        type: Array,
        value: function () { return []; },
        notify: true,
        observer: '_dataChanged'
      },

      /**
       * Holds the rendered data
       *
       * @property heatmapData
       */
      heatmapData: {
        type: Array,
        value: function () { return []; }
      },

      /**
       * Holds the config info
       *
       * @property config
       */
      config: {
        type: Object,
        value: function () {
          return {
            minValue: 0,
            maxValue: 0,
            startColor: [],
            endColor: [],
            factors: []
          };
        },
        observer: '_configChanged'
      },
      /**
       * Holds the scale set by the user
       *
       * @property scale
       */
      scale: {
        type: Array,
        value: function () { return [0, 100]; },
        observer: '_scaleChanged'
      },

      /**
       * Controls when to show/hide the Column Headers
       *
       * @property hideColHeader
       */
      hideColHeader: {
        type: Boolean,
        value: false,
        observer: '_hideColHeaderChanged',
        notify: true
      },

      /**
       * Controls when to show/hide the Row Headers
       *
       * @property hideRowHeader
       */
      hideRowHeader: {
        type: Boolean,
        value: false,
        observer: '_hideRowHeaderChanged',
      },

      /**
       * Controls when to show/hide the Values in the cells
       */
      hideValues: {
        type: Boolean,
        value: false
      },

      /**
       * Sets the aggregation method
       *
       * @property aggregationType
       */
      aggregationType: {
        type: String,
        value: "",
        observer: '_calculateAggregation'
      },

      /**
       * Controls when to show/hide the Aggregations
       *
       * @property showAggregation
       */
      showAggregation: {
        type: Boolean,
        value: false,
        observer: '_showAggregationChanged'
      },

      /**
       * Contains all the available aggregation types
       *
       * @property availableAggregations
       */
      availableAggregations: {
        type: Array,
        value: [
          "AVERAGE",
          "MAX",
          "MIN",
          "SUM",
          "COUNT",
          "STD"
        ]
      },

      /**
       * Contains the Scale From color.
       *
       * @property scaleColorFrom
       */
      scaleColorFrom: {
        type: String,
        observer: '_scaleColorFromChanged'
      },

      /**
       * Contains the Scale To color.
       *
       * @property scaleColorTo
       */
      scaleColorTo: {
        type: String,
        observer: '_scaleColorToChanged'
      }
    },

    /**
     * After the component is attached to the DOM calls
     * _dataChanged and _configChanged.
     */
    attached: function () {
      this._dataChanged(this.data, []);
      this._configChanged(this.config, {});
    },

    /**
     * Add an event listener for the px-tooltip in order to
     * evaluate when to hide tooltips for non ellipsed text
     */
    ready: function () {
      this.addEventListener('px-tooltip-request-show', this._hideTooltip);
    },

    detached: function () {
      this.removeEventListener('px-tooltip-request-show', this._hideTooltip);
    },

    /**
     * Observes the changes to data and creates the internal
     * data structure used to render the heatmap table.
     * Saves the initial column ordering in initialColsOrder.
     * Saves the initial row ordering in initialRowsOrder.
     * Triggers the aggregation calculation and the hide/show
     * method to hide/show the titles according to the data.
     *
     * newData accepts 4 different data formats:
     * Array<Object> (with rows and columns)
     * Array<Object> (with rows or columns)
     * Array<Array>
     * Array<number>
     *
     * @param {Array<Object|Array|number>} newData The new heatmap data.
     * @param {Array<Object|Array|number>} oldData The old heatmap data.
     *
     * @method _dataChanged
     * @private
     */
    _dataChanged: function (newData, oldData) {
      if (newData != oldData && newData && newData.length && newData[0] !== null) {
        var rows = [],
          cols = [],
          tableData = [],
          response = {};

        //Handles the case where newData is an Array<Array>
        if (Array.isArray(newData[0])) {
          tableData = this._processNewDataArray(newData);
        }

        //Handles the case where newData is an Array<number>
        else if (typeof newData[0] !== "object" && typeof newData[0] !== "string") {
          tableData = this._processNewDataNumber(newData)
        }

        //Handles the case where newData is an Array<Object> and the Object has the property values
        else if (typeof newData[0] === "object" && newData[0].values) {
          response = this._processNewDataObject(newData);
          tableData = response['tableData'];
          rows = response['rows'];
          cols = response['cols'];
        }

        //Finally handles the last newData type where newData is an Array<Object>
        else if (typeof newData[0] !== "string") {
          response = this._processNewDataFullObject(newData);
          tableData = response['tableData'];
          rows = response['rows'];
          cols = response['cols'];
        }

        // Force set length of array
        rows.length = Object.keys(rows).length;
        cols.length = Object.keys(cols).length;

        // Initialize the heatmap
        this.set("heatmapData", []);
        this.set("rows", rows);
        this.set("cols", cols);
        this.set("heatmapData", tableData);
        this._calculateAggregation(this.aggregationType, "");
        this._hideColHeaderChanged(false, true);
        this._hideRowHeaderChanged(false, true);
        this._initializeRowsOrdering();
        this._initializeColsOrdering();
      }
    },

    /**
     * Processes the heatmap data and creates the data model used to render the grid.
     *
     * Handles the case where the data is an Array<Array>
     * [
     *   [0, 1, 2, 3, 4, 5, 6],
     *   [7, 8, 9, 10, 11, 12, 13],
     *   [14, 15, 16, 17, 18, 19, 20]
     * ]
     *
     * @param {Array<Array>} data The heatmap data.
     *
     * @returns {Array<Object>} The heatmap data in the format to be rendered.
     *
     * @method _processNewDataArray
     * @private
     */
    _processNewDataArray: function (data) {
      var nColor = [],
        tableData = [],
        stopLen = data.length;

      for (var i = 0; i < stopLen; i++) {
        var colArr = data[i],
          stopLen2 = colArr.length;

        for (var j = 0; j < stopLen2; j++) {
          var value = colArr[j];

          if (!tableData[j]) tableData.push([]);
          nColor = this.config != undefined ? this._calculateColor(value) : [255, 255, 255];
          tableData[j][i] = {
            "value": value,
            "color": nColor ? "background-color: rgb(" + nColor[0] + "," + nColor[1] + "," + nColor[2] + ");" : ""
          };
        }
      }

      return tableData;
    },

    /**
     * Processes the heatmap data and creates the data model used to render the grid.
     *
     * Handles the case where newData is an Array<Object> and the Object has the property values
     *
     * [
     *   {
     *     "row": "Row Title",
     *     "values": [0, 1, 2, 3, 4, 5]
     *   }
     * ]
     *
     * or
     *
     * [
     *   {
     *     "col": "Column Title",
     *     "values": [0, 1, 2, 3, 4, 5]
     *   }
     * ]
     *
     * @param {Array<Object>} data The heatmap data.
     *
     * @returns {Object} The heatmap data in the format to be rendered, the list of col titles and the list of row titles.
     *
     * @method _processNewDataArray
     * @private
     */
    _processNewDataObject: function (data) {
      var nColor = [],
        iRow = -1,
        iCol = -1,
        tableData = [],
        rows = [],
        cols = [],
        stopLen = data.length;

      for (var i = 0; i < stopLen; i++) {
        var cell = data[i],
          stopLen2 = cell.values.length;

        iRow = cell.row ? Object.keys(rows).indexOf(cell.row) : -2;
        iCol = cell.col ? Object.keys(cols).indexOf(cell.col) : -2;

        if (iCol === -2) {
          rows[cell.row] = cell.row;
        }

        if (iRow === -2) {
          cols[cell.col] = cell.col;
        }

        for (var j = 0; j < stopLen2; j++) {
          var value = cell.values[j];
          nColor = this.config != undefined ? this._calculateColor(value) : [255, 255, 255];

          if (iCol === -2) {
            if (i === 0) tableData.push([]);
            tableData[j].push({
              "value": value,
              "color": nColor ? "background-color: rgb(" + nColor[0] + "," + nColor[1] + "," + nColor[2] + ");" : ""
            });
          }
          else {
            if (j === 0) tableData.push([]);
            tableData[i].push({
              "value": value,
              "color": nColor ? "background-color: rgb(" + nColor[0] + "," + nColor[1] + "," + nColor[2] + ");" : ""
            });
          }
        }
      }

      return {
        tableData: tableData,
        rows: rows,
        cols: cols
      };
    },

    /**
     * Processes the heatmap data and creates the data model used to render the grid.
     *
     * Handles the case where newData is an Array<number>
     *
     * [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
     *
     *
     * @param {Array<Array>} data The heatmap data.
     *
     * @returns {Array<Object>} The heatmap data in the format to be rendered.
     *
     * @method _processNewDataArray
     * @private
     */
    _processNewDataNumber: function (data) {
      var nColor = [],
        tableData = [],
        stopLen = data.length;

      for (var i = 0; i < stopLen; i++) {
        var value = data[i];

        nColor = this.config != undefined ? this._calculateColor(value) : [255, 255, 255];
        tableData.push([{
          "value": value,
          "color": nColor ? "background-color: rgb(" + nColor[0] + "," + nColor[1] + "," + nColor[2] + ");" : ""
        }]);
      }

      return tableData;
    },

    /**
     * Processes the heatmap data and creates the data model used to render the grid.
     *
     * Handles the last newData type where newData is an Array<Object>
     *
     * [
     *   {
     *     "row": "Row Title",
     *     "col": "Column Title",
     *     "value": 10
     *   }
     * ]
     *
     * @param {Array<Object>} data The heatmap data.
     *
     * @returns {Object} The heatmap data in the format to be rendered, the list of col titles and the list of row titles.
     *
     * @method _processNewDataArray
     * @private
     */
    _processNewDataFullObject: function (data) {
      var nColor = [],
        iRow = -1,
        iCol = -1,
        tableData = [],
        rows = [],
        cols = [],
        stopLen = data.length;

      for (var i = 0; i < stopLen; i++) {
        var cell = data[i];

        if (cell) {
          iRow = Object.keys(rows).indexOf(cell.row);
          iCol = Object.keys(cols).indexOf(cell.col);
          if (iCol === -1) {
            cols[cell.col] = cell.col;
            tableData.push([]);
            iCol = Object.keys(cols).length - 1;
          };
          if (iRow === -1) {
            rows[cell.row] = cell.row;
            iRow = Object.keys(rows).length - 1;
          };
          nColor = this.config != undefined ? this._calculateColor(cell.value) : [255, 255, 255];
          tableData[iCol][iRow] = {
            "value": cell.value,
            "color": nColor ? "background-color: rgb(" + nColor[0] + "," + nColor[1] + "," + nColor[2] + ");" : ""
          };
        }
      }

      return {
        tableData: tableData,
        rows: rows,
        cols: cols
      };
    },

    /**
     * Saves the initial Rows ordering in initialRowsOrder
     *
     * @method _initializeRowsOrdering
     * @private
     */
    _initializeRowsOrdering: function () {
      var initialRowsOrder = [],
        stopLen = this.rows.length;

      if (this.rows && stopLen) {
        for (var i = 0; i < stopLen; i++) {
          initialRowsOrder.push({
            index: i,
            value: Object.keys(this.rows)[i]
          });
        }

        this.initialRowsOrder = initialRowsOrder;
      }

      // If there's no row header titles uses the first column of data
      else if (this.heatmapData && this.heatmapData.length) {
        stopLen = this.heatmapData[0].length;

        for (var i = 0; i < stopLen; i++) {
          initialRowsOrder.push({
            index: i,
            value: this.heatmapData[0][i].value
          });
        }

        this.initialRowsOrder = initialRowsOrder;
      }
    },

    /**
     * Saves the initial Columns ordering in initialColsOrder
     *
     * @method _initializeColsOrdering
     * @private
     */
    _initializeColsOrdering: function () {
      var initialColsOrder = [],
        stopLen = this.cols.length;

      if (this.cols && stopLen) {
        for (var i = 0; i < stopLen; i++) {
          initialColsOrder.push({
            index: i,
            value: Object.keys(this.cols)[i]
          });
        }

        this.initialColsOrder = initialColsOrder;
      }

      // If there's no column header titles uses the first row of data
      else if (this.heatmapData && this.heatmapData.length) {
        stopLen = this.heatmapData.length;

        for (var i = 0; i < stopLen; i++) {
          initialColsOrder.push({
            index: i,
            value: this.heatmapData[i][0].value
          });
        }

        this.initialColsOrder = initialColsOrder;
      }
    },

    /**
     * Calculates the RGB color for a value based on the
     * scale settings for the min and max values and the
     * color from and to.
     *
     * @param {number} value The value to calculate the color for.
     * @returns {Array} The RGB colors for the value. [R, G, B]
     *
     * @method _calculateColor
     * @private
     */
    _calculateColor: function (value) {
      var config = this.config,
        colors = [];

      // if value is outside the range return a null
      if (value < config.minValue || value > config.maxValue) {
        colors = null;
      }

      // otherwise calculate the colors based on the color and values range
      else {
        var stopLen = config.factors.length;

        for (var i = 0; i < stopLen; i++) {
          colors.push(Math.round(config.factors[i] * (value - config.minValue)) + config.startColor[i]);
        }
      }

      return colors;
    },

    /**
     * Observes the changes to config and calculates the
     * RGB start and end colors for the scale and the
     * multiplier factor to calculate the colors for
     * values within the scale.
     * Only if newConfig exists and is different from
     * oldConfig.
     *
     * @param {Object} newConfig The new configuration.
     * @param {Object} oldConfig The old configuration.
     *
     * @method _configChanged
     * @private
     */
    _configChanged: function (newConfig, oldConfig) {
      if (newConfig !== oldConfig && newConfig) {
        var config = this.config,
          temp, stopLen, nValues, data;

        if (this.scaleColorFrom) {
          temp = this.scaleColorFrom.replace(/[^\d,]/g, '').split(',');
          config.startColor = [];
          stopLen = temp.length;

          for (var i = 0; i < stopLen; i++) {
            config.startColor.push(Number(temp[i]));
          }
        }
        if (this.scaleColorTo) {
          temp = this.scaleColorTo.replace(/[^\d,]/g, '').split(',');
          config.endColor = [];
          stopLen = temp.length;

          for (var i = 0; i < stopLen; i++) {
            config.endColor.push(Number(temp[i]));
          }
        }

        nValues = config.maxValue - config.minValue;
        stopLen = config.endColor.length;
        config.factors = [];

        for (var i = 0; i < stopLen; i++) {
          config.factors.push((config.endColor[i] - config.startColor[i]) / nValues);
        }

        data = [].concat(this.data);
        this.set("data", data);
      }
    },

    /**
     * Observes the changes to scale and creates a new
     * config Object with min and max values.
     * Only if newScale exists and is different than
     * oldScale.
     *
     * @param {Array<number>} newScale The new scale limits [min, max].
     * @param {Array<number>} oldScale The old scale limits.
     *
     * @method _scaleChanged
     * @private
     */
    _scaleChanged: function (newScale, oldScale) {
      if (newScale !== oldScale && newScale && newScale.length === 2) {
        this.set("config.minValue", newScale[0]);
        this.set("config.maxValue", newScale[1]);
        this._configChanged(this.config, {});
      }
    },

    /**
     * Helper method to get header titles
     *
     * @param {string} option Either col or row
     * @param {number} index The index of the column/row
     * @returns {string} The header title
     *
     * @method _getHeader
     * @private
     */
    _getHeader: function (option, index) {
      if (option === "col") {
        return this.cols[Object.keys(this.cols)[index]];
      }
      else if (option === "row") {
        return this.rows[Object.keys(this.rows)[index]];
      }
    },

    /**
     * Determine if the tooltip should be displayed or not
     * based on the text overflow of it's sibling div
     *
     * @param {event} e The px-tooltip show request event
     *
     * @method _hideTooltip
     * @private
     */
    _hideTooltip: function (e) {
      var tooltip = e.detail.target,
        headerEl = tooltip.parentElement.querySelector('div');

      if (headerEl.scrollWidth <= headerEl.clientWidth && tooltip.for != "") {
        tooltip._hide();
      }
    },

    /**
     * Observes the changes to hideColHeader and hide/show
     * the Column headers based on newValue and applies a css
     * to the  rows container to adjust it's size.
     * Only if newValue exists and is different than oldValue.
     * Sets the column header visibility to false if there's no
     * column header titles.
     *
     * @param {boolean} newValue Hide or don't the Column Headers
     * @param {boolean} oldValue The old value.
     *
     * @method _hideColHeaderChanged
     * @private
     */
    _hideColHeaderChanged: function (newValue, oldValue) {
      if (newValue !== undefined && newValue !== oldValue) {
        newValue === false ? this.disabledHeader = "" : this.disabledHeader = "disable-col-header";
      }

      if (newValue !== undefined && newValue === false && newValue !== oldValue && this.cols && (!this.cols.length || !Object.keys(this.cols)[0])) {
        this.set('hideColHeader', undefined);
        this.set('hideColHeader', true);
      }
    },

    /**
     * Sorts the column ascending, descending or resets the sort.
     *
     * @param {event} e The click event on the column header
     *
     * @method _sortCol
     * @private
     */
    _sortCol: function (e) {
      var col = e.model.index,
        order = 0,
        _this = this,
        temp, newData, rows, newRows, tempRowsReduced, stopLen, stopLen2;

      // 0 sort ascending, 1 sort descending 2 reset sorting
      if (this.sortColOrder && this.sortColOrder.index === col && this.sortColOrder.order !== 2) {
        order = ++this.sortColOrder.order;
      }

      this.sortColOrder = {
        "index": col,
        "order": order
      };

      // Sort ascending / descending
      if (order < 2) {
        temp = [];
        stopLen = this.heatmapData[col].length;

        for (var i = 0; i < stopLen; i++) {
          var el = this.heatmapData[col][i];
          temp.push({
            "index": i,
            "value": el ? typeof el.value === "number" ? el.value : -Infinity : -Infinity
          });
        }

        temp.sort(function (a, b) {
          return order ? b.value - a.value : a.value - b.value;
        });
      }
      // Reset sorting
      else {
        temp = [];

        if (this.rows && this.rows.length && Object.keys(this.rows)[0]) {
          stopLen = this.initialRowsOrder.length;

          for (var i = 0; i < stopLen; i++) {
            var r = this.initialRowsOrder[i];
            temp.push({
              "index": Object.keys(_this.rows).indexOf(r.value)
            });
          }
        }
        // If there's no row header titles uses the first column of data
        else {
          stopLen = this.heatmapData[0].length;
          tempRowsReduced = [];

          for (var i = 0; i < stopLen; i++) {
            tempRowsReduced.push(this.heatmapData[0][i].value);
          }

          stopLen = this.initialRowsOrder.length;

          for (var i = 0; i < stopLen; i++) {
            var r = this.initialRowsOrder[i];
            temp.push({
              "index": tempRowsReduced.indexOf(r.value)
            });
          }
        }
      }

      stopLen = this.heatmapData.length;
      stopLen2 = temp.length;
      newData = [];

      for (var i = 0; i < stopLen; i++) {
        var newSubData = [];

        for (var j = 0; j < stopLen2; j++) {
          newSubData.push(this.heatmapData[i][temp[j].index]);
        }

        newData.push(newSubData);
      }

      rows = this.rows;
      newRows = [];
      stopLen = temp.length;

      if (rows.length) {
        for (var i = 0; i < stopLen; i++) {
          newRows[Object.keys(rows)[temp[i].index]] = rows[Object.keys(rows)[temp[i].index]];
        }

        // Force set length of array
        newRows.length = Object.keys(newRows).length;
      }

      this.set("heatmapData", []);
      this.set("rows", []);
      this.set("heatmapData", newData);
      this.set("rows", newRows);
    },

    /**
     * Sorts the row ascending, descending or resets the sort.
     *
     * @param {Object} e The click event on the row header
     *
     * @method _sortCol
     * @private
     */
    _sortRow: function (e) {
      var row = e.model.index,
        order = 0,
        _this = this,
        temp, hd, newData, cols, newCols, tempColsReduced, stopLen;

      // 0 sort ascending, 1 sort descending 2 reset sorting
      if (this.sortRowOrder && this.sortRowOrder.index === row && this.sortRowOrder.order !== 2) {
        order = ++this.sortRowOrder.order;
      }

      this.sortRowOrder = {
        "index": row,
        "order": order
      };
      // Sort ascending / descending
      if (order < 2) {
        stopLen = this.heatmapData.length;
        temp = [];

        for (var i = 0; i < stopLen; i++) {
          var tempItem = this.heatmapData[i][row];

          temp.push({
            index: i,
            value: tempItem ? typeof tempItem.value === "number" ? tempItem.value : -Infinity : -Infinity
          });
        }

        temp.sort(function (a, b) {
          return order ? b.value - a.value : a.value - b.value;
        });
      }
      // Reset sorting
      else {
        temp = [];

        if (this.cols && this.cols.length && Object.keys(this.cols)[0]) {
          stopLen = this.initialColsOrder.length;

          for (var i = 0; i < stopLen; i++) {
            var r = this.initialColsOrder[i];
            temp.push({
              "index": Object.keys(_this.cols).indexOf(r.value)
            });
          }
        }
        // If there's no column header titles uses the first row of data
        else {
          stopLen = this.heatmapData.length;
          tempColsReduced = [];

          for (var i = 0; i < stopLen; i++) {
            tempColsReduced.push(this.heatmapData[i][0].value);
          }

          stopLen = this.initialColsOrder.length;

          for (var i = 0; i < stopLen; i++) {
            var r = this.initialColsOrder[i];
            temp.push({
              "index": tempColsReduced.indexOf(r.value)
            });
          }
        }
      }

      hd = this.heatmapData;
      stopLen = temp.length;
      newData = [];

      for (var i = 0; i < stopLen; i++) {
        newData.push(hd[temp[i].index]);
      }

      cols = this.cols;
      newCols = [];
      if (cols.length) {
        stopLen = temp.length;

        for (var i = 0; i < stopLen; i++) {
          newCols[Object.keys(cols)[temp[i].index]] = cols[Object.keys(cols)[temp[i].index]];
        }

        //Force set length of Array
        newCols.length = Object.keys(newCols).length;
      }

      this.set("cols", []);
      this.set("heatmapData", []);
      this.set("cols", newCols);
      this.set("heatmapData", newData);
    },

    /**
     * Determines whether to show the sorting icon or not
     *
     * @param {number} i The index of the column/row.
     * @param {string} h col for column or row for row.
     * @param {string} d The direction of the sorting, up or down.
     * @returns {boolean} Show or don't the sorting icon.
     *
     * @method _sortingIcon
     * @private
     */
    _sortingIcon: function (i, h, d) {
      var hideIcon = true;

      // If h is a col and the current sorting column is the one in i
      if (this.sortColOrder && h.toLowerCase() === 'col' && this.sortColOrder.index === i) {

        // If it's the up arrow and current sorting ascending
        if (d.toLowerCase() === 'up' && this.sortColOrder.order === 0) {

          // Show the icon
          hideIcon = false;
        }

        // Otherwise if it's the down arrow and sorting descending
        else if (d.toLowerCase() === 'down' && this.sortColOrder.order === 1) {

          // Show the icon
          hideIcon = false;
        }
      }

      // If h is a row and the current sorting row is the one in i
      else if (this.sortRowOrder && h.toLowerCase() === 'row' && this.sortRowOrder.index === i) {

        // If it's the up arrow and current sorting ascending
        if (d.toLowerCase() === 'up' && this.sortRowOrder.order === 0) {

          // Show the icon
          hideIcon = false;
        }

        // Otherwise if it's the down arrow and sorting descending
        else if (d.toLowerCase() === 'down' && this.sortRowOrder.order === 1) {

          // Show the icon
          hideIcon = false;
        }
      }

      return hideIcon;
    },

    /**
     * Observes the changes to aggregationType and calculates
     * the aggregation of the heatmap data based on the
     * aggregation type and saves the result in the
     * rowAggregation and colAggregation properties.
     * Only if n exists, is different than o data and n is
     * one the following sum, max, min, average, std, count.
     * If n exists and is invalid the aggregation is disabled.
     *
     * @param {string} n The new aggregation type.
     * @param {string} o The old aggregation type.
     *
     * @method _calculateAggregation
     * @private
     */
    _calculateAggregation: function (n, o) {
      if (this.aggregationType && this.aggregationType != null && n && n !== o && this.availableAggregations && this.availableAggregations.indexOf(n.toUpperCase()) !== -1 && this.heatmapData.length > 0) {
        this.set("showAggregation", true);
        var rowAggregation = [],
          colAggregation = [],
          data = [],
          colDigits = [],
          rowDigits = [];

        data = this.heatmapData.map(function (hd) {
          return hd.map(function (v) {
            return v.value;
          });
        });

        // Find max decimal digits for the data in each column
        colDigits = data.map(function (hd) {
          return hd.map(function (a) {
            if (a && typeof a === "number") {
              var temp = (a + "").split(".");
              temp = temp[1] ? temp[1].length : 0;
              return temp;
            }
            return 0;
          }).reduce(function (a, b, i) {
            return i === 0 ? b : a > b ? b : a;
          });
        });

        // Find the max decimal digits for the data in each row
        rowDigits = data[0].map(function (hd, i) {
          return data.map(function (a) {
            if (a[i] && typeof a[i] === "number") {
              var temp = (a[i] + "").split(".");
              temp = temp[1] ? temp[1].length : 0;
              return temp;
            }
            return 0;
          }).reduce(function (a, b, i) {
            return i === 0 ? b : a > b ? b : a;
          });
        });

        this.set("rowAggregatedData", []);
        this.set("colAggregatedData", []);
        switch (n.toUpperCase()) {
          // Sums the data on each row and each column
          case "SUM":
            rowAggregation = data[0].map(function (c, i) {
              return data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? b[i] : 0)
              }, 0);
            });
            colAggregation = data.map(function (c) {
              return c.reduce(function (a, b) {
                return a + (b && typeof b === "number" ? b : 0);
              }, 0);
            });
            break;
          // Calculates the average for each row and each column
          case "AVERAGE":
            rowAggregation = data[0].map(function (c, i) {
              return (data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? b[i] : 0)
              }, 0)) / data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? 1 : 0);
              }, 0);
            });
            colAggregation = data.map(function (c, i) {
              return c.reduce(function (a, b) {
                return a + (b && typeof b === "number" ? b : 0);
              }, 0) / data[i].reduce(function (a, b) {
                return a + (b && typeof b === "number" ? 1 : 0);
              }, 0);
            });
            break;
          // Calculates the standard deviation for each row and each column
          case "STD":
            rowAggregation = data[0].map(function (c, i) {
              return (data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? b[i] : 0)
              }, 0)) / data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? 1 : 0);
              }, 0);
            });
            rowAggregation = data[0].map(function (c, i) {
              return Math.sqrt((data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? Math.pow((b[i] - rowAggregation[i]), 2) : 0);
              }, 0)) / data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? 1 : 0);
              }, 0));
            });
            colAggregation = data.map(function (c, i) {
              return c.reduce(function (a, b) {
                return a + (b && typeof b === "number" ? b : 0);
              }, 0) / data[i].reduce(function (a, b) {
                return a + (b && typeof b === "number" ? 1 : 0);
              }, 0);
            });
            colAggregation = data.map(function (c, i) {
              return Math.sqrt((c.reduce(function (a, b) {
                return a + (b && typeof b === "number" ? Math.pow((b - colAggregation[i]), 2) : 0);
              }, 0)) / data[i].reduce(function (a, b) {
                return a + (b && typeof b === "number" ? 1 : 0);
              }, 0));
            });
            break;
          // Finds the max value on each row and each column
          case "MAX":
            rowAggregation = data[0].map(function (c, i) {
              return data.reduce(function (a, b) {
                return typeof b[i] === "number" ? a > b[i] ? a : b[i] : a;
              }, -Infinity);
            });
            colAggregation = data.map(function (c) {
              return c.reduce(function (a, b) {
                return typeof b === "number" ? a > b ? a : b : a;
              }, -Infinity);
            });
            break;
          // Finds the min value on each row and each column
          case "MIN":
            rowAggregation = data[0].map(function (c, i) {
              return data.reduce(function (a, b) {
                return typeof b[i] === "number" ? a < b[i] ? a : b[i] : a;
              }, Infinity);
            });
            colAggregation = data.map(function (c) {
              return c.reduce(function (a, b) {
                return typeof b === "number" ? a < b ? a : b : a;
              }, Infinity);
            });
            break;
          // Count how many valid values (numbers) on each row and each column
          default: //COUNT
            rowAggregation = data[0].map(function (c, i) {
              return data.reduce(function (a, b) {
                return a + (b[i] && typeof b[i] === "number" ? 1 : 0);
              }, 0);
            });
            colAggregation = data.map(function (c, i) {
              return data[i].reduce(function (a, b) {
                return a + (b && typeof b === "number" ? 1 : 0);
              }, 0);
            });
        }

        colAggregation = colAggregation.map(function (v, i) {
          return (v + "").substr(0, (v + "").split(".")[0].length + 2 + colDigits[i]);
        });
        rowAggregation = rowAggregation.map(function (v, i) {
          return (v + "").substr(0, (v + "").split(".")[0].length + 2 + rowDigits[i]);
        });
        this.set("rowAggregatedData", rowAggregation);
        this.set("colAggregatedData", colAggregation);
      }
      // If n is invalid, disables the aggregation
      else if (this.aggregationType && o && n && o !== n && this.availableAggregations.indexOf(n.toUpperCase()) === -1) {
        this.set("aggregationType", "");
        this.set("showAggregation", false);
      }
    },

    /**
     * Gets the aggregation value for the specified column.
     *
     * @param {number} i The column index.
     * @returns {string} The value as a string or an empty string.
     *
     * @method _getColAggregation
     * @private
     */
    _getColAggregation: function (i) {
      return this.colAggregatedData ? this.colAggregatedData[i] : '';
    },

    /**
     * Observes the changes to scaleColorFrom and triggers
     * _configChanged if newColor exists and is different
     * than oldColor.
     *
     * @param {string} newColor The new color.
     * @param {string} oldColor The old color.
     *
     * @method _scaleColorFromChanged
     * @private
     */
    _scaleColorFromChanged: function (newColor, oldColor) {
      if (newColor && newColor !== oldColor) {
        this._configChanged(this.config, {});
      }
    },

    /**
     * Observes the changes to scaleColorTo and triggers
     * _scaleColorToChanged if newColor exists and is
     * different than oldColor.
     *
     * @param {string} newColor The new color.
     * @param {string} oldColor The old color.
     *
     * @method _scaleColorToChanged
     * @private
     */
    _scaleColorToChanged: function (newColor, oldColor) {
      if (newColor && newColor !== oldColor) {
        this._configChanged(this.config, {});
      }
    },

    /**
     * Observes the changes to hideRowHeader and sets
     * the row header visibility to false when
     * there' no header titles.
     *
     * @param {boolean} nHide Hide or show the header titles.
     * @param {boolean} oHide The old value.
     *
     * @method _hideRowHeaderChanged
     * @private
     */
    _hideRowHeaderChanged: function (nHide, oHide) {
      var _this = this;
      if (nHide !== undefined && nHide === false && nHide !== oHide && this.rows && (!this.rows.length || !Object.keys(this.rows)[0])) {
        this.hideRowHeader = true;
      }
      else if (!nHide && oHide) {
        this.hideRowHeader = false;
      }
    },

    /**
     * Observes the changes to showAggregation and triggers
     * the aggregation calculation for rows.
     * Trigger the aggregation calculation for the columns
     * only when there're column header titles.
     *
     * @param {string} nShow The aggregation type to show.
     * @param {string} oShow The aggregation type shown before.
     * @private
     */
    _showAggregationChanged: function (nShow, oShow) {
      if (nShow !== undefined && nShow != oShow) {
        this.set('showRowAggregation', nShow);
        this.set('showColAggregation', false);
        if (this.heatmapData[0] && this.heatmapData[0].length > 1) {
          this.set('showColAggregation', nShow);
        }
      }
    }
  });

</script>