Name: ember-sparkles
Owner: Locus Energy
Description: Collection of composable D3 components built with ember-d3-helpers
Created: 2016-04-11 22:39:16.0
Updated: 2018-01-08 18:39:17.0
Pushed: 2018-01-10 16:57:28.0
Homepage: http://locusenergy.github.io/ember-sparkles/#/line-chart
Size: 2385
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|---|---|
| Patrick Berkeley | 2017-02-22 02:07:54.0 | 2 |
| Taras Mankovski | 2016-08-23 00:57:44.0 | 8 |
| Andrey Khomenko | 2016-10-14 18:48:11.0 | 1 |
| Zachary Zibrat | 2017-12-27 20:27:19.0 | 20 |
| Iaroslav Popov | 2018-01-10 16:57:27.0 | 4 |
| ember-tomster | 2016-04-13 18:10:40.0 | 1 |
Other Committers
| User | Most Recent Commit | # Commits | |
|---|---|---|---|
| zigahertz | zach.zibrat@locusenergy.com | 2017-02-24 17:14:02.0 | 90 |
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!
First install ember-sparkles to your application:
r 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']
},
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.
mber-sparkles
ta=your-data
put-key='ts'
tput-key='value'
ale-type='band'
scale-type='linear'
domain=(map (r/get 'ts') data)
domain=(append 0 outputMax)
|chart|
!render your charts here}}
mber-sparkles}}
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
To render an axis, add {{chart.y-axis}} or {{chart.x-axis}} to the {{#ember-sparkles}} block.
mber-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
mber-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.
To show a legend, add {{chart.legend}} to the {{#ember-sparkles}} block.
mber-sparkles as |chart|}}
chart.legend
dx=50
mber-sparkles}}
r install ember-sparkles
If it is a bug please open an issue on GitHub.
r github-pages:commit --message <some commit message>
push origin master