px-vis-bar-grouped-svg.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<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" />
<link rel="import" href="css/px-vis-styles.html">

<!--

Unlike most other drawing elements that can use chartData directly, bar requires that data first be passed through d3.stack: https://github.com/d3/d3-shape/blob/master/README.md#stack

### Usage

    <px-vis-svg
      width="[[width]]"
      height="[[height]]"
      margin="[[margin]]"
      svg="{{svg}}">
    </px-vis-svg>
    <px-vis-scale
      x-axis-type="scaleBand"
      y-axis-type="linear"
      complete-series-config="[[seriesConfig]]"
      data-extents="[[dataExtents]]"
      width="[[width]]"
      height="[[height]]"
      margin="[[margin]]"
      chart-data={{chartData}}
      x="{{x}}"
      y="{{y}}"
      selected-domain="[[selectedDomain]]">
    </px-vis-scale>

    <px-vis-bar-grouped-svg
      svg="[[svg]]"
      complete-series-config="[[seriesConfig]]"
      chart-data="[[chartData]]"
      x="[[x]]"
      y="[[y]]"
      domain-changed="[[domainChanged]]">
    </px-vis-bar-grouped-svg>

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

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

    </template>
</dom-module>

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

    behaviors: [
      PxVisBehavior.observerCheck,
      PxVisBehaviorD3.svg,
      PxVisBehaviorD3.axes,
      PxVisBehavior.dataset,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.clipPath,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehavior.dynamicConfigProperties,
      PxVisBehaviorD3.domainUpdate,
      PxVisBehavior.preventInitialDrawing
    ],

    /**
     * Event fired when an svg bar has finished drawing
     * @event px-vis-bar-grouped-svg-rendering-ended
     */

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * A holder object for the series object
       *
       */
      barRects:Object,
      /**
       * A holder object for the series builder
       *
       * @property linePath
       * @type String
       */
      barBuilder:Object,
      /**
       * A holder object for the series group
       *
       */
      barGroup:Object,

      /**
       * Debounce time to use for drawing
       */
      drawDebounceTime: {
        type: Number,
        value: 10
      },

      _iAxis: String,
      _dAxis: String,

      _funcsWereSet: {
        type: Number,
        value: 0
      },
      type: {
        type: String,
        value: 'column'
      },

      _returnX: Function,
      _returnY: Function,
      _returnWidth: Function,
      _returnHeight: Function,
      groupScale: Function,
      ordinalKey: String,
      groupColors: Object,

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

      highlightBar: {
        type: String,
        value: ''
      },

      _chartAreaHeight: {
        type: Number,
        computed: '_computeChartAreaHeight(height, margin.*)'
      }
    },

    observers: [
      'drawElement(svg, y, domainChanged, chartData.*, completeSeriesConfig.*, preventInitialDrawing, _funcsWereSet)',
      '_addClipPath(clipPath)',
      '_muteBars(highlightBar)',
      '_setFuncs(type, groupScale, ordinalKey)'
    ],

    detached: function() {
      if(this._debouncers.draw) {
        this._debouncers.draw.cancel()
      }

      if(this._doesD3HaveValues(this.barRects)) {
        this.barRects.remove();
      }
      if(this._doesD3HaveValues(this.barGroup)) {
        this.barGroup.remove();
      }
    },
    /**
     * Draws or updates the line element.
     * Called from an observer watching for data and the necessary d3 objects
     *
     * @method drawElement
     */
    drawElement: function() {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      if(!this.preventInitialDrawing) {
        //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() {
      if(!this._funcsWereSet ||
          !this.domainChanged ||
          this._isD3Empty(this.svg) ||
          !this.y ||
          this.chartData.length === 0 ||
          this._isObjEmpty(this.completeSeriesConfig)) {
        return;
      }

      var barGroupBuilder = this.svg.selectAll('g.seriesGroups')
        .data(this.chartData);

      barGroupBuilder.exit().remove();

      barGroupBuilder.enter()
        .append('g')
        .attr('series-id', 'bars')
        .attr('class', 'seriesGroups')
      .merge(barGroupBuilder)
        .attr('fill', function(d,i) { return this.colorByGroup && this.groupColors ? this.groupColors[d[this.ordinalKey]] : null }.bind(this))
        .attr("transform", this._transformGroups.bind(this));

      this.barGroup = this.svg.selectAll('g.seriesGroups');

      // set our data
      var barBuilder = this.barGroup.selectAll('rect.series-bar')
        .data(function(d) {
          return this.seriesKeys.map(function(key) {
            return { cscKey: key, key: this.completeSeriesConfig[key][this._dAxis], value: d[this.completeSeriesConfig[key][this._dAxis]] };
          }.bind(this));
        }.bind(this));

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

      // When datapoints are added to our data, add stuff
      barBuilder.enter()
        .append('rect')
        .attr('class', 'series-bar')
      // When datapoints are added OR this funtion is run, draw stuff
      .merge(barBuilder)
        .attr('series-id', function(d, i) { return 'bar_' + d.cscKey + '_' + i; }.bind(this))
        .attr('series-keys', function(d, i) { return d.cscKey; })
        .attr('x', this._returnX.bind(this))
        .attr('y', this._returnY.bind(this))
        .attr('width', this._returnWidth.bind(this))
        .attr('height', this._returnHeight.bind(this))
        .attr('fill', function(d,i) { return this.colorByGroup ? null : this.completeSeriesConfig[d.cscKey]['color']; }.bind(this));

      // Make it easy to get our bars again
      this.barRects = this.barGroup.selectAll('rect.series-bar');

      this._addClipPath();

      this.fire('px-vis-bar-grouped-svg-rendering-ended');
    },

    _setFuncs: function() {
      if(this.type === undefined || !this.groupScale || !this.ordinalKey) {
        return;
      }

      if(this.type === 'bar') {
        this._returnX = function(d) { return this.x(d.value) - this.x(0) < 0 ? this.x(d.value) : this.x(0); };
        this._returnY = function(d) { return this.groupScale(d.key); };
        this._returnWidth = function(d) { return Math.abs(this.x(d.value) - this.x(0)); };
        this._returnHeight = function() { return this.groupScale.bandwidth(); };
        this._transformGroups = function(d) { return "translate(0," + this.y(d[this.ordinalKey]) + ")"; };
        this._iAxis = 'y';
        this._dAxis = 'x';

      } else {
        this._returnX = function(d) { return this.groupScale(d.key); };
        this._returnY = function(d,i) { return this.y(0) - this.y(d.value) < 0 ? this.y(0) : this.y(d.value); };
        this._returnWidth = function() { return this.groupScale.bandwidth(); };
        this._returnHeight = function(d,i) { return Math.abs(this.y(0) - this.y(d.value)); };
        this._transformGroups = function(d) { return "translate(" + this.x(d[this.ordinalKey]) + ",0)"; };
        this._iAxis = 'x';
        this._dAxis = 'y';
      }

      this.set('_funcsWereSet', this._funcsWereSet + 1);
    },

    _muteBars: function() {
      if(!this.barRects) {
        return;
      }

      if(this.highlightBar === '') {
        this.barGroup.classed('muted', false);
        return;
      }

      var ordKey = this.ordinalKey
          ordVal = this.highlightBar;

      this.barGroup.classed('muted', function() {
        return Px.d3.select(this).data()[0][ordKey] !== ordVal;
      });
    },

    /**
     * Helper to call addClipPath with the element
     *
     * @method _addClipPath
     */
    _addClipPath: function() {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this.addClipPath(this.barGroup);
    },

    _computeChartAreaHeight: function() {
      return this.height - this.margin.top - this.margin.bottom;
    }
  });
</script>