Que fait kibana-vega ?
Créez des visualisations Vega et Vega-Lite avec des sources de données ES|QL dans Kibana. Utilisez-le pour construire des graphiques personnalisés, des tableaux de bord ou des dispositions de panneaux programmatiques au-delà des graphiques Lens standard.
Introduction
Ce skill fournit tout le nécessaire pour créer des visualisations Vega et Vega-Lite dans Kibana en utilisant des sources de données ES|QL. Il est idéal pour les développeurs et analystes qui ont besoin de flexibilité maximale dans la création de graphiques, au-delà des capacités de Lens. Avec ce skill, vous pouvez contrôler finement chaque aspect de la visualisation, depuis les données jusqu'à l'interaction utilisateur.
Fonctionnalités
- Grammaire graphique complète : Utilisez Vega ou Vega-Lite pour créer n'importe quel type de graphique.
- Sources de données ES|QL : Interrogez directement vos données Elasticsearch avec ES|QL.
- Personnalisation avancée : Contrôlez les couleurs, les échelles, les axes, les légendes et les interactions.
- Compatibilité multiplateforme : Fonctionne avec Claude Code, Cursor et Codex.
- Linting et formatage : Profils de linting et de formatage intégrés pour maintenir la qualité du code.
Prérequis
- Kibana 8.12+
- Elasticsearch 8.12+
- Accès à l'interface de visualisation Vega dans Kibana (Dashboard > Visualizations)
Installation
git clone https://github.com/elastic/kibana-vega.git
cd kibana-vega
npm install
Utilisation
Exemple simple : Graphique en barres avec ES|QL
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": {
"%context%": true,
"%timefield%": "@timestamp",
"index": "kibana_sample_data_logs",
"body": {
"query": "FROM kibana_sample_data_logs | LIMIT 100"
}
}
},
"mark": "bar",
"encoding": {
"x": {"field": "@timestamp", "type": "temporal"},
"y": {"aggregate": "count", "type": "quantitative"}
}
}
Exemple avancé : Graphique en lignes avec tooltip et interactions
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": {
"%context%": true,
"%timefield%": "@timestamp",
"index": "kibana_sample_data_logs",
"body": {
"query": "FROM kibana_sample_data_logs | STATS avg(response) BY @timestamp"
}
}
},
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {"field": "@timestamp", "type": "temporal"},
"y": {"field": "avg(response)", "type": "quantitative"},
"tooltip": [
{"field": "@timestamp", "type": "temporal"},
{"field": "avg(response)", "type": "quantitative"}
]
},
"selection": {
"grid": {"type": "interval", "bind": "scales"}
}
}
Configuration
Le skill peut être configuré avec les paramètres suivants dans votre fichier .cursorrules ou claude.md :
{
"vega": {
"lint": true,
"format": true,
"strict": false
}
}
Contribution
Les contributions sont les bienvenues ! Consultez le fichier CONTRIBUTING.md pour plus d'informations.
Licence
Ce projet est sous licence Apache 2.0.