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:
Configuration Attributes
The component reads configuration from data attributes on the provided element:
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-car-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
Behavior
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.
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.
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.
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.
Integration with Other Components
The Consumption Box component integrates multiple sub-components to display specific consumption metrics:
CO2 Class Label: Displays the vehicle's CO2 efficiency class
Class And Emission: Shows emission class information
Fuel Consumption: Displays detailed fuel consumption values for combustion engines
Fuel Consumption Empty Battery: Shows fuel consumption for plug-in hybrids when the battery is depleted
Power Consumption: Displays electricity consumption for electric vehicles
Electric Range: Shows the electric driving range for electric and plug-in hybrid vehicles
This component is typically used in the Car Detail view to provide comprehensive and legally required consumption information for potential buyers.
Last updated