# @plotset/animation
`@plotset/animation` is a free npm package that you can  use to create your animated data visualizations charts with.
## Usage
In order to use this package you should first **import** it:
```
const { Animation } = require("@plotset/animation")
```
In order to use `Animation` class you need your inputs to be in this format:
```
const data = [
	{
		"Browser": "Edge",
		"11/1/2017": "4.43",
		"11/1/2018": "4.38",
		"11/1/2019": "4.6"
	},
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
		"11/1/2018": "62.8",
		"11/1/2019": "57"
	},
	...
]
const col_rel = {
	values: ["11/1/2017", "11/1/2018", "11/1/2019"],
	labels: "Browser"
}
const duration = 60
```
Then you can create your animation object like this:
```
const animation = new  Animation(duration , data, col_rel["values"])
```
Now add your drawing chart functions to your `animation` object:
```
function drawRaceBar(frame, transitionTime){
	// code ...
}

function drawRacePie(frame, transitionTime){
	// code ...
}

const charts = [
	drawRaceBar,
	drawRacePie,
	...
]

animation.addCharts(charts)
```
At the end you can call `play()` and `pause()` in your code like this:
```
animation.play()
animation.pause()
```
## Drawing functions
**What can be done in drawing functions you pass to `animation`:**
 - Create a data visualization chart with desired library like `D3.js` ,  `Chart.js` , `Highcharts` , `Recharts` , `Flexmonster` , `Chartkick` , . . .
 - Update each frame with given frame data and transition time(ms)
 
**What parameters drawing functions will get at each pulse:**
```
function drawingFunction(frame, transitionTime){
	const { data, sortedData, date } = frame
	// . . .
}
```
**data:** 
```
[
	{
		"Browser": "Edge",
		"11/1/2017": "4.43"
	},
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
	}
]
```
 **sorted data:**
```
[
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
	},
	{
		"Browser": "Edge",
		"11/1/2017": "4.43"
	}
]
```
 **date:**
```
{
	ISO: "2017-11-01T00:00:00.000Z",
	raw: "11/1/2017",
	time: 1509494400000
}
```
 **transitionTime:**
```
2000
```