Newsworthy Presidential Mistakes

    ember-cli-plotly

    0.6.1 • Public • Published

    ember-cli-plotly

    Latest NPM release Build Status Maintainability Ember Observer Score Dependencies up to date

    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-ly
      chartData=(array
        (hash
          name='y = 2x' 
          x=(array 1 2 3) 
          y=(array 2 4 6)
          type='scatter'
        ) 
        (hash 
          name='y = -x -1'
          x=(array 0 2) 
          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) {
      const ENV = {
        // ...
        // ember-cli-plotly
        plotlyComponent: {
          defaultConfig: {
            // Override plotly.js defaults
            displaylogo: false
          },
          defaultEvents: [/* list names of plotly events to forward by default */]
        },
        // ...
      };
      // ...
      return ENV;
    };
    // my-app/app/routes/somewhere.js
    import Route from '@ember/route';
    
    export default Route.extend({
      model() {
        return {
          x: [1, 2, 3],
          y: [2, 4, 6],
          type: 'bar'
        }
      }
    });
    // my-app/app/controllers/somewhere.js
    import Controller from '@ember/controller';
    import { computed } from '@ember/object';
    
    export default class SomeController extends Controller.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 onPlotlyEvent
          plotlyEvents: ['plotly_restyle']
        });
      }
    }) {
      @computed('model.{x,y,type}')
      get chartData() {
        return {
          x: this.get('model.x'),
          y: this.get('model.y'),
          type: this.get('model.type')
        };
      }
      
      onPlotlyEvent(eventName, ...args) {
        const handler = {
          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-ly
      chartData=chartData
      chartLayout=chartLayout
      chartConfig=chartConfig
      onPlotlyEvent=onPlotlyEvent
      isResponsive=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.

    Install

    npm i ember-cli-plotly

    DownloadsWeekly Downloads

    71

    Version

    0.6.1

    License

    MIT

    Unpacked Size

    675 kB

    Total Files

    10

    Last publish

    Collaborators

    • jacobq