ngx-indaba-charts

Librairie d'affichage de courbes timeseries

Modèles

• metric
• provider
• graph
• threshold

Metric

public timestamp: string; public value: number;

Contient les valeurs retournées par la base time-series.

Provider

providerUrl: string; token: string;

Contient les informations pour l'accès à la base, ici, une url et un token auth0.

Graph

public tag: string; public source: string; public color?: string; public unit?: string; public displayOrder?: number; public refresh = true; public metrics?: Array<Metric>;

Contient les informations d'un tag :

• Le nom
• La source de donnée
• La couleur désirée ( optionnel )
• L'unité ( optionnel )
• L'ordre d'affichage ( optionnel )
• Si le tag doit être récupéré de la base ou non
• Le tableau de données récupérés

Threshold

public axe: string; public value: number; public color?: string; public label?: string; public dashed?: boolean; Le threshold permet d'ajouter un seuil sur un graphe, il se manifeste en ligne pointillé ou continue sur le graphe.

• axe correspond à l'identifiant Y de l'axe ou le seuil sera ajouté
• value est la valeur du seuil
• La couleur désirée ( optionnel )
• Label permet d'ajouter un titre au centre du seuil ( optionnel )
• dashed, en pointillé, ou continu ( optionnel )

Composants

ngx-indaba-charts

Affiche une/des courbe(s) issue de tags d'une base time series

Utilisation

@Input() provider: Provider; @Input() startDate: string; @Input() endDate: string; @Input() tags: Array<Graph>; @Input() nbrPoints = 1000; @Input() threshold?: Array<Threshold>; @Input() deleteAll: boolean; @Output() zoomed = new EventEmitter<any>(); @Output() removed = new EventEmitter<any>();

• provider contient le token auth0 et l'url de la base
• startDate correspond à la date min de récupération des points
• endDate correspond à la date max de récupérations des points
• tags, la liste des tags à récupérer
• nbrPoints le nombre de points désiré ( défaut : 1000 )
• threshold, la liste des seuils à ajouter au graphe
• deleteAll, restaure le graphe par défaut
• zoomed, event émis au composant parent lors de l'utilisation du zoom
• removed, event émis au composant parent lors de la suppression d'un tag par double clic sur la légende

Exemple d'utilisation :

<ngx-indaba-charts [provider]="provider" [startDate]="minDate" [endDate]="maxDate" [tags]="graphs" [nbrPoints]="1000" [deleteAll]="deleteCharts" [threshold]="thresholds" (zoomed)="zoomed()" (removed)="removed()"> </ngx-indaba-charts>

ngx-indaba-bar

Affiche un bar chart issue de tag

Utilisation

@Input() provider: Provider; @Input() startDate: string; @Input() endDate: string; @Input() tag: Graph; @Input() nbrPoints = 1000;

• provider contient le token auth0 et l'url de la base
• startDate correspond à la date min de récupération des points
• endDate correspond à la date max de récupérations des points
• tag, le tag a récupérer
• nbrPoints le nombre de points désiré ( défaut : 1000 )

Exemple d'utilisation :

<ngx-indaba-bar [provider]="provider" [startDate]="minDate" [endDate]="maxDate" [tag]="graph" [nbrPoints]="1000"> </ngx-indaba-bar>