Skip to content

LocusEnergy/ember-sparkles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Iaroslav PopovZachary Zibrat
Iaroslav Popov
and
Zachary Zibrat
Jan 10, 2018
16bd9ca · Jan 10, 2018
Dec 27, 2017
Feb 22, 2017
Sep 2, 2016
Dec 27, 2017
Dec 27, 2017
Sep 17, 2016
Dec 27, 2017
Apr 13, 2016
Nov 16, 2016
Apr 13, 2016
Dec 27, 2017
Dec 27, 2017
Apr 13, 2016
Dec 27, 2017
Apr 13, 2016
Jul 6, 2016
Feb 22, 2017
Feb 22, 2017
Jul 26, 2016
Dec 27, 2017
Jul 26, 2016
Dec 27, 2017
Jan 10, 2018
Jan 10, 2018
Jul 26, 2016
Dec 27, 2017
Dec 27, 2017

Repository files navigation

ember-sparkles

Build Status npm version Dependency Status Ember Observer Score

William Shatner in Sparkles

ember-sparkles is a collection of composable D3 charts built with ember-d3-helpers library. It aims to provide reactive and highly performant D3-based data visualizations through simple template-bound configurations.

This library currently includes the following charts:

Note: This library is still in beta, please use carefully, and file issues as discovered. Pull requests for additional charts always welcome!

Install

First install ember-sparkles to your application:

ember install ember-sparkles

Then add default ember-resize configuration into config/environment.js file, these properties can be changed to suit your needs. For more information, please see the documentation for ember-resize:

    resizeServiceDefaults: {
      widthSensitive: true,
      heightSensitive: true,
      debounceTimeout: 200,
      injectionFactories: ['view', 'component']
    },

How to use

This addon includes an {{ember-sparkles}}, which renders a responsive SVG container element. D3-based graphs, axes, and legend components are contextually yielded from this component.

example

{{#ember-sparkles
  data=your-data

  input-key='ts'
  output-key='value'

  scale-type='band'
  y-scale-type='linear'
  x-domain=(map (r/get 'ts') data)
  y-domain=(append 0 outputMax)


  as |chart|
}}
  {{!render your charts here}}
{{/ember-sparkles}}

Properties (WIP)

  • data {Array} required

    Array containing data, structure depending on data visualization type.

  • input-key {String} required

    Key by which to obtain independent variable from array or object. Defaults to zeroth index of array.

  • output-key {String} required

    Key by which to obtain dependent variable from array or object. Defaults to first index of array.

  • x-scale-type {String} optional

    Type of D3 scale function to use for horizontal axis (linear, band, or time).

    default: linear

Axis

To render an axis, add {{chart.y-axis}} or {{chart.x-axis}} to the {{#ember-sparkles}} block.

{{#ember-sparkles as |chart|}}
  {{chart.x-axis
    tick-format=(d3-time-format '%Y-%m-%d')
    label='date'
    dy=100
    dx=-100
  }}

  {{chart.y-axis
    label='kWh'
    position='right'
    ticks=5
    tick-format=(d3-format '.2s')
    gridlines=true
    dx=100
    dy=-30
  }}
{{/ember-sparkles}}

Similar to the y-axis example, the x-axis contextual component can take a position property, set to top (by default these are set to left and bottom), respectively).

For more information on configuring tick formats using the d3-time-format and d3-format helpers, please see d3-format and d3-time-format, respectively.

Legend

To show a legend, add {{chart.legend}} to the {{#ember-sparkles}} block.

{{#ember-sparkles as |chart|}}
  {{chart.legend
    dx=50
  }}
{{/ember-sparkles}}

Installation

ember install ember-sparkles

Helpful Links

Looking for help?

If it is a bug please open an issue on GitHub.

Usage

Updating the Demo site

ember github-pages:commit --message <some commit message>
git push origin master