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

<!--
d3 element creating an axis for the chart

##### Usage

    <px-vis-multi-axis
        svg="[[svg]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        offset="[[_offset]]"
        length="[[_minDim]]"
        x="[[x]]"
        y="[[y]]"
        current-domain-x="[[currentDomainX]]"
        current-domain-y="[[currentDomainY]]"
        complete-series-config="{{completeSeriesConfig}}"
        series-key="[[seriesKey]]"
        chart-data="[[chartData]]"
        dimensions="[[dimensions]]"
        axes="[[axes]]"
        muted-series="{{mutedSeriesBrush}}"
        redraw-series="true"
        stroke-width="2"
        match-ticks="[[matchTicks]]"
        grid-ticks="{{gridTicks}}"
        grid-axis="{{gridAxis}}"
        common-axis="[[commonAxis]]"
        truncation-length="[[truncationLength]]"
        displayed-values="{{displayedValues}}"
        append-unit-in-title
        domain-changed="[[domainChanged]]"
        axis-groups="{{axisGroups}}"
        brush-elems="{{brushElems}}"
        radial
        single-domain
        label-position="inline"
        label-one-axis
        axis-color="grey4"
        ticks="[[ticks]]"
        label-rotation="180"
        brush-to-remove="[[brushToRemove]]"
        center-offset="[[centerOffset]]"
        drawn-tick-values="{{drawnTickValues}}"
        title-type-size="15"
        label-type-size="12">
    </px-vis-multi-axis>

##### d3 reference
https://github.com/mbostock/d3/wiki/SVG-Axes

@element px-vis-axis
@blurb d3 element creating an axis for the chart
@homepage index.html
@demo demo.html
-->

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

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

      <template id="bof" is="dom-repeat" items="[[_internalDimensions]]">
        <px-vis-axis
          svg="[[_returnGroup(index, _internalDimensionsChanged)]]"
          axis="[[_returnY(item, _internalDimensionsChanged)]]"
          series-id="[[item]]"
          height="[[_heightOrLen]]"
          width="[[_heightOrLen]]"
          margin="[[margin]]"
          orientation="left"
          title="[[_getTitle(item,completeSeriesConfig)]]"
          title-location='[[_computeTitleLocation(item,titleLocation, _pokeTitleLocation)]]'
          title-type-size="[[titleTypeSize]]"
          label-type-size="[[labelTypeSize]]"
          current-domain="[[currentDomainY]]"
          stroke-width="[[strokeWidth]]"
          outer-tick-size="0"
          tick-values="[[_calcTickVals(item, _internalDimensionsChanged)]]"
          truncation-length="[[truncationLength]]"
          complete-series-config="[[completeSeriesConfig]]"
          append-unit-in-title="[[appendUnitInTitle]]"
          prevent-series-bar
          domain-changed="[[_internalDimensionsChanged]]"
          selected-domain="[[selectedDomain]]"
          title-truncation
          disable-ticks="[[_calcDisableTicks(item,recalcTicks)]]"
          label-position="[[labelPosition]]"
          axis-color="[[axisColor]]"
          ticks="[[ticks]]"
          label-rotation="[[labelRotation]]"
          label-translation="[[labelTranslation]]"
          drawn-tick-values={{drawnTickValues}}>
        </px-vis-axis>
      </template>
      <px-vis-axis-brush
        id="axisBrush"
        svg="[[axisGroups]]"
        parent-svg="[[svg]]"
        height="[[_heightOrLen]]"
        axis="[[y]]"
        margin="[[margin]]"
        chart-data="[[chartData]]"
        dimensions="[[dimensions]]"
        series-key="[[seriesKey]]"
        domain-changed="[[_internalDimensionsChanged]]"
        muted-series="{{mutedSeries}}"
        radial="[[radial]]"
        center-offset="[[centerOffset]]"
        brush-to-remove="[[brushToRemove]]">
      </px-vis-axis-brush>
      <px-vis-axis-drag
        width="[[width]]"
        x="[[x]]"
        y="[[y]]"
        margin="[[margin]]"
        current-domain="[[currentDomainX]]"
        complete-series-config="{{completeSeriesConfig}}"
        chart-data="[[chartData]]"
        axes="[[axes]]"
        dimensions="[[dimensions]]"
        axis-groups="[[axisGroups]]"
        drag-behavior="{{dragBehavior}}"
        redraw-series="[[redrawSeries]]"
        radial="[[radial]]"
        series-key="[[seriesKey]]"
        muted-series="{{mutedSeries}}">
      </px-vis-axis-drag>

    </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-multi-axis',

    behaviors: [
      PxVisBehaviorD3.svg,
      PxVisBehavior.sizing,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.axisConfig,
      PxVisBehavior.dataset,
      PxVisBehavior.dimensions,
      PxVisBehavior.mutedSeries,
      PxVisBehaviorD3.dynamicRedraw,
      PxVisBehavior.commonAxis,
      PxVisBehaviorD3.domainUpdate,
      PxVisBehaviorD3.selectedDomain,
      PxVisBehavior.radial,
      PxVisBehaviorD3.radialAxisConfig,
      PxColorsBehavior.baseColors
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * A dictionary of g elems for each dimension
       *
       */
      axisGroups: {
        type: Object,
        notify: true
      },
      /**
       * A dictionary of g elems for each dimension
       *
       */
      brushElems: {
        type: Object,
        notify: true
      },
      /**
       * A holder for the drag behavior
       *
       */
      dragBehavior: {
        type: Object,
        notify: true
      },
      /**
       * A clone svg group to draw the axis to in order to ensure they are on top
       *
       */
      svg: {
        type: Object
      },
      /**
       * A boolean to specify if the axis ticks should align or each have their own ranges
       *
       */
      matchTicks: {
        type: Boolean,
        value: false
      },
      /**
       * If matchTicks, generate the ticks so they match too
       *
       */
      gridTicks: {
        type: Object,
        notify: true
      },
      /**
       * If matchTicks, generate the ticks so they match too
       *
       */
      gridAxis: {
        type: Object,
        notify: true
      },
      /**
       * Whether to append unit in brackets in axis title. e.g [Hz]
       */
      appendUnitInTitle: {
        type: Boolean,
        value: false
      },
      /**
       * Array representing the actual displayed titles for each axis
       */
      displayedValues: {
        type: Object,
        notify: true,
        value: function() {
          return {};
        }
      },
      /**
       * internal dimensions to defeat race condition
       */
      _internalDimensions: {
        type: Array
      },
      /**
       * internal dimensions boolean to defeat race conditions
       */
      _internalDimensionsChanged: {
        type: Boolean,
        value: false
      },
      /**
       * whether the scales are using a single scale or multi scale
       */
      singleDomain: {
        type: Boolean,
        value: false
      },
      /**
       * Boolean to decide if all axes should get ticks or just one
       */
      labelOneAxis:{
        type: Boolean,
        value: false
      },
      /**
       * Length of the axis
       */
      length: {
        type: Number,
        value: null
      },
      /**
       * Computed on if it should use the height or the length for axis length
       */
      _heightOrLen: {
        type: Number,
        computed: '_calcH(height,length)'
      },
      /**
       * Boolean controling if brushing should retain or delete series
       */
      brushToRemove: {
        type: Boolean,
        value: false
      },
      /**
       * Boolean to decide if domainChanged changed or if something else triggered the observer
       */
      _lastDomainChanged: {
        type: Boolean,
        value: null
      },
      /**
       * Force a redraw for titleLocation
       */
      _pokeTitleLocation: {
        type: Boolean,
        value: false
      },
      /**
       * Force a redraw if ticks
       */
      recalcTicks: {
        type: Boolean,
        value: false
      },

      disableBrush: {
        type: Boolean,
        value: false
      }
    },

    observers: [
      '_computedInternalDimensions(domainChanged.*,dimensions.*,svg)',
      '_toggleTitleLocation(length)'
    ],

    listeners:{
      'px-axis-done': '_setAxisStyles',
      'px-vis-axis-displayed-title-changed': '_displayedTitleChanged',
      'px-vis-recalc-title-location' : '_toggleTitleLocation'
    },

    /**
     * At ready, set the margin and titleLocation objects
     *
     */
    _computeTitleLocation: function(item, titleLocation) {
      if(this.radial) {
        var r = (this.x(item) * 180 / Math.PI),
            attrs = {
            'x': null,
            'y': null,
            'r': (r + 180) * -1,  //we rotate each group so we have to un-rotate each title
            'anchor': null
          };

        if(r > 10 && r <= 100) {
          attrs.anchor = 'start';
          attrs.x = 0;
          attrs.y = this.length + 10;
        } else if(r > 100 && r < 170) {
          attrs.anchor = 'start';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10 + 12 * Math.cos(Math.PI - this.x(item));
        } else if(r >= 170 && r <= 190){
          attrs.anchor = 'middle';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10 + 12 ; //text size plus spacer
        } else if(r > 190 && r < 260){
          attrs.anchor = 'end';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10 + 12 * Math.cos(Math.PI - this.x(item));
        } else if(r >= 260 && r < 355){
          attrs.anchor = 'end';
          attrs.x = 0;
          attrs.y = this.length + 10;
        } else {
          attrs.anchor = 'middle';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10;
        }
        return attrs;
      }
      return titleLocation;
    },

    /**
     * Forces a redraw of the titleLocation
     *
     */
    _toggleTitleLocation: function() {
      this.set('_pokeTitleLocation' , !this._pokeTitleLocation);
    },

    /**
     * returns length if it exists, otherwise returns height
     *
     */
    _calcH: function(height,length) {
      if(length) {
        return length;
      }
      return height
    },

    /**
     * Generates a group elem for each dimension and moves it into the correct x coordinate
     *
     */
    _generateGs: function(){
      // this.debounce('axisG',function(){
        if(this._doesObjHaveValues(this.svg)) {

          var _this = this,
              resetTitles = false,
              removed = this.svg.selectAll(".dimension").data().filter(function(d){
                if(_this.dimensions.indexOf(d) === -1){
                  // _this.$.axisBrush.clearBrush(d);
                  delete _this.displayedValues[d];
                  resetTitles = true;
                  return true
                }
                return false
              });


          // generate axis based on the dimensions
          var g = this.svg.selectAll(".dimension")
            .data(this.dimensions);
            // .data(this.dimensions, function(d) { return d; });

          g.exit()
            .each(function(d){
              // this.$.axisBrush.clearBrush(d);
              delete this.displayedValues[d];
              resetTitles = true;
            }.bind(this)).remove();
          g.enter()
            .append("g")
            .attr("class", "dimension")
            .on('mousemove', function(d) {
              // TODO add a check that we want it to fire these events?

              // Dont know why, but need to do this calc before the debounce
              var m = Px.d3.mouse(this),
                  elem = this;

              _this.debounce('axisMouseMove', function() {
                var deets = {
                  'axis': d,
                  'elem': elem,
                  'mousePos': m
                }
                _this.fire('px-vis-multi-axis-mousemove', deets);
              },10);
            })
            .on('mouseleave',function(d){
              var deets = {
                'axis': d,
                'elem': this,
                'mousePos': Px.d3.mouse(this)
              }
              _this.fire('px-vis-multi-axis-mouseleave', deets);
            })
            .style("cursor","move")
            .call(this.dragBehavior)
          .merge(g)
            .attr("dimension", function(d) { return d })
            .attr("transform", function(d) {
              if(this.radial){
              /*
              +180 to flip orientation of axes to start at top (which matches where lines start)
                   180                        0
                  ____                       ____
                .'    `.                   .'    `.
               /        \                 /        \
            90|          | 270  -->  270 |          |90
               \        /                 \        /
                `.____.'                   `.____.'
                   0                          180
              */
                return this.x(d) || this.x(d) === 0 ? "rotate(" + (this.x(d) * 180 / Math.PI + 180) + ")" : ''
              }
              return this.x(d) || this.x(d) === 0 ? "translate(" + this.x(d) + ",0)" : '';
            }.bind(this));

            // if we removed titles from the array make sure we notify
            if(resetTitles) {
              var newValues = this.displayedValues;
              this.displayedValues = {};
              this.set('displayedValues', newValues);
            }

          // TODO When we support muting an axes, might want to be able to access the above g and change the transform
          this.set('axisGroups', this.svg.selectAll(".dimension"));
          this.set('brushElems', this.axisGroups.selectAll('g.brush').nodes());

          //poke the titles
          this.set('_pokeTitleLocation',!this._pokeTitleLocation);

          //sometime after draw (doesnt entirely matter when since it is for an interaction piece), move the brushes on top of everything so they dont get interrupted by other things drawn on top
          setTimeout(function(){
            this.axisGroups.selectAll('g.brush').raise();
          }.bind(this),200);
        }
      // },10)
    },

    /**
     * Returns an indivdual d3 selected element
     *
     */
    _returnGroup: function(i){
      return Px.d3.select(this.axisGroups.nodes()[i])
    },
    /**
     * returns the appropriate scale for a dimension
     *
     */
    _returnY: function(item){
      return this.singleDomain ? this.y : this.y[item]
    },
    /**
     * In order to make the ticks align, we iterate through and generate some round numbers for each axis
     *
     */
    _calcTickVals: function(item){
      if(!this.y[item]){ return false }

      if(this.matchTicks && !this.singleDomain) {
        var d = this.y[item].domain(),
            min = Math.floor(d[0]/10)*10,
            max = Math.ceil(d[1]/10)*10,
            diff = (max - min) / 10,
            vals = [];

        for(var i = 0; i < 11; i++){
          vals.push(min + diff * i);
        }
        return vals;
      }
      return null;
    },
    /**
     * Do the same thing for gridlines once
     *
     */
    _calcDisableTicks: function(item) {
      if(this.labelOneAxis) {
        //check index of dimentions so it still works when we drag an axis
        return this.dimensions.indexOf(item) === 0 ? false : true;
      }
      return false;
    },
    /**
     * Do the same thing for gridlines once
     *
     */
    _calcGridTicks: function(dim){
      this.set('gridTicks', this._calcTickVals(dim));
    },
    /**
     * Do the same thing for gridlines axis
     *
     */
    _calcGridAxis: function(dim){
      this.set('gridAxis', this._returnY(dim));
    },
    /*
     * Sets styles and on hover for common axis
     *
     */
    _setAxisStyles: function(e) {
      if(this.axisGroups){
        var _this = this;

        if(this.commonAxis){
          this.axisGroups.filter(":not(:first-child)").selectAll('g.tick text').classed('hideCommon',true);
          this.axisGroups.selectAll('.hideCommon').style('display','none');
          this.axisGroups.on('mouseover',function(){
            Px.d3.select(this).selectAll('.hideCommon').style('display',null)
            Px.d3.select(this).selectAll('.hideCommon').style('fill',_this.colors.grey3)
          }).on('mouseleave',function(){
            Px.d3.select(this).selectAll('.hideCommon').style('display','none')
            Px.d3.select(this).selectAll('.hideCommon').style('fill',"black")
          });
        } else {
          this.axisGroups.selectAll('.hideCommon').style('display',null);
          this.axisGroups.selectAll('.hideCommon').classed('hideCommon',false);
        }

        this.set('recalcTicks', !this.recalcTicks);
      }
    },
    /*
     * returns 'axis_' + axis id
     *
     */
    _createAxisID: function(item) {
      return 'axis_' + item;
    },
    /*
     * sets the displayed value of the title including truncation
     *
     */
    _displayedTitleChanged: function(evt) {
      var vals = this.displayedValues;
      this.displayedValues = {};
      vals[evt.detail.id] = evt.detail.displayedTitle;
      this.set('displayedValues', vals);

      evt.stopPropagation();
      evt.stopImmediatePropagation();
    },
    /*
     * Sets _internalDimensions to the value of dimensions but trigged AFTER the scale
     * has been set. Avoids an annoying race condition where dimensions triggers a
     * chart refresh but the new scale has yet to be triggered
     *
     */
    _computedInternalDimensions: function(dC, dim) {
      //FIXME ?? This if introduces a possible race condition where if dims have not been set on this component, but has on the scale, it will fail this check when dims is updated. Dont think this can happen outside a testing env, but should be careful

      //makes sure we dont try to process a new dim before it has a new scale.
      if(this._lastDomainChanged !== this.domainChanged) {
        this._lastDomainChanged = this.domainChanged;
        //if match ticks, make sure the domains can be aligned
        if(this.matchTicks && !this.singleDomain) {
          for(var i = 0; i < this.dimensions.length; i++) {
            var dim = this.dimensions[i],
                d = this.y[dim].domain(),
                min = Math.floor(d[0]/10)*10,
                max = Math.ceil(d[1]/10)*10;

            this.y[dim].domain([min,max]);
          }
        }

        this._generateGs();

        var notFirst = this._internalDimensions ? true : false;
        this.set('_internalDimensions', this.dimensions);

        if(notFirst){
          this.$.bof.render();
        }

        this._calcGridTicks(this._internalDimensions[0]);
        this._calcGridAxis(this._internalDimensions[0]);

        this.set('_internalDimensionsChanged', !this._internalDimensionsChanged);

      } else if(this.dimensions.length === 0 && this._internalDimensions && this._internalDimensions.length > 0) {
        this.set('_internalDimensions', []);
        this.$.bof.render();
        this.set('_internalDimensionsChanged', []);
      }
    },

    /*
     * Checks if there is a title specified in the series config and returns it; otherwise returns the axis id
     *
     */
    _getTitle: function(item) {
      if(this.completeSeriesConfig){
        if(this.completeSeriesConfig[item] && this.completeSeriesConfig[item].title) {
          return this.completeSeriesConfig[item].title;
        } else {
          return item;
        }
      }
    },

    /*
     * Deletes the brushes on its children axes
     *
     */
    deleteAllBrushes: function(){
      this.$.axisBrush.deleteAllBrushes();
    }
  });
</script>