Ember-nf-graph NPM

ember-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({
  model() {
    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=model.myLineData}}

    <!-- add an area -->
    {{nf-area data=model.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 as |tick|}}
    <text>{{tick.value}}</text>
  {{/nf-y-axis}}


  {{#nf-x-axis as |tick|}}
    <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 ember-nf-graph, or npm install -D ember-nf-graph

Documentation

Online at: netflix.github.io/ember-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-nf-graph/docs/index.html just open in any browser.