# Charts
Component that draws linear charts based on input parameters



## Getting Started

Before installing charts you need to install it's deps: highcharts & day.js.

### Prerequisites

| Name         | Description                                                                 |
|--------------|-----------------------------------------------------------------------------|
| `day.js`     | we use it to pretty easiely work with dates [day.js](https://day.js.org/en/) |
| `highcharts` | we use it to draw diagrams                                                  |


### Installing
Import `ChartsModule` in module where you want to use it
```javascript
import {ChartsModule} from 'epom-ng2-charts';
...
imports: [
    ChartsModule
]
```

In component where you need to draw charts import `ChartsService`
```javascript
    import {ChartsServiceClass} from 'epom-ng2-charts/charts.service';
```
In component-template where you need to draw charts add component
```html
    <epom-charts [chartsSections]="chartsSections"> </epom-charts>
```

## Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **chartsSections** | {dbKey: string; name: string} | we can draw tabs of charts; `dbKey` - property in charts values object; `name` - displaying name on tab         |

## Service public props
| Method Declaration                                                      | Description |
| ----------------------------------------------------------------------- | ----------- |
| **emitEvent** | BehaviorSubject<{[dbKey: number]: Array<number>}  | you can send new data to charts by using this emitter |

Examples:
```javascript
    this.chartsService.emitEvent.next({
        someProp: [24, 56, 62, 48],
        anotherProp: [1, 2, 3, 4, 5]
    });
```


## Module Examples

```javascript
import {ChartsServiceClass} from 'epom-ng2-charts/charts.service';
export class SomeComponentWithCharts {
    constructor(chartsService: ChartsServiceClass) {
        chartsService.emitEvent.next({
            someProp: [24, 56, 62, 48],
            anotherProp: [1, 2, 3, 4, 5]
        });
    }
}
```

## API Reference

highcharts API - https://api.highcharts.com/highcharts/
day.js API - https://day.js.org/en/
