px-vis-data-converter.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="px-vis-behavior-common.html" />

<!--
Converts data from array form to object form.

px-vis charts expect data in the following array of objects format:

```
[
    {
        x: 10,
        y: 50
    },{
        x: 20,
        y: 40
    }
]
```

Keys are flexible and multiple can be added to the same object:

```
[
    {
        timestamp: 1413930600000,
        tag1: 15,
        tag2: 16,
        tag3: 11
    },{
        timestamp: 1414080000000,
        tag1: 14,
        tag2: 17,
        tag3: 13
    }
]
```

This component accepts data in this format:

```
[{
    "id":"myTagID",
    "name":"My Favorite Tag",
    "minValue":0,
    "maxValue":293,
    "data":[
        [1464562720308,41],
        [1464571360308,170]
    ]
},{
    "id":"myOtherID",
    "name":"My Least Favorite Tag",
    "minValue":0,
    "maxValue":150,
    "data":[
        [1464562720308,20],
        [1464571360308,63]
    ]
}]
```

It will reformat the data into the object format and create a seriesConfig file.

##### Usage

    <px-vis-data-converter
        data-key = "[[dataKey]]"
        id-key = "[[idKey]]"
        original-data="[[originalData]]"
        chart-data="{{chartData}}"
        series-config="{{seriesConfig}}">
    </px-vis-data-converter>

@element px-vis-data-converter
@blurb Converts data from array form to object form.
@homepage index.html
@demo demo.html
-->
<dom-module id="px-vis-data-converter">
    <template>

    </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-data-converter',

    behaviors: [
      PxVisBehavior.commonMethods
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
      * The key for accessing the data array.
      *
      */
      dataKey: {
        type: String,
        value: "data"
      },
      /**
      * The key for accessing the data id.
      *
      */
      idKey: {
        type: String,
        value: "id"
      },
      /**
      * The key for accessing the data name.
      *
      */
      nameKey: {
        type: String,
        value: "name"
      },
      /**
      * An optional array of data IDs matching the order of the data array.
      *
      */
      dataIds: {
        type: Array,
        value: function(){ return []; }
      },
      /**
      * An optional array of data names matching the order of the data array.
      *
      */
      dataNames: {
        type: Array,
        value: function(){ return []; }
      },
      /**
      * An optional name for the x-key for chartData.
      *
      */
      newXKey: {
        type: String,
        value: 'x'
      },
      /**
      * An optional key for the x axis units for chartData.
      *
      */
      xUnitKey: {
        type: String,
        value: 'xAxisUnit'
      },
      /**
      * An optional key for the y axis units for chartData.
      *
      */
      yUnitKey: {
        type: String,
        value: 'units'
      },
      /**
      * A series configuration file computed from originalData.
      *
      */
      originalData: {
        type: Array,
        notify: true
      },
      /**
      * A series configuration file computed from originalData.
      *
      */
      seriesConfig: {
        type: Object,
        notify: true,
        readOnly: true,
        computed: '_computeSeriesConfig(originalData.*)'
      },
      /**
      * A series configuration file computed from originalData.
      *
      */
      chartData: {
        type: Array,
        notify: true,
        readOnly: true,
        computed: '_computeChartData(originalData.*)'
      },
      /**
      * A list of the empty datasets
      *
      */
      emptySets: {
        type: Object,
        notify: true,
        readOnly: true,
        value: function(){ return {} }
      }
    },

    /**
    * when attached, re-fire set properties for precipitation pattern
    *
    * @method attached
    */
    attached: function(){
      if(this._doesObjHaveValues(this.seriesConfig)){
        this.fire('px-vis-series-config', { 'dataVar': 'seriesConfig', 'data': this.seriesConfig, 'method':'set' });
      }

      if(this._doesObjHaveValues(this.chartData)){
        this.fire('px-vis-chart-data', { 'dataVar': 'chartData', 'data': this.chartData, 'method':'set' });
      }
    },

    /**
    * returns the correct id for the series
    *
    */
    _calcId: function(d,i){
      if(this.dataIds[i]){
        return this.dataIds[i];
      } else if(d[this.idKey]){
        return d[this.idKey];
      } else {
        return 'y' + i;
      }
    },

    /**
    * Merges n sorted arrays into an array of objects
    *
    */
    _computeChartData: function() {
      if(this.originalData.length > 0) {
        // put in check to see if we have sorted data or not
        var chartData = [],
            numArrs = this.originalData.length, // how many arrays we have
            indexes = Array(numArrs).fill(0), // create starting index for each
            iter = 0, // how many series we have reached the end
            id = Array.prototype.map.call(this.originalData,function(d,i){
              // since we are iterating over the data...
              if(d[this.dataKey].length === 0){
                var id = this._calcId(this.originalData[i],i);
                this.emptySets[id] = true;
                this.fire('px-vis-data-converter-empty-data', { "id": id });
              }
              // add infinity to the end so we have a stop point
              d[this.dataKey].push([Infinity,Infinity]);

              // figure out if we should use user input ID or the series key
              return this._calcId(d,i);
            }.bind(this));

        // keep going until we reach the end of each series
        while(iter < numArrs){
          var lowest = Number.MAX_VALUE,  //Number.MAX_VALUE < Infinity
              obj = {},       //our new merged data unit
              indicies = [],  //which indexes got incremented
              iter = 0;       //reset iter with each pass

          for(var i = 0; i < numArrs; i++){
            if(this.originalData[i][this.dataKey][indexes[i]][0] < lowest){
              // reset obj
              obj = {};
              // set our lowest for reference on the next pass
              lowest = this.originalData[i][this.dataKey][indexes[i]][0];
              // set our obj x value
              obj[this.newXKey] = lowest;
              // set our obj y value
              obj[id[i]] = this.originalData[i][this.dataKey][indexes[i]][1];
              // track in index we are at
              indicies = [i];
            } else if (this.originalData[i][this.dataKey][indexes[i]][0] === lowest){
              // add our y val
              obj[id[i]] = this.originalData[i][this.dataKey][indexes[i]][1];
              // add our index
              indicies.push(i);
            }
          }
          // add our new object to our dataset
          chartData.push(obj);
          // increment out indexes
          for(var j = 0; j < numArrs; j++){
            // increase the index for any series we merged
            var k = indicies[j]
            indexes[k] += 1;

            // check to see we hit the end of each series, increment iter if we do
            if(this.originalData[j][this.dataKey][indexes[j]][0] === Infinity){
              iter += 1;
            }
          }
        }

        this.fire('px-vis-empty-sets', { 'dataVar': 'emptySets', 'data': this.emptySets, 'method':'set' });
        this.fire('px-vis-chart-data', { 'dataVar': 'chartData', 'data': chartData, 'method':'set' });

        return chartData;
      }
      // else return empty array
      return [];
    },

    /**
    * bundles info in the original dataset into a new series config
    *
    */
    _computeSeriesConfig: function(){
      if(this.originalData.length > 0) {
        var seriesConfig = {},
            id,
            y1,
            y2;
        for(var i = 0; i < this.originalData.length; i++){
          id = this._calcId(this.originalData[i],i);
          seriesConfig[id] = {};
          seriesConfig[id]['name'] = this.dataNames[i] ? this.dataNames[i] : this.originalData[i][this.nameKey] ? this.originalData[i][this.nameKey] : id;
          seriesConfig[id]['x'] = this.newXKey;
          seriesConfig[id]['y'] = id;

          if(this.originalData[i]['min']){
            seriesConfig[id]['yMin'] = this.originalData[i]['min'];
          }

          if(this.originalData[i]['max']){
            seriesConfig[id]['yMax'] = this.originalData[i]['max'];
          }

          if(this.originalData[i][this.yUnitKey]){
            seriesConfig[id]['yAxisUnit'] = this.originalData[i][this.yUnitKey];
          }

          if(this.originalData[i][this.xUnitKey]){
            seriesConfig[id]['xAxisUnit'] = this.originalData[i][this.xUnitKey];
          }
        }

        this.fire('px-vis-series-config', { 'dataVar': 'seriesConfig', 'data': seriesConfig, 'method':'set' });
        return seriesConfig;
      }
    }
  });
</script>