ember-cli-plotly

This addon strives to make it easy & efficient to use plotly.js in Ember applications.

Installation

ember install ember-cli-plotly

TODO: Write documentation / create github pages

Usage

❗ This API should be considered unstable for all v0.x versions of this addon.

Examples

Static

This example uses ember-array-helper.

{{plot-lychartData=(array
(hashname='y = 2x'x=(array123) y=(array246)
type='scatter'
) (hashname='y = -x -1'x=(array02) y=(array-1-3)
type='scatter'
) )
}}

Dynamic

(See the examples in the 'dummy app')

// my-app/config/environment.js// FIXME: Configuring this addon here is not yet supported :(module.exports=function(environment){constENV={// ...// ember-cli-plotlyplotlyComponent: {defaultConfig: {// Override plotly.js defaultsdisplaylogo: false},defaultEvents: [/* list names of plotly events to forward by default */]},// ...};// ...returnENV;};

// my-app/app/routes/somewhere.jsimportRoutefrom'@ember/route';exportdefaultRoute.extend({model(){return{x: [1,2,3],y: [2,4,6],type: 'bar'}}});

// my-app/app/controllers/somewhere.jsimportControllerfrom'@ember/controller';import{computed}from'@ember/object';exportdefaultclassSomeControllerextendsController.extend({init(){this._super(...arguments);this.setProperties({chartLayout: {// Layout options// See https://plot.ly/javascript/reference/#layout},chartConfig: {// Override default options from config/environment.js & plotly.js// See https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js},// Component will listen for these events and forward them via onPlotlyEventplotlyEvents: ['plotly_restyle']});}}){
@computed('model.{x,y,type}')getchartData(){return{x: this.get('model.x'),y: this.get('model.y'),type: this.get('model.type')};}onPlotlyEvent(eventName, ...args){consthandler={plotly_restyle(...args){console.log('Received `plotly_restyle` event', ...args);},// ... // Can add handlers here for plotly events// See https://plot.ly/javascript/plotlyjs-events/// ...}[eventName]||((...args)=>{console.log(`No handler was defined for ${eventName}`, ...args);});handler(...args);}}

{{! my-app/app/templates/somewhere.hbs }}{{plot-lychartData=chartDatachartLayout=chartLayoutchartConfig=chartConfigonPlotlyEvent=onPlotlyEventisResponsive=true}}

Debugging

This package uses debug with the ember-cli-plotly namespace, so you should be able to use one of the following procedures to make debug messages visible (see docs):

• Run require('debug').enable('ember-cli-plotly:*') from DevTools console (or manually set localStorage.debug = 'ember-cli-plotly:*')
• Set DEBUG="ember-cli-plotly:*" environment variable

License

This project is licensed under the MIT License.