toggle

htmlbars

{{#ember-sparkles
  data=data
  input-key='ts'
  output-key='value'

  scale-type='band'
  x-domain=(map (r/get 'ts') data)
  y-domain=(append 0 outputMax)

  as |chart|}}

  {{chart.x-axis
    tick-format=(d3-time-format '%Y-%m-%d')
    label='Date (Y-M-D)'
    dy=(add chart.height 30)
    dx=-100
  }}

  {{chart.y-axis
    label='Watts'
    ticks=5
    yGrid=true
    dx=(mult -0.5 chart.height)
    dy=-30
  }}

  {{chart.bar-chart}}

{{/ember-sparkles}}

javascript

import Ember from 'ember';
import dateify from 'dummy/utils/dateify';
import { timeseriesData } from 'dummy/utils/fixture-data';
import { max } from 'd3-array';

let dateified = timeseriesData.map(t => {
  t.data = dateify(t.data);
  return t;
});

export default Ember.Controller.extend({
  padding: 0.02,
  dataIdx: 1,
  barData: new Ember.A(dateified),

  data: Ember.computed('barData', 'dataIdx', function() {
    let b = this.get('barData');
    let idx = this.get('dataIdx');
    let result = b.filterBy('id', idx);
    return result[0].data;
  }),

  outputMax: Ember.computed('data', function() {
    let data = this.get('data');
    return max(data, ({ value }) => value);
  }),

  actions: {
    toggleData() {
      let ids = this.get('barData').mapBy('id');
      let dataIdx = this.get('dataIdx');
      let nonPlotted = ids.filter(idx => idx !== dataIdx);
      let newRandom = nonPlotted[Math.floor(Math.random() * nonPlotted.length)];
      this.set('dataIdx', newRandom);
    }
  }
});