performance-date-range.hbs

// Datepicker template

{{#basic-dropdown
    renderInPlace=false
    matchTriggerWidth=false
    as |dropdown|}}
    <input type="text"
      data-ebd-id="{{dropdown.uniqueId}}-trigger"
      placeholder="Date range"
      class="fw-datepicker"
      onclick={{dropdown.actions.toggle}}
      value={{formattedRange}}
      readonly>

    {{#dropdown.content class="fw-datepicker-block"}}
      {{#power-calendar-range
        center=endDate
        onCenterChange=(action (mut endDate) value="date")
        selected=range
        onSelect=(action (mut range) value="date") as |calendar|}}
        {{calendar.nav}}
        {{calendar.days}}
      {{/power-calendar-range}}
    {{/dropdown.content}}
  {{/basic-dropdown}}

performance-date-range.js

// Datepicker component

import Ember from 'ember';
import moment from 'moment';

import service from 'ember-service/inject';

const {
  get,
  computed,
  observer
} = Ember;

export default Ember.Component.extend({
  
  classNames: ['float-right', 'fw-performance-date-range'],

  performance: service(),

  startDate: computed({
    get() {
      return get(this, 'performance.startDate');
    }
  }),

  endDate: computed({
    get() {
      return get(this, 'performance.endDate');
    }
  }),

  range: computed({
    get() {
      return {
        start: get(this, 'startDate'),
        end: get(this, 'endDate')
      }
    }
  }),

  formattedRange: computed('range', {
    get() {
      const range = get(this, 'range');
      let textValue;
      if (Ember.isEmpty(range)) {
        textValue = '';
      } else {
        textValue = `${moment(get(this, 'range.start')).format('DD/MM/YY')} - ${Ember.isEmpty(get(this, 'range.end')) ? '?' : moment(get(this, 'range.end')).format('DD/MM/YY')}`;
      }
      return textValue;
    }
  }),

  rangeChanged: observer('range', function() {
    const range = get(this, 'range');
    const performance = get(this, 'performance');
    if (get(range, 'start') && get(range, 'end')) {
      performance.setProperties({
        startDate: moment(get(range, 'start')).format('DD-MM-YYYY'),
        endDate: moment(get(range, 'end')).format('DD-MM-YYYY')
      });
    }
  })
});

performance-time-series-chart.js

// Chart component
// Should catch any performance service changes

import Ember from 'ember';
import Plotly from 'plotly';

import service from 'ember-service/inject';

const {
  get,
  computed,
  observer
} = Ember;

const layout = {
  title: 'Time series chart title',
  margin: {
    l: 30,
    r: 30,
    t: 30,
    b: 30
  }
};

export default Ember.Component.extend({
  
  performance: service(),

  classNames: ['time-series-chart'],

  chartId: 'time-series-chart-place',

  plotlyName: 'time-series-chart-place',

  endDate: computed({
    get() {
      return get(this, 'performance.endDate');
    }
  }),

  dataArr: computed({
    get() {
      return get(this, 'timeSeriesDataArr');
    }
  }),

  dateRangeChanged: observer('endDate', function() {
    debugger;
    console.log('fire');
  }),

  didInsertElement() {
    this._super(...arguments);
    this.$(get(this, 'chartId'));
    Plotly.newPlot(get(this, 'plotlyName'), get(this, 'dataArr'), layout);
  }
});

performance.js

// service

import Ember from 'ember';

export default Ember.Service.extend({
  startDate: '',
  endDate: ''
});