Consumption Box

Overview

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

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

Usage

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

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

Configuration Attributes

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

• 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

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

Behavior

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.