Skip to content

Commit 1a6e1f1

Browse files
0xAurelius0xAurelius
committed
More styling adjustments
1 parent a128d79 commit 1a6e1f1

File tree

4 files changed

+90
-55
lines changed

4 files changed

+90
-55
lines changed

‎src/apps/treasury/assets/arrow.svg

+5
Loading

‎src/apps/treasury/assets/custom.css

+18
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@
1111
font-family: 'Poppins-SemiBold';
1212
src: url('Poppins/Poppins-SemiBold.ttf') format('truetype');
1313
}
14+
@font-face {
15+
font-family: 'Poppins-Bold';
16+
src: url('Poppins/Poppins-Bold.ttf') format('truetype');
17+
}
18+
@font-face {
19+
font-family: 'Poppins-ExtraBold';
20+
src: url('Poppins/Poppins-ExtraBold.ttf') format('truetype');
21+
}
1422
/* Set the default font to Poppins regular*/
1523
*{
1624
font-family: 'Poppins', sans-serif;
@@ -67,4 +75,14 @@ body{
6775

6876
.btn {
6977
background-color: #00cc33;
78+
border: 0px;
79+
border-radius: 500px;
80+
color: #000;
81+
padding-left: 50px;
82+
padding-right: 50px;
83+
font-family: 'Poppins-SemiBold';
84+
}
85+
86+
a {
87+
color: #00cc33;
7088
}

‎src/apps/treasury/pages/hud.py

+64-55
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import plotly.graph_objects as go
99
import plotly.express as px
1010

11-
from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT
11+
from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT, KLIMA_GREEN
1212
from src.apps.treasury.data.protocol_metrics import \
1313
sg, last_metric, get_last_asset_price_by_address
1414

@@ -26,14 +26,16 @@
2626
go.Indicator(
2727
mode="number",
2828
value=sg.query([last_metric.marketCap]),
29-
number={"prefix": "$", "valueformat": ".2s"},
29+
number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}},
3030
title={
3131
"text":
32-
("KLIMA <a title='KLIMA supply multiplied by current price' href="
32+
("KLIMA<br><b><a title='KLIMA supply multiplied by current price' href="
3333
"'https://www.coinbase.com/learn/crypto-basics/what-is-market-cap'>"
34-
"Market Cap</a>")
34+
"Market Cap</a></b>"),
35+
'align': 'left',
36+
"font": {"family": "Poppins-Bold", 'size': 30}
3537
},
36-
domain={'y': [0, 0.5], 'x': [0.25, 0.75]},
38+
domain={'y': [0, 0.35], 'x': [0.25, 0.75]},
3739
)
3840
)
3941

@@ -42,12 +44,14 @@
4244
go.Indicator(
4345
mode="number",
4446
value=sg.query([last_metric.treasuryMarketValue]),
45-
number={"prefix": "$", "valueformat": ".2s"},
47+
number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}},
4648
title={
4749
"text":
48-
"Treasury <a href='https://en.wikipedia.org/wiki/Market_value'>Market Value</a>"
50+
"Treasury<br><b><a href='https://en.wikipedia.org/wiki/Market_value'>Market Value</a></b>",
51+
'align': 'left',
52+
"font": {"family": "Poppins-Bold", 'size': 30}
4953
},
50-
domain={'y': [0.5, 1], 'x': [0.25, 0.75]},
54+
domain={'y': [0.65, 1], 'x': [0.25, 0.75]},
5155
)
5256
)
5357

@@ -131,73 +135,78 @@
131135

132136

133137
# TODO: style holdings as $xx.yy[m/k] (i.e. human-formatted like indicators)
134-
# TODO: visualize targets in some way
138+
# TODO: visualize targets in a better way on single chart
135139
# TODO: load targets from Google Sheet for ease of maintenance
140+
color_map = {
141+
'Op Ex': '#f2ae00',
142+
'Carbon Forwards': '#6fff93',
143+
'Carbon Backing': KLIMA_GREEN,
144+
'Treasury Holdings': '#ddf641'
145+
}
146+
136147
green_ratio_fig = px.pie(
137148
green_ratio_df, values="value",
138149
names="bucket", hole=.3, color="bucket",
139-
color_discrete_map={
140-
'Op Ex': '#f2ae00',
141-
'Carbon Forwards': '#6fff93',
142-
'Carbon Backing': '#00cc33',
143-
'Treasury Holdings': '#ddf641'
144-
},
150+
color_discrete_map=color_map,
145151
category_orders={'bucket': order},
146-
title="Green Ratio: Current",
152+
title="Green Ratio:<br><b>Current</b>",
147153
)
148154
green_ratio_fig.update_layout(
149-
title_x=0.5,
155+
title_x=0.1,
156+
title_font_size=30,
157+
title_font_family='Poppins-Bold',
150158
legend=dict(
151159
yanchor='bottom',
152-
y=-.5,
153-
xanchor='auto',
154-
x=.5
160+
y=0,
161+
xanchor='left',
162+
x=1.25
155163
)
156164
)
157165

158166
green_ratio_target_fig = px.pie(
159167
green_ratio_df, values="target",
160168
names="bucket", hole=.3, color="bucket",
161-
color_discrete_map={
162-
'Op Ex': '#f2ae00',
163-
'Carbon Forwards': '#6fff93',
164-
'Carbon Backing': '#00cc33',
165-
'Treasury Holdings': '#ddf641'
166-
},
169+
color_discrete_map=color_map,
167170
category_orders={'bucket': order},
168-
title="<a href='https://forum.klimadao.finance/d/285-rfc-green-ratio'>Green Ratio: Target</a>",
171+
title="<a href='https://forum.klimadao.finance/d/285-rfc-green-ratio'>Green Ratio:<br><b>Target</b></a>",
169172
)
170173
green_ratio_target_fig.update_layout(
171-
title_x=0.5,
174+
title_x=0.1,
175+
title_font_size=30,
176+
title_font_family='Poppins-Bold',
172177
legend=dict(
173178
yanchor='bottom',
174-
y=-.5,
175-
xanchor='auto',
176-
x=.5
179+
y=0,
180+
xanchor='left',
181+
x=1.25
177182
)
178183
)
179184

180-
layout = dbc.Container([
181-
html.Div([
182-
dbc.Row([
183-
dbc.Col([
184-
dcc.Graph(figure=metric_fig)
185-
], xs=12, sm=12, md=12, lg=4, xl=4),
186-
dbc.Col([
187-
dcc.Graph(figure=green_ratio_fig)
188-
], xs=12, sm=6, md=6, lg=4, xl=4),
189-
dbc.Col([
190-
dcc.Graph(figure=green_ratio_target_fig)
191-
], xs=12, sm=6, md=6, lg=4, xl=4)
192-
]),
193-
dbc.Row([
194-
dbc.Col([
195-
dbc.Button(
196-
'Learn more',
197-
size='lg',
198-
href='https://dune.com/klimadao/klima'
199-
)
200-
], xs=12, sm=12, md=12, lg=12, xl=12)
201-
])
202-
], className='center')
203-
], id='page_content_hud', fluid=True)
185+
layout = dbc.Container(
186+
[
187+
html.Div([
188+
dbc.Row([
189+
dbc.Col([
190+
dcc.Graph(figure=metric_fig)
191+
], xs=12, sm=12, md=12, lg=4, xl=4),
192+
dbc.Col([
193+
dcc.Graph(figure=green_ratio_fig)
194+
], xs=12, sm=6, md=6, lg=4, xl=4),
195+
dbc.Col([
196+
dcc.Graph(figure=green_ratio_target_fig)
197+
], xs=12, sm=6, md=6, lg=4, xl=4)
198+
]),
199+
dbc.Row([
200+
dbc.Col([
201+
dbc.Button(
202+
['LEARN MORE ', html.Img(src='./assets/arrow.svg')],
203+
size='lg',
204+
href='https://dune.com/klimadao/klima'
205+
)
206+
], xs=12, sm=12, md=12, lg=12, xl=12)
207+
])
208+
], className='center')
209+
],
210+
id='page_content_hud', fluid=True,
211+
style={'border': f'4px solid {KLIMA_GREEN}', 'border-radius': '30px', 'padding': '20px', 'margin': '10px'}
212+
)

‎src/apps/treasury/util/constants.py

+3
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,6 @@
1313
BCT_USDC_PAIR = '0x1E67124681b402064CD0ABE8ed1B5c79D2e02f64'
1414
KLIMA_MCO2_PAIR = '0x64a3b8ca5a7e406a78e660ae10c7563d9153a739'
1515
KLIMA_USDC_PAIR = '0x5786b267d35f9d011c4750e0b0ba584e1fdbead1'
16+
17+
# Colors
18+
KLIMA_GREEN = '#00cc33'

0 commit comments

Comments
 (0)