README

ember-cli-nf-graph

A Component-based DSL for creating graphs in your Ember app. The goal of the library is to create a set of components that allows application or component authors to build graphs in a compositional way. This includes components for templated axes, graph lines, areas, stacked areas, bar graphs, and much more. Check the documentation for more information.

A basic graph example is as follows:

export default Ember.Route.extend({
    main: function(){
        return {
            myLineData: [{ x: 0, y: 12}, { x: 1, y: 32 }, { x: 2, y: 42 }, ... ],
            myAreaData: [{ x: 0, y: 43}, { x: 1, y: 54 }, { x: 2, y: 13 }, ... ]
        }
    }
})

{{#nf-graph width=500 height=300}}
  {{#nf-graph-content}}
    <!-- add a line -->
    {{nf-line data=myLineData}}

    <!-- add an area -->
    {{nf-area data=myAreaData}}

    <!-- mix in any SVG element you want -->
    <circle cx="40" cy="40" r="10"></circle>
  {{/nf-graph-content}}

    <!-- axis ticks are templateable as well -->
  {{#nf-y-axis}}
    <text>{{tick.value}}</text>
  {{/nf-y-axis}}


  {{#nf-x-axis}}
    <text>{{tick.value}}</text>
  {{/nf-x-axis}}
{{/nf-graph}}

Installation

This set of Ember components requires Ember-CLI 0.2.0 or higher and Ember 1.10.0 or higher.

To install, simply run ember install:addon ember-cli-nf-graph, or npm install -D ember-cli-nf-graph

Documentation

Online at: netflix.github.io/ember-cli-nf-graph/docs (generated by YUIDocs)
In package: Documentation for these components is included in the package, and can be found under node_modules/ember-cli-nf-graph/docs/index.html just open in any browser.

Contributing

git clone this repository
npm install
bower install

Running

ember server
Visit your app at http://localhost:4200.

Running Tests

ember test
ember test --server

Building

ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Generating Documenation

This project uses YUIDoc to generate documentation. Once YUIDoc is installed run:

yuidoc -c yuidoc.json

The documentation is located in docs/.

Generating Styles

To work around an issue with including SASS in an Ember-CLI Add-On, the styles and building thereof, are now located under styles/ and must be built from the command line as so:

cd styles/
npm run build

This will output the .css file to the proper directory, and that file must be committed.

ember-cli-nf-graphdeprecated

Usage no npm install needed!