From 1a6e1f1fe98bca4914d38fd88abc8471b980e80a Mon Sep 17 00:00:00 2001 From: Marcus Aurelius Date: Wed, 3 Apr 2024 14:51:43 -0500 Subject: [PATCH] More styling adjustments --- src/apps/treasury/assets/arrow.svg | 5 ++ src/apps/treasury/assets/custom.css | 18 +++++ src/apps/treasury/pages/hud.py | 119 +++++++++++++++------------- src/apps/treasury/util/constants.py | 3 + 4 files changed, 90 insertions(+), 55 deletions(-) create mode 100644 src/apps/treasury/assets/arrow.svg diff --git a/src/apps/treasury/assets/arrow.svg b/src/apps/treasury/assets/arrow.svg new file mode 100644 index 0000000..0bf25db --- /dev/null +++ b/src/apps/treasury/assets/arrow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/apps/treasury/assets/custom.css b/src/apps/treasury/assets/custom.css index 6ebe3ed..fd540ae 100644 --- a/src/apps/treasury/assets/custom.css +++ b/src/apps/treasury/assets/custom.css @@ -11,6 +11,14 @@ font-family: 'Poppins-SemiBold'; src: url('Poppins/Poppins-SemiBold.ttf') format('truetype'); } +@font-face { + font-family: 'Poppins-Bold'; + src: url('Poppins/Poppins-Bold.ttf') format('truetype'); +} +@font-face { + font-family: 'Poppins-ExtraBold'; + src: url('Poppins/Poppins-ExtraBold.ttf') format('truetype'); +} /* Set the default font to Poppins regular*/ *{ font-family: 'Poppins', sans-serif; @@ -67,4 +75,14 @@ body{ .btn { background-color: #00cc33; + border: 0px; + border-radius: 500px; + color: #000; + padding-left: 50px; + padding-right: 50px; + font-family: 'Poppins-SemiBold'; +} + +a { + color: #00cc33; } diff --git a/src/apps/treasury/pages/hud.py b/src/apps/treasury/pages/hud.py index 9139109..3243fdd 100644 --- a/src/apps/treasury/pages/hud.py +++ b/src/apps/treasury/pages/hud.py @@ -8,7 +8,7 @@ import plotly.graph_objects as go import plotly.express as px -from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT +from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT, KLIMA_GREEN from src.apps.treasury.data.protocol_metrics import \ sg, last_metric, get_last_asset_price_by_address @@ -26,14 +26,16 @@ go.Indicator( mode="number", value=sg.query([last_metric.marketCap]), - number={"prefix": "$", "valueformat": ".2s"}, + number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}}, title={ "text": - ("KLIMA " - "Market Cap") + "Market Cap"), + 'align': 'left', + "font": {"family": "Poppins-Bold", 'size': 30} }, - domain={'y': [0, 0.5], 'x': [0.25, 0.75]}, + domain={'y': [0, 0.35], 'x': [0.25, 0.75]}, ) ) @@ -42,12 +44,14 @@ go.Indicator( mode="number", value=sg.query([last_metric.treasuryMarketValue]), - number={"prefix": "$", "valueformat": ".2s"}, + number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}}, title={ "text": - "Treasury Market Value" + "Treasury
Market Value", + 'align': 'left', + "font": {"family": "Poppins-Bold", 'size': 30} }, - domain={'y': [0.5, 1], 'x': [0.25, 0.75]}, + domain={'y': [0.65, 1], 'x': [0.25, 0.75]}, ) ) @@ -131,73 +135,78 @@ # TODO: style holdings as $xx.yy[m/k] (i.e. human-formatted like indicators) -# TODO: visualize targets in some way +# TODO: visualize targets in a better way on single chart # TODO: load targets from Google Sheet for ease of maintenance +color_map = { + 'Op Ex': '#f2ae00', + 'Carbon Forwards': '#6fff93', + 'Carbon Backing': KLIMA_GREEN, + 'Treasury Holdings': '#ddf641' +} + green_ratio_fig = px.pie( green_ratio_df, values="value", names="bucket", hole=.3, color="bucket", - color_discrete_map={ - 'Op Ex': '#f2ae00', - 'Carbon Forwards': '#6fff93', - 'Carbon Backing': '#00cc33', - 'Treasury Holdings': '#ddf641' - }, + color_discrete_map=color_map, category_orders={'bucket': order}, - title="Green Ratio: Current", + title="Green Ratio:
Current", ) green_ratio_fig.update_layout( - title_x=0.5, + title_x=0.1, + title_font_size=30, + title_font_family='Poppins-Bold', legend=dict( yanchor='bottom', - y=-.5, - xanchor='auto', - x=.5 + y=0, + xanchor='left', + x=1.25 ) ) green_ratio_target_fig = px.pie( green_ratio_df, values="target", names="bucket", hole=.3, color="bucket", - color_discrete_map={ - 'Op Ex': '#f2ae00', - 'Carbon Forwards': '#6fff93', - 'Carbon Backing': '#00cc33', - 'Treasury Holdings': '#ddf641' - }, + color_discrete_map=color_map, category_orders={'bucket': order}, - title="Green Ratio: Target", + title="Green Ratio:
Target", ) green_ratio_target_fig.update_layout( - title_x=0.5, + title_x=0.1, + title_font_size=30, + title_font_family='Poppins-Bold', legend=dict( yanchor='bottom', - y=-.5, - xanchor='auto', - x=.5 + y=0, + xanchor='left', + x=1.25 ) ) -layout = dbc.Container([ - html.Div([ - dbc.Row([ - dbc.Col([ - dcc.Graph(figure=metric_fig) - ], xs=12, sm=12, md=12, lg=4, xl=4), - dbc.Col([ - dcc.Graph(figure=green_ratio_fig) - ], xs=12, sm=6, md=6, lg=4, xl=4), - dbc.Col([ - dcc.Graph(figure=green_ratio_target_fig) - ], xs=12, sm=6, md=6, lg=4, xl=4) - ]), - dbc.Row([ - dbc.Col([ - dbc.Button( - 'Learn more', - size='lg', - href='https://dune.com/klimadao/klima' - ) - ], xs=12, sm=12, md=12, lg=12, xl=12) - ]) - ], className='center') -], id='page_content_hud', fluid=True) +layout = dbc.Container( + [ + html.Div([ + dbc.Row([ + dbc.Col([ + dcc.Graph(figure=metric_fig) + ], xs=12, sm=12, md=12, lg=4, xl=4), + dbc.Col([ + dcc.Graph(figure=green_ratio_fig) + ], xs=12, sm=6, md=6, lg=4, xl=4), + dbc.Col([ + dcc.Graph(figure=green_ratio_target_fig) + ], xs=12, sm=6, md=6, lg=4, xl=4) + ]), + dbc.Row([ + dbc.Col([ + dbc.Button( + ['LEARN MORE ', html.Img(src='./assets/arrow.svg')], + size='lg', + href='https://dune.com/klimadao/klima' + ) + ], xs=12, sm=12, md=12, lg=12, xl=12) + ]) + ], className='center') + ], + id='page_content_hud', fluid=True, + style={'border': f'4px solid {KLIMA_GREEN}', 'border-radius': '30px', 'padding': '20px', 'margin': '10px'} +) diff --git a/src/apps/treasury/util/constants.py b/src/apps/treasury/util/constants.py index 3d38046..9d6ca69 100644 --- a/src/apps/treasury/util/constants.py +++ b/src/apps/treasury/util/constants.py @@ -13,3 +13,6 @@ BCT_USDC_PAIR = '0x1E67124681b402064CD0ABE8ed1B5c79D2e02f64' KLIMA_MCO2_PAIR = '0x64a3b8ca5a7e406a78e660ae10c7563d9153a739' KLIMA_USDC_PAIR = '0x5786b267d35f9d011c4750e0b0ba584e1fdbead1' + +# Colors +KLIMA_GREEN = '#00cc33'