Data Visualization
Générer des calendriers heatmaps style GitHub pour visualiser les modèles d'activité au fil du temps, parfait pour suivre les contributions annuelles, habitudes ou métriques
Appelez cet outil depuis votre code en trois langages.
curl -X POST 'https://api.elysiatools.com/fr/api/tools/calendar-heatmap' \
-H 'Content-Type: application/json' \
-d '{"chartData":"JSON format:\n[{"date": "2024-01-01", "value": 10, "label": "Commits"},\n{"date": "2024-01-02", "value": 15, "label": "Commits"}]\n\nor text format:\n2024-01-01|10|Commits\n2024-01-02|15|Commits","chartTitle":"Entrez le titre du graphique...","colorScheme":"green","year":0,"startColor":"#c6e48b","endColor":"#239a3b","emptyColor":"#ebedf0","borderColor":"#ffffff","cellSize":"12","cellSpacing":"2","animationDuration":"800","backgroundColor":"#ffffff","showValues":false,"showLegend":true,"showMonthLabels":true,"showDayLabels":true,"showStats":true,"showTooltip":true}'Envoyez une requête POST avec vos entrées en JSON. Les paramètres de type fichier nécessitent un upload préalable.
POST https://api.elysiatools.com/fr/api/tools/calendar-heatmap| Nom | Type | Requis | Description |
|---|---|---|---|
| chartData | textarea | Oui | Données d'activité pour le calendrier heatmap. Format: date|valeur|étiquette (format AAAA-MM-JJ) |
| chartTitle | text | Non | Titre qui sera affiché au-dessus du heatmap |
| colorScheme | select | Non | — |
| year | number | Non | Année pour le calendrier (laisser vide pour année actuelle) |
| startColor | color | Non | Couleur de début pour schéma de couleur personnalisé (nécessite sélection de couleurs personnalisées) |
| endColor | color | Non | Couleur de fin pour schéma de couleur personnalisé (nécessite sélection de couleurs personnalisées) |
| emptyColor | color | Non | Couleur pour les jours sans activité |
| borderColor | color | Non | Couleur de bordure pour les cellules |
| cellSize | number | Non | Taille de chaque cellule de jour en pixels (8-20) |
| cellSpacing | number | Non | Espacement entre les cellules en pixels (1-5) |
| animationDuration | number | Non | Durée de l'animation en millisecondes |
| backgroundColor | color | Non | Couleur de fond pour le conteneur du graphique |
| showValues | checkbox | Non | Afficher les valeurs à l'intérieur des cellules (fonctionne mieux avec des cellules plus grandes) |
| showLegend | checkbox | Non | Afficher la légende d'intensité de couleur |
| showMonthLabels | checkbox | Non | Afficher les noms des mois au-dessus du calendrier |
| showDayLabels | checkbox | Non | Afficher les étiquettes de jour de la semaine |
| showStats | checkbox | Non | Afficher les statistiques d'activité sous le graphique |
| showTooltip | checkbox | Non | Activer les info-bulles au survol pour les cellules |
Résultat HTML
{
"result": "<div>Processed HTML content</div>",
"error": "Error message (optional)",
"message": "Notification message (optional)",
"metadata": {
"key": "value"
}
}Ajoutez cet outil à votre serveur Model Context Protocol pour que les agents IA puissent le lister et l'appeler.
Ajoutez ce bloc à la configuration de votre client MCP :
{
"mcpServers": {
"elysiatools-calendar-heatmap": {
"name": "calendar-heatmap",
"description": "Générer des calendriers heatmaps style GitHub pour visualiser les modèles d'activité au fil du temps, parfait pour suivre les contributions annuelles, habitudes ou métriques",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=calendar-heatmap",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}Après connexion au point d'accès SSE, listez les outils exposés :
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}Appelez l'outil par son id ; les arguments sont construits à partir de ses paramètres :
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "calendar-heatmap",
"arguments": {
"chartData": "JSON format:\n[{"date": "2024-01-01", "value": 10, "label": "Commits"},\n{"date": "2024-01-02", "value": 15, "label": "Commits"}]\n\nor text format:\n2024-01-01|10|Commits\n2024-01-02|15|Commits",
"chartTitle": "Entrez le titre du graphique...",
"colorScheme": "green",
"year": 0,
"startColor": "#c6e48b",
"endColor": "#239a3b",
"emptyColor": "#ebedf0",
"borderColor": "#ffffff",
"cellSize": "12",
"cellSpacing": "2",
"animationDuration": "800",
"backgroundColor": "#ffffff",
"showValues": false,
"showLegend": true,
"showMonthLabels": true,
"showDayLabels": true,
"showStats": true,
"showTooltip": true
}
}
}Des questions ou un problème ? Contactez [email protected]