From 9a364bdbec5c6da0bcfd22373ddc772b2d10d3eb Mon Sep 17 00:00:00 2001
From: James Karavakis <jkaravakis@tesla.com>
Date: Thu, 8 Dec 2022 22:47:10 -0800
Subject: [PATCH] Project footprint and energy density metrics.

---
 src/App.tsx                       |  2 +-
 src/components/Project/Metric.tsx | 18 ++++++++----------
 src/functions/Metrics.tsx         | 24 ++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 07effb1..ef544db 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,7 +27,7 @@ function App() {
       <Form>
       <ContentContainer>
         <Inputs />
-        <KeyMetrics footprint={10} price={2} energyDensity={3} />
+        <KeyMetrics />
       </ContentContainer>
       </Form>
     </AppContainer>
diff --git a/src/components/Project/Metric.tsx b/src/components/Project/Metric.tsx
index cceaacc..ab4253e 100644
--- a/src/components/Project/Metric.tsx
+++ b/src/components/Project/Metric.tsx
@@ -1,13 +1,7 @@
 import styled from 'styled-components';
 import { Text } from '@tesla/design-system-react';
 import { useFormState } from 'informed';
-import { calculateCost, numberWithCommas } from '../../functions';
-
-interface KeyMetricsProps {
-    footprint: number;
-    price: number;
-    energyDensity: number;
-}
+import { calculateCost, calculateEnergy, calculateFootprint, numberWithCommas } from '../../functions';
 
 const KeyMetricsBar = styled.div`
     display: flex;
@@ -36,18 +30,22 @@ const MetricValue = styled.p`
     color: #000000;
 `;
 
-export const KeyMetrics = ({footprint, price, energyDensity}: KeyMetricsProps) => {
+export const KeyMetrics = () => {
     const formState = useFormState();
 
     const megapack = typeof formState.values.megapack === 'number' ? formState.values.megapack : 0;
     const megapack2 = typeof formState.values.megapack2 === 'number' ? formState.values.megapack2 : 0;
     const megapackXL = typeof formState.values.megapackXL === 'number' ? formState.values.megapackXL : 0;
     const powerpack = typeof formState.values.powerpack ==='number' ? formState.values.powerpack : 0;
+
     const total = megapack + megapack2 + megapackXL + powerpack;
 
     const transformer = Math.floor(total/2) + (total % 2);
 
     const totalCost = calculateCost({megapackXL, megapack2, megapack, powerpack, transformer});
+    const totalFootprint = calculateFootprint({megapackXL, megapack2, megapack, powerpack, transformer});
+    const totalEnergy = calculateEnergy({megapackXL, megapack2, megapack, powerpack, transformer});
+    const energyDensity = totalEnergy/totalFootprint ? Math.round(totalEnergy/totalFootprint * 10000)/10 : 0
 
     return (
         <KeyMetricsBar>
@@ -56,11 +54,11 @@ export const KeyMetrics = ({footprint, price, energyDensity}: KeyMetricsProps) =
                 <Text>Total Cost</Text>
             </KeyMetric>
             <KeyMetric>
-                <MetricValue>{price} sq ft</MetricValue>
+                <MetricValue>{numberWithCommas(totalFootprint)} sq ft</MetricValue>
                 <Text>Footprint</Text>
             </KeyMetric>
             <KeyMetric>
-                <MetricValue>{energyDensity} MWh/sq ft</MetricValue>
+                <MetricValue>{energyDensity} kWh/sq ft</MetricValue>
                 <Text>Energy Density</Text>
             </KeyMetric>
         </KeyMetricsBar>
diff --git a/src/functions/Metrics.tsx b/src/functions/Metrics.tsx
index 68c48f9..7f51e16 100644
--- a/src/functions/Metrics.tsx
+++ b/src/functions/Metrics.tsx
@@ -18,4 +18,28 @@ export const calculateCost = ({megapackXL, megapack2, megapack, powerpack, trans
     const totalCost = megapackXLCost + megapack2Cost + megapackCost + powerpackCost + transformerCost;
 
     return totalCost;
+}
+
+export const calculateFootprint = ({megapackXL, megapack2, megapack, powerpack, transformer}: ProductProps) => {
+    const megapackXLSize = megapackXL * products.megapackXL.size[0] * products.megapackXL.size[1];
+    const megapack2Size = megapack2 * products.megapack2.size[0] * products.megapack2.size[1];
+    const megapackSize = megapack * products.megapack.size[0] * products.megapack.size[1];
+    const powerpackSize = powerpack * products.powerpack.size[0] * products.powerpack.size[1];
+    const transformerSize = transformer * products.transformer.size[0] * products.transformer.size[1];
+
+    const totalSize = megapackXLSize + megapack2Size + megapackSize + powerpackSize + transformerSize;
+
+    return totalSize;
+}
+
+export const calculateEnergy = ({megapackXL, megapack2, megapack, powerpack, transformer}: ProductProps) => {
+    const megapackXLEnergy = megapackXL * products.megapackXL.energy;
+    const megapack2Energy = megapack2 * products.megapack2.energy;
+    const megapackEnergy = megapack * products.megapack.energy;
+    const powerpackEnergy = powerpack * products.powerpack.energy;
+    const transformerEnergy = transformer * products.transformer.energy;
+
+    const totalEnergy = megapackXLEnergy + megapack2Energy + megapackEnergy + powerpackEnergy + transformerEnergy;
+
+    return totalEnergy;
 }
\ No newline at end of file