Skip to content

Instantly share code, notes, and snippets.

@0000marcell
Last active January 19, 2018 15:03
Show Gist options
  • Save 0000marcell/d0d16b0b9e13fa847effb9012228de92 to your computer and use it in GitHub Desktop.
Save 0000marcell/d0d16b0b9e13fa847effb9012228de92 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Controller.extend({
data: [55, 44, 30, 23, 17, 14, 16, 25, 41, 61, 85,
101, 95, 105, 114, 150, 180, 210, 125, 100, 71,
75, 72, 67],
barWidth: 20,
barPadding: 3,
graphWidth: Ember.computed('data', 'barWidth',
'barPadding', () => {
let data = this.get('data'),
barWidth = this.get('barWidth'),
barPadding = this.get('barPaading');
return data.length * (barWidth + barPadding) - barPadding;
}),
margin: {
top: 10,
right: 10,
bottom: 10,
left: 50
},
totalWidth: Ember.computed('graphWidth', 'margin', () => {
let graphWidth = this.get('graphWidth'),
margin = this.get('margin');
return graphWidth + margin.left + margin.right;
}),
totalHeight: Ember.computed('maxValue', 'margin', () => {
let maxValue = this.get('maxValue'),
margin = this.get('margin');
return maxValue + margin.top + margin.bottom;
})
});
<br>
<br>
{{d3-graph (pipe
(d3-attr "id" "graph")
(d3-attr "width" 500)
(d3-attr "height" 500)
(d3-append "text")
(d3-attr "x" 10)
(d3-attr "y" 10)
(d3-text (compute (d3-format ".0%") 0.123))
(d3-style "font" "10px sans-serif")
(d3-attr "fill" "black")
)
tagName="svg"
}}
<br>
<br>
{
"version": "0.13.0",
"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-d3-helpers": "0.5.16",
"ember-composable-helpers": "2.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment