# Consumption Box

### Overview <a href="#overview" id="overview"></a>

The `Consumption Box` component displays comprehensive fuel consumption, emission, and efficiency information for vehicles. It dynamically adapts the displayed information based on the vehicle's powertrain type (combustion, electric, or plug-in hybrid).

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the Consumption Box component in a standard HTML page:

```html
<div 
  data-carpose-component="consumption-box"
  data-api-key="your-api-key"
  data-vehicle-id="your-car-id"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                | Type   | Default | Description                                                                               |
| ------------------------ | ------ | ------- | ----------------------------------------------------------------------------------------- |
| `data-carpose-component` | string | -       | Identifies the component type, must be set to "consumption-box"                           |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching. |
| `data-vehicle-id`        | string | -       | ID of the car for which to display consumption information.                               |

### Features <a href="#features" id="features"></a>

* Dynamically displays different consumption information based on the vehicle type
* For combustion engine vehicles:
  * CO₂ class (combined)
  * Emission class information
  * Fuel consumption values
* For plug-in hybrid vehicles:
  * CO₂ class (combined, weighted combined, and with empty battery)
  * Emission class information
  * Fuel consumption with empty battery
  * Electric range
* For electric vehicles:
  * CO₂ class (combined)
  * Emission class information
  * Power consumption
  * Electric range
* Includes standardized legal disclaimer about consumption measurement methods

### Example <a href="#example" id="example"></a>

```html
<div 
  data-carpose-component="consumption-box"
  data-api-key="your-api-key"
  data-vehicle-id="550e8400-e29b-41d4-a716-446655440000"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Data Loading**:
   * On initialization, the component fetches the car details from the API using the provided car ID.
   * The component only renders if the car has consumption data available.
2. **Dynamic Content**:
   * The component determines the powertrain type (combustion, electric, or plug-in hybrid) of the vehicle.
   * Based on the powertrain type, it displays the appropriate consumption information components.
   * Each sub-component fetches its specific data as needed.
3. **Component Structure**:
   * The component displays a header "Detaillierte Verbrauchswerte" (Detailed Consumption Values).
   * It then renders different combinations of sub-components based on the vehicle type.
   * A standardized legal disclaimer is displayed at the bottom with information about the measurement methods.
4. **Responsive Behavior**:
   * The component adapts to different screen sizes.
   * On larger screens, information is displayed in a multi-column layout.
   * On smaller screens, information stacks vertically for better readability.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carpose.de/components/consumption-box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.