New Twiddle

components.assessment-timeline-node.js

import Ember from 'ember';
import computedStyle from 'ember-computed-style';

export default Ember.Component.extend({
  classNames: ['assessment-timeline-node'],
  classNameBindings: ['type', 'proficiency'],  
  attributeBindings: ['style'],
  
  style: computedStyle('percentageX'),
  
  percentageX: Ember.computed('x', function() {
    return { left: this.get('x') }
  }),
  
  type: Ember.computed('assessment.type', function() {
    return `assessment-timeline-node-${this.get('assessment.type')}`;
  }),
  
  proficiency: Ember.computed('assessment.score', function() {
    const proficiency = this.get('assessment.is_proficient');
    if (proficiency) return `assessment-timeline-node-proficient`;
    return `assessment-timeline-node-not-proficient`;
  }),
});

components.assessment-timeline.js

import Ember from "ember";

import Moment from "moment";

const TIME_UNIT = "days";
const PADDING = 3;

const data = [
  {
    assessment_date: "2018-04-19T00:31:03.153000Z",
    score: 4,
    type: "formative",
    is_proficient: false,
    label: "a"
  },
  {
    assessment_date: "2017-11-20T09:51:36.035983Z",
    score: 3,
    type: "summative",
    is_proficient: false,
    label: "b"
  },
  {
    assessment_date: "2018-02-15T09:51:36.035983Z",
    score: 3,
    type: "formative",
    is_proficient: true,
    label: "c"
  },
  {
    assessment_date: "2018-02-20T09:51:36.035983Z",
    score: 3,
    type: "summative",
    is_proficient: true,
    label: "d"
  },
  {
    assessment_date: "2018-03-19T17:48:44.820000Z",
    score: 4,
    type: "summative",
    is_proficient: false,
    label: "e"
  }
];

function last(arr = []) {
  return arr[arr.length - 1];
}

export default Ember.Component.extend({
  data,

  assessments: Ember.computed.reads("data"),

  sortedAssessments: Ember.computed.sort("assessments", function(a, b) {
    return a.assessment_date > b.assessment_date;
  }),

  groupedAssessmentsBySummative: Ember.computed(
    "sortedAssessments",
    function() {
      const sortedAssessments = this.get("sortedAssessments");
      // return _groupAssessmentsBySummative(sortedAssessments);
      return sortedAssessments
        .filter(assessment => assessment.type === "summative")
        .map(assessment => [assessment]);
    }
  ),

  startDate: Ember.computed.reads(
    "sortedAssessments.firstObject.assessment_date"
  ),

  endDate: Ember.computed.reads("sortedAssessments.lastObject.assessment_date"),

  daysSinceMap: Ember.computed("sortedAssessments", "startDate", function() {
    const startDate = Moment(this.get("startDate"));

    return this.get("sortedAssessments").map(assessment => {
      const assessmentDate = Moment(assessment.assessment_date);
      return assessmentDate.diff(startDate, TIME_UNIT);
    });
  }),

  relativePositionMap: Ember.computed("daysSinceMap", function() {
    const lastDay = this.get("daysSinceMap.lastObject");
    return this.get("daysSinceMap").map(day => `${day / lastDay * 100}%`);
  }),

  range: Ember.computed.reads("daysSinceMap.lastObject")
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

.assessment-timeline {
	position: relative;
	width: 100%;
  background: #F8F8F8;
  border-radius: 12px;
  height: 24px;
  overflow: hidden;
}

.assessment-timeline-node {
  position: absolute;
  height: 24px;
  width: 24px;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 0 0 3px #F8F8F8;
}

.assessment-timeline-node:last-child {
	margin-left: -24px;
}

.assessment-timeline-node-proficient {
	background-color: green;
  border-color: green;
}

.assessment-timeline-node-not-proficient {
  background-color: orange;
  border-color: orange;
}

.assessment-timeline-node-summative {
	border: none;
}

.assessment-timeline-node-formative {
  border-width: 4px;
  border-style: solid;
  background-color: white;
}

templates.application.hbs

<div id="wrapper">
  {{assessment-timeline}}
</div>

templates.components.assessment-timeline-node.hbs

{{assessment.label}}

templates.components.assessment-timeline.hbs

{{log groupedAssessmentsBySummative}}

<div class="assessment-timeline">  
	{{#each assessments as |assessment idx|}}
  	{{assessment-timeline-node
    	x=(get relativePositionMap idx)
    	assessment=assessment
      daysSinceStart=daysSinceStart
    }}
  {{/each}}
</div>

twiddle.json

{
  "version": "0.13.1",
  "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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-computed-style": "latest",
    "ember-moment": "latest"
  }
}