Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New Twiddle
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`;
}),
});
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")
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
.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;
}
<div id="wrapper">
{{assessment-timeline}}
</div>
{{log groupedAssessmentsBySummative}}
<div class="assessment-timeline">
{{#each assessments as |assessment idx|}}
{{assessment-timeline-node
x=(get relativePositionMap idx)
assessment=assessment
daysSinceStart=daysSinceStart
}}
{{/each}}
</div>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment