Summary

On the Carbon Supply page, on the donut chart on this page, the "Download Plot as png" CTA (on hover over the chart) is overlapping the legend.

Requirements

• Please adjust the legend location to avoid the overlap

Need to work with creative/marketing - short tooltips with a ? hover icon with links to terms in the GitBook glossary https://docs.klimadao.finance/references/glossary

'total retirements' across all on-chain carbon assets for the past year (with a graph showing daily/weekly/monthly, etc).

we can ignore which pool they came from so we can include non-aggregator retirements in this

The purpose of this issue is too provided the capability for a user to export the carbon pool table data in a csv format.

Alternatively or in addition support copying from tables so they paste into excel cleanly.

In the event that Verra's API rate limits us or changes suddenly, we need to have a fallback dataset somewhere that we can load if the Verra API errors out for some reason

We can also use this to avoid pulling the real Verra dataset during testing

Needs more definition and also has dependency on a Carbonmark subgraph

Add social share feature (desktop & mobile) as per the designs.

FIgma file: https://www.figma.com/file/mXI4SzNNmoefYnOdcbXZcO/The-State-of-Tokenized-Carbon

Since we can't tell whether a given TCO2 retirement came from a specific pool with the current retirement flow, we can just track retirements made via the retirement aggregator and indicate that this only includes retirements made via that tool since we can be sure they came from a specific pool.

Since many users will want to redeem or retire a specific project, we need a way to display the effective cost of retiring a specific project from a given pool

One option would be a line chart multiplied by the selective redemption fee for that pool, but the fees can change over time so we would need to integrate this data into the Subgraph

A simpler option would be to only show selective retirement costs for the current pool price and current fee - to simplify we can use the retirement aggregator's pricing functions to get the selective redemption cost for each pool at a point in time

As part of the move from talking about Digital Carbon vs Tokenized Carbon we are doing a scrub of the Carbon Dashboard and looking for content that needs to change.

Each change is being left as a "to-do" in a comment.

As a first step toward a top-level dashboard, we can throw together a simple page that just compares historical prices for BCT, MCO2, and NCT

With explanation of how each tokenized pool maps onto off-chain quotes

We need to actually build the data feeds first so this is blocked until we do that

Like we do here:
https://github.com/KlimaDAO/klimadao/blob/staging/app/components/views/Home/styles.ts#L41-L55

To fix the ugly gray scrollbar on Windows and match the dapp styles

Summary

On the carbon dashboard, the addition of the work "Digital" has resulted in the Digital Carbon Overview ToC item to wrap.

Requirements

Could we bump the ToC width enough to get Digital Carbon Overview on one line?

Should have same top-level dashboard (C3T instead of TCO2) and per-pool pages as Toucan

As a user of the carbon dashboard, I want to better understand the role of the KLIMA token as a reference basket of the most liquid carbon credit classes, and have a useful reference for assessing the relative value of the KLIMA token and the carbon pool tokens that back it

This workstream relates to enhancements and changes to the Carbon Pools page on the Carbon Dashboard.

Requirements:

• Change navigation title from Carbon Pools to Carbon Pricing
• In each pool price box include:
• -Spot price
• -Selective cost (with tool tip)
• -Current supply
• -Figma mock/sketch
• Clean up the price boxes design
• Add a second graph under the spot price graph to show liquidity changes over time (@marcus Aurelius to provide data for this [THIS WILL BE A NEW TICKET]
• Add UBO and NBO to the price boxes and graphs
• Add a standard footer to all the pages with a last updated time stamp [THIS WILL BE A NEW TICKET]

Need the following tasks done to complete our GTM installation for the Carbon Dashboard:

• Paste this code as high in the of the page as possible:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KWFJ9R2');</script>
<!-- End Google Tag Manager -->

• Additionally, paste this code immediately after the opening tag:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KWFJ9R2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Review the Senken dashboard for design inspiration and feature ideation.
Capture the analysis as a set of design sketches and / or feature requirements.

Description

Senken have launched a beta analytics feature (https://www.senken.io/analytics-carbon)
We should review their dashboard and look for opportunities to match or improve on our carbon dashboard application.

Some initial ideas to consider:

1. Switch price charts to candle
2. Add top-level stats for each pool like they have under "Top Movers"
3. Update subgraph to include top-level stats for each pool
4. Other opportunities?

On the Retirements Trends page...https://carbon.klimadao.finance/retirements
In particular BY POOL tab...

Supplement info tooltips to expand/refine the definitions of 'retirement' and 'redemption'.

Aaron created designs for the carbon dashboard homepage; https://www.figma.com/file/mXI4SzNNmoefYnOdcbXZcO/The-State-of-Tokenized-Carbon?node-id=901%3A1440

Create a Homepage similar to the design, there might be some limitations in using plotly.

Totals by beneficiary, date of first/last retirement, % of pledge fulfilled, etc.

Provides an effective leaderboard for pledges too

;Add NCT Page similar to BCT Page

Submitted via discord

The URLs for carbon.klimadao.finance are set to be case sensitive. This means it's very difficult to directly navigate or even link to them.

Works => https://carbon.klimadao.finance/CarbonPricing
Doesn't work => https://carbon.klimadao.finance/carbonpricing

In addition, the URL really should be /carbon-pricing with a hyphen, so that we can rank for the keyword carbon / carbon pricing

Include banner text similar to what was utilized on the main Klima website for promoting the DCM webinar with a link to our RA documents to increase the awareness of these resources.

Since they're paginated it's hard to search for a specific project

At the top of the Carbon Supply page, after the title container, add a new container which is a summary donut graph visual of the total supply (tonnes) metric.

Use the same template/graph as on the off vs on-chain carbon page, i.e.

Makes it easier to see composition of retirements over time compared to the line chart

Feature development of carbon dashboard homepage is complete #55.

The site being review is on Staging: https://staging-carbon-dashboard-9yimq.ondigitalocean.app/

Feedback and bugs from QA/review are below.

We should have many of the same charts from the main page filtered down to just BCT on the BCT Pool page

A detail table that shows each individual TCO2 should also be added, including a column with a link to the Verra project page: https://registry.verra.org/app/projectDetail/VCS/<project_id>

The purpose of this ticket is to consistently apply recommended style and font changes across the Carbon Dashboard site.

These are the requirements and should be applied to all relevant components across all of the pages:

• For the header cards, please use the following:

Width: 100%
padding top and bottom: 20px

Font: “Desktop/H2” - 48px Bold

font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 48px;

• For the number cards, please use the following:

padding top and bottom: 20px
make the labels font “Desktop/H5”

font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 28px;

The space between the labels and their corresponding numbers should be 12px
Make the numbers font:

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;

• For the graph cards, please use the following:

padding-all: 20px
Graph titles:

font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 28px;

• Space between cards within a chain grouping (for example all the cards relating to the polygon on chain carbon), should be 20px. Space between chain groupings should be 40 px. (So the ethereum title card should be 40 px below the bottom polygon graph card, etc)

Dionysus is reporting a recurring issue where both the production and staging versions of the Carbon Dashboard do not load properly. Error message below:

It's a bit frustrating when trying to show this to potential partners.
It seems like it happens in the morning EU time... I don't know if that's useful information at all.

For each chain (right now just Ethereum and Polygon, soon we'll add Celo and Regen) we should show:

1. Total carbon supply on the chain (need to be careful not to double count credits that have been bridged)
2. Total retirements issued on that chain
3. % of retirements made via KlimaDAO aggregator

For Celo we need to be careful not to report until we add a subgraph that tracks MCO2 retirements issued from Celo (although I think the volumes are quite small)

We need to handle subgraphs being unavailable more gracefully than we currently do - ideally wrap each subgrounds query in a try/except that ensures something is passed back from the data fetching functions, for instance None

And then in the process of rendering each chart, we check if the dataset we're using is None - and if so simply display a generic "This dataset is not available at the moment" message

This work stream is related to defining the user journey and designs for the next iteration (v2) of the Carbon Dashboard.

Related design issue: KI User Journey Design Review (#478)

Roadmap card here: https://www.notion.so/klima-dao/Carbon-Dashboard-Next-Iteration-v2-84581acfbc7d4d339e9dc93d9332463f

Notes from design ideation meeting:

• The Carbon Dashboard is meant to be a reference for industry, press, academic, etc
• The home/landing page is meant to act as a total executive summary
  • Some users will just want the summary and not want to drill into the detailed reporting
• Concepts that will help tell the story of tokenized carbon:
  • Mentioning the on the ground project
  • Nature vs mitigation credits
  • Top retired project
• Design ideas to try and incorporate
  • Over time view
  • Representation of the percentage change
  • Tie the stats to real world impact, for ex:
    • hectares of forest
    • cars off the road
    • liters of gasoline saved
    • etc
• Full liberty to suggest design changes to the landing page, lean towards more visual, possible use of infographics, animated gifs, etc.
  • Note: beyond the landing page, the other pages have limitations given the graphing library being used

We should left align the left and add a grayscale logo or favicon that is then in color when the item is active - just like the main site

In addition to pool prices, on the Carbon Pools page there should also be an indication of liquidity depth for each pool, expressed as, say, "size of order resulting in +/- 2% slippage" - ideally displayed over time as a chart

Best practice

We probably want to get away from CoinGecko too and start pull on-chain prices from a Subgraph

Requires us to put up a subgraph with the various prices for carbon assets (and potentially also KLIMA)

I'm thinking we want a dedicated markets Subgraph that just has prices from Sushi/Quickswap for the various tokens in our ecosystem

Show retirement activity over time broken down by pool, as well as a detail listing of retirements

Not sure if this will be possible with DOAP, might need to tackle after we move to k8s hosting

from gordob:

NO http security headers set, TLS 1-TLS 1.1 enabled, Obsolete CBC ciphers enabled.

we can set CORS on DOAP, and we can in theory set custom headers on the Dash app as outlined here: plotly/dash-renderer#75

Where applicable and across all the pages, include a log scale option for the line graphs.

This will help better visualize the data when the graph includes outlier/extreme values that mute the rest of the chart, for example.

High-level data story that walks the user through key metrics across the entire on-chain market:

• total tonnes bridged vs. size of off-chain market
• breakdown of volume by bridge
• overall map of where credits are coming from
• comparison of on-chain and off-chain prices (with explanation of how each tokenized pool maps onto off-chain assets like GEO, N-GEO

Provide daily, monthly, and yearly views for bridged and retired volumes. This would be applicable for the TCO2 and C3T pages.

Right now we just have a "Pool" column that either shows a pool name or a TCO2 address

Instead, we should have a separate "Project" column that links directly to the Verra project page (or maybe the project page on Carbonmark?) and then Pool would be blank or N/A for retirements made directly via TCO2

We should have the same last 7 days and last 30 days options on the pool pages as we do on the main page

Since MCO2 is "homogeneous" we can just hard-code data based on the total amount of MCO2 and the known set of projects composing MCO2

For volumes, we can either evenly divide the total amount of MCO2, or we simply treat them as a single block and don't show volume breakdowns by project

We can still have a "detail" table with the links to the individual projects, just sans volumes

https://mco2token.moss.earth/

There should be some call-to-action link on the dashboard that leads people to Carbonmark for browsing projects and buying/selling/retiring credits.

followup to #103