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;
}