Skip to content

Instantly share code, notes, and snippets.

@kasunvp
Last active July 24, 2018 05:54
Show Gist options
  • Save kasunvp/39014bab8607f05c6db96ac1cbfd2385 to your computer and use it in GitHub Desktop.
Save kasunvp/39014bab8607f05c6db96ac1cbfd2385 to your computer and use it in GitHub Desktop.
New Twiddle
import Component from '@ember/component';
import groupBy from 'lodash-es/groupBy';
import { computed } from '@ember/object';
export default Component.extend({
debugOutput: computed(function() {
return JSON.stringify(this.bikeSeries(), null, 2);
}),
bikeSeries() {
let byYear = groupBy(this.get('datapoints'), point => point.year);
return Object.keys(byYear).map(year => {
return {
x: parseInt(year, 10),
y: byYear[year].filter(point => point.bike != null).reduce((total, point) => total + parseInt(point.bike, 10), 0)
}
});
},
didInsertElement() {
this.highcharts.chart(this.element, {
chart: {
type: 'line'
},
series: [{
name: 'Bikes',
data: this.bikeSeries()
}]
});
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
babel: {
plugins: [ require('ember-auto-import/babel-plugin') ]
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
{
"name": "test-auto-import",
"version": "0.0.0",
"private": true,
"description": "Small description for test-auto-import goes here",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"repository": "",
"scripts": {
"build": "ember build",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"babel-eslint": "^8.2.6",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^3.0.0",
"ember-auto-import": "^1.2.4",
"ember-cli": "~3.2.0",
"ember-cli-app-version": "^3.0.0",
"ember-cli-babel": "^6.6.0",
"ember-cli-dependency-checker": "^2.0.0",
"ember-cli-eslint": "^4.2.1",
"ember-cli-htmlbars": "^2.0.1",
"ember-cli-htmlbars-inline-precompile": "^1.0.0",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-qunit": "^4.3.2",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^2.0.0",
"ember-data": "~3.2.0",
"ember-export-application-global": "^2.0.0",
"ember-highcharts": "^1.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-resolver": "^4.0.0",
"ember-source": "~3.2.0",
"ember-welcome-page": "^3.0.0",
"eslint-plugin-ember": "^5.0.0",
"highcharts": "^6.1.1",
"loader.js": "^4.2.3",
"lodash-es": "^4.17.10",
"qunit-dom": "^0.6.2"
},
"engines": {
"node": "6.* || 8.* || >= 10.*"
}
}
import Route from '@ember/routing/route';
import { hash } from 'rsvp';
export default Route.extend({
model() {
return hash({
datapoints: fetch('https://data.somervillema.gov/resource/m99j-8gw8.json?$limit=3000').then(response => response.json()),
highcharts: import('highcharts')
});
}
});
{{#link-to 'bikes'}}Bikes{{/link-to}}
{{outlet}}
<h1>Bikes Model</h1>
{{bike-chart datapoints=model.datapoints highcharts=model.highcharts}}
<pre>{{debugOutput}}</pre>
{{!highcharts chartOptions=chartOptions}}
{
"version": "0.15.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.2.2",
"ember-template-compiler": "3.2.2",
"ember-testing": "3.2.2"
},
"addons": {
"ember-data": "3.2.0",
"babel-eslint": "^8.2.6",
"ember-auto-import": "^1.2.4",
"highcharts": "^6.1.1
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment