Ecocounter

A reusable React component library for displaying CO2 emissions data, calculations, and environmental impact metrics.

Features

• 📊 EmissionsDisplay Component - Display CO2 emissions with real-world equivalencies
• 🏭 SiteDetailsTable Component - Comprehensive table for site-level emissions data
• 🧮 CO2 Calculation Utilities - Helper functions for emissions calculations and conversions
• 🎨 Styled Components - Pre-built CSS styling included
• 📦 TypeScript Support - Full TypeScript definitions included
• ⚡ Tree-shakeable - Import only what you need

Installation

npm install ecocounter

or

yarn add ecocounter

Peer Dependencies

This package requires React 18+ and React DOM 18+:

npm install react@^18.0.0 react-dom@^18.0.0

Usage

EmissionsDisplay Component

Display CO2 emissions with real-world equivalencies (car kilometers, trees needed, flight trips):

import { EmissionsDisplay } from 'ecocounter';

function App() {
  return (
    <EmissionsDisplay
      emissionsValue={-1500} // Negative value indicates avoided emissions
      unit="Kg CO2eq"
      title="Total Avoided Emissions"
      showEquivalencies={true}
    />
  );
}

SiteDetailsTable Component

Display detailed site-level emissions data in an expandable table:

import { SiteDetailsTable, SiteRow } from 'ecocounter';

function App() {
  const siteData: SiteRow[] = [
    {
      id: 1,
      siteName: "Site A",
      location: "New York",
      status: "Active",
      emissions: -2500,
      yearlyData: [
        {
          year: 1,
          calendarYear: 2024,
          production: 500,
          use: 200,
          maintenance: 100,
          eol: 50,
          avoided: -3350
        }
      ]
    }
  ];

  return (
    <SiteDetailsTable 
      data={siteData}
      onExportClick={() => console.log('Export clicked')}
    />
  );
}

CO2 Calculation Utilities

Use utility functions for emissions calculations:

import {
  calculateCarKilometers,
  calculateTreesNeeded,
  calculateFlightTrips,
  formatCO2Value,
  calculateAllEquivalencies
} from 'ecocounter';

// Calculate car kilometers equivalent
const km = calculateCarKilometers(1000); // CO2 in kg

// Calculate trees needed
const trees = calculateTreesNeeded(1000);

// Calculate flight trips
const trips = calculateFlightTrips(1000);

// Format CO2 value
const formatted = formatCO2Value(1234.56); // "1,234.56 Kg CO2eq"

// Calculate all equivalencies at once
const equivalencies = calculateAllEquivalencies(1000);

Components

EmissionsDisplay

A component for displaying CO2 emissions with optional equivalency information.

Props:

• emissionsValue (number, required) - Total CO2eq emissions in kg
• unit (string, optional) - Unit for emissions (default: "Kg CO2eq")
• title (string, optional) - Title for the emissions panel
• equivalencies (object, optional) - Pre-calculated equivalency data
• showEquivalencies (boolean, optional) - Show/hide equivalency section
• className (string, optional) - Custom CSS class
• formatValue (function, optional) - Custom formatting function
• onMoreClick (function, optional) - Callback for "More" link

SiteDetailsTable

A comprehensive table component for displaying site-level emissions data with expandable rows.

Props:

• data (SiteRow[], required) - Array of site data objects
• onExportClick (function, optional) - Callback for export button click

SiteRow Interface:

interface SiteRow {
  id: number;
  siteName: string;
  location: string;
  status: 'Active' | 'Inactive';
  emissions: number;
  lifetime?: string;
  product?: string;
  yearlyData?: YearlyData[];
  avoidedMaterials?: AvoidedMaterials;
}

Utilities

calculateCarKilometers(co2Kg, fuelEfficiency?)

Calculates the equivalent kilometers traveled in a petrol car.

• co2Kg - CO2 emissions in kg
• fuelEfficiency - Fuel efficiency in km/liter (default: 15)

calculateTreesNeeded(co2Kg)

Calculates the number of trees needed to sequester the CO2.

• co2Kg - CO2 emissions in kg

calculateFlightTrips(co2Kg, routeDistance?)

Calculates the equivalent number of round-trip flights.

• co2Kg - CO2 emissions in kg
• routeDistance - Distance in km (default: 6200 km for Zurich-NYC)

formatCO2Value(value, unit?)

Formats a CO2 value with proper unit and thousand separators.

• value - CO2 value in kg
• unit - Unit string (default: "Kg CO2eq")

calculateAllEquivalencies(co2Kg, options?)

Calculates all equivalencies at once.

• co2Kg - CO2 emissions in kg
• options - Optional configuration object

Styling

The package includes pre-built CSS styles. Import them in your application:

import 'ecocounter/dist/index.css';

Or import component-specific styles:

// Styles are automatically included with components

TypeScript Support

This package is written in TypeScript and includes full type definitions. All exports are typed and can be imported with type safety.

Development

To build the package locally:

npm run build

To watch for changes during development:

npm run build:watch

License

MIT

Author

Your Name

Version

1.0.7

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and feature requests, please use the GitHub issue tracker.