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:
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']
},
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.
-
data {Array}
requiredArray containing data, structure depending on data visualization type.
-
input-key {String}
requiredKey by which to obtain independent variable from array or object. Defaults to zeroth index of array.
-
output-key {String}
requiredKey by which to obtain dependent variable from array or object. Defaults to first index of array.
-
x-scale-type {String}
optionalType of D3 scale function to use for horizontal axis.
default:
linear
-
y-scale-type {String}
optionalType of D3 scale function to use for vertical axis.
default:
linear
To render an axis, add {{chart.y-axis}}
or {{chart.x-axis}}
to the {{#ember-sparkles}}
block.
To show a legend, add {{chart.legend}}
to the {{#ember-sparkles}}
block.
ember install ember-sparkles
If it is a bug please open an issue on GitHub.
ember github-pages:commit --message <some commit message>
git push origin master