analytics-dashboard

Analytics

Versions Supported

This library is compatible with Angular version 16.0.1+

This project uses:

Chartsjs 4.2.1

Chartjs-Chart-Geo 4.1.2

To install:

npm i analytics-dashboard

In your module where you want to use this application, import the dashboard module and add it to your imports:

import { DashboardModule } from 'analytics-dashboard';

Usable components

Valid components can be found in src/dashboards/components.

• lib bar
  • Input values:
    • [labels]="array of strings or numbers" - required
    • [datasets]="array of type DataSet" - required
    • [tenant]="sag or healthineers from TenantType" - required
    • [theme]="light or dark from ThemeType" - required
    • [aspectRatio]="number representing the scale of chart" - required
    • [title]="title of chart of type string" - required
• lib-doughnut
  • Input values:
    • [labels]="array of strings or numbers" - required
    • [datasets]="array of type DataSetDoughnut" - required
    • [tenant]="sag or healthineers from TenantType" - required
    • [theme]="light or dark from ThemeType" - required
    • [aspectRatio]="number representing the scale of chart" - required
    • [title]="title of chart of type string" - required
• lib-geo
  • Input values:
    • [labels]="array of strings" - required
    • [stateData]="Type StateData"
    • [tenant]="sag or healthineers from TenantType" - required
    • [theme]="light or dark from ThemeType" - required
    • [aspectRatio]="number representing the scale of chart" - required
    • [title]="title of chart of type string" - required
• lib-geo-world
  • Input values:
    • [labels]="array of strings" - required
    • [countryData]="type CountryData"
    • [tenant]="sag or healthineers from TenantType" - required
    • [theme]="light or dark from ThemeType" - required
    • [aspectRatio]="number representing the scale of chart" - required
    • [title]="title of chart of type string" - required

Example usage

Bar Chart

  <lib-bar
    [labels]="labels"
    [datasets]="datasets"
    [tenant]="tenant"
    [theme]="theme"
    [aspectRatio]="aspectRatio"
    [title]="title"
  ></lib-bar>

Example input values:

public title = 'Bar Chart';

public tenant = TenantType.sag;

public theme = ThemeType.dark;

public labels: string[] = ['2022-05-10', '2022-05-11', '2022-05-12', '2022-05-13', '2022-05-14', '2022-05-15', '2022-05-16', '2022-05-17'];

public datasets = [
  {
    label: 'Sales',
    data: ['467', '576', '572', '79', '92', '574', '573', '576'],
  },
];

public aspectRatio = 5;

Relevant Interfaces and Types

export interface DataSet {
  label: string;
  data: string[] | number[];
  backgroundColor?: string;
}

export interface DataSetDoughnut {
  data: number[] | string[];
  backgroundColor?: string[];
  hoverOffset?: number
}

export enum GeoTypes {
    USA = 'USA',
    World = 'World'
}

export interface Theme {
  bgPrimary: string;
  primaryColor: string;
  secondaryColor: string;
  tertiaryColor: string;
  quaternaryColor: string;
  primaryColorRgba100: string;
  primaryColorRgba80: string;
  primaryColorRgba60: string;
  primaryColorRgba40: string;
  primaryColorRgba20: string;
  textColor: string;
  borderColor: string;
}


export enum TenantType {
  healthineers = 'healthineers',
  sag = 'sag',
}

export enum ThemeType {
  dark = 'dark',
  light = 'light',
}

export interface StateData {
    state: string;
    value: number;
}

export interface CountryData {
    country: string;
    value: number;
}