https://github.com/Netflix/ember-nf-graph

Composable graphing component library for EmberJS.
https://github.com/Netflix/ember-nf-graph

Last synced: 3 months ago
JSON representation

Composable graphing component library for EmberJS.

• Host: GitHub
• URL: https://github.com/Netflix/ember-nf-graph
• Owner: Netflix
• License: apache-2.0
• Created: 2015-03-24T00:00:17.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-24T09:30:36.000Z (over 1 year ago)
• Last Synced: 2024-05-29T18:08:50.108Z (5 months ago)
• Language: JavaScript
• Size: 7.76 MB
• Stars: 241
• Watchers: 411
• Forks: 46
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/Netflix/ember-nf-graph.svg?branch=master)](https://travis-ci.org/Netflix/ember-nf-graph)

[![npm version](https://badge.fury.io/js/ember-nf-graph.svg)](http://badge.fury.io/js/ember-nf-graph)

# 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](//netflix.github.io/ember-nf-graph/docs) for more information.

- [Documentation](//netflix.github.io/ember-nf-graph/docs)

- [Examples](//netflix.github.io/ember-nf-graph-examples/dist)

A basic graph example is as follows:

```js

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 },

        // ...

      ]

    };

  }

});

```

```hbs

{{#nf-graph width=500 height=300 as |nf|}}

  {{#nf.graph as |graph|}}

    

    {{graph.line data=model.myLineData}}

    

    {{graph.area data=model.myAreaData}}

    

    

  {{/nf.graph}}

	

  {{#nf.y-axis as |tick|}}

    {{tick.value}}

  {{/nf.y-axis}}

  {{#nf.x-axis as |tick|}}

    {{tick.value}}

  {{/nf.x-axis}}

{{/nf-graph}}

```

## Installation

This set of Ember components requires [Ember-CLI](http://ember-cli.com) 0.2.0 or higher and

[Ember](http://emberjs.com) 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](//netflix.github.io/ember-nf-graph/docs) (generated by [YUIDocs](http://yui.github.io/yuidoc/))

- 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.

----

## Contributing

* `git clone` this repository

* `npm 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/](http://www.ember-cli.com/).

### Generating Documentation

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

```sh

yuidoc -c yuidoc.json

```

The documentation is located in `docs/`.