@iapps/ngx-dhis2-visualization v1.0.2

DHIS2 Visualization library

installation

npm install ngx-dhis2-visualization

Usage

If the module is to be imported in the app.module, then import as

import { NgxDhis2VisualizationModule } from 'ngx-dhis2-visualization';

then add this in the imports

imports: [
    ...
    NgxDhis2VisualizationModule.forRoot(),
    ...
    ]

If the module is to be imported in other modules, then add this in the imports

imports: [
    ...
    NgxDhis2VisualizationModule.forChild(),
    ...
    ]

Once imported, visualization card can be called in as

<ngx-dhis2-visualization
  [id]="'visualizationId'"
  [type]="'CHART'"
  [name]="'Visualization'"
  [visualizationLayers]="visualizationLayers"
></ngx-dhis2-visualization>

where

• id: unique id for visualization
• type: type of visualization eg. CHART, TABLE, MAP, INFO etc
• name: name for visualization
• visualizationLayers: content for the visualization, this is an array whose format is

  [{
    id: string;
    analytics?: Analytics;
    dataSelections?: VisualizationDataSelection[];
    layout?: VisualizationLayout;
    metadataIdentifiers?: Array<string>;
    layerType?: string;
    config?: {[name: string]: any};
  }]

  where
• Analytics has format

  {
    headers?: any[];
    metaData?: any;
    rows: Array<any[]>;
  }

• VisualizationDataSelection has format

   {
     dimension: string;
     name: string;
     layout?: string;
     filter?: string;
     optionSet?: any;
     legendSet?: string;
     items: Array<{
       id: string;
       name: string;
       type: string;
     }>;
   }

• VisualizationLayout has format

  {
    rows: Array<string>;
    columns: Array<string>;
    filters: Array<string>;
    excluded?: Array<string>;
  }