Skip to content

IcarusWorks/ember-sparkles

 
 

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-sparkes
  data=your-data

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

  x-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-sparkes}}

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.

    default: linear

  • y-scale-type {String} optional

    Type of D3 scale function to use for vertical axis.

    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='%Y-%m-%d'
    label='date'
    dy=100
    dx=-100
  }}

  {{chart.y-axis
    label='kWh'
    ticks=5
    yGrid=true
    dx=100
    dy=-30
  }}
{{/ember-sparkles}}

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

About

Collection of composable D3 components built with ember-d3-helpers

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 46.7%
  • HTML 30.7%
  • CSS 22.6%