px-vis-line-svg.html

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

<!--
Element which draws lines series onto the chart

##### Usage

    <px-vis-line-svg
        svg="[[svg]]"
        clip-path="[[clipPath]]"
        series-id="[[item.name]]"
        series-number="[[index]]"
        chart-data="[[item]]"
        x="[[x]]"
        y="[[y]]"
        current-domain-x="[[currentDomainX]]"
        current-domain-y="[[currentDomainY]]"
        muted-series="[[mutedSeries]]"
        muted-opacity="0"
        interpolation-function="[[d3InterpolationFunction]]">
    </px-vis-line-svg>

@element px-vis-line-svg
@blurb Element which draws lines series onto the chart
@homepage index.html
@demo demo.html
-->

<link rel="import" href="css/px-vis-styles.html">

<dom-module id="px-vis-line-svg">
    <template>
      <style include="px-vis-styles"></style>


    </template>
</dom-module>

<script>
  Polymer({
    is: 'px-vis-line-svg',

    behaviors: [
      PxVisBehaviorD3.svg,
      PxVisBehaviorD3.lineShared,
      PxVisBehaviorD3.axes,
      PxVisBehavior.dataset,
      PxVisBehavior.mutedSeries,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.clipPath,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehavior.categories,
      PxVisBehaviorD3.selectedDomain,
      PxVisBehavior.polarData,
      PxVisBehavior.dynamicConfigProperties,
      PxVisBehavior.serieToRedrawOnTop,
      PxVisBehaviorD3.serieToRedrawOnTopSVG,
      PxColorsBehavior.baseColors
    ],

    /**
     * px-vis-progressive-rendering-started, fired when a canvas with progressive rendering
     * enabled starts rendering
     * evt.details contains:
     * { numberOfFrames: the number of frames that will be used to render,
     * }
     *
     * @event px-vis-progressive-rendering-started
     */

    /**
     * px-vis-progressive-rendering-ended, fired when a canvas with progressive rendering
     * enabled has finished rendering
     * evt.details contains:
     * { numberOfFrames: the number of frames that have been used to render,
     * }
     *
     * @event px-vis-progressive-rendering-ended
     */

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * A holder object for the series object
       *
       */
      linePath:{
        type:Object
      },
      /**
       * A holder object for the series builder
       *
       * @property linePath
       * @type String
       */
      lineBuilder:{
        type:Object
      },
      /**
       * A holder object for the series group
       *
       */
      lineGroup:{
        type:Object
      },
      /**
       * A dev set boolean specifying if the chart is for a parallel coordinates chart
       *
       */
      parallelCoordinates: {
        type: Boolean,
        value: false
      },
      strokeWidth: {
        type: Number,
        value: 1
      },
      /**
       * the opacity value of the fill to be used when muting a serie (stroke is not drawn on mute)
       * This property will be read from the completeSeriesConfig
       */
      mutedOpacity: {
        type: Number
      },
      /**
       * Debounce time to use for drawing
       */
      drawDebounceTime: {
        type: Number,
        value: 10
      }
    },

    observers: [
      'drawElement(svg,domainChanged,chartData.*,completeSeriesConfig.*, counterClockwise)',
      'isIdInMuted(mutedSeries.*, completeSeriesConfig)',
      '_addClipPath(clipPath)',
      '_drawOnTop(serieToRedrawOnTop)'
    ],
    ready: function() {
      this._watchConfigProperty('mutedOpacity', 0.3);
    },
    detached: function() {
      if(this._doesD3HaveValues(this.linePath)) {
        this.linePath.remove();
      }
      if(this._doesD3HaveValues(this.lineGroup)) {
        this.lineGroup.remove();
      }
    },
    /**
     * Draws or updates the line element.
     * Called from an observer watching for data and the necessary d3 objects
     *
     * @method drawElement
     */
    drawElement: function() {

      //if 0 don't debounce at all
      if(this.drawDebounceTime > 0) {
        this.debounce('draw',function() {
          this._drawElementDebounced();
        }.bind(this), this.drawDebounceTime);
      } else {
        this._drawElementDebounced();
      }
    },

    _drawElementDebounced: function() {

      // we need to wrap the data differently depending on if we are drawing many lines or just one line
      if(this.parallelCoordinates) {
        var data = this.chartData;
        this._defineMultiLine(false);
      }  else if(this.radialLine) {
        this._defineRadialLine(false, this.multiPath, this.counterClockwise, this.useDegrees);
        data = this.multiPath ? this.chartData : [this.chartData];
      } else {
        var data = [this.chartData];
        this._defineSingleLine(false);
      }

      // checks to see if the group already exists. If not, create; if so, update
      if(this._isObjEmpty(this.lineGroup)) {
        // draw the path
        this.lineGroup = this.svg.append('g')
          .attr('series-id', 'line_' + this.seriesId)
          .attr('class', 'series-line');
      }

      // set our data
      var lineBuilder = this.lineGroup.selectAll('path.series-line')
        .data(data);

      // When datapoints disappear from our data, remove them
      lineBuilder.exit().remove();

      // When datapoints are added to our data, add stuff
      lineBuilder.enter()
        .append('path')
        .attr('class', 'series-line')
        .attr('series-id', function(d,i) {
          return this.multiPath ? 'line_' + d[this.seriesId] : 'line_' + this.seriesId
        }.bind(this))
        .attr('fill','none')
      // When datapoints are added OR this funtion is run, draw stuff
      .merge(lineBuilder)
        .attr('d', function(d) {
          return this.line(d);
        }.bind(this))
        .attr('stroke-width',this.strokeWidth)
        .attr('stroke',function(d,i) {
          //normally, do this
          if(!this.categoryKey) {
            return this.completeSeriesConfig[this.seriesId]['color'];
          }

          //check that category has been defined
          if(this.completeSeriesConfig[d[this.categoryKey]]) {
            return this.completeSeriesConfig[d[this.categoryKey]]['color']
          }

          //do nothing if not
          return
        }.bind(this))
        .attr('stroke-opacity',this._svgLineOpacity.bind(this));

      // Make it easy to get our lines again
      this.linePath = this.lineGroup.selectAll('path.series-line');

      this._addClipPath();

      this.isIdInMuted();
    },

    /**
     * Helper to call adClipPath with the elem
     *
     * @method _addClipPath
     */
    _addClipPath: function() {
      this.addClipPath(this.lineGroup);
    },

    /**
     * Checks mutedSeries to see if this ID is in there
     * Called from an observer watching mutedSeries
     *
     * @method isIdInMuted
     */
    isIdInMuted: function() {
      if(this.multiPath && this._doesObjHaveValues(this.linePath)) {
        this.linePath.style('display', function(d) {
          // if we have multiPaths, then just hide them; might want to changes this but need to check with design
          return this.mutedSeries[d[this.seriesId]] ? 'none' : null;
        }.bind(this));
        this._colorLine();
      } else if(this.mutedSeries.hasOwnProperty(this.seriesId)) {

        this._colorLine();
      }
    },
    /**
     * Adds full color to the SVG line.
     *
     */
    _colorLine:function() {
      if(this.linePath) {
        this.linePath.attr('stroke',function(d,i) {
          //normally, do this
          if(!this.categoryKey) {
            return this.completeSeriesConfig[this.seriesId]['color'];
          }

          //check that category has been defined
          if(this.completeSeriesConfig[d[this.categoryKey]]) {
            return this.completeSeriesConfig[d[this.categoryKey]]['color']
          }

          //do nothing if not
          return
        }.bind(this))
        .attr('stroke-opacity',this._svgLineOpacity.bind(this));
      }
    },
    /**
     * Returns the opacity for the SVG line
     *
     */
    _svgLineOpacity: function(d) {
      if(this.mutedSeries[this.seriesId]) {
        return this.mutedOpacity;
      }
      if(this.gradientLine) {
        return this._opacityLine(d);
      } else {
        return 1;
      }
    },
    /**
     * Redraw this serie on top if needed
     */
    _drawOnTop: function(serieToRedrawOnTop) {
      if(this.lineGroup && this.seriesId) {
        this._drawSVGOnTop(serieToRedrawOnTop, this.seriesId, this.lineGroup);
      }
    }
  });
</script>