Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add configurable lookup path for chart options #51

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add configurable lookup path for chart options #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ In your handlebars template just do:
```

* CHARTTYPE: String; one of the following -- `Line`, `Bar`, `Radar`, `PolarArea`, `Pie` or `Doughnut`.
* CHARTDATA: Array; refer to the ChartJS documentation
* CHARTDATA: Array or Object; refer to the ChartJS documentation
* CHARTOPTIONS: Object; refer to the ChartJS documentation. This is optional.
* CHARTWIDTH: Number; pixel width of the canvas element
* CHARTHEIGHT: Number; pixel height of the canvas element
Expand Down
14 changes: 11 additions & 3 deletions addon/components/ember-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ export default Ember.Component.extend({
lineLegendTemp: "<ul class=\"<%=name.toLowerCase()%>-legend\" style=\"list-style-type: none;\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>; width: 8px;height: 8px;display: inline-block;border-radius: 10px;border: solid;border-width: 2px;margin: 5px 5px 0 0;\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
pieLegendTemp: "<ul class=\"<%=name.toLowerCase()%>-legend\" style=\"list-style-type: none;\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>; width: 8px;height: 8px;display: inline-block;border-radius: 10px;border: solid;border-width: 2px;margin: 5px 5px 0 0;\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",

/**
* This is where ember-chart will look to find the options to pass to the Chart.js chart.
* Subclasses may change this path to create a layer of indirection for the options, while
* preserving the same component API. This is useful if you want to extend this component to
* provide component-specific defaults in your own app.
*/
optionsPath: 'options',

didInsertElement: function(){
var context = this.get('element').getContext('2d');
Expand All @@ -31,7 +38,7 @@ export default Ember.Component.extend({
}
var options = Ember.merge({
legendTemplate : template
}, this.get('options'));
}, this.get(this.get('optionsPath')));
var redraw = this.get('redraw');
var chart = new Chart(context)[type](data, options);

Expand All @@ -44,7 +51,7 @@ export default Ember.Component.extend({
this.set('chart', chart);
this.addObserver('data', this, this.updateChart);
this.addObserver('data.[]', this, this.updateChart);
this.addObserver('options', this, this.updateChart);
this.addObserver(this.get('optionsPath'), this, this.updateChart);
},

willDestroyElement: function(){
Expand All @@ -55,7 +62,7 @@ export default Ember.Component.extend({
this.get('chart').destroy();
this.removeObserver('data', this, this.updateChart);
this.removeObserver('data.[]', this, this.updateChart);
this.removeObserver('options', this, this.updateChart);
this.removeObserver(this.get('optionsPath'), this, this.updateChart);
},

updateChart: function(){
Expand All @@ -79,4 +86,5 @@ export default Ember.Component.extend({
this.$().parent().append(legend);
}
}

});