Mixin for calculating dimensions of a component for use with d3 charts

dimensions-mixin.js

import Ember from 'ember';

const { run: { next }} = Ember;

export default Ember.Mixin.create({
  /**
   * Internal for checking if we have a rendering context. If this is true
   * the component have been rendered and we're in the next run loop step.
   *
   * @type {Boolean}
   * @private
   */
  _isReady: false,

  /**
   * If we're able to render, this will be set to a d3 selection of our chart
   * element. Otherwise it will be null.
   *
   * @type {D3[Element]}
   */
  chart: null,

  /**
   * Represents the width of the chart
   *
   * @type {Number}
   */
  plotWidth: 200,

  /**
   * Represents the height of the chart
   *
   * @type {Number}
   */
  plotHeight: 100,

  /**
   * A hook to schedule future renders from once we have the chart ready. 
   */
  didInsertChart: Ember.K(),

  didInsertElement() {
    next(this, function() {
      this._isReady = true;
      this.measureDimensions();
      this.chart = d3.select(this.chartElement());
      this.didInsertChart();
    });
  },

  willDestroyElement() {
    this._isReady = false;
    this.chart = null;
  },

  chartElement() {
    if (!this._isReady) { return; }
    return this.element.querySelector('svg');
  },

  measureDimensions() {
    if (!this._isReady) { return; }
    const rect = this.element.getBoundingClientRect();
    this.setProperties({
      plotWidth: rect.width,
      plotHeight: rect.height,
    });
  },

});