px-vis-behavior-d3.html

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

Px.d3 = d3;

if(typeof Px.oldD3 !== 'undefined') {
  d3 = Px.oldD3;
}

var PxVisBehaviorD3 = PxVisBehaviorD3 || {};

/*
    Name:
    PxVisBehaviorD3.svg

    Description:
    Polymer behavior that provides the svg property and core methods for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.svg
*/
PxVisBehaviorD3.svg = [{
  properties: {
    /*
    *
    * The SVG element inside the chart - not a D3 selected element.
    */
    pxSvgElem: {
      type: Object,
      notify:true
    }
  },

  /**
   * Generates a random id string.
   *
   * Takes a string prefix, then adds 10 random chars
   *
   * @param {string}
   * @return {id string}
   */
  generateRandomID: function(baseStr) {
    // FIXME In theory, we could get two of the same IDs.
    var id = baseStr,
        abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
        len = abc.length;

    for(var i = 0; i < 10; i++){
      id += abc.charAt(Math.floor(Math.random() * len));
    }

    return id;
  },
  /*
   * Clones a SVG elem and sets a component property with the d3 instance of that clone.
   *
   * The intent of this is to clone the high level 'g' elem we draw to and attach it.
   * The draw order matters  in SVG and we want the some stuff to appear on top of everything else
   * Since we cannot easily ensure it draw order with components, we can stick top level items in a different 'g' that we know is drawn after the main 'g'
   *
   * @param {element}
   * @param {string}
  */
  cloneSVGElem: function(svg,prop,onBottom) {
    var tempSVG = svg,
        clone = tempSVG.cloneNode();

    if(!onBottom || tempSVG.parentNode.childNodes.length === 0) {
      tempSVG.parentNode.appendChild(clone);
    } else {

      tempSVG.parentNode.insertBefore(clone, tempSVG.parentNode.firstChild );
    }

    this.set(prop,Px.d3.select(clone));
  },

  /**
   * Draws the current svg into a canvas
   */
  _drawSVGOnCanvas: function(canvas, callback, x, y) {
    var svgData = this.pxSvgElem.outerHTML;
    x = x ? x : 0;
    y = y ? y : 0;

    //stupid IE can't get outerHTML of svg even though it's now a W3C spec
    if(!svgData) {
      svgData = this._getSVGOuterHtml(this.pxSvgElem);
    }

    //check if drawing an svg on canvas is ok
    var smallSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><div></div></svg>',
        testCanvas = document.createElement('canvas'),
        successLoadImage,
        failureLoadImage;

    failureLoadImage = function() {

      //fallback on canvg
      this._drawCanvg(canvas, svgData, x, y, function() {
        callback(this.resultCanvas);
      });
    }.bind(this);

    successLoadImage = function(testedCanvas) {

      //image has been loaded successfully on canvas, now test if it has been tainted
      try {
        testedCanvas.toDataURL();

        //ok no error were thrown, we can proceed
        this._nativeDrawSvgOnCanvas(canvas, svgData, x, y, function() {
          callback(canvas);
        }, function() {
          //fallback on canvg
          this._drawCanvg(canvas, svgData, x, y, function() {
            callback(this.resultCanvas);
          });
        }.bind(this));
      } catch(err) {

        //fallback on canvg
        this._drawCanvg(canvas, svgData, x, y, function() {
          callback(this.resultCanvas);
        });
      }
    }.bind(this);

    this._nativeDrawSvgOnCanvas(testCanvas, smallSvg, x, y, successLoadImage, failureLoadImage);
  },
  /**
   * Uses canvg third party to "translate" svg to javascript instructions
   * for the canvas, and draw on the canvas
   */
  _drawCanvg: function(canvas, svgData, x, y, callback) {
    var options = {ignoreDimensions: true,
                  ignoreClear: true,
                  renderCallback: callback,
                  offsetX: x,
                  offsetY: y,
                  resultCanvas: canvas};
    canvg(canvas, svgData, options);
  },

  /**
   * Tries to draw the SVG to canvas and if that doesnt work, falls back on a failure callback
   */
  _nativeDrawSvgOnCanvas: function(canvas, svgData, x, y, sucessCallback, failureCallback) {
    //detect canvas tainting failures

      var DOMURL = window.URL || window.webkitURL || window,
          blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'}),
          url = DOMURL.createObjectURL(blob),
          img = new Image();

      //once svg has been loaded
      img.onload = function() {

        //catching error for IE 11 here:
        //http://stackoverflow.com/questions/25214395/unexpected-call-to-method-or-property-access-while-drawing-svg-image-onto-canvas
        try {
          canvas.getContext('2d').drawImage(img, x, y);
          DOMURL.revokeObjectURL(url);
        } catch(err) {
          failureCallback(canvas);
          return;
        }

        sucessCallback(canvas);
      };

      //Safari...
      img.onerror = function(err) {
        failureCallback(canvas);
      }.bind(this);

      img.src = url;
  },
  /**
   * fix for IE to get outer HTML
   */
  _getSVGOuterHtml: function(svg) {
    var serializeXML = function(node, output) {
      var nodeType = node.nodeType;
      if (nodeType == 3) { // TEXT nodes.
        // Replace special XML characters with their entities.
        output.push(node.textContent.replace(/&/, '&amp;').replace(/</, '&lt;').replace('>', '&gt;'));
      } else if (nodeType == 1) { // ELEMENT nodes.
        // Serialize Element nodes.
        output.push('<', node.tagName);
        if (node.hasAttributes()) {
          var attrMap = node.attributes;
          for (var i = 0, len = attrMap.length; i < len; ++i) {
            var attrNode = attrMap.item(i);
            output.push(' ', attrNode.name, '=\'', attrNode.value, '\'');
          }
        }
        if (node.hasChildNodes()) {
          output.push('>');
          var childNodes = node.childNodes;
          for (var i = 0, len = childNodes.length; i < len; ++i) {
            serializeXML(childNodes.item(i), output);
          }
          output.push('</', node.tagName, '>');
        } else {
          output.push('/>');
        }
      } else if (nodeType == 8) {
        // TODO(codedread): Replace special characters with XML entities?
        output.push('<!--', node.nodeValue, '-->');
      } else {
        // TODO: Handle CDATA nodes.
        // TODO: Handle ENTITY nodes.
        // TODO: Handle DOCUMENT nodes.
        throw 'Error serializing XML. Unhandled node of type: ' + nodeType;
      }
    }

    var output = [];
    var childNode = svg.firstChild;
    while (childNode) {
      serializeXML(childNode, output);
      childNode = childNode.nextSibling;
    }

    return '<svg xmlns="' + svg.attributes.xmlns.value + '" width="' +
      svg.attributes.width.value + '" height="' + svg.attributes.height.value +
      '">' + output.join('') + '</svg>';
  }
}, PxVisBehavior.svgDefinition];

/*
    Name:
    PxVisBehaviorD3.svg

    Description:
    Polymer behavior that provides the svg properties when there are two svgs in a chart.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.svg
*/
PxVisBehaviorD3.svgLower = [{
  properties: {
    /*
    *
    * The SVG element inside the chart - not a D3 selected element. Used when there are two svgs in a chart
    */
    pxSvgElemLower: {
      type: Object,
      notify:true
    }
  }
}, PxVisBehavior.svgLowerDefinition];

/*
    Name:
    PxVisBehaviorD3.canvas

    Description:
    Polymer behavior that provides the canvas property and core methods for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.canvas
*/
PxVisBehaviorD3.canvas = {
  properties: {
    /**
     * canvasContext is a holder for the instantiated canvas context to draw to.
     * Must be set in ready and passed to all components so they know whom to draw to.
     *
     */
    canvasContext: {
      type: Object,
      notify:true
    },
    /**
    * Boolean to specify if drawings should render to svg instead of canvas
    *
    */
    renderToSvg: {
      type: Boolean,
      value: false,
      notify: true
    }
  }
}

/*
    Name:
    PxVisBehaviorD3.axes

    Description:
    Polymer behavior that provides the x,y axes and domains for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.axes
*/
PxVisBehaviorD3.axes = {
  properties: {
    /**
     * x is a holder for the d3 instantiated scale object
     * Must be set in the svg component and passed to all components so they know the drawing scale.
     * This can be set declaratively
     *
     * See: https://github.com/d3/d3/blob/master/API.md#scales-d3-scale
     *
     * @property x
     * @type Object
     */
    x: {
      type: Object,
      notify:true
    },
    /**
     * y is a holder for the d3 instantiated scale object
     * Must be set in the svg component and passed to all components so they know the drawing scale.
     * This can be set declaratively
     *
     * See: https://github.com/d3/d3/blob/master/API.md#scales-d3-scale
     *
     * @property y
     * @type Object
     */
    y: {
      type: Object,
      notify:true
    },
    /**
     * The chart extents which have been set by the scale component
     *
     * Serves as a trigger for many elements to redraw
     *
     * @property currentDomainX
     * @type Array
     */
    currentDomainX: {
      type:Array,
      notify:true
    },
    /**
     * The chart extents which have been set by the scale component
     *
     * Serves as a trigger for many elements to redraw
     *
     * @property currentDomainY
     * @type Array
     */
    currentDomainY: {
      type:Array,
      notify:true
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.domainUpdate

    Description:
    Polymer behavior that provides domain update propertyt

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.domainUpdate
*/
PxVisBehaviorD3.domainUpdate = {
  properties: {
    /**
     * Boolean switching when the domain(s) has(have) changed
     *
     * Serves as a trigger for many elements to redraw
     *
     * @property currentDomain
     * @type Object
     */
    domainChanged: {
      type: Boolean,
      notify: true,
      value: null
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.axis

    Description:
    Polymer behavior that provides the axis and domain properties for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.axis
*/
PxVisBehaviorD3.axis = {
  properties: {
    /**
     * axis is a general holder for the d3 instantiated scale object
     * Can pass any type of instantiated scale object, IE pass in either your x or your y depending which this axis is for.
     * This can be set declaratively
     *
     * See: https://github.com/d3/d3/blob/master/API.md#scales-d3-axis
     *
     * @property axis
     * @type Object
     */
    axis: {
      type: Object,
      notify: true
    },
    /**
     * The chart extents which have been set by the scale component
     *
     * Serves as a trigger for many elements to redraw
     *
     * @property currentDomain
     * @type Object
     */
    currentDomain: {
      type:Array,
      notify:true
    },
    /**
     * Defines which side the axis should be on.
     *  - 'left'
     *  - 'right'
     *  - 'bottom'
     *  - 'top'
     *
     * @property orientation
     * @type String
     * @default bottom
     */
    orientation: {
      type: String,
      value: 'bottom',
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.selectedDomain

    Description:
    Polymer behavior that provides the an object to hold user selected domains for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.selectedDomain
*/
PxVisBehaviorD3.selectedDomain = {
  properties: {
    /**
     * New chart extents selected by the user
     *
     * Serves as a trigger for the scale component to redefine the chart extents
     *
     * @property selectedDomain
     * @type Object
     */
    selectedDomain: {
      type:Object,
      value: function() {
        return {x:[], y:[]};
      },
      notify:true
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.selectedTimeDomain

    Description:
    Polymer behavior that provides the ability to use px-datetime (px-rangepicker) to drive the selection
    of a time domain in a px-vis time based chart

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.selectedTimeDomain
*/
PxVisBehaviorD3.selectedTimeDomain = [{
  properties: {
    /**
     * Range object defining the time span
     *   * Format ISO8601 strings
     * ```
     * {
     *    "from": "2013-01-07T22:44:30.652Z",
     *    "to" : "2013-02-04T22:44:30.652Z"
     * }
     * ```
     *
     * Updates and is updated by SelectedDomain
     *
     */
    range: {
      type: Object,
      notify: true
    },
    _preventDomainUpdate: {
      type: Boolean,
      value: false
    },
    _preventRangeUpdate: {
      type: Boolean,
      value: false
    }
  },
  observers: [
    '_rangeChanged(range)',
    // '_selectedDomainChanged(selectedDomain)'
  ],
  attached: function() {
    this._isAttached = true;
  },
  _rangeChanged: function(range) {
    if(this._isAttached && !this._preventRangeUpdate) {
      //update selectedDomain with those new values
      //make sure we don't trigger a domain update when changing it from here
      this._preventDomainUpdate = true;

      var newDomain = {},
          dataExtents = {};
      // newDomain.y = this.selectedDomain.y;
      newDomain.x = [];
      newDomain.x[0] = Number(Px.moment(this.range.from, Px.moment.ISO_8601).format('x'));
      newDomain.x[1] = Number(Px.moment(this.range.to, Px.moment.ISO_8601).format('x'));

      if(this.dataExtents && this.dataExtents.y.length > 0) {
        dataExtents["y"] = this.dataExtents.y;
      } else {
        dataExtents.y = [Infinity, -Infinity];
      }

      dataExtents.x = newDomain.x;

      // this.set('selectedDomain', newDomain);
      this.set('dataExtents', dataExtents);

      this._preventDomainUpdate = false;
    }

  },
  // _selectedDomainChanged: function(selectedDomain) {
  //   if(this._isAttached && !this._preventDomainUpdate) {
  //     //update selectedDomain with those new values
  //     //make sure we don't trigger a domain update when changing it from here
  //     this._preventRangeUpdate = true;
  //
  //     var newRange = {};
  //     newRange.from = Px.moment(this.selectedDomain.x[0]).toISOString();
  //     newRange.to = Px.moment(this.selectedDomain.x[1]).toISOString();
  //
  //     this.set('range', newRange);
  //
  //     this._preventRangeUpdate = false;
  //   }
  // }

}, PxVisBehaviorD3.selectedDomain];

/*
    Name:
    PxVisBehaviorD3.clipPath

    Description:
    Polymer behavior that provides the clipPath object for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.clipPath
*/
PxVisBehaviorD3.clipPath = {
  properties: {
    /**
     * Holder for a clipping path ID
     *
     */
    clipPath: {
      type:String,
      notify:true
    },
    /**
     * A more restricting clip path used to limit where the series are being drawn
     *
     */
    seriesClipPath: {
      type:String,
      notify: true
    }
  },
  /**
   * Add the clip-path attr to the element
   *
   * @method addClipPath
   */
  addClipPath: function(elem) {
    if(typeof(this.clipPath) !== 'undefined' && this._doesD3HaveValues(elem)){
      elem.attr("clip-path", 'url(#' + this.clipPath + ')');
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.dynamicRedraw

    Description:
    Polymer behavior that provides the dynamicRedraw objects for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.dynamicRedraw
*/
PxVisBehaviorD3.dynamicRedraw = {
  properties: {
    /**
     * Boolean to specify if we should redraw the chart series when we move an axis. More of a chart type by chart type configuration rather than a developer configuration. IE, for charts such as multi-y timeseries, it is unnessary. For charts such as parallel coordinates, it is necessary.
     */
    redrawSeries: {
      type: Boolean,
      value: false
    },
    /**
     * The accompanying array of series elements required to redraw.
     */
    redrawElems: {
      type: Array,
      value: function() { return [] }
    },
    /**
     * Boolean specifing if the lines should redraw as you move the axis or just at the end.
     */
    dynamicRedraw: {
      type: Boolean,
      value: false
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.axisConfig

    Description:
    Polymer behavior that provides the axisConfig objects for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.axisConfig
*/
PxVisBehaviorD3.axisConfig = {
  properties: {
    /**
     * The displayed title for the axis
     *
     * @property title
     * @type String
     * @default ''
     */
    title: {
      type:String,
      value: ''
    },
    /**
     * Defines on which side the tick mark the label should sit.
     *  - 'center'
     *  - 'before'
     *  - 'after'
     *
     * @property labelPosition
     * @type String
     * @default center
     */
    labelPosition: {
      type: String,
      value: 'center',
    },
    /**
     * Defines how the label should be rotated. Number is the degree of rotation
     *
     * @property labelRotation
     * @type Number
     * @default 0
     */
    labelRotation: {
      type: Number,
      value: 0,
    },
    /**
     * Defines how the label should be moved in x,y. Array is an x,y pair and coresponds to the number of pixels to move the label
     *
     * @property labelTranslation
     * @type Array
     * @default [0,0]
     */
    labelTranslation: {
      type: Array,
      value: function() {return [0,0];},
    },
    /**
     * Defines the base label type size
     *
     * @property labelTypeSize
     * @type Number
     * @default 12
     */
    labelTypeSize: {
      type: Number,
      value: 12,
    },
    /**
     * Array of the series which belong to this axis
     *
     * @property series
     * @type Array
     */
    series: {
      type: Array,
      value: function() {return[];}
    },
    /**
     * An x,y amount to move the axis to allow for labels and titles
     *
     * @property translateAmt
     * @type Array
     */
    translateAmt: {
      type: Array,
      value:function(){ return [0,0]; }
    },
    /**
     * Optional object to specify placement of the title. If none is supplied, then it uses `orientation` to determine title location.
     *
     *```
     *    {
     *      x: Number, // a x number of pixels
     *      y: Number, // a y number of pixels
     *      r: Number, // a number of degrees to rotate
     *      anchor: String, // middle, start, end
     *    }
     *```
     */
    titleLocation: {
      type: Object,
      value: function(){ return {} }
    },

    /**
     * Defines the Title type size
     *
     */
    titleTypeSize: {
      type: Number,
      value: 15,
    },

    /**
     * Defines the axis stroke width
     *
     */
    strokeWidth: {
      type: Number,
      value: 1
    },
    /**
     * Defines the axis outerTickSize. Default is to hide them
     *
     * See: https://github.com/d3/d3-axis#axis_tickSizeOuter
     */
    outerTickSize: {
      type: Number,
      value: 0
    },
    /**
     * Defines the what values the axis should use
     *
     * See: https://github.com/d3/d3-axis#axis_tickValues
     */
    tickValues: {
      type: Array
    },
    /**
     * Defines the tick number and format
     *
     * See: https://github.com/d3/d3-axis#axis_ticks
     *
     * Can be either a Number or an Object
     *
     * Obj format:
     * ```
     *    {
     *         "interval": Number,
     *         "format": String or d3 object,
     *    }
     * ```
     */
    ticks: {},  //yes, this doesnt have a type because both Number and Object are valid
    /**
     * Defines the color for axis lines, ticks, labels, and title
     *
     */
    axisColor: {
      type: String,
      value: "grey9"
    },
    /**
     * Returned tick values from the axis
     *
     */
    drawnTickValues: {
      type: Array,
      notify: true
    }
  }
};



/*
    Name:
    PxVisBehaviorD3.radialAxisConfig

    Description:
    Polymer behavior that provides shared behaviors for radial axes elements.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.radialAxisConfig
*/
PxVisBehaviorD3.radialAxisConfig = {
  properties: {
    centerOffset: {
      type: Number,
      value: 0,
      notify: true
    },
  }
};

/*
    Name:
    PxVisBehaviorD3.radialLineGenerator

    Description:
    Polymer behavior that provides function to create a radial line generator

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.radialLineGenerator
*/
PxVisBehaviorD3.radialLineGenerator = [{

  properties: {
    /**
    * A holder object for the line generator
    *
    */
    line: {
      type: Object
    },

    /**
    * sets a minimum value for the line amplitude. Points less than the lineRadiusLimit will be set to the limit
    *
    */
    lineRadiusLimit: {
      type: Number
    }
  },

  /**
   * Defines a multi-scale d3 line generator and its attrs
   *
   */
  _defineRadialLine: function(toCanvas, multiLine, counterClockwise, useDegrees) {
    //get our dimensions
    var _this = this,
        renderToCanvas = (typeof(toCanvas) !== 'undefined') ? toCanvas : false,
        //omg; need to make a copy or else completing the circle breaks dragging.
        dims = JSON.parse(JSON.stringify(this.completeSeriesConfig[this.seriesId]['x'])),
        path,
        line,
        clockwiseFactor = counterClockwise ? -1 : 1;

    if(multiLine) {

      if(this.interpolationFunction === 'bofCompleteManually') {
        //manually complete the circle.
        // if we use a d3 interpolator, it adds 'Z' to the path which cause all broken paths to complete. We want to keep broken paths broken
        dims.push(dims[0]);
      }

      path = Px.d3.radialLine()
      .angle(function(d) {
        return _this.x(d[0]) * clockwiseFactor;
      })
      .radius(function(d) {
        // ~~ --> round pixels values to optimize svg perfs
        var radius = ~~_this.y(Number(d[1]));

        if(typeof _this.lineRadiusLimit === 'number' && radius < _this.lineRadiusLimit) {
          return _this.lineRadiusLimit;
        }
        return radius
      }).defined(function(d) {
        return _this._isValidData(_this.x(d[0])) && _this._isValidData(_this.y(Number(d[1])));
      });

      //be sneaky: iterate through the data like normal
      line = function(d) {
        //for each datapoint, iterate through the dimensions
        return path(dims.map(function(p) {
          //check that we have data; if not, return false so it doesnt draw a line
          if(typeof(d[p]) === 'undefined' || d[p] === null) {
            return false
          }
          //return [x,y] to path: x is ordinal based on dim; get the y-scale for the dim and use that particular scale on the data
          return [p,d[p]];
        }));
      };
    } else {
      var xId = this.completeSeriesConfig[this.seriesId]['x'],
          yId = this.completeSeriesConfig[this.seriesId]['y'],
          processAngle;

      if(useDegrees) {
        processAngle = function(d) {
          return d[xId]/180 * Math.PI * clockwiseFactor;
        };
      } else {
        processAngle = function(d) {
          return d[xId] * clockwiseFactor;
        };
      }

      path = Px.d3.radialLine()
      .angle(function(d) {
        return processAngle(d);
      })
      .radius(function(d) {
        return _this.y(d[yId]);
      }).defined( function(d) {
        return _this._isValidData(d[xId]) && _this._isValidData(d[yId]);
      });

      line = function(d) {
        return path(d);
      }
    }

    if(typeof this.interpolationFunction === 'function') {
      path.curve(this.interpolationFunction);
    }

    // add the canvas context if relevant
    if(renderToCanvas) {
      path.context(this.canvasContext);
    }
    this.set('line', line);
  }
}, PxVisBehavior.completeSeriesConfig, PxVisBehavior.dataset];


/*
    Name:
    PxVisBehaviorD3.lineGaps

    Description:
    Polymer behavior that provides definition for showGaps

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.lineGaps
*/
PxVisBehaviorD3.lineGaps = {
  properties: {
    /**
     * A boolean spcifying if the line should show gaps on undefined data.
     *
     */
    showGaps: {
      type: Boolean,
      value: false
    }
  }
};


/*
    Name:
    PxVisBehaviorD3.lineShared

    Description:
    Polymer behavior that provides shared behaviors for line elements.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.lineShared
*/
PxVisBehaviorD3.lineShared = [{
  properties: {
    /**
    * A dev set boolean specifying if the chart is for a parallel coordinates chart
    *
    */
    parallelCoordinates: {
      type: Boolean,
      value: false
    },
    /**
    * A dev set boolean specifying if the line is using radial(polar) data
    *
    */
    radialLine: {
      type: Boolean,
      value: false
    },
    /**
    * A boolean spceifying if a opacity gradient should get applied to the line
    *
    */
    gradientLine: {
      type: Boolean,
      value: false
    },
    /**
    * Calculated range values for the gradient scale
    *
    */
    gradientRange: {
      type: Array,
      computed: '_computeGradientRange(chartData.*,selectedDomain.*,seriesId)'
    },
    /**
    * Gets and saves the rgb so we can make an rgba to apply to the line
    *
    */
    _colorArr: {
      type: Array,
      computed: '_computeColorArr(categories,completeSeriesConfig,seriesId)'
    },
    /**
    * Counter to track progressive rendering requests and only draw the latest one
    */
    interpolationFunction: {
      type: Object
    },
    /**
     * A boolean spcifying if multiple paths get drawn by the line
     *
     */
    multiPath: {
      type: Boolean,
      value: false
    }
  },

  _computeColorArr: function(categories,completeSeriesConfig,seriesId){
    //start with the RGB value and split it
    var c = completeSeriesConfig[seriesId]['color'].split('(')[1].split(','),
        colors = {};

    //save each color individually for use later
    colors[seriesId] = {
      "r": Number(c[0]),
      "g": Number(c[1]),
      "b": Number(c[2].split(')')[0])
    };

    // if coloring by category
    if(categories.length > 0) {
      for(var i = 0; i < categories.length; i++) {
        if(completeSeriesConfig[categories[i]]) {
          c = completeSeriesConfig[categories[i]]['color'].split('(')[1].split(',');
          colors[categories[i]] = {
            "r": Number(c[0]),
            "g": Number(c[1]),
            "b": Number(c[2].split(')')[0])
          };
        }
      }
    }

    return colors;
  },

  /**
   * Returns the correct opacity to use for all lines.
   *
   */
  _opacityLine:function(d) {
    // calulate the percentage through the dataset
    var n = (this.gradientRange[1] - d[this.seriesId]) / (this.gradientRange[1] - this.gradientRange[0]);
    // scale the gradient by that resulting in a gradient from 20% - 100%
    return 1 - n * 0.8;
  },

  /**
   * Computes the data range.
   *
   */
  _computeGradientRange: function(chartData, selectedDomain,seriesId) {
    if(chartData.value.length > 0) {
      var x1,x2;
      if(selectedDomain.value.x.length > 0) {
        x1 = Number(selectedDomain.value.x[0]);
        x2 = Number(selectedDomain.value.x[1]);
      } else {
        x1 = Number(chartData.value[0][seriesId]);
        x2 = Number(chartData.value[chartData.value.length - 1][seriesId]);
      }
      return [x1,x2];
    }
  },

  _removeGaps: function(data) {

  },

  /**
   * Defines the d3 line generator and its attrs
   *
   */
  _defineSingleLine: function(toCanvas) {
    var _this = this,
        renderToCanvas = (typeof(toCanvas) !== 'undefined') ? toCanvas : false,
        xKey = _this.completeSeriesConfig[_this.seriesId]['x'],
        yKey = _this.completeSeriesConfig[_this.seriesId]['y'],
        line,
        counter = 0;

    if(this.showGaps) {
      line = Px.d3.line()
        .x(function(d) {
          // ~~ --> round pixels values to optimize svg perfs
          return ~~_this.x(d[xKey]);
        })
        .y(function(d) {
          return ~~_this.y(d[yKey]);
        })
        .defined(function(d) {
          return _this._isValidData(d[yKey]);
        });
    } else {
      line = Px.d3.line()
        .x(function(d,i) {
          if(_this.chartData[i][xKey] && (_this.chartData[i][yKey] || _this.chartData[i][yKey] === null)) {
            return ~~_this.x(d[xKey]);
          } else {
            return ~~_this.x(_this.chartData[counter][xKey]);
          }
        })
        .y(function(d,i) {
          if(_this.chartData[i][xKey] && (_this.chartData[i][yKey] || _this.chartData[i][yKey] === null)) {
            counter = i;
            return ~~_this.y(d[yKey]);
          } else {
            return ~~_this.y(_this.chartData[counter][yKey]);
          }
        })
        .defined(function(d) {
          return _this._isDataNotNull(d[yKey]);
        });
    }

    if(this.interpolationFunction) {
      line.curve(this.interpolationFunction);
    }

    // If using canvas, tell it the context to draw to.
    if(renderToCanvas) {
      line.context(this.canvasContext);
    }

    this.set('line',line);
  },

  /**
   * Defines a multi-scale d3 line generator and its attrs
   *
   */
  _defineMultiLine: function(toCanvas) {
    //get our dimensions
    var renderToCanvas = (typeof(toCanvas) !== 'undefined') ? toCanvas : false,
        dims = this.completeSeriesConfig[this.seriesId]['x'],
        //define a normal d3 line generator
        path = Px.d3.line().defined(function(d) {
          //only draw a line through the axis if we have data
          return d;
        }),
        //be sneaky: iterate through the data like normal
        line = function(d) {
          //for each datapoint, iterate through the dimensions
          return path(dims.map(function(p) {
            //check that we have data; if not, return false so it doesnt draw a line
            if(!d[p]) {
              return false
            }
            //return [x,y] to path: x is ordinal based on dim; get the y-scale for the dim and use that particular scale on the data
            return [~~this.x(p), ~~this.y[p](d[p])];
          }.bind(this)));
        }.bind(this);

    if(this.interpolationFunction){
      path.curve(this.interpolationFunction);
    }

    // add the canvas context if relevant
    if(renderToCanvas){
      path.context(this.canvasContext);
    }

    this.set('line',line);
  }
},PxVisBehaviorD3.radialLineGenerator, PxVisBehavior.seriesId, PxVisBehaviorD3.lineGaps];

/*
    Name:
    PxVisBehaviorD3.serieToRedrawOnTopSVG

    Description:
    Polymer behavior that provides the mechanism to redraw a serie on top for SVG

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.serieToRedrawOnTopSVG
*/
PxVisBehaviorD3.serieToRedrawOnTopSVG = [{
  _drawSVGOnTop: function(idToRedraw, selfId, d3Selection) {
    //is this scatter involved in redraw?
    if(idToRedraw === selfId) {
      d3Selection.raise();
    }
  }
}, PxVisBehavior.serieToRedrawOnTop, PxVisBehaviorD3.svg];

</script>