CO2 Class Label

Overview

The CO2 Class Label component displays a vehicle's CO2 efficiency classification using a standardized energy label. It fetches the CO2 class data from the API and presents it with an explanatory headline and description.

Installation

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

Usage

To use the CO2 Class Label component in a standard HTML page:

<div 
  data-carpose-component="co2-class-label"
  data-api-key="your-api-key"
  data-car-id="your-car-id"
  data-type="wltp"
  data-headline="CO2-Effizienzklasse"
></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 "co2-class-label"
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 the CO2 class.
data-type	string	-	Type of CO2 classification to display (e.g., "wltp", "nedc").
data-headline	string	"CO2-Effizienzklasse"	Headline text displayed above the efficiency label.

Features

• Displays a vehicle's CO2 efficiency class (A+, A, B, C, D, E, F, G)

• Shows explanatory text about how the classification is determined

• Fetches data dynamically from the Carpose API

• Responsive layout that adapts to different screen sizes

Example

<!-- WLTP CO2 Efficiency Class -->
<div 
  data-carpose-component="co2-class-label"
  data-api-key="your-api-key"
  data-car-id="550e8400-e29b-41d4-a716-446655440000"
  data-type="wltp"
  data-headline="CO2-Effizienzklasse (WLTP)"
></div>

<!-- NEDC CO2 Efficiency Class -->
<div 
  data-carpose-component="co2-class-label"
  data-api-key="your-api-key"
  data-car-id="550e8400-e29b-41d4-a716-446655440000"
  data-type="nedc"
  data-headline="CO2-Effizienzklasse (NEDC)"
></div>

Behavior

1. Data Loading:

   • On initialization, the component fetches the CO2 class data from the API using the provided car ID and type.

   • If the specified type doesn't exist in the API response, an error is logged to the console.

   • The component doesn't render anything if the CO2 class data cannot be retrieved.

2. Display:

   • When data is successfully loaded, the component displays:

     • The headline specified in the data-headline attribute

     • A standard explanatory text about how the CO2 class is determined

     • The energy efficiency label (A+ to G) based on the fetched data

3. Responsive Behavior:

   • The component adapts to different screen sizes

   • On larger screens, it typically occupies one-third of the available width

   • On smaller screens, it takes up half or full width depending on the viewport size

Integration with Other Components

The CO2 Class Label component is typically used in the Car Detail view, often in conjunction with the ConsumptionBox component, to display environmental information about the vehicle. It provides important efficiency information that is required by regulations in many countries when selling vehicles.