netflix / ember-nf-graph

Composable graphing component library for EmberJS.

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.

• Documentation
• Examples

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 as |nf|}}
  {{#nf.graph as |graph|}}
    <!-- add a line -->
    {{graph.line data=model.myLineData}}

    <!-- add an area -->
    {{graph.area data=model.myAreaData}}

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

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

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 Documentation

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 Issues

tickFactory is no longer used (was recently removed)

Likely an accident, but this commit 2ecd7d8 removed tickFactory from being applied. This affects argus as well (the ticks aren't as intended).

Cc/ @jeff3dx

Update from old-fashion style builds

Now that Ember-CLI supports building SASS properly (for a LONG time now, actually), we should move the CSS building into the proper place, rather than having a separate build.

RxJS missing from blueprint

[Bug] D3.js not found

Steps to reproduce

ember new nfgraph-test; cd nfgraph-test
ember install ember-nf-graph
ember s

package.json

 "ember-nf-graph": "1.0.0-beta.8",

Rename project to ember-nf-graph

<:bike:>

Since ember-cli is now the "official" way to use ember, many in the community (including myself) think new projects should stop including "cli" in their name since it's implied/redundant. I vote a name change to simply ember-nf-graph before this gains any major traction.

</:bike:>

Cc/ @Blesh

Tick labels don't work on Glimmer

On ember 1.13.2, when I do

{{#nf-y-axis as |tick|}}
  <text>{{tick.value}}%</text>
{{/nf-y-axis}}

I get the tick lines, but no labels.

Additionally, the guides don't show the tick block-param , though the code seems to expect that.

A few prototype functions remain...

:( that's bad. Missed a bunch of fmt and observesBefore references. :(

Feature proposal: more flexibility to manipulate the lanes (maybe frets too)

I haven't thought through this a ton but it would be nice to change the lanes to be lines and not rects as well as maybe style them a bit. I am willing to work on this but wanted to get some feedback on it.

Add touch support for mouse tracking and brushing

Remove prototype functions

Using Ember's prototype functions make this hard to consume for those who EXTEND_PROTOTYPES = false

Remove nf-scroll-area

It's cruft and not part of nf-graph. It's left-overs from the split with nf-table

autoscaling width

If I set {{#nf-graph width="100%"}} this works okay but when trying to combine that with an {{nf-bars}} things go awry and the bars end up stacked on top of each other.

contentClipPathId doesn't work on apps with <base> tag

When the page has a <base href="/something/"> tag, SVG IRIs that are just fragments don't work. The only such IRI in this project is

'clip-path': Ember.computed('graph.contentClipPathId', function(){
  var clipPathId = this.get('graph.contentClipPathId');
  return  `url('#${clipPathId}')`;
}),

which emits something like

<g clip-path="url(#ember718-content-mask)">

Unfortunately, the only workaround is to use the absolute URL of the page. Thus, I suggest something like

'clip-path': Ember.computed('graph.contentClipPathId', function(){
  var clipPathId = this.get('graph.contentClipPathId');
  const currentURL = document.location.href.replace(/#.+$/, '');
  return  `url('${currentURL}#${clipPathId}')`;
}),

which would in turn emit something like

<g clip-path="url(https://myapp.example.com/some/route#ember718-content-mask)">

/cc @jayphelps, who has some experience with these issues.

How can I label every line or area chart inside a graph-content?

Hi. I can't find, or I don't understand how can I label every chart inside a graph-component. I would like to put labels and colors so I can easily differentiate every line in one chart.

Can someone help me please :)

maxProperty doesn't have a good way to use "default"

😄 If I don't pass a yMax, I get a nice default behavior:

{{ember-nf-graph}}

😄 If I do pass a yMax, I can get a nice override:

{{ember-nf-graph yMax=100 class='percent-graph'}}

😢 But there's no way for me to use yMax=someBoundProperty that might be undefined or might be an integer. If it's undefined, then yMax gets set to undefined, not to the default behavior.

I think an easy solution would be to change the logic in the maxProperty to use the override only if it's not null:

// was:
if(arguments.length > 1) {
  this[__Max_] = value;
} else {

// suggested:
if (value != null) {
  this[__Max_] = value;
} else {

Demo

It might be handy to have a demo showing the graphs that come out of the box with this.

Incompatible rxjs versions

Installing browser packages via Bower...
  cached git://github.com/mbostock/d3.git#3.5.5
  cached git://github.com/blesh/RxEmber.git#0.2.3
  cached git://github.com/Reactive-Extensions/RxJS.git#2.4.7
  cached git://github.com/Reactive-Extensions/RxJS.git#2.3.25
  new version for git://github.com/Reactive-Extensions/RxJS.git#~2.4.6
  resolved git://github.com/Reactive-Extensions/RxJS.git#2.4.10
  conflict Unable to find suitable version for rxjs
    1) rxjs ~2.3.22
    2) rxjs ~2.4.6
[?] Answer: 

Which is due to us saying we need ~2.4.6 but RxEmber needs ~2.3.22

app/ components need to use the new cp syntax

Apparently when I did #63, I missed the entire app/ directory......

New syntax with polyfill looks like this:

import computed from 'ember-new-computed';

export default Ember.Component.extend({
  fullName: computed('firstName', 'lastName', {
    get() {
      return this.get('firstName') + ' ' + this.get('lastName');
    },
    set(key, newName) {
      var parts = newName.split(' ');
      this.setProperties({ firstName: parts[0], lastName: parts[1] });
      return newName;
    }
  });
});

Getter-only should still use this syntax, just not include a set()

Bars displaying only in one column but tracked x and y values actually move

Hi, I have the following input data for a bars graph but for some reason the bars only display in one column:

menuItemStockCount: [
    { x: 0, y: 200 },
    { x: 1, y: 154 },
    { x: 2, y: 130 },
    { x: 3, y: 300 }
  ]

My code in my .hbs file to display the graph is:

{{#nf-graph width=500 
           height=300 
           paddingRight=10 
           paddingTop=10 
            xScaleType="ordinal" 
            yMinMode="fixed" 
            yMin=0
            showLanes=true
            showFrets=true
            }}
  {{#nf-graph-content}}

    {{nf-bars data=model.menuItemStockCount
                trackingMode="snap-last"
        trackedData=tracked}}    

  {{/nf-graph-content}}

  {{#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}}

 <text>{{tracked.x}} {{tracked.y}}</text>

Am I just doing something wrong?

reduce CSS specificity

Example, styling an nf-area:

.my-area > .area {
   fill: blue;
}

this should not be a requirement. A simple class or two should be able to override the default behavior.
Example:

.my-area {
  fill: blue
}

/* or */

.my-area .area {
  fill: blue
}

The first is ideal, but because of the nested nature of some of these components, some specificity will likely be required, as the class is applied to the component container.

Remove RxJS as a dependency

Needing to pull in RxJS via RxEmber (or ember-cli-rx) seems very unnecessary and boatful. The current places it's used seem very easy to do without Rx and would save consumers significant file size.

Create global files

Create a set of files for "global" install. (for use with things like JSBin or non-Ember-CLI applications).

This is a lower priority, but would be nice to have for playground apps.

Remove renaming warning

It still shows the sad panda on ember-nf-graph :(

Host docs somewhere (they're only in the package now)

If you get the addon via npm, you'll have to docs under the docs/directory in the module, however it would be nice to put them up somewhere. I'd say this is a qualification to be "out of beta".

Examples are missing in FF 28

When the examples page is viewed in FF 28 on mac all the graphs are blank. Safari and Chrome both show this content.

Brush Select To Zoom throws "Cannot read property 'insertBefore' of null"

Any click and drag event on the "Brush Select to Zoom" graph throws "Uncaught TypeError: Cannot read property 'insertBefore' of null."

Use ember-cli-rx instead of rx-ember

Bower is painful to deal with. The only reason we are using bower right now is because of an old issue with previous versions of Ember-CLI not allowing addons to use addons. That's fixed, so we should just be using ember-cli-rx.

Use ember-cli-sass instead of pre-compiling scss

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:

README.md#generating-styles

Basically, this isn't needed anymore.

Remove clippath

Its not being used, and it causes issues with SVG image export

Enable nf-bars-group to support stacked bar charts

It would be great if we could pass an option to nf-bars-group that would change the behavior of nf-bars to stack the different bars within a gorup on top of each other.

{{#nf-bars-group stacked=true}}
  {{nf-bars data=someData yprop="firstprop" ... }}
  {{nf-bars data=someData yprop="otherprop" ... }}
{{/nf-bars-group}}

nf-graph should not disable user-select/drag for every element within

Right now everything inside .nf-graph is made non-selectable/draggable. This prevents someone from easily copying numbers, labels, etc which I don't think was the intent.

.nf-graph * {
  user-select: none;
  user-drag: none;
}

ember-nf-graph/styles/scss/components/nf-graph.scss

Lines 16 to 24 in d74b0e5

	* {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-moz-user-drag: none;
	-webkit-user-drag: none;
	user-drag: none;
	}

Instead, we should explicitly opt out things that should be selectable, Things like lines, paths, etc; if this is even necessary?

wrong property names for x and y

The documentation for nf-line (and others) says the x and y properties contains the paths to access on each data object. But doing

{{nf-line data=model x="foo" y="bar"}}

didn't work. It seems the properties are actually named xprop and yprop, and doing

{{nf-line data=model xprop="foo" yprop="bar"}}

instead worked for me.

Remove nf-scroll-area

MutationObserver is currently being used in nf-scroll-area which prevents it from being used in IE 10 and below as well as phantomjs 1.x; which means testing is a pain, need to add polyfills just for testing which introduces possible bugs if the polyfill doesn't behave exactly the same.

{{nf-scroll-area}} needs to be removed from this library.

Mouse Tracking doesn't work on Glimmer

On Ember 1.13.2 and latest Chrome, I have the following:

{{#nf-graph selected=selectedLine}}
  {{#nf-graph-content}}
    {{nf-vertical-line x=selectedLine.hoverData.x}}
    {{nf-horizontal-line y=selectedLine.hoverData.y}}

    {{nf-line data=data trackingMode="hover" selectable=true selected=true}}
   {{/nf-graph-content}}
{{/nf-graph}}

I've logged the hoverData objects; they all come up with x: null, y: null.

nf-vertical-line doesn't handle null input, produces invalid SVG

nf-vertical-line (and nf-horizontal-line) doesn't handle the case where it's x property is set to null or something non-number. This is a common case since nf-vertical-line is often bound to hoverData on another element, and hoverData is often null or undefined when the mouse is not hovering. It will produce invalid SVG resulting in this error:

Error: Invalid value for attribute y1="NaN"

Docs organization: Modules showing strange classes associated to them

If you look at the documentation and switch to the modules tab, it's really weirdly organized. Probably from a lack of understanding around how YUIDocs organizes modules vs classes.

Input here is welcome, but I'll probably just end up going around and making each module file an actual "module" and skipping the namespace bit. This might have implications for any global file build I do, though, which will likely just be namespaced.

Bar chart xScaleType="ordinal" hides x-axis labels

Adding xScaleType="ordinal" to get a properly formatted bar chart hides the x-axis labels.

Removing xScaleType="ordinal" shows labels but formatting is jacked.

I'm assuming it has something to do with the way ticks are calculated in the nf-x-axis component. Going to look into it more in depth tomorrow.

For reference, this is the template code I'm using:

     {{#nf-graph
        xScaleType="ordinal"
        yMinMode="fixed"
        yMin=0
        width=336
        height=206
        showFrets=false
        showLanes=true
        paddingTop=10
        paddingLeft=-18
        paddingRight=0}}

        {{#nf-x-axis tickCount=7 as |tick|}}
          <text>{{tick.value}}</text>
        {{/nf-x-axis}}

        {{#nf-y-axis as |tick|}}
          <text>{{tick.value}}</text>
        {{/nf-y-axis}}

        {{#nf-graph-content}}

          {{nf-bars
            data=averageVisitorsPerDayOfWeek
            barWidth=18
            barClass="barz"}}

        {{/nf-graph-content}}
      {{/nf-graph}}

Stop registering children during willInsertElement

Per a discussion with @stefanpenner, this is causing re-render of components and slowness. In particular, axes are problematic.

tabs and spaces are the bane of my existence

Finally have my editor problems straightened out I think.

But there are mixed tabs and spaces sprinkled throughout and it's a hinderance.

Use block params

Magically making things like tick available inside of templates is no bueno.

Recipes - Add examples for how to use these components.

A top priority for since this component library is really a DSL of sorts, is putting out some sort of "recipe" list or pages that show various ways to use the components to create various effects.

A few ideas for this are:

• Basic line graph
• Creating area graphs and stacked area graphs
• "Hover data" on mouse moves - displaying data nearest the mouse on the graph
• Shared line/area selection - sharing selected data between multiple graphs
• Brush selection - adding brush selection to a graph or graphs with nf-brush-selection
• Using nf-bars
• Mixing nf-bars and line or area graphs
• Creating custom graph components
• Using "primitive" components (nf-svg-rect for example)
• Customizing axis ticks with tickFilter, etc

attn @jeff3dx and @jayphelps - I could really use your help here.

Add support for percentage based dimensions

Selections don

Certain tracking modes of nf-line cause assertion errors saying setting element must be done with set()

Related: emberjs/ember.js#10935

The problem is that any computed property that observes element of a component causes an assertion error when the component is torn down.

TESTSSSSS

This library was developed in a hurry and is definitely battle-tested, but it's woefully under-tested.

All major components need more unit tests around them. And Travis needs to be set up. This is a requirement to get out of beta.

CI Pipeline

@Blesh are you able to set up travis-ci for this repo? #38 would add some value here

Docs links broken

The documentation links from the README appear to be broken (404 error).

Changing selected doesn't change CSS selected class

With multiple nf-lines on a graph click a line to select it. The nf-graph "selected" property object reference changes correctly but the "selected" CSS class is not applied to the new selection.

Rename blueprint

blueprints/ember-cli-ember-dvc should be named blueprints/ember-cli-nf-graph so it executes on ember install:install

nf-area-stack should sum y values for each area

Currently, nf-area-stack requires each area underneath it to have data y values that are exactly where they should be plotted. We have an internal requirement that the nf-area-stack should add the values of the each area under the current area. This is the way this should have behaved to begin with, but we can leave the original behavior.

Proposed Fix:

• add a property named something like sum to nf-area-stack that is a boolean.
• if sum is not set, show a deprication message warning that the default behavior will be changing in the next version to be sum=true, but is currently sum=false.. in other words, if you're already using the default incorrect behavior, it won't break.

To reiterate, and hopefully add clarity:

new sum property value:

• true: will add the y values of areas "under" the current area to a total for plotting purposes.
• false: (the current default bahavior) values are exactly where they should be to create a stacked area.
• (no value): Defaults to false, but gives a warning message that it will default to true in the next version.

So given the following data y values:

dy1 = [1,2,3,4,5];
dy2 = [2,3,4,5,6];

If sum is false or not set, it will plot as:

dy1PlotAt = [1,2,3,4,5];
dy2PlotAt = [2,3,4,5,6];

if sum is true, it will plot as:

dy1PlotAt = [1,2,3,4,5];
dy2PlotAt = [3,5,7,9,11]; //sums of dy1 and dy2