npm package: @optalitix/chartjs-angular-wrapper
Description: This library provides an easy plug-and-play option for rendering charts in Angular. It is based on `chart.js`.
Latest version: 2.2.2

# Chart.js Angular Package for Optalitix Products

This library provides an easy plug-and-play option for rendering charts in Angular. It is based on `chart.js`. 

## Installing

Run `npm i @optalitix/chartjs-angular-wrapper` and import the `ChartjsAngularWrapperModule` to your `app.module.ts` or as a standalone module

## Usage

Add the following element to wherever you want the chart to be drawn:
```
<chartjs-wrapper [optalitixChart]="chart"></chartjs-wrapper>
```

where the `chart` must conform to the contract:

```
class OptalitixChart {
  public name?: string;
  public title?: string;
  public type: OptalitixChartType;
  public chartData: OptalitixChartData<X, Y>;
  public chartMetadata?: OptalitixChartMetadata;
}

class OptalitixChartMetadata {
  public xMetadata?: AxisMetadata[];
  public yMetadata?: AxisMetadata[];
  public multipleAxes?: boolean;
  public horizontalLines?: boolean;
  public scatterLine?: boolean;
}

class AxisMetadata {
  title?: string;
  format?: string;
  type?: string;
  min?: number;
  max?: number;
}

class OptalitixChartData<X = string, Y = string> {
  public datasets: DataSet<X, Y>[] = [];
}

class DataSet<X = string, Y = string> {
  public data: DataPoint<X, Y>[] = [];
}

class DataPoint<X = string, Y = string> {
  constructor(public x: X, public y: Y,) {}
}
```
### Supported Chart Types
The following chart types are currently supported (exposed through `OptalitixChartType` enum):
- Scatter
- Radar
- Line
- Pie
- Doughnut
- Polar
- Bubble
- Bar
- Area

### API Methods
In order to build conformative graphs, each class exposes functions that allow the user to build data point to a data set to a list of data sets to the resultant chart. 

##### Dataset
- `addPoint(x: X, y: Y)`
- `mapPoints<U, V>(fn: (pt: DataPoint<X, Y>) => DataPoint<U, V>): DataSet<U, V>`
##### OptalitixChartData
- `addSeries(series: DataSet<X, Y>)`
- `getSeries(name: string): DataSet<X, Y> | undefined`
- `getSeriesTypes(): { xType: string; yType: string }`

## Example
The following code snippet presents a simple implementation of the charting tool.
```
const chartMetadata: OptalitixChartMetadata = {...}
const points: DataPoint<X, Y>[] = [];
const xValues: any[] = [...];
const yValues: any[] = [...];

for (let i = 0; i < yValues.length; i++) {
  const x = (xValues.length > 0 ? xValues[i] : (i + 1).toString()) as unknown as X;
  const y = yValues[i] as unknown as Y;
  points.push(new DataPoint(x, y));
}

const dataSets: Record<string, Array<{ x: X; y: Y }>>;
dataSets[seriesName] = points;

const chartData = new OptalitixChartData<X, Y>();

for (const [seriesName, coords] of Object.entries(dataSets)) {
  const series = new DataSet<X, Y>(seriesName);

  coords.forEach(coord => series.addPoint(coord.x, coord.y));
  chartData.addSeries(series);
}

const optalitxChart: OptalitixChart<X = string, Y = string> = new OptalitixChart(
  'LINE',
   chartData,
   opts: { name: 'ChartApiName', title: 'Chart Title', metadata: chartMetadata }
  )
```
That resulting `optalitixChart` object can be passed into the Angular component which will render the chart. 

### Integration with Optalitix Models API
A helpful function for deriving the chart's schema from a Models API response is:
```
getChartSchema(chartName: string): any {
  const chartSchemas = this.responseData.outputChartsSchema;

  const matchingKey = Object.keys(chartSchemas).find(
    (key) => key.toLowerCase() === chartName.toLowerCase()
  );

  return matchingKey ? chartSchemas[matchingKey] : null;
}
```