Frappe Framework
API Chart
RealtimeChart dessine un graphique SVG et y ajoute des points reçus par un événement temps réel, ou ajoutés à la main.
Graphiques SVG
Frappe fournit des graphiques SVG configurables. La documentation de la bibliothèque est sur frappe.io/charts. Le guide bureau Créer des graphiques renvoie vers la même bibliothèque.
RealtimeChart
new frappe.ui.RealtimeChart(dom_element, event_name, max_label_count, data) ajoute la mise à jour temps réel au-dessus de l’API Frappe Charts.
| Argument | Rôle |
|---|---|
dom_element | Élément HTML du graphique |
event_name | Événement socket qui apporte le flux |
max_label_count | Nombre maximal d’étiquettes sur l’axe des x |
data | Données initiales |
L’exemple crée une série « Some Data » vide, puis un graphique ligne dans #chart, branché sur test_event, avec 8 étiquettes, un titre, une hauteur de 250 et deux couleurs.
Côté Python, un travail planifié peut publier le point. La source indique de passer par les hooks :
data = {"label": 1, "points": [10]}
frappe.publish_realtime("test_event", data)label est l’étiquette ajoutée au graphique. points est le tableau des ordonnées. Sa longueur dépend du nombre de séries.
Contrôler le flux
| Appel publié | Effet |
|---|---|
frappe.ui.RealtimeChart.start_updating() | Écoute l’événement et met le graphique à jour |
frappe.ui.RealtimeChart.stop_updating() | Cesse d’écouter l’événement d’initialisation |
frappe.ui.update_chart(label, data) | Ajoute à la main une étiquette et ses valeurs, par exemple frappe.ui.update_chart(2, [30]) |
Point d’attention
start_updating et stop_updating sont montrés sur frappe.ui.RealtimeChart, tandis que la mise à jour manuelle est frappe.ui.update_chart. Le nombre de valeurs dans points doit suivre le nombre de séries.