px-vis-behavior-chart.html

<link rel="import" href="px-vis-behavior-common.html" />
<link rel="import" href="px-vis-behavior-d3.html" />
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<script>
var PxVisBehaviorChart = PxVisBehaviorChart || {};

/*
    Name:
    PxVisBehaviorChart.chartCommonMethods

    Description:
    Polymer behavior that provides some general methods used accross charts

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.chartCommonMethods
*/
PxVisBehaviorChart.chartCommonMethods = [{
  /**
  * Goes through an array of objects and gathers all unique keys. Returns a list of keys
  *
  * Expects and array of objects
  *
  * Returns an array of strings
  */
  _returnAllKeys: function(d) {
    var o = {},
        k;
    for(var i = 0; i < d.length; i++) {
      k = Object.keys(d[i]);
      for(var j = 0; j < k.length; j++) {
        o[k[j]] = true;
      }
    }
    return Object.keys(o)
  },
}, PxVisBehavior.getSeriesColors];

/*
    Name:
    PxVisBehaviorChart.chartCommon

    Description:
    Polymer behavior that provides the basic listeners and methods for charts built with px-vis.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.chartCommon
*/
PxVisBehaviorChart.chartCommon = [{
    properties: {
      /**
      * A configuration file to associate series order, name, type, and colors.
      *
      * Association of name, type, and seriesNumber should be developer set. Color and axis are optional.
      *
      *```
      *  {
      *     "seriesKey": {  //seriesKey is a unique identifier for the configuration
      *         "type": "line",  //line or scatter
      *         "markerSymbol": "diamond" //if using scatter different markerSymbol can be used. See "markerSymbol" in px-vis-scatter
      *         "markerScale": "2" //if using scatter allows to scale the size of markers
      *         "markerFillOpacity": "0.5" //if using scatter allows to specify the opacity of the inside of the marker
      *         "markerStrokeOpacity": "1" //if using scatter allows to specify the opacity of the outside of the marker
      *         "mutedOpacity": "0.3" //opacity value to use when muting a serie
      *         "name": "My Series",  //human readable name
      *         "x": "x",  //index or key name for independent variable
      *         "y": "y",  //index or key name for dependent variable
      *         "xAxisUnit": "Volt" //Unit to be used for the X axis. Can be ignored if x axis is time based
      *         "yAxisUnit": "Oranges" //unit to be used for the Y axis.
      *         "xMin": 0,  // minimum x value
      *         "xMax": 100,  //maximum x value
      *         "yMin": 5,  //minimum y value
      *         "yMax": 50,  //maximum y value
      *         "color": "rgb(0,0,0)", //color you want the chart
      *         "axis": "axis1"  //axis the chart should be on
      *     }
      *  }
      *```
      */
      seriesConfig: {
        type: Object,
        notify: true,
        value: function() {
          return {}
        }
      },
      /**
      * A default configuration file. It fills in the missing parts of seriesConfig. Any options from seriesConfig can be specified in the defaultSeriesConfig and will be automatically used if not defined in the seriesConfig
      *
      * Default:
      *
      * ```
      *  {
      *     "type": "line",
      *     "x": 'x'
      *  }
      * ```
      */
      defaultSeriesConfig: {
        type: Object,
        notify: true,
        value: function() {
          return {
            "type": "line",
            "x": 'x'
          }
        }
      },
      /**
      * A boolean flag on whether to include all the series in the data.
      * - `false`: only series defined in the seriesConfig file will be drawn
      * - `true`: All series in the dataset will be drawn. Defaults will be used for the seriesConfig. If this is used do not specify a seriesConfig
      */
      includeAllSeries: {
        type: Boolean,
        notify: true,
        value: false
      },
      /**
       *  Representes the keys avaiable in completeSeriesConfig. It's being set
       *  before completeSeriesConfig is set
       */
      _seriesKeys: {
        type: Array
      }
    },

    observers: [
      '_setCompleteSeriesConfig(defaultSeriesConfig.*,chartData.*,seriesConfig.*,dataVisColors.*,seriesColorOrder.*)'
    ],

    /**
    * Calcs the extents of the charts
    */
    _calcChartExts: function(mins,maxes,axis) {
      if(this[axis + 'AxisType'] === 'ordinal') {
        return [];
      }
      //make sure we have at lease one valid number
      mins.push(Infinity);
      maxes.push(-Infinity);

      return [ Math.min.apply(null, mins) , Math.max.apply(null, maxes) ];
    },

    /**
    * Creates the real series confit object based on the default settings, the dev defined series config, and the includeAllSeries flag.
    *
    */
    _setCompleteSeriesConfig: function() {
      if(this._doesObjHaveValues(this.defaultSeriesConfig) && this._doesObjHaveValues(this.chartData) && this._doesObjHaveValues(this.dataVisColors)) {
        // FUTURE TODO refactor: use MAPs and SETs instead of Objects when IE has support / is no longer supported by us
        // We could use d3 sets and maps... worth it?
        var fullConfig = (this.seriesConfig) ? JSON.parse(JSON.stringify(this.seriesConfig)) : {},
            k = Object.keys(fullConfig),
            kLen = k.length,
            allYs = (this.includeAllSeries) ? this._returnAllKeys(this.chartData) : [],
            // create a new object with the y keys as config keys
            objYs = allYs.reduce(function(obj, item) {
              obj[item] = {};
              return obj;
            }, {}),
            defaultConfigProps = Object.keys(this.defaultSeriesConfig),
            xMins = [],
            xMaxes = [],
            yMins = [],
            yMaxes = [],
            missingYs,
            x,
            isUpdate = this.completeSeriesConfig ? true : false,
            addedSeriesKeys = [],
            removedSeriesKeys = [],
            updatedSeriesKeys = [],
            extsObj = {},
            skipProperties = ['xMin','xMax','yMin','yMax'];

        if(k.length === 0 && !this.includeAllSeries) {
          console.warn("No series were added to the chart. Either add them in the seriesConfig or turn on includeAllSeries");
        }

        // First, fill in the series specified in seriesConfig.
        for(var i = 0; i < kLen; i++) {
          if(!fullConfig[k[i]].hasOwnProperty('y')) {
            console.warn("Configuration " + k[i] + " does not have a y-value associated with it. Falling back to ID");
            fullConfig[k[i]]['y'] = k[i];
          }

          if(!fullConfig[k[i]].hasOwnProperty('x')) {
            console.warn("Configuration " + k[i] + " does not have a x-value associated with it. Falling back to default");
            fullConfig[k[i]]['x'] = this.defaultSeriesConfig['x'];
          }

          if(!fullConfig[k[i]]['name']) {
            fullConfig[k[i]]['name'] = k[i];
          }
          if(!fullConfig[k[i]]['color']) {
            fullConfig[k[i]]['color'] = this._getColor(i);
          }

          //copy values from default config if needed
          for(var j = 0; j < defaultConfigProps.length; j++) {
            var property = defaultConfigProps[j];
            //if we dont already have the property, the default exists, and we want to copy the property
            if(typeof fullConfig[k[i]][property] === 'undefined' && typeof this.defaultSeriesConfig[property] !== 'undefined' && skipProperties.indexOf(property) === -1) {
              fullConfig[k[i]][property] = this.defaultSeriesConfig[property];
            }
          }

          if(fullConfig[k[i]]['xMin']) {
            xMins.push(fullConfig[k[i]]['xMin']);
          }
          if(fullConfig[k[i]]['xMax']) {
            xMaxes.push(fullConfig[k[i]]['xMax']);
          }
          if(fullConfig[k[i]]['yMin']) {
            yMins.push(fullConfig[k[i]]['yMin']);
          }
          if(fullConfig[k[i]]['yMax']) {
            yMaxes.push(fullConfig[k[i]]['yMax']);
          }

          // delete this y / key from objYs if includeAllSeries is on so we have a unique set
          delete objYs[ fullConfig[k[i]]['y'] ];
        }

        // delete the 'x' key from our all y keys obj

        //figure out what x is, either a config value (assuming all x are the same) or the default
        x = (k.length > 0) ? fullConfig[k[0]]['x'] : this.defaultSeriesConfig['x'];
        delete objYs [x];

        // create a new set of whatever Ys are left so we can iterate over it
        missingYs = Object.keys(objYs);
        // add the missing keys to our configuration, use y as the config key by default
        for(var i = 0; i < missingYs.length; i++) {
          objYs[ missingYs[i] ]['type'] = this.defaultSeriesConfig['type'];
          objYs[ missingYs[i] ]['name'] = missingYs[i];
          objYs[ missingYs[i] ]['x'] = x;
          objYs[ missingYs[i] ]['y'] = missingYs[i];
          objYs[ missingYs[i] ]['color'] = this._getColor(kLen + i);

          // copy the obj to our config
          fullConfig[ missingYs[i] ] = objYs[ missingYs[i] ];
        }

        if(this.range) {
          var min = Number(Px.moment(this.range.from, Px.moment.ISO_8601).format('x')),
              max = Number(Px.moment(this.range.to, Px.moment.ISO_8601).format('x'));
          extsObj["x"] = [min,max];
        }

        if(!extsObj.x) {
          extsObj['x'] = this._calcChartExts(xMins,xMaxes,'x');
        }
        if(!extsObj.y) {
          extsObj['y'] = this._calcChartExts(yMins,yMaxes,'y');
        }

        //if this is an update bof series config find out additions/deletions
        var deletion = false,
            addition = false,
            mutedKeys = [];

        if(isUpdate) {
          var currKeys = Object.keys(this.completeSeriesConfig),
              newKeys = Object.keys(fullConfig);

          //process updates and additions
          for(var i=0; i<newKeys.length; i++) {
            if(currKeys.includes(newKeys[i])) {
              updatedSeriesKeys.push(newKeys[i]);
            } else {
              addedSeriesKeys.push(newKeys[i]);
              addition = true;
            }
          }

          //process deletions
          for(var i=0; i<currKeys.length; i++) {
            if(!newKeys.includes(currKeys[i])) {
              removedSeriesKeys.push(currKeys[i]);
              deletion = true;
            }
          }
        }

        if(deletion) {
          // check mutedSeries
          if(this.mutedSeries) {
            for(var i = 0; i < removedSeriesKeys.length; i++) {
              //if it is currently muted, unmute it.
              if(this.mutedSeries[removedSeriesKeys[i]]) {
                this.muteUnmuteSeries(removedSeriesKeys[i]);
                mutedKeys.push(removedSeriesKeys[i]);
              } else if(typeof this.mutedSeries[removedSeriesKeys[i]] === 'boolean') {
                mutedKeys.push(removedSeriesKeys[i]);
              }
            }
          }

          //we need to flush before setting completeSeriesConfig for deletion
          //but need setting completeSeriesConfig before flushing for additions.
          //Process the deletions first and we will process the addtions after setting
          //completeseriesconfig (if needed)
          this.set('_seriesKeys', updatedSeriesKeys);

          //make sure we flush for all the components dom-repeating over _seriesKeys:
          //if a serie needs to be removed this should be processed before we pass
          //the new completeSeriesConfig or observers will run on the not-yet deleted serie
          Polymer.dom.flush();

          //clear out mutedSeries of the deleted stuff
          if(mutedKeys.length > 0) {
            for(var i = 0; i < mutedKeys.length; i++) {
              delete this.mutedSeries[mutedKeys[i]];
            }
          }
        } else {
          //update or addition
          this.set('_seriesKeys', Object.keys(fullConfig));
        }

        this.fire('px-vis-data-extents', { 'dataVar': 'dataExtents', 'data': extsObj, 'method':'set' });
        this.set('dataExtents', extsObj);

        this.fire('px-vis-complete-series-config', { 'dataVar': 'completeSeriesConfig', 'data': fullConfig, 'method':'set' });
        this.set('completeSeriesConfig', fullConfig);

        if(deletion && addition) {
          //we have processed updates and deleton, now need to process the additions
          //now that we have the new completeSeriesConfig process the additions
          this.set('_seriesKeys', Object.keys(fullConfig));
        }

      } else if(this.chartData && this.chartData.length === 0) {
        this.set('_seriesKeys', []);
        Polymer.dom.flush();
      }
    },

    /**
     * Helper function for the register. Returns true if the side register should exist
     *
     */
    _sideRegister:function(location) {
      return location === 'side' || location === 'both';
    },

    /**
     * Helper function for the register. Returns true if the top register should exist
     *
     */
    _topRegister:function(location) {
      return location === 'top' || location === 'both';
    },

    /**
     * Helper function for the line series. Returns true if the series is a line
     *
     */
    _chartTypeLine: function(key,obj) {
        return obj[key]['type'] === 'line';
    },

    /**
     * Helper function for the line series. Returns true if the series is a line
     *
     */
    _chartTypeScatter: function(key,obj) {
      return obj[key]['type'] === 'scatter';
    },

    /**
     * returns the keys of an object
     *
     */
    _returnKeys: function(obj) {
      return Object.keys(obj);
    }
}, PxColorsBehavior.dataVisColors , PxVisBehaviorChart.chartCommonMethods, PxVisBehavior.commonMethods, PxVisBehavior.completeSeriesConfig, PxVisBehavior.axisTypes];

/*
    Name:
    PxVisBehaviorChart.saveImage

    Description:
    Polymer behavior that allows the chart to return an image of itself based on
    its canvas and/or SVG

    @polymerBehavior PxVisBehaviorChart.saveImage
*/
PxVisBehaviorChart.saveImage = [{
    /**
     * Takes a graphic "snapshot" of the component and pass results through a callback:
     * - a canvas containing the graphical snapshot
     * - a png base 64 data uri
     *
     * callback object:
     * {
     *  canvas: theCanvasObject
     *  image: "data:image/png;base64;iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACN..."
     * }
     *
     * the data uri can be used to save the image and the canvas object to do
     * further processing, such as combining different elements snapshot into one image
     *
     */
    getImage: function(callback, renderLegend) {
      //create a new canvas to render both the canvas and svg elements on it
      var canvas = document.createElement('canvas'),
          context,
          result,
          svgData;

      canvas.width = this.width + (renderLegend ? this._getRegisterWidth() : 0);

      canvas.height = this.height;
      context = canvas.getContext('2d');

      if(this.canvasContext) {
        //draw current canvas on new canvas
        context.drawImage(this.canvasContext.canvas, 0, 0);
      }

     if(this.pxSvgElem) {
       //drawing the svg bit
        this._drawSVGOnCanvas(canvas, function(resultCanvas) {
          if(renderLegend) {
            this._drawRegister(resultCanvas.getContext('2d'), this.width);
          }
          callback({canvas: resultCanvas, image: resultCanvas.toDataURL()});
        }.bind(this));
      } else if(this.canvasContext) {
        //we have a canvas but no svg
        if(renderLegend) {
          this._drawRegister(context, this.width);
        }
        callback({canvas: canvas, image: canvas.toDataURL()});
      }
    },
    _getRegisterWidth: function() {
      var canvas = document.createElement('canvas');
      canvas.height = this.height;
      canvas.width = 9999;

      var curY = 0,
          curX = this.width + 5,
          keys = Object.keys(this.completeSeriesConfig),
          maxWidth = 0,
          maxTotalWidth = 5,
          context = canvas.getContext('2d');
          curTextWidth = 0;

      for(var i=0; i<keys.length; i++) {
          curY += 30;

          curTextWidth = context.measureText(this.completeSeriesConfig[keys[i]].name).width;
          maxWidth = Math.max(maxWidth, curTextWidth);

          if( (curY + 30) > this.height ) {
            curX += maxWidth + 15;
            curY = 0;
            maxTotalWidth += maxWidth + 15;
            maxWidth = 0;
          }
        }
        maxTotalWidth += maxWidth + 15;

        return maxTotalWidth;
    },
    /**
     * Draws a fake representation of the registers
     */
    _drawRegister: function(context) {
      var curY = 0,
          lineLength = 25,
          strokeWidth = 3,
          curX = this.width + 5,
          keys = Object.keys(this.completeSeriesConfig),
          maxWidth = 0,
          curTextWidth = 0;

        //draw each serie
        for(var i=0; i<keys.length; i++) {
          curY += 30;

          context.fillStyle = this.completeSeriesConfig[keys[i]].color;
          context.fillRect(curX,curY,strokeWidth, lineLength);
          context.fillStyle = this._checkThemeVariable("--px-vis-register-data-value", this.colors["black"]);
          context.fillText(this.completeSeriesConfig[keys[i]].name, curX + strokeWidth + 5, curY + 10);
          curTextWidth = context.measureText(this.completeSeriesConfig[keys[i]].name).width;
          maxWidth = Math.max(maxWidth, curTextWidth);

          if( (curY + 30) > this.height ) {
            curX += maxWidth + 15;
            curY = 0;
          }
        }
    }
}, PxVisBehavior.completeSeriesConfig];

/**
    Name:
    PxVisBehaviorChart.chartAutoResize

    Description:
    Polymer behavior that provides auto resize options for charts

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.chartAutoResize
*/
PxVisBehaviorChart.chartAutoResize = [{
    properties: {
      /**
      * Prevents the chart from automatically resizing to fit its container
      */
      preventResize: {
        type: Boolean,
        value: false,
        observer: '_preventResizeChanged'
      },
      /**
       * This allows to decide how the chart
       * drawing will be horizontally aligned when smaller than its container. Values:
       * - center
       * - left
       * - right
       *
       * if any other value is used then left alignment will be chosen
       */
      chartHorizontalAlignment: {
        type: String,
        value: 'center'
      },
      /**
       * This allows to decide how the chart
       * drawing will be vertically aligned when smaller than its container. Values:
       * - center
       * - top
       * - bottom
       *
       * if any other value is used then top alignment will be chosen
       */
      chartVerticalAlignment: {
        type: String,
        value: 'center'
      },
      /**
       * Class to be used on the external wrapper within the chart
       */
      _chartWrapperClass: {
        type: String,
        computed: '_getChartWrapperClass(chartHorizontalAlignment, chartVerticalAlignment)'
      }
    },
    _preventResizeChanged: function() {
      if(!this.preventResize) {
        this.notifyResize();
      }
    },
    _getChartWrapperClass: function(hor, vert) {
      var base = 'flex wrapper ';

      if(hor === 'center') {
        base += 'flex--center ';
      } else if(hor === 'right') {
        base += 'flex--right ';
      } else {
        base += 'flex--left ';
      }

      if(vert === 'center') {
        base += 'flex--middle';
      } else if(vert === 'bottom') {
        base += 'flex--bottom';
      } else {
        base += 'flex--top';
      }

      return base;
    }
}, Polymer.IronResizableBehavior];

/**
    Name:
    PxVisBehaviorChart.subConfiguration

    Description:
    Polymer behavior that provides subConfiguration for elements such as axes, register, etc.

    Dependencies:

    @polymerBehavior PxVisBehaviorChart.subConfiguration
*/
PxVisBehaviorChart.subConfiguration = {
    properties: {
    },
    /**
     * Applies the config object to the element. Each key in the config object
     * is the name of the property to be applied
     *
     */
    _applyConfigToElement: function(config, element) {

      if(typeof(config) === 'string') {
        config = JSON.parse(config);
      }
      if(typeof(config) !== 'object') {
        console.error('Configuration object must be valid JSON: ' + config);
        return;
      }
      if(!element) {
        console.error('Cannot apply config to undefined element');
        return;
      }

      var keys = Object.keys(config);
      for(var i = 0; i < keys.length; i++) {
        var key = keys[i];
        element.set(key, config[key])
      }
    },
};

/**
    Name:
    PxVisBehaviorChart.timeFiltering

    Description:
    Polymer behavior that allows to filter chartData based on time, providing a _filteredData object

    Dependencies:

    @polymerBehavior PxVisBehaviorChart.timeFiltering
*/
PxVisBehaviorChart.timeFiltering = [{
  properties: {
    /**
     * Can be used to define a time domain to be used, typically to restrain/filter the amount
     * of data displayed. Can be used in combination with a px-vis-chart-navigator
     */
    timeDomain: {
      type: Object,
      value: function() {
        return [];
      }
    },
    /**
     * Name of the variable holding the time stamp in the data
     */
    timeData: {
      type: String,
      value: 'Timestamp'
    },
    /**
     * Data that has been time filtered
     */
    _filteredData: {
      type: Object,
      computed: '_filterData(chartData, timeDomain, timeData)'
    }
  },

  /**
   * returns a filtered dataset based on the time domain
   */
  _filterData: function(chartData, timeDomain, timeData) {

    if(timeDomain.x && timeDomain.x.length === 2) {
      var min = Number(timeDomain.x[0]),
          max = Number(timeDomain.x[1]);
      return chartData.filter(function(val) {
        var timeVal = Number(val[timeData]);
        // if the data doesn't have Date value, return the data as it is
        if (typeof(val[timeData]) === 'undefined') {
          return val;
          // Otherwise return the data matching the selected time range
        } else {
          return (timeVal >= min && timeVal <= max);
        }
      });
    } else {
      return chartData;
    }
  }
}, PxVisBehavior.dataset];

/*
    Name:
    PxVisBehaviorChart.waitForAttach

    Description:
    Polymer behavior that provides the the ability for the chart to delay running until attached.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.waitForAttach
*/
PxVisBehaviorChart.waitForAttach = {
    properties: {
      /**
      * Boolean holding loading until the chart is actually attached
      */
      _loadedOnPage: {
        type: Boolean
      }
    },

    /**
     * checks if the chart is attached, otherwise waits and recalls
     */
    _isLoadedOnPage: function() {
      var rect = this.getBoundingClientRect();
      if(rect.height > 0 && rect.width > 0) {
        this.set('_loadedOnPage', true);
      } else {
        this.async(this._isLoadedOnPage, 50);
      }
    }

};

/*
    Name:
    PxVisBehaviorChart.registerPositioning

    Description:
    Behavior allowing a chart to position its registers

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.registerPositioning
*/
PxVisBehaviorChart.registerPositioning = {
  properties: {
     /**
      *
      * Allows to hide the register
      */
    hideRegister: {
      type: Boolean,
      value: false,
      observer: '_hideRegisterChanged'
    },
    _registerType: {
      type: String
    },
    _registerWrapperClass: {
      type: String,
      computed: '_getRegisterWrapperClass(_registerType)'
    }
  },
 /**
  * determine the flex class on the wrapper depending on where the register is
  */
  _getRegisterWrapperClass: function() {
    var classList = "flex ";

    if(!this.hideRegister) {
      if(this._registerType === 'vertical') {
        classList += "flex--row--rev";
      }
      else {
        classList += "flex--col";
      }
    }

    return classList;
  },
  _hideRegisterChanged: function() {
    this.notifyResize();
  },
  _getHideClass: function(hide) {
    if(hide === true) {
      return 'visuallyhidden';
    }
    return '';
  }
};

/*
    Name:
    PxVisBehaviorChart.registerConfigs

    Description:
    Behavior allowing providing component config declarations

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.registerConfigs
*/
PxVisBehaviorChart.registerConfigs = {
  properties: {
    /**
     * Configuration object used to customize the tooltip cosmetic properties.
     * Please refer to px-vis-tooltip and px-vis-register (https://github.com/PredixDev/px-vis) for a list of supported proerties
     *
     */
    tooltipConfig: {
      type: Object,
      notify: true
    },
    /**
     * Configuration object used to customize the register cosmetic properties.
     * Please refer to px-vis-register (https://github.com/PredixDev/px-vis) for a list of supported proerties
     *
     */
    registerConfig: {
      type: Object,
      notify: true
    }
  }
};

/*
    Name:
    PxVisBehaviorChart.axisConfigs

    Description:
    Behavior allowing providing component config declarations

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.axisConfigs
*/
PxVisBehaviorChart.axisConfigs = {
  properties: {
    /**
     * Configuration object used to customize the X axis cosmetic properties.
     * Please refer to px-vis-axis (https://github.com/PredixDev/px-vis) for a list of supported properties
     *
     */
    xAxisConfig: {
      type: Object,
      notify: true
    },
    /**
     * Configuration object used to customize the Y axis cosmetic properties.
     * Please refer to px-vis-axis (https://github.com/PredixDev/px-vis) for a list of supported properties
     *
     */
    yAxisConfig: {
      type: Object,
      notify: true
    }
  }
};

/*
    Name:
    PxVisBehaviorChart.navigatorConfig

    Description:
    Behavior allowing providing component config declarations

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.navigatorConfig
*/
PxVisBehaviorChart.navigatorConfig = {
  properties: {
    /**
     * Configuration object used to customize the navigator cosmetic properties.
     *
     * This can be a collection of other configureation properties, such as axisConfig
     *
     */
    navigatorConfig: {
      type: Object,
      notify: true
    }
  }
};


/*
    Name:
    PxVisBehaviorChart.circleChart

    Description:
    Behavior providing attributes helping to position a circle based chart such as polar or pie.
    for exmaple provides the center, radius... based on size and margin

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorChart.circleChart
*/
PxVisBehaviorChart.circleChart = [{
  properties: {
     /**
      * Min between width and height
      */
     _smallerSide: {
        type: Number
      },
      /**
       * diameter of the chart drawing, adjusted with margins
       */
      _diameter: {
        type: Number
      },
      /**
       * radius of the chart drawing, adjusted with margins
       */
      _radius: {
        type: Number
      },
      /**
       * center of the chart, based on radius and margins
       */
      _center: {
        type: Array
      },
      /**
       * internal margins we can use in addition to "margin",
       * used to offset chart labels for example
       */
      _internalCircleMargins: {
        type: Object,
        value: function() {
          return {top: 0, left:0, right: 0, bottom:0};
        }
      }
  },
  observers: ['_sizeChanged(width, height, margin.*, _internalCircleMargins.*)'],
  _sizeChanged: function(width, height, margin, internalMargin) {

    //get the limiting side
    this.set('_smallerSide', Math.max(Math.min(height,width), 0));

    //measure appropriate width and height based on the smaller sides and margins
    var ml = Number(this.margin.left) + Number(this._internalCircleMargins.left),
        mr = Number(this.margin.right) + Number(this._internalCircleMargins.right),
        mt = Number(this.margin.top) + Number(this._internalCircleMargins.top),
        mb = Number(this.margin.bottom) + Number(this._internalCircleMargins.bottom),
        adjWidth = Math.max(0, this._smallerSide - ml - mr),
        adjHeight =  Math.max(0, this._smallerSide - mt - mb),
        diameter = Math.min(adjWidth,adjHeight) ,
        radius = diameter / 2,
        center = [];
    center[0] = ml + adjWidth/2;
    center[1] = mt + adjHeight/2;

    this.set('_diameter', diameter);
    this.set('_radius', radius);
    this.set('_center', center);

  }
}, PxVisBehavior.sizing];

/*
    Name:
    PxVisBehaviorChart.cursorConfig

    Description:
    Behavior providing the cursorConfig property
    @polymerBehavior PxVisBehaviorChart.cursorConfig
*/
PxVisBehaviorChart.cursorConfig = {
  properties: {
    /**
     * Configuration object used to customize the cursor properties.
     * Please refer to px-vis-cursor (https://github.com/PredixDev/px-vis) for a list of supported proerties
     *
     */
    cursorConfig: {
      type: Object,
      notify: true
    }
  }
};

/*
    Name:
    PxVisBehaviorChart.layers

    Description:
    Behavior providing the layers property and layer generation
    @polymerBehavior PxVisBehaviorChart.layers
*/
PxVisBehaviorChart.layers = [{
  properties: {
    /**
     * Array of the svg layers
     *
     */
    layer: {
      type: Array,
      notify: true
    },
    numberOfLayers: {
      type: Number
    },
    generateLayers: {
      type: Boolean,
      value: true
    },
    //TODIO: array of event allowed to pierce
  },
  observers: [
    '_createLayersOnce(svg, numberOfLayers)'
  ],
  /**
   * Creates <g> layers
   *
   */
  _createLayers: function(svg, numberOfLayers, propName) {
    var layers = [],
        name = propName ? propName : 'layer';

    for(var i = 0; i < numberOfLayers; i++) {
      var layer = svg.append('g');
      layer.attr('id', "layer" + i);
      layers.push(layer);
    }

    this.set(name,layers);
    this.fire('px-vis-' + name + '-updated',{ 'data': layers, 'dataVar': name, 'method': 'set' });
  },
  _createLayersOnce: function(svg, numberOfLayers, generateLayers, propName) {
    var gen = generateLayers ? generateLayers : 'generateLayers';

    if(this[gen] && this._doesD3HaveValues(svg) && numberOfLayers > 0) {
      this._createLayers(svg, numberOfLayers, propName);
      this.set(gen, false);

      //uncomment to get layer piercing
     // this._initMousePiercing();
    }
  },
  _initMousePiercing: function() {

    var topLayer = this.layer[this.layer.length - 1],
        _this = this,
        //TODO: proeprty
        events = ['mousedown', 'mouseover', 'click', 'hover'],
        handlers = [];

    //setup piercing for all events defined
    for(var i=0; i<events.length; i++) {
      var eventName = events[i],
          _this = this;

      handlers.push(this._createPiercingEventHandler(eventName, this, topLayer));
      topLayer.node().addEventListener(eventName, handlers[i]);
    }
  },
  _createPiercingEventHandler: function(eventName, context, topLayer) {
    return function(evt) {

              //recreate an event we will propagate
              //This is true only for IE,firefox
              var newEvt,
                  target;

              if(document.createEvent) {
              // To create a mouse event , first we need to create an event and then initialize it.
                  newEvt = document.createEvent('MouseEvent');
                  newEvt.initMouseEvent(eventName,
                  evt.bubbles,
                  evt.cancelable,
                  evt.view,evt.detail,evt.screenX,evt.screenY,evt.clientX,evt.clientY,
                  evt.ctrlKey,evt.altKey,evt.shiftKey,evt.metaKey,evt.button,evt.relatedTarget);
              }
              else {
                  newEvt = new MouseEvent(eventName, evt);
              }

              //hide current layer so we can find who we need to notify
              topLayer.node().style['display'] = 'none';

              //chrome stops on custom elements when doing elementFromPoint so
              //we need to recursively go down shadowRoots until we find the element
              var findElem = function(elem) {
                if(elem.shadowRoot) {
                  return findElem(elem.shadowRoot.elementFromPoint(evt.clientX, evt.clientY));
                } else {
                  return elem;
                }
              }

              target = findElem(document.elementFromPoint(evt.clientX, evt.clientY));
              console.log('target: ' + target.classList)

              //restore our layer visiblity
              topLayer.node().style['display'] = 'inline';

              //and dispatch the event to the appropriate target
              target.dispatchEvent(newEvt);
          }.bind(context);
  }
}, PxVisBehaviorD3.svg];

/*
    Name:
    PxVisBehaviorChart.mutedAxes

    Description:
    Behavior providing property for muting axes
    @polymerBehavior PxVisBehaviorChart.mutedAxes
*/
PxVisBehaviorChart.mutedAxes = {
  properties: {
    /**
       * An object to hold which axes should be muted.
       *
       * *When adding keys to this, be sure to use Polymer set methods or notifyPath*
       *
       * ```
       *    {
       *        "Axes_to_skip_1":true,
       *        "Axes_to_skip_2":true
       *    }
       * ```
       */
      mutedAxes: {
        type: Object,
        notify: true,
        value: function() { return {}; }
      },
  },
};

/*
    Name:
    PxVisBehaviorChart.axisRegister

    Description:
    Behavior providing properties for dealing with an axis register (// coordinates and radar)
    @polymerBehavior PxVisBehaviorChart.axisRegister
*/
PxVisBehaviorChart.axisRegister = [{
  properties: {
    /**
    *
    * Allows to hide the axis register
    */
    hideAxisRegister: {
      type: Boolean,
      value: false
    },
    _axisRegisterConfig: {
      type: Object
    },
    _axisRegisterTooltipData: {
      type: Object
    }
  },
  observers: ['_computedAxisRegisterConf(axes, completeSeriesConfig)'],

  _computedAxisRegisterConf: function(axes, completeSeriesConfig) {

    //first set new config
    var axisConfig = {},
        configTitle,
        tooltipData = {};
    
    tooltipData.series = [];

    for(var i=0; i<axes.length; i++) {
      configTitle = completeSeriesConfig[axes[i]] ? completeSeriesConfig[axes[i]].title : null;

      axisConfig[axes[i]] = {
        "name": configTitle ? configTitle : axes[i]
      };
      tooltipData.series.push({ 'name': axes[i]});
    }


    this.set('_axisRegisterConfig', axisConfig);
    this.set('_axisRegisterTooltipData', tooltipData);
  },

  _getHideClass: function(hide) {
    if(hide === true) {
      return 'visuallyhidden';
    }
    return '';
  },
}, PxVisBehavior.dimensions, PxVisBehavior.completeSeriesConfig, PxVisBehaviorChart.mutedAxes];

/*
    Name:
    PxVisBehaviorChart.categoryRegister

    Description:
    Behavior providing properties for dealing with a category register (// coordinates and radar)
    @polymerBehavior PxVisBehaviorChart.categoryRegister
*/
PxVisBehaviorChart.categoryRegister = [{
  properties: {
    /**
    *
    * Allows to hide the axis register
    */
    hideCategoryRegister: {
      type: Boolean,
      value: false
    },
    _hideCategoryRegister: {
      type: Boolean,
      value: true
    },
    _categoryRegisterConfig: {
      type: Object
    },
    _categoryRegisterTooltipData: {
      type: Object
    }
  },
  observers: [
    '_computeCategoryRegisterConfig(categoryKey, completeSeriesConfig, categories)',
    '_computeHideCategoryRegister(hideCategoryRegister, categoryKey)'
  ],

  _computeCategoryRegisterConfig: function() {
    if(typeof(this.categoryKey) !== 'undefined') {
      var tooltipData = {},
          config = {};
      tooltipData.series = [];

      for(var i = 0; i < this.categories.length; i ++) {
        
        //TODO: what text do we want to display
        config[this.categories[i].toString()] = {
          'name': this.categoryKey + ' - ' + this.categories[i].toString(),
          "color": this._getColor(this.startColorIndex + i),
        };
        tooltipData.series.push({"name": this.categories[i].toString()})
      }

      //set our confs
      this.set('_categoryRegisterConfig', config);
      this.set('_categoryRegisterTooltipData', tooltipData);
    }
  },
  _computeHideCategoryRegister: function() {
    this.set('_hideCategoryRegister', this.hideCategoryRegister || !this.categoryKey);
  },
  _getHideClass: function(hide) {
    if(hide === true) {
      return 'visuallyhidden';
    }
    return '';
  },
}, PxVisBehavior.completeSeriesConfig, PxVisBehavior.categories];

/*
    Name:
    PxVisBehaviorChart.categoryAndAxisRegisterConfigs

    Description:
    Behavior providing properties for configuring category and axis register (// coordinates and radar)
    @polymerBehavior PxVisBehaviorChart.categoryAndAxisRegisterConfigs
*/
PxVisBehaviorChart.categoryAndAxisRegisterConfigs = [{

  properties: {
    /**
    * Configuration object used to customize the register cosmetic properties.
    * Please refer to px-vis-register (https://github.com/PredixDev/px-vis) for a list of supported proerties
    *
    */
    axisRegisterConfig: {
      type: Object
    },
    /**
    * Configuration object used to customize the register cosmetic properties.
    * Please refer to px-vis-register (https://github.com/PredixDev/px-vis) for a list of supported proerties
    *
    */
    categoryRegisterConfig: {
      type: Object
    }
  },
  observers: [
    '_axisRegisterConfigChanged(axisRegisterConfig.*)',
    '_categoryRegisterConfigChanged(categoryRegisterConfig.*)',
  ],
  _categoryRegisterConfigChanged: function(conf) {
    this._applyConfigToElement(this.categoryRegisterConfig, this.$.categoryRegister);
  },
  _tooltipConfigChanged: function(conf) {
    this._applyConfigToElement(this.tooltipConfig, this.$.tooltip);
  },
}, PxVisBehaviorChart.subConfiguration];

/*
    Name:
    PxVisBehaviorChart.zooming

    Description:
    Behavior providing properties and logic for chart zooming
    @polymerBehavior PxVisBehaviorChart.zooming
*/
PxVisBehaviorChart.zooming = [{

  /**
   * Properties block, expose attribute values to the DOM via 'reflect'
   *
   * @property properties
   * @type Object
   */
  properties: {
    /**
     * Stack of previous zooms
     */
    zoomStack: {
      type: Array,
      value: function() {
        return [];
      }
    },
    /**
     * Percentage used to calculate new extents when using zoomIn feature.
     * The higher the number the more it will zoom in. should be less than 1.
     */
    zoomInPercentage: {
      type: Number,
      value: 0.5
    },
    /**
     * Percentage used to calculate new extents when using zoomOut feature.
     * The higher the number the more it will zoom out. should be less than 1.
     */
    zoomOutPercentage: {
      type: Number,
      value: 0.5
    },
    /**
     * Original extents before zooming if one of the axis is ordinal
     */
    _originalOrdinalExtents: {
      type: Array
    }
  },
  observers: [
    'zoom(extentsData)'
  ],
  listeners: {
    'px-vis-toolbar-reset-zoom': 'resetZoom',
    'px-vis-toolbar-zoom-in': 'zoomIn',
    'px-vis-toolbar-zoom-out': 'zoomOut',
    'px-vis-toolbar-undo-zoom': 'undoZoom',
    'px-vis-save-zoom-state': '_saveZoomState'
  },

  /**
   * Restore zoom to its previous value, do nothing if no previous value
   */
  undoZoom: function() {
    if(this.zoomStack.length === 1) {
      this.resetZoom();
    }

    var extentsData = this.pop('zoomStack');
    if(extentsData) {
      this.set('selectedDomain', extentsData);
      this.fire('px-vis-selected-domain-updated', { 'data':extentsData, 'method': 'set', 'dataVar': 'selectedDomain' });
    }
  },
  _saveZoomState: function() {

    //save ordinal domain if we aren't zoomed
    if(this.zoomStack.length === 0 && (this.xAxisType === 'ordinal' || this.yAxisType === 'ordinal')) {
      this.set('_originalOrdinalExtents', [this.x.domain(), this.y.domain()]);
    }
    this.push('zoomStack', this.selectedDomain);
  },
  zoomIn: function() {
    this._autoZoom(true);
  },
  zoomOut: function() {
    this._autoZoom(false);
  },
  _autoZoom: function(isZoomIn) {
    this._saveZoomState();

    var xMin = this.x.domain()[0],
        xMax = this.x.domain()[1],
        yMin = this.y.domain()[0],
        yMax = this.y.domain()[1],
        newX,
        newY;
    
    if(this.xAxisType === 'ordinal') {
      //add and remove values for ordinal
      newX = this._calcNewOrdinalExtents(this.x.domain(), this._originalOrdinalExtents[0], isZoomIn);
    } else {

      //because we're going to apply a percentage to values we need to 
      //make sure those values are linear
      xMin = this._convertValue(xMin, this.xAxisType, true);
      xMax = this._convertValue(xMax, this.xAxisType, true);

      newX = this._calcNewLinearExtents(xMin, xMax, isZoomIn);

      //make sure values are in the right format
      newX[0] = this._convertValue(newX[0], this.xAxisType, false);
      newX[1] = this._convertValue(newX[1], this.xAxisType, false);
    }

    if(this.yAxisType === 'ordinal') {
      //add and remove values for ordinal
      newY = this._calcNewOrdinalExtents(this.y.domain(), this._originalOrdinalExtents[1], isZoomIn);
    } else {
      //linear
      newY = this._calcNewLinearExtents(yMin, yMax, isZoomIn);
    }

    newExtents = {
      eX: newX,
      eY: newY
    };
    //this will kick zoom()
    this.set('extentsData', newExtents);
  },
  _calcNewOrdinalExtents: function(currentDomain, originalDomain, isZoomIn) {
    if(isZoomIn) {
      return this._calcNewZoomedInOrdinal(currentDomain, originalDomain);
    } else {
      return this._calcNewZoomedOutOrdinal(currentDomain, originalDomain);
    }
  },
  _calcNewZoomedInOrdinal: function(currentDomain) {

    var newCount = Math.ceil(currentDomain.length * this.zoomInPercentage),
        removeCount = currentDomain.length - newCount,
        removeOnLeft = Math.ceil(removeCount/2),
        removeOnRight = Math.floor(removeCount/2);

    currentDomain.splice(0, removeOnLeft);
    currentDomain.splice(currentDomain.length - removeOnRight);

    return currentDomain;
  },
  _calcNewZoomedOutOrdinal: function(currentDomain, originalDomain) {
    var newCount = Math.min(Math.ceil(currentDomain.length / this.zoomOutPercentage), originalDomain.length),
        addCount = newCount - currentDomain.length,
        addOnLeft = Math.ceil(addCount/2),
        addOnRight = Math.floor(addCount/2),
        mostLeftIndex = originalDomain.indexOf(currentDomain[0]),
        mostRightIndex = originalDomain.indexOf(currentDomain[currentDomain.length-1]);

    //make sure we have enough columns on left
    if(mostLeftIndex < addOnLeft) {
      var diff = addOnLeft - mostLeftIndex;
      addOnLeft -= diff;
      addOnRight += diff;
    }

    //make sure we have enough columns on right
    if(mostRightIndex < addOnRight) {
      var diff = addOnRight - mostRightIndex;
      addOnRight -= diff;
      addOnLeft += diff;
    }

    //add on left
    for(var i=1; i < addOnLeft + 1; i++) {
      currentDomain.splice(0, 0, originalDomain[mostLeftIndex-i])
    }

    //add on right
    for(var i=1; i < addOnRight + 1; i++) {
      currentDomain.splice(currentDomain.length, 0, originalDomain[mostRightIndex+i])
    }

    return currentDomain;
  },
  _calcNewLinearExtents: function(min, max, isZoomIn) {
    var range = max - min,
        result = [];

    result[0] = isZoomIn ? (min + (range * this.zoomInPercentage/2)) : 
                            (min - (range * this.zoomOutPercentage/2));
    result[1] = isZoomIn ? (max - (range * this.zoomInPercentage/2)) :
                            (max + (range * this.zoomOutPercentage/2));

    return result;
  },
  _convertValue: function(value, axisType, convertFrom) {
    if(convertFrom) {
      return axisType === 'time' ? Number(value) : value;
    } else {
      return axisType === 'time' ? new Date(value) : value;
    }
  },
  /**
   * Sets the selectedDomain to the drawn zoom and shows the button
   *
   */
  zoom: function(extentsData) {

    this.set('selectedDomain', {x:extentsData.eX, y:extentsData.eY});
    this.fire('px-vis-selected-domain-updated', { 'data':{x:extentsData.eX, y:extentsData.eY}, 'method': 'set', 'dataVar': 'selectedDomain' });
  },
  /**
   * resets the extents
   *
   */
  resetZoom: function() {
    this.set('selectedDomain', 'reset');

    //ensure the zoom stack is reset
    this.splice('zoomStack', 0, this.zoomStack.length);

    this.fire('px-vis-selected-domain-updated', { 'data':'reset', 'method': 'set', 'dataVar': 'selectedDomain' });
  }
}, PxVisBehavior.extentsData, PxVisBehaviorD3.selectedDomain, PxVisBehavior.axisTypes];

/*
    Name:
    PxVisBehaviorChart.actionRequest

    Description:
    Behavior providing properties and logic running a function or firing an event within
    the context of the chart
    @polymerBehavior PxVisBehaviorChart.actionRequest
*/
PxVisBehaviorChart.actionRequest = {

  listeners: {
    'px-vis-action-request': '_actionRequest',
    'px-vis-event-request': '_eventRequest'
  },

  /**
   * Runs a custom function within the context of the chart
   */
  _actionRequest: function(evt) {
   
   var fn = evt.detail.function,
       data = evt.detail.data;
   if(fn) {

     fn = fn.bind(this);
     fn(data);
   }

   evt.stopPropagation();
  },
  /**
   * Fires a custom event within the context of the chart
   */
  _eventRequest: function(evt) {

    var eventName = evt.detail.eventName ? evt.detail.eventName : 'px-vis-event';
    this.fire(evt.detail.eventName, {'data': evt.detail.data})

    evt.stopPropagation();
  },
};

/*
    Name:
    PxVisBehaviorChart.toolbarSubConfig

    Description:
    Behavior providing properties for the toolbar subconfig
    @polymerBehavior PxVisBehaviorChart.toolbarSubConfig
*/
PxVisBehaviorChart.toolbarSubConfig = {

  properties: {
    /**
     * TODO: comment
     */
    toolbarSubConfig: {
      type: Object
    }
  }
};

/*
    Name:
    PxVisBehaviorChart.noDebounceOnPanning

    Description:
    Behavior removing debouynce on line drawing when panning
    @polymerBehavior PxVisBehaviorChart.noDebounceOnPanning
*/
PxVisBehaviorChart.noDebounceOnPanning = {

  properties: {
    /**
      * holds the previous drawing debounce timing (before panning)
      */
    _oldDrawDebouncedTime: {
      type: Number
    }
  },
  listeners: {
    'px-vis-interaction-space-start-panning': '_startPanning',
    'px-vis-interaction-space-stop-panning': '_stopPanning'
  },
  _startPanning: function() {

    //remove draw debounce to have a smooth panning
    var lineType = this.renderToCanvas ? 'px-vis-line-canvas' : 'px-vis-line-svg',
        lines = Polymer.dom(this.root).querySelectorAll(lineType);

    if(lines && lines.length > 0) {
      this._oldDrawDebouncedTime = lines[0].drawDebounceTime;
      for(var i=0; i<lines.length; i++) {
        lines[i].set('drawDebounceTime', 0);
      }
    }
  },
  _stopPanning: function() {

    var lineType = this.renderToCanvas ? 'px-vis-line-canvas' : 'px-vis-line-svg',
        lines = Polymer.dom(this.root).querySelectorAll(lineType);

    if(lines) {
      for(var i=0; i<lines.length; i++) {
        lines[i].set('drawDebounceTime', this._oldDrawDebouncedTime);
      }
    }
  }
};

</script>