add CO2 estimation

Author: Jesperpaulsen

packages/data-analyzer/src/services/country.ts

@@ -1,14 +1,36 @@
 import geoip from 'geoip-country'
 
+import { CO2PerKWHCountry } from '@data-collector/types'
+const co2PerKWH = require('../data/co2PerKwhPerCountry.json') as {
+  [countryISO: string]: CO2PerKWHCountry
+}
+
+const valuesArray = Object.values(co2PerKWH)
+const total = valuesArray.reduce(
+  (prevValue, country) => (prevValue += country.CO2perKWH),
+  0
+)
+const length = valuesArray.length
+
+const average = total / length
+
+const kwhPerGB = 1.8
+const kwhPerByte = kwhPerGB / (1024 * 1024 * 1024)
+
 class Country {
+  // @ts-ignore
+  private regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
+
   getCountry = (ip?: string) => {
+    const res = { countryCode: '', countryName: '' }
     try {
-      if (!ip) return ''
-      const country = this.lookUp(ip)
-      return country || ''
+      if (!ip) return res
+      res.countryCode = this.lookUp(ip) || ''
+      res.countryName = this.regionNames.of(res.countryCode)
+      return res
     } catch (e) {
       console.log(e)
-      return ''
+      return res
     }
   }
 
@@ -17,10 +39,17 @@ class Country {
     return countryInfo?.country || undefined
   }
 
-  // TODO: Create estimation
-  calculateEmission = (country?: string) => {
-    if (!country) return 0
-    return 0
+  calculateEmission = ({
+    size,
+    countryCode = ''
+  }: {
+    size?: number | null
+    countryCode?: string
+  }) => {
+    if (!size) return 0
+    const infoAboutCountry = co2PerKWH[countryCode]
+    const CO2perKWH = infoAboutCountry?.CO2perKWH || average
+    return size * kwhPerByte * CO2perKWH
   }
 }
 

packages/data-analyzer/src/services/network-call-controller.ts

@@ -101,7 +101,10 @@ export class NetworkCallController {
     usageId: string
   ) => {
     const paths = hostOrigin.split('://')
-    const identifier = paths.length > 1 ? paths[1] : ''
+    let identifier = paths.length > 1 ? paths[1] : ''
+    if (identifier.startsWith('www')) {
+      identifier = identifier.substr(2)
+    }
     const uid = this.getDocId({
       identifier,
       date: networkCall.date,
@@ -119,17 +122,19 @@ export class NetworkCallController {
 
   setCountryDoc = async (
     networkCall: BaseUsageDoc,
-    country: string,
+    countryCode: string,
+    countryName: string,
     usageId: string
   ) => {
     const uid = this.getDocId({
-      identifier: country,
+      identifier: countryCode,
       date: networkCall.date,
       userId: networkCall.userId
     })
     const countryDoc: CountryDoc = {
       ...networkCall,
-      country,
+      countryCode,
+      countryName,
       usageId,
       type: USAGE_TYPES.COUNTRY,
       uid
@@ -148,8 +153,8 @@ export class NetworkCallController {
     const { hostOrigin, size, targetIP } = networkCall
 
     const date = getStartOfDateInUnix(new Date())
-    const targetCountry = Country.getCountry(targetIP)
-    const CO2 = Country.calculateEmission(targetCountry)
+    const { countryCode, countryName } = Country.getCountry(targetIP)
+    const CO2 = Country.calculateEmission({ size, countryCode })
     const usageId = this.getDocId({ userId, date })
     const baseUsageDoc: BaseUsageDoc = {
       uid: usageId,
@@ -164,7 +169,7 @@ export class NetworkCallController {
     const promises = [
       this.updateUserStats(baseUsageDoc),
       this.setHostDoc(baseUsageDoc, hostOrigin || '', usageId),
-      this.setCountryDoc(baseUsageDoc, targetCountry, usageId),
+      this.setCountryDoc(baseUsageDoc, countryCode, countryName, usageId),
       this.setUsageDoc(baseUsageDoc)
     ]
     try {

packages/data-collector/manifest.json

@@ -38,7 +38,8 @@
     "webRequest",
     "tabs",
     "identity",
-    "storage"
+    "storage",
+    "notifications"
   ],
   "oauth2": {
     "client_id": "154072078565-c2qtni1qj3atn2ip7cgdeofpph8jjhhk.apps.googleusercontent.com",

packages/data-collector/src/Firestore.ts

@@ -55,13 +55,13 @@ export class Firestore {
   listenToTodaysUsage = (
     uid: string,
     date: number,
-    callback: (usage: number) => void
+    callback: (props: { size: number; CO2: number }) => void
   ) => {
     const d = doc(this.usageCollection, `${uid}-${date}`)
-    console.log(date)
     onSnapshot(d, (doc) => {
       const data = doc.data() as BaseUsageDoc
-      callback(data.size)
+      const usage = { size: data.size, CO2: data.CO2 }
+      callback(usage)
     })
   }
 }

packages/data-collector/src/UsageCounter.ts

@@ -8,9 +8,18 @@ export class UsageCounter {
   private totalUsage = 0
   private usageSinceSubscriptionStarted = 0
   private store: typeof Store
+  private totalCO2 = 0
 
   constructor(store: typeof Store) {
     this.store = store
+    setTimeout(() => {
+      chrome.notifications.create('', {
+        title: 'Update on your usage',
+        message: `You have used ${this.usageToday} bytes today`,
+        type: 'basic',
+        iconUrl: './android-chrome-192x192.png'
+      })
+    }, 5000)
   }
 
   private getUsageLast7Days = async () => {
@@ -26,6 +35,7 @@ export class UsageCounter {
     if (!this.store.user) return
     const userDoc = await this.store.firestore.getUserDoc(this.store.user.uid)
     this.totalUsage = userDoc.totalSize
+    this.totalCO2 = userDoc.totalCO2
   }
 
   private listenToTodaysUsage = async () => {
@@ -37,9 +47,19 @@ export class UsageCounter {
     )
   }
 
-  private handleUsageUpdate = (usage: number) => {
-    if (!this.usageToday) this.usageToday = usage
-    this.usageSinceSubscriptionStarted = usage - this.usageToday
+  private handleUsageUpdate = ({
+    size,
+    CO2
+  }: {
+    size: number
+    CO2: number
+  }) => {
+    if (!this.usageToday) this.usageToday = size
+    this.usageSinceSubscriptionStarted = size - this.usageToday
+    this.usageToday += this.usageSinceSubscriptionStarted
+    this.usageLast7Days += this.usageSinceSubscriptionStarted
+    this.totalUsage += this.usageSinceSubscriptionStarted
+    this.totalCO2 += CO2
     this.sendUsageUpdate()
   }
 
@@ -62,10 +82,10 @@ export class UsageCounter {
     chrome.runtime.sendMessage({
       type: MESSAGE_TYPES.SYNC_REQUESTS,
       payload: {
-        usageToday: (this.usageToday || 0) + this.usageSinceSubscriptionStarted,
-        usageLast7Days:
-          this.usageLast7Days + this.usageSinceSubscriptionStarted,
-        totalUsage: this.totalUsage + this.usageSinceSubscriptionStarted
+        usageToday: this.usageToday,
+        usageLast7Days: this.usageLast7Days,
+        totalUsage: this.totalUsage,
+        totalCO2: this.totalCO2
       }
     })
   }

packages/data-collector/src/wrapper.ts

@@ -26,7 +26,7 @@ try {
         store.sendUser()
         return
       case MESSAGE_TYPES.REQUEST_USAGE:
-        store.dataReporter.sendRequests()
+        store.usageCounter.sendUsageUpdate()
         return
       case MESSAGE_TYPES.REQUEST_CREDENTIALS:
         store.auth.sendCredentials()

packages/data-presenter/src/components/dashboard/UsageDisplay.tsx

@@ -9,7 +9,7 @@ interface UsageDisplay {
 
 
 const UsageDisplay: FunctionalComponent = () => {
-  const { usage } = useContext(UsageContext)
+  const { usage, totalCO2 } = useContext(UsageContext)
   const [usageToDisplay, setUsageToDisplay] = useState<UsageDisplay[]>([])
 
 
@@ -55,13 +55,21 @@ const UsageDisplay: FunctionalComponent = () => {
   }, [usage])
 
   return (
-    <div className="flex justify-center">
-      {usageToDisplay.map((usage) => (
-        <div className="text-center px-3">
-          <div className="text-4xl font-medium">{usage.usageString}</div>
-          <div className="text-xs font-light">{usage.usageDescription}</div>
+    <div>
+      <div className="flex justify-center">
+        {usageToDisplay.map((usage) => (
+          <div className="text-center px-3">
+            <div className="text-4xl font-medium">{usage.usageString}</div>
+            <div className="text-xs font-light">{usage.usageDescription}</div>
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-center mt-3">
+        <div className="text-center">
+          <div className="text-6xl font-medium">{totalCO2.toFixed(2)}</div>
+          <div className="text-xs font-light">kg CO2</div>
         </div>
-      ))}
+      </div>
     </div>
   )
 }

packages/data-presenter/src/contexts/UsageContext.tsx

@@ -8,30 +8,36 @@ interface UsageContextProps {
     usageToday: number
     usageLast7Days: number
     totalUsage: number
-  }
+  },
+  totalCO2: number
 }
 
 const initialUsage = {
   usageToday: 0, usageLast7Days: 0, totalUsage: 0
 }
 
-export const UsageContext = createContext<UsageContextProps>({ usage: initialUsage });
+export const UsageContext = createContext<UsageContextProps>({ usage: initialUsage, totalCO2: 0 });
 
 const UsageProvider: FunctionComponent = ({ children }) => {
   const [usage, setUsage] = useState(initialUsage)
+  const [totalCO2, setTotalCO2] = useState(0)
 
-  useEffect(() => {
-    chrome.runtime.onMessage.addListener(function (details) {
-      const { type } = details
+  const parseMessage = (details: any) => {
+    const { type } = details
       if (type === MESSAGE_TYPES.SYNC_REQUESTS) {
-        setUsage(details.payload)
+        const { usageToday, usageLast7Days, totalUsage, totalCO2 } = details.payload
+        setUsage({ usageToday, usageLast7Days, totalUsage })
+        setTotalCO2(totalCO2)
       }
-    })
+  }
+
+  useEffect(() => {
+    chrome.runtime.onMessage.addListener(parseMessage)
 
-    chrome.runtime.sendMessage({ type: MESSAGE_TYPES.REQUEST_USAGE })
+    chrome.runtime.sendMessage({ type: MESSAGE_TYPES.REQUEST_USAGE }, parseMessage)
   }, [])
 
-  return <UsageContext.Provider value={{ usage }}>{children}</UsageContext.Provider>;
+  return <UsageContext.Provider value={{ usage, totalCO2 }}>{children}</UsageContext.Provider>;
 };
 
 export default UsageProvider;

packages/types/src/co2-per-kwh-country.ts

@@ -0,0 +1,6 @@
+export interface CO2PerKWHCountry {
+  country: string
+  CO2perKWH: number
+  source: string
+  year: number
+}

packages/types/src/country-doc.ts

@@ -2,5 +2,6 @@ import { BaseUsageDoc } from './base-usage-doc'
 
 export interface CountryDoc extends BaseUsageDoc {
   usageId: string
-  country: string
+  countryCode: string
+  countryName: string
 }

packages/types/src/index.ts

@@ -4,3 +4,4 @@ export { MESSAGE_TYPES } from './MESSAGE_TYPES'
 export type { BaseUsageDoc } from './base-usage-doc'
 export type { CountryDoc } from './country-doc'
 export type { HostDoc } from './host-doc'
+export type { CO2PerKWHCountry } from './co2-per-kwh-country'