Giter VIP home page Giter VIP logo

ember-nf-graph's Introduction

Build Status npm version

NOTICE: This add-on was built to support Ember < 1.12 and cannot support Ember 1.13 and higher

Due to this addon being used in large Ember 1.11 and 1.12 apps in production that have enumerable deprecation warnings on the path to Ember 2, and in light of the fact that some public APIs this addon relied on were removed in 1.13, we are unable to update this add-on to a higher version of Ember at this time.

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.

Contributing

  • git clone this repository
  • npm install
  • bower install

Running

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

ember-nf-graph's People

Contributors

abuiles avatar benlesh avatar ckornell avatar dave-choi avatar jayphelps avatar kategengler avatar ming-codes avatar shishirmk avatar zkwentz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.