Blue Chestnut Solar Expert

A comprehensive solar calculator and planning tool built with Stencil web components for analyzing solar energy potential and system optimization.

Overview

Blue Chestnut Solar Expert is a sophisticated solar energy calculation and visualization library that provides web components for:

• Solar potential analysis using Google Maps Solar API
• Interactive roof area mapping with polygon drawing tools
• Energy consumption simulation with customizable profiles
• Financial modeling for solar installations
• Multi-language support (English, German, Spanish)
• Responsive design with customizable theming

Features

🔆 Solar Calculator Components

• <solar-calculator> - Basic solar calculation with address search
• <solar-expert> - Advanced solar planning tool with interactive mapping
• <solar-system-form> - Comprehensive system configuration and simulation

🗺️ Interactive Mapping

• Roof area selection using polygon drawing tools
• Google Maps integration with satellite imagery
• Building insights from Google Solar API
• Real-time area calculations

⚡ Energy Simulation

• Household consumption profiles (different usage patterns)
• Heat pump integration for heating calculations
• Electric vehicle charging optimization
• Battery storage analysis
• Seasonal variations (summer/winter consumption)

💰 Financial Analysis

• 25-year cost projections
• Energy price inflation modeling
• Grid compensation calculations
• Return on investment analysis

Quick Start

Installation

npm install blue-chestnut-solar-expert

Basic Usage

Simple Solar Calculator

<script type="module" src="https://unpkg.com/blue-chestnut-solar-expert"></script>
<solar-calculator api-key="YOUR_GOOGLE_MAPS_API_KEY"></solar-calculator>

Advanced Solar Expert Tool

<solar-expert 
  api-key="YOUR_GOOGLE_MAPS_API_KEY"
  language="en"
  color-scheme="{
    primary: '#3B82F6',
    secondary: '#10B981',
    surface: '#FFFFFF'
  }">
</solar-expert>

System Configuration Form

<solar-system-form></solar-system-form>

Framework Integration

React/Next.js

import "blue-chestnut-solar-expert/dist/blue-chestnut-solar-expert/blue-chestnut-solar-expert.esm.js";

function SolarCalculatorPage() {
  return (
    <div>
      <solar-expert
        api-key={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}
        language="en"
      />
    </div>
  );
}

Vue.js

<template>
  <solar-expert 
    :api-key="apiKey"
    language="en"
  />
</template>

<script>
import 'blue-chestnut-solar-expert/dist/blue-chestnut-solar-expert/blue-chestnut-solar-expert.esm.js';

export default {
  data() {
    return {
      apiKey: process.env.VUE_APP_GOOGLE_MAPS_API_KEY
    }
  }
}
</script>

Components Overview

Solar Expert (<solar-expert>)

The main component providing a complete solar planning experience:

• Address search with Google Places autocomplete
• Interactive map with drawing tools for roof area selection
• Building analysis using Google Solar API
• System configuration with panel count, battery, consumption settings
• Real-time calculations showing autonomy, costs, and savings

Properties:

• api-key: Google Maps API key (required)
• language: Interface language ("en" | "de" | "es")
• color-scheme: Custom theme configuration

Solar Calculator (<solar-calculator>)

A simplified version for basic solar potential analysis:

• Location search functionality
• Building insights retrieval
• Basic solar data display

Solar System Form (<solar-system-form>)

Configuration form for detailed system planning:

• Household consumption settings
• Solar panel configuration
• Battery storage options
• Heat pump integration
• Electric vehicle charging optimization
• Financial parameters (electricity prices, compensation rates)

API Requirements

This library requires a Google Maps API key with the following APIs enabled:

• Maps JavaScript API
• Places API
• Solar API (for building insights)

Get your API key from the Google Cloud Console.

Supported Languages

• English (en) - Default
• German (de)
• Spanish (es)

Theming

The components support custom color schemes through the color-scheme property:

const customTheme = {
  primary: "#3B82F6",
  primaryForeground: "#FFFFFF",
  secondary: "#10B981",
  secondaryForeground: "#FFFFFF",
  surface: "#FFFFFF",
  border: "#E5E7EB",
  textMuted: "#6B7280",
  // ... additional theme properties
};

Development

Setup

npm install
npm start

Building

npm run build

Testing

npm test

Styling

The project uses TailwindCSS for styling. To watch for style changes:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Dependencies

• @stencil/core - Web component compiler
• @googlemaps/js-api-loader - Google Maps integration
• chart.js - Data visualization
• geotiff - Geographic data processing
• proj4 - Coordinate transformations
• lucide - Icon library
• tailwindcss - Utility-first CSS framework

License

MIT License - see LICENSE file for details.

Support

For questions, issues, or feature requests, please contact Blue Chestnut support or create an issue in the project repository.