2.0.0 • Published 3 years ago

@terminus/ui-chart v2.0.0

Weekly downloads
22
License
MIT
Repository
github
Last release
3 years ago

CI/CD Status Codecov MIT License
NPM version Github release Library size

Table of Contents

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
tslib@angular-devkit/schematics@schematics/angular
@infinitebrahmanuniverse/nolb-_ter@everything-registry/sub-chunk-905@zalastax/nolb-_ter
2.0.0

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.5

4 years ago

1.0.2

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.1

4 years ago