ngx-indaba-charts v1.4.0
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>
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago