This Ember Addon provides the x-sparkline component. Given an array of numbers, it draws a line chart and an area chart using an html5 canvas. A subset of styles can be passed in.
ember install ember-sparkline
First, setup some data.
export default Route.extend({
model() {
return [1, 2, 3, 7, 20, 13, 2, -10, 5, 12];
}
});Declare a sparkline component in your template, passing in points.
Create some styles to size its dimensions.
.my-sparkline {
width: 100px;
height: 100px;
}x-sparkline simply draws an array of numbers, assuming the interval between each point is the same. This means you can't draw a chart for data with non regular intervals in the x axis.
The dummy app illustrates how you could transform appropriate data and rig up styling.
Also note, you cannot provide a separate view range. Every point in the points array will be drawn. If you only want to render a section of your data set, you'll need to prepare/transform this in a wrapping component or your route.
/**
* The data points that will be drawn on the chart.
* @type {[number]}
*/
points: null,
/**
* Line width
* @type {number}
*/
lineWidth: 1,
/**
* Stroke style
* @type {string}
*/
strokeStyle: 'rgba(28, 162, 230, 1)',
/**
* Gradient start style
* @type {string}
*/
gradientStart: 'rgba(180, 230, 255, 1)',
/**
* Gradient end style
* @type {string}
*/
gradientEnd: 'rgba(180, 230, 255, 0)',
/**
* The vertical padding between the edge of the chart and the most extreme data points.
* Without some padding, the most extreme points may clip.
* @type {number}
*/
vPad: 4,
git clone https://github.com/lukesargeant/ember-sparkline.gitcd ember-sparklinenpm install
ember serve- Visit your app at http://localhost:4200.
npm test(Runsember try:eachto test your addon against multiple Ember versions)ember testember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.