add overall profile rating

client/components/UserCompanyTile.jsx

@@ -63,6 +63,7 @@ function UserCompanyTile ({ stonk }) {
           rating={stonk.totalScore}
           max={3000}
           mb={4}
+          level={stonk.totalLevel}
         />
 
         <Rating
@@ -73,6 +74,7 @@ function UserCompanyTile ({ stonk }) {
           rating={stonk.environmentScore}
           max={1000}
           mb={2}
+          level={stonk.environmentLevel}
         />
 
         <Rating
@@ -83,6 +85,7 @@ function UserCompanyTile ({ stonk }) {
           rating={stonk.socialScore}
           max={1000}
           mb={2}
+          level={stonk.socialLevel}
         />
 
         <Rating
@@ -93,6 +96,7 @@ function UserCompanyTile ({ stonk }) {
           rating={stonk.governanceScore}
           max={1000}
           mb={2}
+          level={stonk.governanceLevel}
         />
       </Box>
     </Box>

client/pages/UserProfile.jsx

@@ -1,17 +1,33 @@
 import React, { useEffect, useState } from 'react'
-import { VStack, Image, Text, Button, Link, Grid } from '@chakra-ui/react'
+import { VStack, Image, Text, Button, Link, Grid, Flex, Heading } from '@chakra-ui/react'
 import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react'
 
 import { getUserStonks } from '../apis/stonks'
 
 // import EditProfile from '../components/EditProfile'
 import UserCompanyTile from '../components/UserCompanyTile'
 import RegularLayout from '../layouts/RegularLayout'
+import Rating from '../components/Rating'
+import RatingBar from '../components/RatingBar'
 
 function UserProfile () {
   const { user, isAuthenticated, getAccessTokenSilently } = useAuth0()
   const [userStonks, setUserStonks] = useState([])
 
+  const avgRatings = {
+    total: _avgRating(userStonks, 'totalScore'),
+    environment: _avgRating(userStonks, 'environmentScore'),
+    social: _avgRating(userStonks, 'socialScore'),
+    governance: _avgRating(userStonks, 'governanceScore')
+  }
+
+  const avgLevels = {
+    total: _avgLevel(avgRatings.total, 3000),
+    environment: _avgLevel(avgRatings.environment, 1000),
+    social: _avgLevel(avgRatings.social, 1000),
+    governance: _avgLevel(avgRatings.governance, 1000)
+  }
+
   useEffect(() => {
     (async () => {
       try {
@@ -28,15 +44,60 @@ function UserProfile () {
     <RegularLayout>
       {isAuthenticated ? (
         <>
-          <VStack mt={10}>
-            <Image src={user.picture} alt="Profile" />
-            <Text> Welcome, {user.name}!</Text>
-            <Button colorScheme="teal" onClick={() => console.log('clicked')}>
-              <Link href="/edit-profile">
+          <Flex direction={['column', 'row']} justifyContent='space-around'>
+            <VStack mt={10}>
+              <Image src={user.picture} alt="Profile" />
+              <Text> Welcome, {user.name}!</Text>
+              <Button colorScheme="teal" onClick={() => console.log('clicked')}>
+                <Link href="/edit-profile">
               Edit Profile
-              </Link>
-            </Button>
-          </VStack>
+                </Link>
+              </Button>
+            </VStack>
+            {userStonks && userStonks.length > 0 && (
+              <VStack maxW='md' mx='2'>
+                <Heading as='h3'>Your Portfolio:</Heading>
+                <Rating
+                  label='Overall'
+                />
+                <RatingBar
+                  rating={avgRatings.total}
+                  max={3000}
+                  mb={4}
+                  level={avgLevels.total}
+                />
+
+                <Rating
+                  label='Environment'
+                />
+                <RatingBar
+                  rating={avgRatings.environment}
+                  max={1000}
+                  mb={2}
+                  level={avgLevels.environment}
+                />
+
+                <Rating
+                  label='Social'
+                />
+                <RatingBar
+                  rating={avgRatings.social}
+                  max={1000}
+                  mb={2}
+                  level={avgLevels.social}
+                />
+
+                <Rating
+                  label='Governance'
+                />
+                <RatingBar
+                  rating={avgRatings.governance}
+                  max={1000}
+                  mb={2}
+                  level={avgLevels.governance}
+                />
+              </VStack>)}
+          </Flex>
 
           <Grid
             templateColumns={[
@@ -60,3 +121,15 @@ function UserProfile () {
 }
 
 export default withAuthenticationRequired(UserProfile)
+
+function _avgRating (stonks, key) {
+  return stonks.reduce((acc, stonk) => acc + stonk[key], 0) / stonks.length
+}
+
+function _avgLevel (rating, max) {
+  const value = Math.floor(rating / max * 100)
+  if (value < 20) return 'Low'
+  if (value < 40) return 'Medium'
+  if (value < 60) return 'High'
+  else return 'Excellent'
+}