feat(website): add mica sustainability indicator route and table

SiaFoundation · Sep 25, 2024 · 266f35e · 266f35e
1 parent a4db3e9
commit 266f35e
Show file tree

Hide file tree

Showing 4 changed files with 353 additions and 0 deletions.
diff --git a/apps/website/components/MicaComplianceTable.tsx b/apps/website/components/MicaComplianceTable.tsx
@@ -0,0 +1,259 @@
+import { Panel, Text, Tooltip } from '@siafoundation/design-system'
+import { MicaIndicatorObject } from '../content/mica'
+import {
+  CloudLightning32,
+  CloudUpload32,
+  Earth32,
+  Information16,
+  TrashCan32,
+} from '@carbon/icons-react'
+
+type MicaComplianceTableCellGroupLayoutProps = {
+  title: string
+  description: string
+  displayValue: string
+  last?: boolean
+}
+
+function MicaComplianceTableCellGroupLayout({
+  title,
+  description,
+  displayValue,
+  last,
+}: MicaComplianceTableCellGroupLayoutProps) {
+  return (
+    <>
+      <td
+        className={`text-left py-4 ${
+          !last && 'border-b-2 dark:border-b-graydark-100'
+        }`}
+      >
+        <Text size="16" weight="light" className="pl-2 md:pl-0">
+          {title}
+        </Text>
+      </td>
+      <td
+        className={`pr-2 md:pr-4 py-4 ${
+          !last && 'border-b-2 dark:border-b-graydark-100'
+        } text-right`}
+      >
+        <div className="flex justify-end items-center gap-2">
+          <Text size="16" weight="light" noWrap>
+            {displayValue}
+          </Text>
+          <Tooltip content={description}>
+            <Information16 className="hover:cursor-pointer fill-emerald-700 dark:fill-emerald-500" />
+          </Tooltip>
+        </div>
+      </td>
+    </>
+  )
+}
+
+type MicaComplianceTableProps = {
+  micaIndicators: MicaIndicatorObject
+  lastUpdated: string
+}
+
+export function MicaComplianceTable({
+  micaIndicators,
+  lastUpdated,
+}: MicaComplianceTableProps) {
+  return (
+    <>
+      <Panel>
+        <div className="border dark:border-graydark-300 rounded-xl overflow-hidden shadow-xl">
+          <table className="table-auto border-collapse w-full">
+            <thead className="bg-slate-50 dark:bg-black">
+              <tr className="border-b-2 dark:border-b-graydark-100">
+                <th className="py-6 hidden md:table-cell">
+                  <Text tag="span" size="16">
+                    Domain
+                  </Text>
+                </th>
+                <th className="text-left py-6">
+                  <Text tag="span" size="16" className="pl-2 md:pl-0">
+                    Sustainability Indicator
+                  </Text>
+                </th>
+                <th className="py-6"></th>
+              </tr>
+            </thead>
+            <tbody className="text-center">
+              <tr>
+                <td
+                  className="py-4 border-b-2 dark:border-b-graydark-100 hidden md:table-cell "
+                  rowSpan={3}
+                >
+                  <div className="flex flex-col justify-content items-center gap-4">
+                    <CloudLightning32 className="fill-emerald-700 dark:fill-emerald-500" />
+                    <Text size="16" weight="light" color="subtle">
+                      Energy
+                    </Text>
+                  </div>
+                </td>
+                {/* Here we are moving this display from kWh to gWh, but we're only going
+              to go for it if we know it will succeed. Otherwise, we are going
+              to display whatever we are sent. */}
+                {micaIndicators['indicator_1'].result.value >= 1000000 &&
+                micaIndicators['indicator_1'].unit === 'kwh' &&
+                micaIndicators['indicator_1'].description.includes(
+                  'kilowatt-hours (kWh)'
+                ) ? (
+                  <MicaComplianceTableCellGroupLayout
+                    title="Energy Consumption"
+                    description={micaIndicators[
+                      'indicator_1'
+                    ].description.replace(
+                      'kilowatt-hours (kWh)',
+                      'gigawatt-hours (gWh)'
+                    )}
+                    displayValue={`${Math.round(
+                      micaIndicators['indicator_1'].result.value / 1000000
+                    ).toLocaleString()}${' '}${micaIndicators[
+                      'indicator_1'
+                    ].unit.replace('kwh', 'gWh')}`}
+                  />
+                ) : (
+                  <MicaComplianceTableCellGroupLayout
+                    title="Energy Consumption"
+                    description={micaIndicators['indicator_1'].description}
+                    displayValue={`${Math.round(
+                      micaIndicators['indicator_1'].result.value
+                    ).toLocaleString()}${' '}${
+                      micaIndicators['indicator_1'].unit
+                    }`}
+                  />
+                )}
+              </tr>
+              <tr>
+                <MicaComplianceTableCellGroupLayout
+                  title="Non-renewable energy consumption"
+                  description={micaIndicators['indicator_2'].description}
+                  displayValue={`${micaIndicators[
+                    'indicator_2'
+                  ].result.value.toFixed(2)}%`}
+                />
+              </tr>
+              <tr>
+                <MicaComplianceTableCellGroupLayout
+                  title="Energy intensity"
+                  description={micaIndicators['indicator_3'].description}
+                  displayValue={`${micaIndicators[
+                    'indicator_3'
+                  ].result.value.toFixed(6)}${' '}
+                  ${micaIndicators['indicator_3'].unit.replace('kwh', 'kWh')}`}
+                />
+              </tr>
+              <tr>
+                <td
+                  className="py-4 border-b-2 dark:border-b-graydark-100 hidden md:table-cell"
+                  rowSpan={3}
+                >
+                  <div className="flex flex-col justify-content items-center gap-4">
+                    <CloudUpload32 className="fill-emerald-700 dark:fill-emerald-500" />
+                    <Text size="16" weight="light" color="subtle">
+                      GHG Emissions
+                    </Text>
+                  </div>
+                </td>
+                <MicaComplianceTableCellGroupLayout
+                  title="Scope 1 - Controlled"
+                  description={micaIndicators['indicator_4'].description}
+                  displayValue={`${
+                    micaIndicators['indicator_4'].result.value
+                  }${' '}
+                  ${micaIndicators['indicator_4'].unit}`}
+                />
+              </tr>
+              <tr>
+                <MicaComplianceTableCellGroupLayout
+                  title="Scope 2 - Purchased"
+                  description={micaIndicators['indicator_5'].description}
+                  displayValue={`${micaIndicators[
+                    'indicator_5'
+                  ].result.value.toLocaleString()}${' '}
+                  ${micaIndicators['indicator_5'].unit}`}
+                />
+              </tr>
+              <tr>
+                <MicaComplianceTableCellGroupLayout
+                  title="GHG intensity"
+                  description={micaIndicators['indicator_6'].description}
+                  displayValue={`${micaIndicators[
+                    'indicator_6'
+                  ].result.value.toFixed(6)}${' '}
+                  ${micaIndicators['indicator_6'].unit}`}
+                />
+              </tr>
+              <tr>
+                <td
+                  className="py-4 border-b-2 dark:border-b-graydark-100 hidden md:table-cell"
+                  rowSpan={3}
+                >
+                  <div className="flex flex-col justify-content items-center gap-4">
+                    <TrashCan32 className="fill-emerald-700 dark:fill-emerald-500" />
+                    <Text size="16" weight="light" color="subtle">
+                      Waste Production
+                    </Text>
+                  </div>
+                </td>
+                <MicaComplianceTableCellGroupLayout
+                  title="Generation of waste electrical and electronic equipment (WEEE)"
+                  description={micaIndicators['indicator_7'].description}
+                  displayValue={`${micaIndicators[
+                    'indicator_7'
+                  ].result.value.toFixed(2)}${' '}
+                  ${micaIndicators['indicator_7'].unit}`}
+                />
+              </tr>
+              <tr>
+                <MicaComplianceTableCellGroupLayout
+                  title="Non-recycled WEEE ratio"
+                  description={micaIndicators['indicator_8'].description}
+                  displayValue={`${micaIndicators[
+                    'indicator_8'
+                  ].result.value.toFixed(2)}%`}
+                />
+              </tr>
+              <tr>
+                <MicaComplianceTableCellGroupLayout
+                  title="Generation of hazardous waste"
+                  description={micaIndicators['indicator_9'].description}
+                  displayValue={`${micaIndicators[
+                    'indicator_9'
+                  ].result.value.toFixed(6)}${' '}
+                  ${micaIndicators['indicator_9'].unit}`}
+                />
+              </tr>
+              <tr>
+                <td className="py-4 hidden md:table-cell">
+                  <div className="flex flex-col justify-content items-center gap-4">
+                    <Earth32 className="fill-emerald-700 dark:fill-emerald-500" />
+                    <Text size="16" weight="light" color="subtle">
+                      Natural resources
+                    </Text>
+                  </div>
+                </td>
+                <MicaComplianceTableCellGroupLayout
+                  title="Generation of hazardous waste"
+                  description={micaIndicators['indicator_10'].description}
+                  displayValue={`${Math.round(
+                    micaIndicators['indicator_10'].result.value
+                  ).toLocaleString()}${' '}
+                  ${micaIndicators['indicator_10'].unit}`}
+                  last
+                />
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </Panel>
+      <div className="w-full flex justify-end py-2">
+        <Text size="12" weight="light">
+          Last updated {lastUpdated.slice(0, lastUpdated.indexOf('T'))}
+        </Text>
+      </div>
+    </>
+  )
+}
diff --git a/apps/website/config/routes.ts b/apps/website/config/routes.ts
@@ -78,4 +78,7 @@ export const routes = {
   letter: {
     index: '/letter',
   },
+  'mica-indicators': {
+    index: '/',
+  },
 }
diff --git a/apps/website/content/mica.ts b/apps/website/content/mica.ts
@@ -0,0 +1,30 @@
+import { to } from '@siafoundation/request'
+import axios from 'axios'
+import * as dotenv from 'dotenv'
+
+dotenv.config()
+
+export type MicaIndicator = {
+  indicator: number
+  title: string
+  description: string
+  unit: string
+  result: {
+    value: number
+    year: number
+  }
+}
+
+export type MicaIndicatorObject = { [key: string]: MicaIndicator }
+
+export async function getMicaIndicators() {
+  const [indicators, indicatorsError] = await to<MicaIndicatorObject>(
+    axios(
+      `https://ccri.sia.tools/mica/overview/sia?responseType=recent&key=${process.env['CCRI_TOKEN']}`
+    )
+  )
+
+  if (indicatorsError) throw indicatorsError
+
+  return indicators
+}
diff --git a/apps/website/pages/mica-indicators/index.tsx b/apps/website/pages/mica-indicators/index.tsx
@@ -0,0 +1,61 @@
+import { Layout } from '../../components/Layout'
+import { textContent } from '../../lib/utils'
+import { routes } from '../../config/routes'
+import { SectionTransparent } from '../../components/SectionTransparent'
+import { SiteHeading } from '@siafoundation/design-system'
+import { SectionGradient } from '../../components/SectionGradient'
+import { backgrounds, previews } from '../../content/assets'
+import { MicaComplianceTable } from '../../components/MicaComplianceTable'
+import { minutesInSeconds } from '@siafoundation/units'
+import { AsyncReturnType } from '../../lib/types'
+import { getMicaIndicators } from '../../content/mica'
+
+type Props = AsyncReturnType<typeof getStaticProps>['props']
+
+export default function MicaIndicators({ micaIndicators, lastUpdated }: Props) {
+  const title = 'MiCA Indicators'
+  const description =
+    'Mica information about this table goes here Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ratione quaerat esse soluta veritatis error! Odit aperiam hic excepturi doloremque ea?'
+
+  return (
+    <Layout
+      title={title}
+      description={textContent(description)}
+      path={routes['mica-indicators'].index}
+      heading={
+        <SectionTransparent className="pt-24 md:pt-32 pb-0">
+          <SiteHeading
+            size="64"
+            title={title}
+            description={description}
+            anchorLink={false}
+          />
+        </SectionTransparent>
+      }
+      backgroundImage={backgrounds.waterfall}
+      previewImage={previews.waterfall}
+    >
+      <SectionGradient className="pb:30 pt-8 pb-20">
+        <MicaComplianceTable
+          micaIndicators={micaIndicators}
+          lastUpdated={lastUpdated}
+        />
+      </SectionGradient>
+    </Layout>
+  )
+}
+
+export async function getStaticProps() {
+  const micaIndicators = await getMicaIndicators()
+  const lastUpdated = new Date().toISOString()
+
+  const props = {
+    micaIndicators,
+    lastUpdated,
+  }
+
+  return {
+    props,
+    revalidate: minutesInSeconds(1440),
+  }
+}