px-vis-clip-path-complex-area.html

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


<!--
"The clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn." (MDN)

Ostensibly, the clipping path gets applied to drawing components to prevent them from drawing on certain parts of the chart, such stopping a line series drawing where the axis is drawn.

This clip path currently only applies a compound path for radar. Other paths will be forthcoming based on need

##### Usage

    <px-vis-clip-path-radar
        clip-path="{{clipPath}}"
        svg="[[svg]]"
        x="[[x]]"
        y="[[y]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]">
    </px-vis-clip-path-radar>

## MDN Spec
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

@element px-vis-clip-path
@blurb The clipping path restricts the region to which paint can be applied.
@homepage index.html
@demo demo.html
-->
<dom-module id="px-vis-clip-path-complex-area">
    <template>
    </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-clip-path-complex-area',

    behaviors: [
      PxVisBehaviorD3.svg,
      PxVisBehavior.sizing,
      PxVisBehaviorD3.axes,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.clipPath
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * Holder for the clip path scg
       *
       */
      _clipPathObj: {
        type: Object
      },
      /**
       * Holder for the clip path
       *
       */
      _clipPathSvg: {
        type: Object
      }
    },

    observers: [
      '_drawElement(currentDomainY, svg, dimensions, chartData)'
    ],

    detached: function() {
      // this._clipPathObj.remove();
    },

    /**
     * Creates and sets a clipping path
     *
     * @method _drawElement
     */
    _drawElement: function() {
      if(!this._clipPathObj) {
        this.set('clipPath', this.generateRandomID('cp_'));
        this.fire('px-vis-clip-path-updated', { 'dataVar': 'clipPath', 'data': this.clipPath, 'method':'set' });

        this._clipPathObj =  this.svg
          .append("clipPath")
          .attr("id",this.clipPath);
      }

      var _this = this,
          area = Px.d3.radialArea()
            .angle(function(d) {
              return _this.x(d);
            })
            .innerRadius(function(d) {
                // ~~ --> round pixels values to optimize svg perfs
              return ~~_this.y(_this.currentDomainY[0]);
            }).outerRadius(function(d) {
                // ~~ --> round pixels values to optimize svg perfs
              return ~~_this.y(_this.currentDomainY[1]);
            })
            .curve(Px.d3.curveLinearClosed);

      this._clipPathSvg = this._clipPathObj.selectAll("path")
        .data([this.dimensions])
        .enter()
        .append("path");

      //cant do merge because our data is not changing. So run always
      this._clipPathObj.selectAll("path")
        .attr('d', function(d) {
          return area(d);
        });
    }
  });
</script>