Skip to content

Commit

Permalink
add search feature in dashdatatable and rearrange bridges (KlimaDAO#52)
Browse files Browse the repository at this point in the history 
Co-authored-by: pkbims <[email protected]>
  • Loading branch information
@0xAurelius
0xAurelius and pkbims authored May 14, 2022
1 parent 0b2d867 commit ea84cbd
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 77 deletions.
120 changes: 60 additions & 60 deletions src/apps/tco2_dashboard/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -863,35 +863,35 @@ def generate_layout():
], href="/CarbonPools", active="exact",
),
html.Hr(style={"margin-top": "1.5rem"}),
html.A(html.H4("Toucan Protocol", style={
html.A(html.H4("C3", style={
'textAlign': 'left'}),
href='https://toucan.earth/'),
href='https://www.c3.app/'),
dbc.NavLink([
html.Div(
html.Img(src='assets/TCO2-Logo.png',
className="image-icons"),
html.Img(src='assets/C3_Logo_Cloud.png',
className="moss-logo"),
className='icon-container'),
html.Span(
"TCO2 Overview")
], href="/TCO2", active="exact"
"C3T Overview")
], href="/C3T", active="exact"
),
dbc.NavLink([
html.Div(
html.Img(src='assets/BCT-Logo.png',
className="moss-logo"),
html.Img(src='assets/C3-UBO-Logo.png',
className="image-icons"),
className='icon-container'),
html.Span(
"BCT Pool")
], href="/BCT", active="exact",
"UBO Pool")
], href="/UBO", active="exact",
),
dbc.NavLink([
html.Div(
html.Img(src='assets/NCT-Logo.png',
className="moss-logo"),
html.Img(src='assets/C3-NBO-Logo.png',
className="image-icons"),
className='icon-container'),
html.Span(
"NCT Pool")
], href="/NCT", active="exact",
"NBO Pool")
], href="/NBO", active="exact",
),
html.Hr(style={"margin-top": "1.5rem"}),
html.A(html.H4("Moss", style={
Expand All @@ -907,35 +907,35 @@ def generate_layout():
], href="/MCO2", active="exact",
),
html.Hr(style={"margin-top": "1.5rem"}),
html.A(html.H4("C3", style={
html.A(html.H4("Toucan", style={
'textAlign': 'left'}),
href='https://www.c3.app/'),
href='https://toucan.earth/'),
dbc.NavLink([
html.Div(
html.Img(src='assets/C3-Logo.png',
html.Img(src='assets/TCO2-Logo.png',
className="image-icons"),
className='icon-container'),
html.Span(
"C3T Overview")
], href="/C3T", active="exact"
"TCO2 Overview")
], href="/TCO2", active="exact"
),
dbc.NavLink([
html.Div(
html.Img(src='assets/C3-UBO-Logo.png',
className="image-icons"),
html.Img(src='assets/BCT-Logo.png',
className="moss-logo"),
className='icon-container'),
html.Span(
"UBO Pool")
], href="/UBO", active="exact",
"BCT Pool")
], href="/BCT", active="exact",
),
dbc.NavLink([
html.Div(
html.Img(src='assets/C3-NBO-Logo.png',
className="image-icons"),
html.Img(src='assets/NCT-Logo.png',
className="moss-logo"),
className='icon-container'),
html.Span(
"NBO Pool")
], href="/NBO", active="exact",
"NCT Pool")
], href="/NCT", active="exact",
),
html.Hr(style={"margin-top": "3rem"}),
],
Expand Down Expand Up @@ -977,37 +977,37 @@ def generate_layout():
id="button-onchain_pool_comp", n_clicks=0,
),
html.Hr(style={"margin-top": "1.5rem"}),
html.A(html.H4("Toucan Protocol", style={
html.A(html.H4("C3", style={
'textAlign': 'left'}),
href='https://toucan.earth/'),
href='https://www.c3.app/'),
dbc.NavLink([
html.Div(
html.Img(src='assets/TCO2-Logo.png',
className="image-icons"),
html.Img(src='assets/C3_Logo_Cloud.png',
className="moss-logo"),
className='icon-container'),
html.Span(
"TCO2 Overview")
], href="/TCO2", active="exact", id="button-tco2", n_clicks=0
),
"C3T Overview")
], href="/C3T", active="exact",
id="button-c3t", n_clicks=0),
dbc.NavLink([
html.Div(
html.Img(src='assets/BCT-Logo.png',
className="moss-logo"),
html.Img(src='assets/C3-UBO-Logo.png',
className="image-icons"),
className='icon-container'),
html.Span(
"BCT Pool")
], href="/BCT", active="exact",
id="button-bct", n_clicks=0
"UBO Pool")
], href="/UBO", active="exact",
id="button-ubo", n_clicks=0
),
dbc.NavLink([
html.Div(
html.Img(src='assets/NCT-Logo.png',
className="moss-logo"),
html.Img(src='assets/C3-NBO-Logo.png',
className="image-icons"),
className='icon-container'),
html.Span(
"NCT Pool")
], href="/NCT", active="exact",
id="button-nct", n_clicks=0
"NBO Pool")
], href="/NBO", active="exact",
id="button-nbo", n_clicks=0
),
html.Hr(style={"margin-top": "1.5rem"}),
html.A(html.H4("Moss", style={
Expand All @@ -1023,37 +1023,37 @@ def generate_layout():
], href="/MCO2", active="exact",
id="button-mco2", n_clicks=0),
html.Hr(style={"margin-top": "1.5rem"}),
html.A(html.H4("C3", style={
html.A(html.H4("Toucan", style={
'textAlign': 'left'}),
href='https://www.c3.app/'),
href='https://toucan.earth/'),
dbc.NavLink([
html.Div(
html.Img(src='assets/C3-Logo.png',
html.Img(src='assets/TCO2-Logo.png',
className="image-icons"),
className='icon-container'),
html.Span(
"C3T Overview")
], href="/C3T", active="exact",
id="button-c3t", n_clicks=0),
"TCO2 Overview")
], href="/TCO2", active="exact", id="button-tco2", n_clicks=0
),
dbc.NavLink([
html.Div(
html.Img(src='assets/C3-UBO-Logo.png',
className="image-icons"),
html.Img(src='assets/BCT-Logo.png',
className="moss-logo"),
className='icon-container'),
html.Span(
"UBO Pool")
], href="/UBO", active="exact",
id="button-ubo", n_clicks=0
"BCT Pool")
], href="/BCT", active="exact",
id="button-bct", n_clicks=0
),
dbc.NavLink([
html.Div(
html.Img(src='assets/C3-NBO-Logo.png',
className="image-icons"),
html.Img(src='assets/NCT-Logo.png',
className="moss-logo"),
className='icon-container'),
html.Span(
"NBO Pool")
], href="/NBO", active="exact",
id="button-nbo", n_clicks=0
"NCT Pool")
], href="/NCT", active="exact",
id="button-nct", n_clicks=0
),
html.Hr(style={"margin-top": "3rem"}),
],
Expand Down
Binary file added src/apps/tco2_dashboard/assets/C3_Logo_Cloud.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/apps/tco2_dashboard/assets/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,16 @@ p {
text-align: center;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]) {
margin-left: 12px;
color: white!important;
text-align: left;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter ::placeholder{
color: #3c3c3c!important;
}

@media (max-width: 48em) {

#static-content {
Expand Down
46 changes: 37 additions & 9 deletions src/apps/tco2_dashboard/mco2.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ def create_content_moss(df_mco2_bridged, df_mco2_retired, fig_mco2_total_volume,
'Project ID', 'Quantity', 'Vintage', 'Country', 'Project Type', 'Methodology', 'Name']]
df_grouped = df_mco2_bridged.groupby(['Project ID', 'Country', 'Methodology', 'Project Type', 'Name', 'Vintage'])[
'Quantity'].sum().to_frame().reset_index()

def table_type(df_column):
if [df_column] in [
'Vintage', 'Quantity']:
return 'numeric'
else:
return 'text'

content_mco2 = [
dbc.Row(
dbc.Col(
Expand Down Expand Up @@ -101,26 +109,46 @@ def create_content_moss(df_mco2_bridged, df_mco2_retired, fig_mco2_total_volume,
className="card-title"),
dash_table.DataTable(
df_grouped.to_dict('records'),
[{"name": i, "id": i, "presentation": "markdown"}
[{"name": i, "id": i, "presentation": "markdown", 'type': table_type(i)}
for i in df_mco2_bridged.columns],
id='tbl',
style_header={
'backgroundColor': GRAY,
'text-align': 'center'
},
style_data={
'backgroundColor': DARK_GRAY
'backgroundColor': DARK_GRAY,
'color': 'white'
},
style_table={'overflowX': 'auto'},
style_data_conditional=[{
"if": {"state": "active"},
"backgroundColor": "#202020",
"border": "1px solid #2a2a2a",
"color": "white",
},
style_data_conditional=[
{"if": {'column_id': 'Project ID'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Country'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Quantity'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Vintage'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Methodology'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {"state": "active"},
"backgroundColor": "#202020",
"border": "1px solid #2a2a2a",
"color": "white",
},
],
page_size=20,
sort_action='native'
sort_action='native',
filter_action='native',
style_filter={
'backgroundColor': GRAY,
}
),
])
])
Expand Down
44 changes: 36 additions & 8 deletions src/apps/tco2_dashboard/pool.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ def create_pool_content(pool_ticker, pool_name, deposited, redeemed, retired, de
'Project ID', 'Token Address', 'View on PolygonScan', 'Quantity', 'Vintage', 'Country', 'Project Type',
'Methodology', 'Name',
]]

if retired is None:
retired_card = dbc.Card([
html.H5(
Expand Down Expand Up @@ -55,6 +56,13 @@ def create_pool_content(pool_ticker, pool_name, deposited, redeemed, retired, de
dbc.CardBody(dcc.Graph(figure=fig_redeemed_over_time))
], className="card-graph")

def table_type(df_column):
if [df_column] in [
'Vintage', 'Quantity']:
return 'numeric'
else:
return 'text'

content = [
dbc.Row(
dbc.Col(
Expand Down Expand Up @@ -148,26 +156,46 @@ def create_pool_content(pool_ticker, pool_name, deposited, redeemed, retired, de
className="card-title"),
dash_table.DataTable(
detail_df.to_dict('records'),
[{"name": i, "id": i, "presentation": "markdown"}
[{"name": i, "id": i, "presentation": "markdown", 'type': table_type(i)}
for i in detail_df.columns],
id='tbl',
style_header={
'backgroundColor': GRAY,
'text-align': 'center'
},
style_data={
'backgroundColor': DARK_GRAY
},
style_data_conditional=[{
"if": {"state": "active"},
"backgroundColor": "#202020",
"border": "1px solid #2a2a2a",
"color": "white",
'backgroundColor': DARK_GRAY,
'color': 'white'
},
style_data_conditional=[
{"if": {'column_id': 'Project ID'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Country'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Quantity'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Vintage'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {'column_id': 'Methodology'},
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
},
{"if": {"state": "active"},
"backgroundColor": "#202020",
"border": "1px solid #2a2a2a",
"color": "white",
},
],
style_table={'overflowX': 'auto'},
page_size=20,
sort_action='native',
filter_action='native',
style_filter={
'backgroundColor': GRAY,
}
),
])
])
Expand Down

0 comments on commit ea84cbd

Please sign in to comment.