File size: 3,402 Bytes
987be42 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
"""Dev app to try things out."""
import vizro.models as vm
import vizro.plotly.express as px
import plotly.graph_objects as go
from vizro import Vizro
from vizro.tables import dash_ag_grid
from dash import Input, Output, State, callback, no_update, ctx
import pandas as pd
df = pd.DataFrame({
"date": pd.Series(dtype="datetime64[ns]"),
"value": pd.Series(dtype="float")
})
columnDefs = [
{"headerName": "Date", "field": "date", "editable": True, "cellEditor": "datePicker","checkboxSelection": True},
{"headerName": "Value", "field": "value", "editable": True, "cellEditor": "numericEditor"},
]
empty_figure = go.Figure(
layout={
"title": "Timeline of input data",
"paper_bgcolor": "rgba(0,0,0,0)",
"plot_bgcolor": "rgba(0,0,0,0)",
"xaxis": {"visible": False},
"yaxis": {"visible": False},
}
)
#update the chart based on the edited table
@callback(
Output("output_chart", "figure", allow_duplicate=True),
Input("__input_editing-grid2", "cellValueChanged"),
Input("__input_editing-grid2", "rowData"),
Input("theme_selector", "checked"),
prevent_initial_call=True
)
def update(_, rows,theme_selector):
dff = pd.DataFrame(rows)
if dff.empty:
return empty_figure
fig = px.line(dff,title = "Timeline of input data", x="date", y="value")
fig.update_layout(template="vizro_light" if theme_selector else "vizro_dark") #to get the theme right
return fig
# add or delete rows of table
@callback(
Output("__input_editing-grid2", "deleteSelectedRows"),
Output("__input_editing-grid2", "rowData"),
Input("delete-row-btn", "n_clicks"),
Input("add-row-btn", "n_clicks"),
State("__input_editing-grid2", "rowData"),
prevent_initial_call=True,
)
def update_dash_table(n_dlt, n_add, data):
if ctx.triggered_id == "add-row-btn":
new_row = {
"date": ["2020-01-01"],
"value": [0.0]
}
df_new_row = pd.DataFrame(new_row)
updated_table = pd.concat([pd.DataFrame(data), df_new_row])
return False, updated_table.to_dict("records")
elif ctx.triggered_id == "delete-row-btn":
return True, no_update
page = vm.Page(
title="Example of adding rows to AG Grid and updating a chart based on the edited table",
layout=vm.Layout(grid = [
[0,0,0,0,1,1,1,1],
[0,0,0,0,1,1,1,1],
[0,0,0,0,1,1,1,1],
[2,3,-1,-1,-1,-1,-1,-1],
] ),
components=[
vm.AgGrid(
id = "editing-grid2",
title="Editable Table / AG Grid",
figure=dash_ag_grid(
data_frame=df,
columnDefs=columnDefs,
defaultColDef={"editable": True},
columnSize="sizeToFit",
dashGridOptions={"rowSelection": "multiple", "suppressRowClickSelection": True},
),
),
vm.Graph(id = "output_chart",figure = px.line(df, title = "Timeline of input data",x="date", y="value")),
vm.Button(
id="delete-row-btn",
text="Delete row",
),
vm.Button(
id="add-row-btn",
text="Add row",
),
],
)
dashboard = vm.Dashboard(pages=[page])
app = Vizro().build(dashboard).dash
|