uptime-boxes

components.server-uptime.js

import Ember from 'ember';

const { computed } = Ember;

export default Ember.Component.extend({
  tagName: 'server-uptime',
  upDays: computed('days', function() {
    return this.get('days').reduce((upDays, day) => {
      return upDays += (day.up ? 1 : 0);
    }, 0);
  }),

  streak: computed('days', function() {
    let [max] = this.get('days').reduce(([max, streak], day) => {
      if (day.up && streak + 1 > max) {
        return [streak + 1, streak + 1];
      } else if (day.up) {
        return [max, streak + 1];
      } else {
        return [max, 0];
      }
    }, [0, 0]);

    return max;
  })
});

components.uptime-day.js

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Component.extend({
  tagName: 'uptime-day',
  color: computed('day.up', function() {
    return this.get('day.up') ? '#8cc665' : '#ccc';
  }),

  memo: computed('day.up', function() {
    return this.get('day.up') ? 'Servers operational!' : 'Red alert!';
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

routes.index.js

import Ember from 'ember';

function server(name) {
  let days = [];

  for (let i=0; i<=364; i++) {
    let up = Math.random() > 0.2;
    days.push({ number: i, up });
  }

  return { name, days };
}

export default Ember.Route.extend({
  model() {
    return {
      servers: servers()
    };
  },

  afterModel(model) {
    tick(model);
  }
});

function tick(model) {
  console.log('tick')
  self.requestAnimationFrame(_ => {
    console.time('render');
    Ember.set(model, 'servers', servers());
    Ember.run.schedule('afterRender', function() {
      console.timeEnd('render');

    });

    tick(model);
  });
}

function servers() {
  return [
    server("Stefan's Server"),
    server("Godfrey's Server"),
    server("Yehuda's Server"),
    server("Chad's Server"),
    server("Robert's Server 1"),
    server("Robert's Server 2"),
    server("Robert's Server 3"),
    server("Robert's Server 4"),
    server("Robert's Server 5"),
    server("Robert's Server 6")
  ];
}

styles.app.css

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
* {
  box-sizing: border-box;
}
server-uptime {
  display: block;
  overflow: hidden;
  margin: 0 auto;
  width: 50%;
}
server-uptime + server-uptime {
  margin: 20px auto 0 auto;
  border-top: 1px solid #999;
}
.days {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
}
uptime-day {
  display: flex;
}
span.uptime-day {
  width: 10px;
  height: 10px;
  margin: 1px;
}
.hover {
  display: none;
}
.uptime-day:hover + .hover {
  display: flex;
  position: absolute;
  margin-top: -35px;
  margin-left: -30px;
  border-radius: 4px;
  color: #eee;
  background-color: #333;
  padding: 10px;
  font-size: 11px;
}

templates.application.hbs

{{outlet}}

templates.components.server-uptime.hbs

<h1>{{name}}</h1>
 <h2>{{upDays}} Days Up</h2>
 <h2>Biggest Streak: {{streak}}</h2>
 <div class="days">
   {{#each days key="number" as |day|}}
     {{uptime-day day=day }}
   {{/each}}
</div>

templates.components.uptime-day.hbs

<span class="uptime-day" style="background-color: {{{color}}}" />
<span class="hover">{{day.number}}: {{memo}}</span>

templates.index.hbs

{{#each model.servers key="name" as |server|}}
  {{server-uptime name=server.name days=server.days }}
{{/each}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}