@terminus/ui-chart

v2.0.0

Published

3 years ago

<h1>Chart</h1>

Downloads

0High
0Medium
0Low

bmalinconico-terminus

atlwendy

terminus_devops

Installation

Packages to be installed

@amcharts/amcharts4
@amcharts/amcharts4-geodata
@terminus/design-tokens
@terminus/fe-utilities
@terminus/ui-utilities
@terminus/ui-chart
date-fns

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-chart

Modules that need to be in NgModule

TsChartModule

CSS imports

In your top level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

Inject the needed libraries

Note: Since the end-user of this library is the one with the actual license to use amCharts, we let the consumer pass in the library.

Create a factory function to inject the needed libraries and plugins:

import { TS_AMCHARTS_TOKEN, TsAmChartsToken } from '@terminus/ui-chart';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import * as am4maps from '@amcharts/amcharts4/maps';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
import am4themes_material from '@amcharts/amcharts4/themes/animated';

// `core` and `charts` are always required.
// `maps` is required if using any map visualizations.
export function amChartsFactory(): TsAmChartsToken {
  return {
    core: am4core,
    charts: am4charts,
    maps: am4maps,
    themes: [am4themes_animated, am4themes_material],
  };
}

@NgModule({
  ...
  providers: [
    // Use the factory function to overwrite the `TS_AMCHARTS_TOKEN` injectable:
    {
      provide: TS_AMCHARTS_TOKEN,
      useFactory: amChartsFactory,
    },
  ],
  ...

NOTE: Themes will be applied in the order they are provided.

Set up the chart

Add the component and set up access to the generated chart:

<ts-chart (chartInitialized)="setUpChart($event)"></ts-chart>

setUpChart(chart: am4charts.Chart) {
  // Add axis' and series' etc...
}

See the demo app for concrete examples of the supported chart types.

Supported chart types

xy
pie
map
radar
tree
sankey
chord

See TsChartVisualizationOptions for all supported types.

Chart Type Coercion

The library exposes functions for coercing to specific chart types:

tsChartXYTypeCheck
tsChartPieTypeCheck
tsChartMapTypeCheck
tsChartRadarTypeCheck
tsChartTreeTypeCheck
tsChartSankeyTypeCheck
tsChartChordTypeCheck

Example:

if (tsChartXYTypeCheck(chart)) {
  // Now we know we are dealing with an XY chart type
}

amCharts documentation

See https://www.amcharts.com/docs/v4/ for full documentation.

Test Helpers

Some helpers are exposed to assist with testing. These are imported from @terminus/ui-chart/testing;

[source]

| Function | |------------------------| | getChartDebugElement | | getChartInstance |

| Chart service mock | |-------------------------| | AmChartsServiceMock |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents