px-vis-gridlines.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" />
<link rel="import" href="../px-colors-design/colors.html" />


<!--
Drawing object which adds gridlines to the chart.

Orintation has two options:
- `bottom`
- `left`

Using `bottom` specifies vertical gridlines drawn from the x-axis. Using `left` specifes horizontal gridlines from the y-axis.

##### Usage

    <px-vis-gridlines
        svg="[[svg]]"
        axis="[[x]]"
        margin="[[margin]]"
        length="[[height]]"
        orientation="bottom"
        current-domain="[[currentDomainX]]">
    </px-vis-gridlines>

##### d3 reference
https://github.com/mbostock/d3/wiki/SVG-Axes
The gridlines still make use of the d3.axis object, just with different settings

@element px-vis-gridlines
@blurb Drawing object which adds gridlines to the chart.
@homepage index.html
@demo demo.html
-->

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

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

    </template>
</dom-module>

<script>
    Polymer({

        is: 'px-vis-gridlines',

        behaviors: [
          PxVisBehaviorD3.svg,
          PxVisBehavior.sizing,
          PxVisBehavior.commonMethods,
          PxVisBehaviorD3.axis,
          PxVisBehaviorD3.axisConfig,
          PxColorsBehavior.baseColors,
          PxVisBehaviorD3.domainUpdate
        ],

        /**
         * Properties block, expose attribute values to the DOM via 'reflect'
         *
         * @property properties
         * @type Object
         */
        properties: {
          /**
           * Holder for the instantiated d3 grid
           *
           * @property _grid
           * @type Object
           */
          _grid: {
            type: Object,
            notify: true
          },
          /**
           * Holder for the grid drawing
           *
           * @property _gridGroup
           * @type Object
           */
          _gridGroup: {
            type: Object,
            value: function() { return{}; }
          },
          /**
           * A unique ID for the grid
           *
           * @property gridId
           * @type String
           * @default random string
           */
          gridId: {
            type:String,
            value: '',
            notify: true,
            reflectToAttribute: true
          },
          /**
           * An x,y amount to move the grid to allow for labels and titles
           *
           * @property translateAmt
           * @type Array
           */
          translateAmt: {
            type: Array,
            value:function() { return [0,0]; }
          },
          /**
           * Boolean to control if the grid should be drawn.
           *
           */
          _drawGrid:  {
            type: Boolean,
            value: true
          }
        },

        observers: [
          'drawElement(domainChanged,axis,margin.*,length,svg)'
        ],


        ready:function() {
          // if there is no dev set unique ID, generate one
          if(!this.gridId) {
            this.set('gridId', this.generateRandomID('grid_'));
          }
        },

        detached: function() {
          if(this._doesObjHaveValues(this._gridGroup)){
            this._gridGroup.remove();
            this._gridGroup = {};
          }

          this._drawGrid = false;

        },

        /**
         * Defines basics of the d3.axis.
         *
         * @method _drawElement
         */
        defineGrid:function() {
          switch(this.orientation) {
            case 'bottom':
              this._grid = Px.d3.axisBottom(this.axis);
              break;

            case 'top':
              this._grid = Px.d3.axisTop(this.axis);
              break;

            case 'right':
              this._grid = Px.d3.axisRight(this.axis);
              break;

            default: //case 'left':
              this._grid = Px.d3.axisLeft(this.axis);
              break;
          }

          if(this.tickValues && this.tickValues.length > 0) {
            if(!isNaN(this.axis.domain()[0]) && !isNaN(this.axis.domain()[1])){
              this._grid.tickValues(this.tickValues);
            }
          }

          // TODO dev set # of gridlines
          // TODO link to number of gridlines the axis has and dev set multiplier (2x)

          if(this.orientation === 'bottom') {
            this._grid.tickSizeInner(Number(this.margin.top) + Number(this.margin.bottom) - this.length);
          } else if(this.orientation === 'left') {
            this._grid.tickSizeInner(Number(this.margin.left) + Number(this.margin.right) - this.length);
          }
        },
        /**
         * Method fired via observer which draws the gridlines
         *
         * @method _drawElement
         */
        drawElement: function() {
          this.debounce('draw_grid', function() {
            if(this._doesObjHaveValues(this.currentDomain) && this._drawGrid && this.axis && this.axis.domain()) {
              this.defineGrid();
              // this._grid.tickValues(this.axis.domain());
              if(this.orientation === 'bottom') {
                var h = Px.d3.select(this.svg.node().ownerSVGElement).attr('height') - Number(this.margin.bottom) - Number(this.margin.top);
                this.translateAmt = [0,h];
              } else if(this.orientation === 'left') {
                this.translateAmt = [0,0];
              }

              // checks to see if the grid already exists. If not, create; if so, update
              if(this._isObjEmpty(this._gridGroup)) {
                this._gridGroup = this.svg.append("g")
                  .attr("class", "grid")
                  .attr('grid-id',this.gridId)
                  .attr("transform", "translate(" + this.translateAmt.join(',') + ")")
                  .call(this._grid);

                this._removeUncessaryElems(this._gridGroup);
                this._setLineStyles(this._gridGroup,'line');

              } else {
                this._gridGroup
                // .duration(750)
                .attr("transform", "translate(" + this.translateAmt.join(',') + ")")
                .call(this._grid);

                this._removeUncessaryElems(this._gridGroup);
                this._setLineStyles(this._gridGroup,'line');
              }
            }
          },5);
        },
        /**
         * Removes other axis elements which are duplicated with px-vis-axis
         *
         * @method _drawElement
         */
        _removeUncessaryElems:function(elem) {
          elem.selectAll('text').remove();
          elem.selectAll('path').remove();
        },
        /**
         * Sets the gridline lines styles
         *
         * @method _drawElement
         */
        _setLineStyles:function(elem,lines) {
          elem.selectAll(lines)
            .attr('fill','none')
            .attr('stroke', this._checkThemeVariable("--px-vis-gridlines-color", this.colors.grey3))
            .attr('shape-rendering','crispEdges');
        }
    });
</script>