<!--

Copyright 2023 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

-->

<script lang="ts">

/* global google */

import { slide } from 'svelte/transition';

import Expandable from '../components/Expandable.svelte';

import SummaryCard from '../components/SummaryCard.svelte';

import type { SolarPanelConfig } from '../solar';

import Table from '../components/Table.svelte';

/* eslint-disable @typescript-eslint/ban-ts-comment */

// @ts-ignore

import { GoogleCharts } from 'google-charts';

import { findSolarConfig, showMoney, showNumber } from '../utils';

import InputNumber from '../components/InputNumber.svelte';

import InputPanelsCount from '../components/InputPanelsCount.svelte';

import InputMoney from '../components/InputMoney.svelte';

import InputPercent from '../components/InputPercent.svelte';

import InputRatio from '../components/InputRatio.svelte';

export let expandedSection: string;

export let configId: number;

export let monthlyAverageEnergyBillInput: number;

export let energyCostPerKwhInput: number;

export let panelCapacityWattsInput: number;

export let dcToAcDerateInput: number;

export let solarPanelConfigs: SolarPanelConfig[];

export let defaultPanelCapacityWatts: number;

const icon = 'payments';

const title = 'Solar Potential analysis';

let costChart: HTMLElement;

let showAdvancedSettings = false;

// [START solar_potential_calculations]

// Solar configuration, from buildingInsights.solarPotential.solarPanelConfigs

let panelsCount = 20;

let yearlyEnergyDcKwh = 12000;

// Basic settings

let monthlyAverageEnergyBill: number = 300;

let energyCostPerKwh = 0.31;

let panelCapacityWatts = 400;

let solarIncentives: number = 7000;

let installationCostPerWatt: number = 4.0;

let installationLifeSpan: number = 20;

// Advanced settings

let dcToAcDerate = 0.85;

let efficiencyDepreciationFactor = 0.995;

let costIncreaseFactor = 1.022;

let discountRate = 1.04;

// Solar installation

let installationSizeKw: number = (panelsCount * panelCapacityWatts) / 1000;

let installationCostTotal: number = installationCostPerWatt * installationSizeKw * 1000;

// Energy consumption

let monthlyKwhEnergyConsumption: number = monthlyAverageEnergyBill / energyCostPerKwh;

let yearlyKwhEnergyConsumption: number = monthlyKwhEnergyConsumption * 12;

// Energy produced for installation life span

let initialAcKwhPerYear: number = yearlyEnergyDcKwh * dcToAcDerate;

let yearlyProductionAcKwh: number[] = [...Array(installationLifeSpan).keys()].map(

(year) => initialAcKwhPerYear * efficiencyDepreciationFactor ** year,

);

// Cost with solar for installation life span

let yearlyUtilityBillEstimates: number[] = yearlyProductionAcKwh.map(

(yearlyKwhEnergyProduced, year) => {

const billEnergyKwh = yearlyKwhEnergyConsumption - yearlyKwhEnergyProduced;

const billEstimate =

(billEnergyKwh * energyCostPerKwh * costIncreaseFactor ** year) / discountRate ** year;

return Math.max(billEstimate, 0); // bill cannot be negative

},

);

let remainingLifetimeUtilityBill: number = yearlyUtilityBillEstimates.reduce((x, y) => x + y, 0);

let totalCostWithSolar: number =

installationCostTotal + remainingLifetimeUtilityBill - solarIncentives;

console.log(`Cost with solar: $${totalCostWithSolar.toFixed(2)}`);

// Cost without solar for installation life span

let yearlyCostWithoutSolar: number[] = [...Array(installationLifeSpan).keys()].map(

(year) => (monthlyAverageEnergyBill * 12 * costIncreaseFactor ** year) / discountRate ** year,

);

let totalCostWithoutSolar: number = yearlyCostWithoutSolar.reduce((x, y) => x + y, 0);

console.log(`Cost without solar: $${totalCostWithoutSolar.toFixed(2)}`);

// Savings with solar for installation life span

let savings: number = totalCostWithoutSolar - totalCostWithSolar;

console.log(`Savings: $${savings.toFixed(2)} in ${installationLifeSpan} years`);

// [END solar_potential_calculations]

// Reactive calculations

let panelCapacityRatio: number = 1.0;

$: panelCapacityRatio = panelCapacityWattsInput / defaultPanelCapacityWatts;

$: installationCostTotal = installationCostPerWatt * installationSizeKw * 1000;

$: if (solarPanelConfigs[configId]) {

installationSizeKw = (solarPanelConfigs[configId].panelsCount * panelCapacityWattsInput) / 1000;

}

$: monthlyKwhEnergyConsumption = monthlyAverageEnergyBillInput / energyCostPerKwhInput;

$: yearlyKwhEnergyConsumption = monthlyKwhEnergyConsumption * 12;

$: if (solarPanelConfigs[configId]) {

initialAcKwhPerYear =

solarPanelConfigs[configId].yearlyEnergyDcKwh * panelCapacityRatio * dcToAcDerateInput;

}

$: yearlyProductionAcKwh = [...Array(installationLifeSpan).keys()].map(

(year) => initialAcKwhPerYear * efficiencyDepreciationFactor ** year,

);

$: yearlyUtilityBillEstimates = yearlyProductionAcKwh.map((yearlyKwhEnergyProduced, year) => {

const billEnergyKwh = yearlyKwhEnergyConsumption - yearlyKwhEnergyProduced;

const billEstimate =

(billEnergyKwh * energyCostPerKwhInput * costIncreaseFactor ** year) / discountRate ** year;

return Math.max(billEstimate, 0); // bill cannot be negative

});

$: remainingLifetimeUtilityBill = yearlyUtilityBillEstimates.reduce((x, y) => x + y, 0);

$: totalCostWithSolar = installationCostTotal + remainingLifetimeUtilityBill - solarIncentives;

$: yearlyCostWithoutSolar = [...Array(installationLifeSpan).keys()].map(

(year) =>

(monthlyAverageEnergyBillInput * 12 * costIncreaseFactor ** year) / discountRate ** year,

);

$: totalCostWithoutSolar = yearlyCostWithoutSolar.reduce((x, y) => x + y, 0);

$: savings = totalCostWithoutSolar - totalCostWithSolar;

let energyCovered: number;

$: energyCovered = yearlyProductionAcKwh[0] / yearlyKwhEnergyConsumption;

let breakEvenYear: number = -1;

$: GoogleCharts.load(

() => {

if (!costChart) {

return;

}

const year = new Date().getFullYear();

let costWithSolar = 0;

const cumulativeCostsWithSolar = yearlyUtilityBillEstimates.map(

(billEstimate, i) =>

(costWithSolar +=

i == 0 ? billEstimate + installationCostTotal - solarIncentives : billEstimate),

);

let costWithoutSolar = 0;

const cumulativeCostsWithoutSolar = yearlyCostWithoutSolar.map(

(cost) => (costWithoutSolar += cost),

);

breakEvenYear = cumulativeCostsWithSolar.findIndex(

(costWithSolar, i) => costWithSolar <= cumulativeCostsWithoutSolar[i],

);

const data = google.visualization.arrayToDataTable([

['Year', 'Solar', 'No solar'],

[year.toString(), 0, 0],

...cumulativeCostsWithSolar.map((_, i) => [

(year + i + 1).toString(),

cumulativeCostsWithSolar[i],

cumulativeCostsWithoutSolar[i],

]),

]);

/* eslint-disable @typescript-eslint/no-explicit-any */

const googleCharts = google.charts as any;

const chart = new googleCharts.Line(costChart);

const options = googleCharts.Line.convertOptions({

title: `Cost analysis for ${installationLifeSpan} years`,

width: 350,

height: 200,

});

chart.draw(data, options);

},

{ packages: ['line'] },

);

function updateConfig() {

monthlyKwhEnergyConsumption = monthlyAverageEnergyBillInput / energyCostPerKwhInput;

yearlyKwhEnergyConsumption = monthlyKwhEnergyConsumption * 12;

panelCapacityRatio = panelCapacityWattsInput / defaultPanelCapacityWatts;

configId = findSolarConfig(

solarPanelConfigs,

yearlyKwhEnergyConsumption,

panelCapacityRatio,

dcToAcDerateInput,

);

}

</script>

<Expandable

bind:section={expandedSection}

{icon}

{title}

subtitle="Values are only placeholders."

subtitle2="Update with your own values."

secondary

>

<div class="flex flex-col space-y-4 pt-1">

<div class="p-4 mb-4 surface-variant outline-text rounded-lg">

<p class="relative inline-flex items-center space-x-2">

<md-icon class="md:w-6 w-8">info</md-icon>

<span>

Projections use a

<a

class="primary-text"

href="https://developers.google.com/maps/documentation/solar/calculate-costs-us"

target="_blank"

>

USA financial model

<md-icon class="text-sm">open_in_new</md-icon>

</a>

</span>

</p>

</div>

<InputMoney

bind:value={monthlyAverageEnergyBillInput}

icon="credit_card"

label="Monthly average energy bill"

>