Layout algorithm and rendering.

src/App.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Header } from './components/Header';
 import { Inputs } from './components/Inputs';
 import { Form } from '@tesla/informed-tds';
-import { KeyMetrics } from './components/Project';
+import { KeyMetrics, Layout } from './components/Project';
 import '@tesla/design-system/dist/index.css';
 import './App.css';
 
@@ -20,14 +20,25 @@ const ContentContainer = styled.div`
   margin-right: 40px;
 `
 
+const SiteContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin-left: 50px;
+  max-height: 500px;
+`
+
 function App() {
   return (
     <AppContainer>
       <Header />
       <Form>
       <ContentContainer>
         <Inputs />
-        <KeyMetrics />
+        <SiteContainer>
+          <KeyMetrics />
+          <Layout />
+        </SiteContainer>
       </ContentContainer>
       </Form>
     </AppContainer>

src/components/Project/Layout.tsx

@@ -0,0 +1,106 @@
+import styled from 'styled-components';
+import { useFormState } from 'informed';
+import { calculateLayout } from '../../functions';
+
+const RowContainer = styled.div`
+    display: flex;
+    flex: 1;
+    height: 100px;
+    //gap: 10px;
+`
+
+const SiteLayoutContainer = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 40px;
+`;
+
+const MegapackLayout = styled.div`
+    display: flex;
+    flex: 3;
+    background-color: #3E6AE1;
+    border-color: black;
+    border: 10px;
+`
+
+const Megapack2Layout = styled.div`
+    display: flex;
+    flex: 3;
+    background-color: #FBB01B;
+    border-color: black;
+    border-width: 10px;
+`
+
+const MegapackXLLayout = styled.div`
+    display: flex;
+    flex: 4;
+    background-color: #B74134;
+    border-color: black;
+    border-width: 10px;
+`
+
+const PowerpackLayout = styled.div`
+    display: flex;
+    flex: 1;
+    background-color: #12BB00;
+    border-color: black;
+    border-width: 10px;
+`
+
+const TransformerLayout = styled.div`
+    display: flex;
+    flex: 1;
+    background-color: purple;
+    border-color: black;
+    border-width: 10px;
+`
+
+const EmptySpace = styled.div`
+    display: flex;
+    flex: 1;
+    background-color: grey;
+    border-color: black;
+    border-width: 10px;
+`
+
+export const Layout = () => {
+    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 layout = calculateLayout({megapackXL, megapack2, megapack, powerpack, transformer});
+
+    return (
+        <SiteLayoutContainer>
+            {
+                layout.map((row, i) => {
+                    return (
+                        <div key={i}>
+                            <RowContainer>
+                                {row.map((cell, i) => {
+                                    if (cell === 1) {
+                                        return <MegapackXLLayout key={i}/> 
+                                    } else if (cell === 2) {
+                                        return <Megapack2Layout key={i} />
+                                    } else if (cell === 3) {
+                                        return <MegapackLayout key={i} />
+                                    } else if (cell === 4) {
+                                        return <PowerpackLayout key={i} />
+                                    } else if (cell === 5) {
+                                        return <TransformerLayout key={i} />
+                                    }
+                                })}
+                            </RowContainer>
+                        </div>
+                    )
+                })
+            }
+        </SiteLayoutContainer>
+    )
+}

src/components/Project/index.ts

@@ -1 +1,2 @@
-export * from './Metric';
+export * from './Metric';
+export * from './Layout';

src/functions/Metrics.tsx

@@ -18,6 +18,80 @@ export const calculateCost = ({megapackXL, megapack2, megapack, powerpack, trans
     const totalCost = megapackXLCost + megapack2Cost + megapackCost + powerpackCost + transformerCost;
 
     return totalCost;
+}  
+
+export const minRemainingSize = (megapackXL: number, megapack2: number, megapack: number, powerpack: number, transformer: number) => {
+    const remainingSizes = []
+
+    if (megapackXL > 0) {
+        remainingSizes.push(4)
+    }
+
+    if (megapack2 > 0) {
+        remainingSizes.push(3)
+    }
+
+    if (megapack > 0) {
+        remainingSizes.push(3)
+    }
+
+    if (powerpack > 0) {
+        remainingSizes.push(1)
+    }
+
+    if (transformer > 0) {
+        remainingSizes.push(1)
+    }
+
+    if (remainingSizes.length === 0) {
+        return 0
+    } else {
+        return Math.min(...remainingSizes)
+    }
+}
+
+export const calculateLayout = ({megapackXL, megapack2, megapack, powerpack, transformer}: ProductProps) => {
+    let totalUnits = megapackXL + megapack2 + megapack + powerpack + transformer;
+    let currentRow = [];
+    let layout = [];
+
+    while (totalUnits > 0) {
+        if ((10 - currentRow.length) >= minRemainingSize(megapackXL, megapack2, megapack, powerpack, transformer)) {
+            if (megapackXL > 0 && currentRow.length + 4 <= 10) {
+                currentRow.push(...[1, 1, 1, 1])
+                megapackXL -= 1
+                totalUnits -= 1
+            }
+            else if (megapack2 > 0 && currentRow.length + 3 <= 10) {
+                currentRow.push(...[2, 2, 2])
+                megapack2 -= 1
+                totalUnits -= 1
+            }
+            else if (megapack > 0 && currentRow.length + 3 <= 10) {
+                currentRow.push(...[3, 3, 3])
+                megapack -= 1
+                totalUnits -= 1
+            }
+            else if (powerpack > 0 && currentRow.length + 1 <= 10) {
+                currentRow.push(...[4])
+                powerpack -= 1
+                totalUnits -= 1
+            }
+            else if (transformer > 0 && currentRow.length + 1 <= 10) {
+                currentRow.push(...[5])
+                transformer -= 1
+                totalUnits -= 1
+            }
+        } 
+        else {
+            layout.push(currentRow)
+            currentRow = []
+        }
+    }
+
+    layout.push(currentRow)
+
+    return layout;
 }
 
 export const calculateFootprint = ({megapackXL, megapack2, megapack, powerpack, transformer}: ProductProps) => {
@@ -29,7 +103,7 @@ export const calculateFootprint = ({megapackXL, megapack2, megapack, powerpack,
 
     const totalSize = megapackXLSize + megapack2Size + megapackSize + powerpackSize + transformerSize;
 
-    return totalSize;
+    return totalSize
 }
 
 export const calculateEnergy = ({megapackXL, megapack2, megapack, powerpack, transformer}: ProductProps) => {