> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metronome.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Créer des dashboards client basés sur l'API
Ce cas d'usage présente des exemples montrant comment créer un dashboard client basé sur l'API.
Metronome s'intègre à votre produit principal en offrant une visibilité sur les coûts aux clients finaux. Cela les aide à optimiser leurs modèles d'utilisation et à tirer le maximum de valeur de votre produit. Avec vos offres basées sur l'usage, les clients attendent de la transparence sur leur consommation et les coûts associés. Les API et les fonctionnalités d'export de données de Metronome s'intègrent à votre produit, vous permettant de créer des dashboards utilisateur final qui fournissent cette visibilité essentielle.
## Montrer aux clients les données qu'ils souhaitent voir
Les dashboards client fournissent des informations essentielles sur la consommation des ressources et la gestion des coûts : une interface critique entre le client et votre produit. Les clients veulent comprendre leurs modèles d'utilisation afin de prendre des décisions éclairées concernant leur usage et avoir confiance dans la précision du metering.
Les excellents dashboards client qui ravissent les clients partagent souvent des caractéristiques similaires :
* **Visibilité granulaire sur l'utilisation** Les clients souhaitent décomposer leur utilisation par produit ou fonctionnalité pour mieux comprendre leurs principaux centres de coûts et réaffecter l'utilisation si nécessaire.
* **Visibilité à jour des dépenses** Les clients veulent voir combien ils ont déjà dépensé pour leur période de facturation actuelle avant d'être facturés, ce qui évite les surprises à la fin de la période de facturation.
* **Suivi des commitments** Les clients veulent connaître le solde disponible de leurs commits actuels pour planifier leur utilisation et acheter de manière proactive de nouveaux commits.
* **Renforcer la confiance** Les clients attendent une grande précision dans le metering de leur utilisation. Fournir de la transparence sur le processus de tarification en temps réel renforce la confiance que cette attente est satisfaite.
Vous pouvez atteindre tous les résultats ci-dessus pour vos dashboards client en construisant directement à partir de l'API Metronome. Metronome propose également des dashboards embarquables prêts à l'emploi qui affichent l'utilisation et les factures d'un client.
## Utiliser les API Metronome pour alimenter des dashboards orientés client
Metronome propose plusieurs points de terminaison API qui fournissent des données utiles pour alimenter des dashboards que vos clients veulent voir. Cette section explore quelques-uns de ces points de terminaison.
Pour vous aider à concevoir votre dashboard client avec les API Metronome, contactez votre représentant Metronome.
### Bonne pratique de modèle d'intégration backend
Lorsque vous intégrez les données Metronome dans votre application pour les exposer à vos utilisateurs finaux, vous devez vous assurer que toutes les API Metronome sont appelées depuis l'un de vos services backend afin de renvoyer les données à votre application frontend. Implémentez toute l'authentification auprès de Metronome à l'aide d'un [token](/fr/api-reference/authentication) stocké de manière sécurisée et accessible à votre service backend. N'exposez jamais les tokens d'API Metronome aux utilisateurs et ne les utilisez pas sur les clients frontend.
```
Votre application frontend <--> Votre service backend <--> API Metronome
```
### Afficher une visibilité granulaire sur l'utilisation
Une façon d'améliorer l'expérience de vos clients est de leur fournir une visibilité sur leur utilisation en temps réel. Metronome peut découper et filtrer cette utilisation en fonction de n'importe laquelle de vos propriétés d'événement, permettant une analyse très granulaire. Cette transparence leur permet de tirer des informations sur leurs modèles d'utilisation, jusque-là inconnues d'eux, et d'agir. Par exemple, en consultant leur utilisation en milieu de mois, un client peut se rendre compte que certains serveurs qu'il a lancés consomment une quantité disproportionnée de mémoire par rapport aux mois précédents. Cet aperçu leur permet d'évaluer leurs propres processus internes et d'identifier les optimisations potentielles.
Pour explorer comment créer cela, considérez l'exemple suivant : créez un graphique à barres qui filtre l'utilisation d'une métrique particulière au fil du temps.
Le [point de terminaison usage](/fr/api-reference/usage/get-batched-usage-data) de Metronome fournit les bases pour donner aux utilisateurs une visibilité sur l'utilisation de chacune de leurs billable metrics au fil du temps.
Par exemple, cette requête affiche l'utilisation quotidienne de la billable metric `CPU hours` sur le mois d'octobre 2024, décomposée par région :
```bash theme={null}
curl https://api.metronome.com/v1/usage \
-H "Authorization: Bearer " \
-H "Content-Type: application/json" \
-d '{
"customer_id": "140a7113-76c4-4ce2-9379-29fa3375d23c",
"billable_metric_id": "f3b17844-a98d-413a-b310-5be1df72213d",
"starting_on": "2024-10-01T00:00:00Z",
"ending_before": "2024-11-01T00:00:00Z",
"window_size": "day",
"group_by": {
"key": "region"
}
}'
```
Un exemple de réponse à cette requête ressemble à :
```json theme={null}
{
"data": [
{
"value": 37,
"group_key": "region",
"group_value": "ap-south-1",
"starting_on": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-10-02T00:00:00+00:00"
},
{
"value": 24,
"group_key": "region",
"group_value": "us-east-1",
"starting_on": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-10-02T00:00:00+00:00"
},
{
"value": 12,
"group_key": "region",
"group_value": "us-east-2",
"starting_on": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-10-02T00:00:00+00:00"
},
{
"value": 91,
"group_key": "region",
"group_value": "ap-south-1",
"starting_on": "2024-10-02T00:00:00+00:00",
"ending_before": "2024-10-03T00:00:00+00:00"
}
],
"next_page": null
}
```
Utilisez ce pseudocode pour rassembler les données du point de terminaison usage de Metronome dans votre backend et les présenter aux utilisateurs sous forme d'un graphique à barres empilées dans votre frontend.
```python Backend theme={null}
# Step 1: Extract the data from the API response
data = metronome_api_response['data']
# Step 2: Create a dictionary to store the processed data
processed_data = {}
# Step 3: Iterate through the data and organize it by date and region
for item in data:
date = item['starting_on']
region = item['group_value']
value = item['value']
if date not in processed_data:
processed_data[date] = {}
processed_data[date][region] = value
# Step 4: Create a list of unique regions and sort them
regions = sorted(set(item['group_value'] for item in data))
# Step 5: Prepare the data for charting
chart_data = []
for date in sorted(processed_data.keys()):
data_point = {'date': date}
cumulative_value = 0
for region in regions:
value = processed_data[date].get(region, 0)
data_point[f"{region}_start"] = cumulative_value
cumulative_value += value
data_point[f"{region}_end"] = cumulative_value
chart_data.append(data_point)
# Return chart data for frontend chart library usage
return chart_data
```
```javascript Frontend theme={null}
# Step 1: Fetch billable metric chart data from your backend (from above)
chart_data = fetch_from_backend('/api/customer_usage/:customer_id')
# Step 2: Use the chart_data to create your stacked bar chart
# The exact implementation depends on your charting library
# Example using a hypothetical charting library:
create_stacked_bar_chart(
data=chart_data,
x_axis='date',
y_axis='value',
stacks=regions,
colors=['blue', 'red', 'green'], # Assign colors to each region
title='Usage by Region Over Time'
)
```
### Afficher le suivi des commitments
Dans Metronome, vous pouvez consulter un registre de chaque commit et credit. Cela offre une visibilité sur le solde actuel et les événements qui y ont contribué. Vous pouvez imaginer que vos clients finaux bénéficieraient également de cette visibilité pour comprendre leur solde restant sur un credit ou un commit spécifique. Cela peut aider à éclairer leur prise de décision, comme l'achat d'un nouveau commit ou la limitation de leur utilisation pour rester dans leur allocation restante.
Cet exemple de tableau montre comment vous pourriez afficher ces informations à votre client :
Utilisez le point de terminaison Metronome [`/listBalances`](/fr/api-reference/credits-and-commits/list-balances) pour comprendre l'état actuel du solde d'un client à travers les commits et les credits.
Par exemple, considérez un client qui a :
* Reçu un prepaid commit de 100 \$, commençant le 1er septembre 2024.
* Reçu un free reward credit de 5 \$, commençant le 1er octobre 2024. Le credit gratuit doit être utilisé en totalité avant que le commit prépayé restant ne soit consommé.
* Dépensé 65 \$ au cours du mois de septembre.
* Dépensé 20 \$ au cours du mois d'octobre.
Dans ce scénario, il reste les soldes suivants au client :
* Reward credit : 0 $restant, 5$ utilisés
* Prepaid commit : 20 $restants, 80$ utilisés
* Solde global : 20 $restants, 85$ utilisés
Utilisez le point de terminaison `/listBalances` pour récupérer en une seule réponse les informations sur le prepaid commit et le bonus credit à partir du 1er septembre. Comme la requête inclut le paramètre `include_balance: true`, pour chaque commit ou credit, un champ `balance` est renvoyé reflétant le montant de commit ou credit disponible à utiliser maintenant. Notez que tout segment de commit ou de credit à venir et non encore démarré n'est pas inclus dans ce solde car il n'est pas disponible à l'utilisation.
```bash theme={null}
curl -X POST https://api.metronome.com/v1/contracts/customerBalances/list \
-H "Authorization: Bearer " \
-H "Content-Type: application/json" \
-d '{
"customer_id": "23f894af-c350-45df-bb3e-3b134e352109",
"include_ledgers": true,
"include_balance": true,
"starting_at": "2024-09-01T00:00:00Z",
"include_contract_balances": true
}'
```
```json theme={null}
{
"data": [
{
"id": "b8bc055d-2c0f-4629-b9e4-c87e0b59da1e",
"contract": {
"id": "8b6cb03d-c9c7-4230-9656-ed8e106bc7bd"
},
"product": {
"id": "d72716a4-1dcc-4e91-8ad4-a1be29c917a7",
"name": "Prepaid Credits"
},
"priority": 100,
"applicable_contract_ids": ["8b6cb03d-c9c7-4230-9656-ed8e106bc7bd"],
"access_schedule": {
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"schedule_items": [
{
"id": "e20d07a1-63c0-4fef-ac23-50f7b710cf3e",
"amount": 10000,
"starting_at": "2024-09-01T00:00:00+00:00",
"ending_before": "2025-09-01T00:00:00+00:00"
}
]
},
"balance": 2000,
"ledger": [
{
"amount": 10000,
"timestamp": "2024-09-01T00:00:00+00:00",
"segment_id": "e20d07a1-63c0-4fef-ac23-50f7b710cf3e",
"type": "PREPAID_COMMIT_SEGMENT_START"
},
{
"amount": -6500,
"timestamp": "2024-10-01T00:00:00+00:00",
"segment_id": "e20d07a1-63c0-4fef-ac23-50f7b710cf3e",
"type": "PREPAID_COMMIT_AUTOMATED_INVOICE_DEDUCTION",
"invoice_id": "3f13f349-c1a6-5e98-81ce-fd3743904e6f"
},
{
"amount": -1500,
"timestamp": "2024-11-01T00:00:00+00:00",
"segment_id": "e20d07a1-63c0-4fef-ac23-50f7b710cf3e",
"type": "PREPAID_COMMIT_AUTOMATED_INVOICE_DEDUCTION",
"invoice_id": "832ed401-17ed-56dd-87c4-b5684a52b26c"
}
],
"custom_fields": {},
"type": "PREPAID",
"invoice_schedule": {
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"schedule_items": [
{
"id": "a528d105-4a7c-4a93-b630-56ccf8a675d5",
"invoice_id": "0267436e-3c4d-5ee4-9369-5618f27229a5",
"amount": 10000,
"unit_price": 10000,
"quantity": 1,
"timestamp": "2024-09-01T00:00:00+00:00"
}
]
}
},
{
"id": "c0522458-353f-4a39-bad2-a315ff2eed88",
"contract": {
"id": "8b6cb03d-c9c7-4230-9656-ed8e106bc7bd"
},
"product": {
"id": "aa52ce3b-f896-4f5c-b1ec-a71dff8ebfeb",
"name": "Reward credit"
},
"priority": 1,
"applicable_contract_ids": ["8b6cb03d-c9c7-4230-9656-ed8e106bc7bd"],
"access_schedule": {
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"schedule_items": [
{
"id": "3b4be61d-26d0-46a5-acb5-c55d5cce0d9c",
"amount": 500,
"starting_at": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-11-01T00:00:00+00:00"
}
]
},
"balance": 0,
"ledger": [
{
"amount": 500,
"timestamp": "2024-10-01T00:00:00+00:00",
"segment_id": "3b4be61d-26d0-46a5-acb5-c55d5cce0d9c",
"type": "CREDIT_SEGMENT_START"
},
{
"amount": -500,
"timestamp": "2024-11-01T00:00:00+00:00",
"segment_id": "3b4be61d-26d0-46a5-acb5-c55d5cce0d9c",
"type": "CREDIT_AUTOMATED_INVOICE_DEDUCTION",
"invoice_id": "832ed401-17ed-56dd-87c4-b5684a52b26c"
}
],
"custom_fields": {},
"type": "CREDIT"
}
],
"next_page": null
}
```
Utilisez ce pseudocode pour rassembler les données du point de terminaison `/listBalances` de Metronome dans votre backend et les présenter aux utilisateurs finaux sous forme d'un graphique à barres empilées dans votre frontend.
```python Backend theme={null}
# Step 1: Extract the data from the Metronome API response
data = metronome_api_response['data']
# Step 2: Initialize variables for overall totals
total_granted = 0
total_used = 0
# Step 3: Process each grant
processed_grants = []
for item in data:
grant_id = item['id']
grant_type = item['type']
product_name = item['product']['name']
# Calculate total granted for this item
granted = sum(schedule_item['amount'] for schedule_item in item['access_schedule']['schedule_items'])
# Get remaining amount
remaining = item['balance']
# Calculate used amount
used = granted - remaining
# Add to overall totals
total_granted += granted
total_used += used
# Add grant info to list
processed_grants.append({
'id': grant_id,
'type': grant_type,
'product_name': product_name,
'granted': granted,
'used': used,
'remaining': remaining
})
# Step 4: Calculate total remaining
total_remaining = total_granted - total_used
# Step 5: Prepare result
result = {
'grants': processed_grants,
'total': {
'granted': total_granted,
'used': total_used,
'remaining': total_remaining
}
}
# Step 6: Return processed data for frontend use
return result
```
```javascript Frontend theme={null}
# Step 1: Fetch processed credit and commit data from backend
processed_data = fetch_from_backend('/api/credit_commit_data/:customer_id')
# Step 2: Display individual grants
for grant in processed_data['grants']:
display_grant_info(grant)
# Step 3: Display overall totals
display_overall_totals(processed_data['total'])
```
De plus, vous voudrez peut-être afficher un total cumulé du solde restant à votre client sur une page de vue d'ensemble générale, sans le détail du registre. Metronome offre un moyen ergonomique de récupérer un solde restant total dans ces scénarios.
Par exemple, vous avez peut-être entendu des retours selon lesquels les clients veulent comprendre leur solde restant sur la page d'accueil de votre application, sans avoir besoin de cliquer sur la vue de facturation détaillée pour comprendre leurs ventilations détaillées de commits et credits. Dans ce cas, vous pouvez effectuer un appel direct au point de terminaison [`/getNetBalance`](https://docs.metronome.com/api-reference/credits-and-commits/get-the-net-balance-of-a-customer). L'appel suivant renverrait le solde en temps réel sans avoir à analyser les détails de chaque solde.
```bash theme={null}
curl -X POST https://api.metronome.com/v1/contracts/customerBalances/getNetBalance \
-H "Authorization: Bearer " \
-H "Content-Type: application/json" \
-d '{
"customer_id": "23f894af-c350-45df-bb3e-3b134e352109"
}'
```
### Afficher les dépenses à jour
Bien que le dashboard d'utilisation aide à obtenir des informations granulaires sur les modèles d'utilisation, cela ne raconte souvent pas toute l'histoire. Vos clients veulent également comprendre les coûts associés à leur utilisation. Cela les aide à contextualiser leur analyse en comprenant les économies de coûts potentielles associées à d'éventuels changements de processus ou d'architecture. De plus, cela élimine le risque de surprise à la fin du mois lors de la réception de leur facture, ce qui peut atténuer le risque de litiges potentiels.
Pour exprimer le coût d'un client, créez un dashboard à l'intérieur de votre produit qui affiche les dépenses au fil du temps, segmentées par certaines propriétés. Par exemple, les dépenses par région au fil du temps :
Utilisez le [point de terminaison invoice breakdown](/fr/api-reference/invoices/list-invoice-breakdowns) de Metronome pour visualiser les dépenses sur une fenêtre temporelle donnée. Le point de terminaison invoice breakdown est renvoyé pour chaque line item d'une facture client par tranches horaires ou quotidiennes.
Si des commits ou des credits sont consommés sur certains line items pendant la période, ils s'affichent sous forme de line items distincts pour marquer les déductions correspondant au montant des credits utilisés.
Par exemple, cette requête génère les dépenses quotidiennes d'un client sur tous les line items pour le mois d'octobre 2024. Dans cet exemple, un client ne consomme pas de credits ou commits et paie uniquement en arrears.
```bash theme={null}
curl https://api.metronome.com/v1/customers/d7abd0cd-4ae9-4db7-8676-e986a4ebd8dc/invoices/breakdowns?starting_on=2024-10-01T00%3A00%3A00Z&ending_before=2024-11-01T00%3A00%3A00Z&window_size=day \
-H "Authorization: Bearer " \
-H "Content-Type: application/json"
```
```json theme={null}
{
"data": [
{
"id": "c5b9aab9-377b-517d-a634-924e35e7d110",
"issued_at": "2024-11-02T00:00:00+00:00",
"start_timestamp": "2024-10-01T00:00:00+00:00",
"end_timestamp": "2024-11-01T00:00:00+00:00",
"customer_id": "140a7113-76c4-4ce2-9379-29fa3375d23c",
"customer_custom_fields": {},
"type": "USAGE",
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"status": "DRAFT",
"total": 7300,
"external_invoice": null,
"contract_id": "28d9bc16-7c56-4d4a-a2b9-b4c3ede34eeb",
"contract_custom_fields": {},
"line_items": [
{
"product_id": "d111fa1e-861e-48bb-82a6-3924d6cf0636",
"product_type": "UsageProductListItem",
"product_custom_fields": {},
"name": "My Product",
"total": 3700,
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"starting_at": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-11-01T00:00:00+00:00",
"unit_price": 100,
"quantity": 37,
"presentation_group_values": {
"region": "ap-south-1"
}
},
{
"product_id": "d111fa1e-861e-48bb-82a6-3924d6cf0636",
"product_type": "UsageProductListItem",
"product_custom_fields": {},
"name": "My Product",
"total": 2400,
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"starting_at": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-11-01T00:00:00+00:00",
"unit_price": 100,
"quantity": 24,
"presentation_group_values": {
"region": "us-east-1"
}
},
{
"product_id": "d111fa1e-861e-48bb-82a6-3924d6cf0636",
"product_type": "UsageProductListItem",
"product_custom_fields": {},
"name": "My Product",
"total": 1200,
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"starting_at": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-11-01T00:00:00+00:00",
"unit_price": 100,
"quantity": 12,
"presentation_group_values": {
"region": "us-east-2"
}
}
],
"custom_fields": {},
"billable_status": "billable",
"breakdown_start_timestamp": "2024-10-01T00:00:00.000Z",
"breakdown_end_timestamp": "2024-10-02T00:00:00.000Z"
}
],
"next_page": null
}
```
Si vous mettez à jour le scénario ci-dessus pour montrer le client consommant un prepaid commit de 200 \$, vous voyez les déductions du commit représentées dans le breakdown en plus des line items d'utilisation. Utilisez ces champs si vous souhaitez afficher la consommation des credits et commits au fil du temps.
```json theme={null}
{
"data": [
{
"id": "5d960878-2553-5290-bddd-8def5f42532a",
"issued_at": "2024-11-02T00:00:00+00:00",
"start_timestamp": "2024-10-01T00:00:00+00:00",
"end_timestamp": "2024-11-01T00:00:00+00:00",
"customer_id": "140a7113-76c4-4ce2-9379-29fa3375d23c",
"customer_custom_fields": {},
"type": "USAGE",
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"status": "DRAFT",
"total": 0,
"external_invoice": null,
"contract_id": "95a390e3-b5c6-4264-8c7a-3583ec574c42",
"contract_custom_fields": {},
"line_items": [
{
"product_id": "d111fa1e-861e-48bb-82a6-3924d6cf0636",
"product_type": "UsageProductListItem",
"product_custom_fields": {},
"name": "My Product",
"total": 3700,
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"starting_at": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-11-01T00:00:00+00:00",
"commit_id": "f3243ab9-dd22-4a6e-b4c3-7b2a0f8e8732",
"commit_segment_id": "ede54bc6-0c23-4d0b-a096-d6c79f38ff31",
"commit_type": "PrepaidCommit",
"commit_custom_fields": {},
"unit_price": 100,
"quantity": 37,
"presentation_group_values": {
"region": "ap-south-1"
}
},
{
"product_id": "d111fa1e-861e-48bb-82a6-3924d6cf0636",
"product_type": "UsageProductListItem",
"product_custom_fields": {},
"name": "Prepaid Credits applied",
"total": -3700,
"credit_type": {
"id": "2714e483-4ff1-48e4-9e25-ac732e8f24f2",
"name": "USD (cents)"
},
"starting_at": "2024-10-01T00:00:00+00:00",
"ending_before": "2024-11-01T00:00:00+00:00",
"commit_id": "f3243ab9-dd22-4a6e-b4c3-7b2a0f8e8732",
"commit_segment_id": "ede54bc6-0c23-4d0b-a096-d6c79f38ff31",
"commit_type": "PrepaidCommit",
"commit_custom_fields": {}
}
],
"custom_fields": {},
"billable_status": "billable",
"breakdown_start_timestamp": "2024-10-01T00:00:00.000Z",
"breakdown_end_timestamp": "2024-10-02T00:00:00.000Z"
}
],
"next_page": null
}
```
Utilisez ce pseudocode pour rassembler les données du point de terminaison invoice breakdown de Metronome dans votre backend et les présenter aux utilisateurs sous forme d'un graphique à barres empilées dans votre frontend.
```python Backend theme={null}
# Step 1: Extract the data from the Metronome API response
data = metronome_api_response['data']
# Step 2: Create a dictionary to store the processed data
processed_data = {}
# Step 3: Iterate through the data and organize it by date and region
for item in data:
date = item['breakdown_start_timestamp']
for line_item in item['line_items']:
region = line_item['presentation_group_values']['region']
value = line_item['total'] / 100 # Convert cents to dollars
if date not in processed_data:
processed_data[date] = {}
if region not in processed_data[date]:
processed_data[date][region] = 0
processed_data[date][region] += value
# Step 4: Create a list of unique regions and sort them
regions = sorted(set(region for date_data in processed_data.values() for region in date_data.keys()))
# Step 5: Prepare the data for charting
chart_data = []
for date in sorted(processed_data.keys()):
data_point = {'date': date}
for region in regions:
data_point[region] = processed_data[date].get(region, 0)
chart_data.append(data_point)
# Return chart data for frontend chart library usage
return chart_data
```
```javascript Frontend theme={null}
# Step 1: Fetch spend over time chart data from your backend
chart_data = fetch_from_backend('/api/customer_spend/:customer_id')
# Step 2: Extract unique regions from the chart data
regions = list(set(key.split('_')[0] for key in chart_data[0].keys() if key.endswith('_start')))
# Step 3: Use the chart_data to create your stacked bar chart
# The exact implementation depends on your charting library
# Example using Chart.js:
create_stacked_bar_chart(
data=chart_data,
x_axis='date',
y_axis='Spend (USD)',
stacks=regions,
colors=['#4e79a7', '#f28e2c', '#e15759'], # Assign colors to each region
title='Spend by Region Over Time'
)
```
## Dashboards embarquables
Partagez les factures Metronome et les données d'utilisation avec vos clients via des dashboards embarquables personnalisables.
### Dashboard Invoice
Le dashboard Invoice permet à vos clients de consulter leurs factures actuelles et passées (brouillon, finalisée et annulée), jusqu'à 90 jours d'ancienneté. Pour les clients utilisant le produit de facturation de Metronome, vos clients peuvent également tenter manuellement le paiement des factures impayées.
Le dashboard Invoice permet d'afficher ou de masquer les line items de la facture sans utilisation. Pour contrôler cela, fournissez le tableau facultatif `dashboard_options` avec une clé `show_zero_usage_line_items` et une valeur `true` ou `false`. La valeur par défaut est `false`.
### Dashboard Usage
Le dashboard Usage affiche les métriques d'utilisation attachées au contrat actuel d'un client pour les 30, 60 ou 90 derniers jours.
### Dashboard Commits and credits
Le dashboard Commits and credits permet à vos clients de consulter leurs attributions actuelles et passées de commits et credits, notamment :
* Les soldes restants et historiques
* L'historique des attributions et des déductions
* Les access schedules et les dates d'expiration
### Embarquer un dashboard
Utilisez l'API Metronome pour récupérer une URL de dashboard embarquable qui peut être affichée via un iframe dans votre interface de facturation interne.
1. Créez un [token d'API](/fr/api-reference/authentication) (si vous n'en avez pas déjà un)
2. Utilisez le point de terminaison [`/dashboards/getEmbeddableUrl`](/fr/api-reference/customers/get-an-embeddable-customer-dashboard) pour transmettre le `customer_id` et spécifier le dashboard que vous souhaitez afficher.
### Remplacer la palette de couleurs
Le point de terminaison `/dashboards/getEmbeddableUrl` prend en charge un tableau `color_overrides` pour remplacer la palette de couleurs et correspondre à votre design. Voir la [liste complète des couleurs](/fr/api-reference/customers/get-an-embeddable-customer-dashboard).
L'image montre où Metronome utilise chaque couleur nommée. Par exemple, `gray_dark` s'applique au texte standard ; `primary_medium` s'applique au texte sélectionné.
