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

apps/website/components/MicaComplianceTable.tsx

@@ -0,0 +1,257 @@
+import { 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-gray-1000'
+        }`}
+      >
+        <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-gray-1000'
+        } 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 (
+    <>
+      <div className="border dark:border-gray-700 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-gray-1000">
+              <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-gray-1000 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-gray-1000 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-gray-1000 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>
+      <div className="w-full flex justify-end py-2">
+        <Text size="12" weight="light">
+          Last updated {lastUpdated.slice(0, lastUpdated.indexOf('T'))}
+        </Text>
+      </div>
+    </>
+  )
+}

apps/website/config/routes.ts

@@ -78,4 +78,7 @@ export const routes = {
   letter: {
     index: '/letter',
   },
+  sustainability: {
+    index: '/sustainability',
+  },
 }

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
+}

apps/website/pages/sustainability/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 Mica({ 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.sustainability.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-10">
+        <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),
+  }
+}