ember-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:

• Bar Chart
• Grouped Bar Chart
• Line Chart
• Pie Chart

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

• Live Demo

• Changelog

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