Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://astronomersiva.github.io/ember-line-graph/
ember-line-graph is a tiny(1.74kb gzipped), zero-dependency ember-addon to draw line-charts.
https://astronomersiva.github.io/ember-line-graph/
Last synced: about 2 months ago
JSON representation
ember-line-graph is a tiny(1.74kb gzipped), zero-dependency ember-addon to draw line-charts.
- Host: GitHub
- URL: https://astronomersiva.github.io/ember-line-graph/
- Owner: astronomersiva
- License: mit
- Created: 2018-06-10T10:24:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-02T01:14:57.000Z (over 1 year ago)
- Last Synced: 2024-07-06T00:17:43.661Z (3 months ago)
- Language: JavaScript
- Homepage: https://astronomersiva.github.io/ember-line-graph/
- Size: 1.44 MB
- Stars: 14
- Watchers: 3
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-line-graph - Zero-dependency ember-addon to draw line-charts. (Packages / Data validation)
README
ember-line-graph [](https://travis-ci.org/astronomersiva/ember-line-graph)
==============================================================================
ember-line-graph is a tiny(1.74kb gzipped), zero-dependency ember-addon to draw line-charts.
It uses SVGs to create charts so it is scalable and supports animations and gradients.
[Demo](https://astronomersiva.github.io/ember-line-graph/)
Installation
------------------------------------------------------------------------------
```
ember install ember-line-graph
```
Usage
------------------------------------------------------------------------------
```handlebars
{{line-graph
points=points
strokeWidth=5
type="smooth"
smoothness=10
colors=colors
animation=true
animationDuration=3500
animationTimingFunction="ease-in"
width=500
height=125
padding=10
minY=0.5
maxY=50
}}
```
* **points** - an array of values, example - `[1, 10, 45, 3, 4, 6]`.
* **strokeWidth** - width of the SVG path stroke.
* **strokeOpacity** - opacity of the line in the chart. A number between 0 and 1.
* **strokeLinecap** - Specifies the ending style of the line path. One of `butt`, `round` or `square`.
* **strokeDasharray** - Controls the pattern of dashes and gaps used to stroke paths. Refer [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray). Not recommended to use this with animation as the animation will first draw a undashed path and the chart will then turn to dashes.
* **type** - `line`(default) or `smooth`.
* **smoothness** - a number between 1 and 10 to determine the curve around the chart's points. Applicable only when `type` is `smooth`.
* **colors** - A color or an array of colors for defining the chart's colors. A color can be any valid CSS color value.
* **animation** - A boolean to specify if the path should be animated from left to right.
* **animationDuration** - A number(in ms) to specify the duration for the animation.
* **animationTimingFunction** - Any valid CSS [animation-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) for the animation.
* **width** - A number to specify the width of the chart.
* **height** - A number to specify the height of the chart. Optional. Defaults to `width/4`.
* **padding** - A number to specify padding for the chart inside the SVG so that lines are not cut at the edges. Optional.
* **minY** & **maxY** - Set the limits of the y axis. If these are undefined, they default to the smallest and largest data points respectively, which means the data is scaled to fit the graph vertically.
Contributing
------------------------------------------------------------------------------
### Installation
* `git clone https://github.com/astronomersiva/ember-line-graph`
* `cd ember-line-graph`
* `npm install`
### Linting
* `npm run lint:js`
* `npm run lint:js -- --fix`
### Running tests
* `ember test` – Runs the test suite on the current Ember version
* `ember test --server` – Runs the test suite in "watch mode"
* `ember try:each` – Runs the test suite against multiple Ember versions
### Running the dummy application
* `ember serve`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
### Credits
This addon was inspired by [react-trend](https://github.com/unsplash/react-trend).
Creating this addon would have been impossible if not for these amazing blogs on the math needed to make this work:
* Daniel Pataki - [https://danielpataki.com/svg-chart/](https://danielpataki.com/svg-chart/)
* Francois Romain - [https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74](https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74)
License
------------------------------------------------------------------------------
MIT © [Sivasubramanyam A](https://sivasubramanyam.me)
This project is licensed under the [MIT License](LICENSE.md).