def _aggrid_style(self):
'''Style the cells based on value'''
a = """
function(params) {
if (params.error != '') {
return {
'color': 'white',
'backgroundColor': 'darkred'
}
}
};
"""
return JsCode(a)
def _aggrid_style_rows(self, df: pd.DataFrame):
'''Style the cells based on value'''
if 'error' in df.columns:
a = """
function(params) {
if (params.data.error !== '') {
return {
'color': 'white',
'backgroundColor': 'red'
}
}
};
"""
else:
a = """
function(params) {
return {
'backgroundColor': 'white'
}
};
"""
return JsCode(a)
session_state.Session = False
st.experimental_rerun()
st.header('Tu historial de reviews')
Summary_Rev, Product_Detail = st.beta_columns(2)
with Summary_Rev:
user_Rev = mt.get_UserRev(userName)
gb = GridOptionsBuilder.from_dataframe(user_Rev)
cellsytle_jscode = JsCode("""
function(params) {
if (params.value == 'A') {
return {
'color': 'white',
'backgroundColor': 'darkred'
}
} else {
return {
'color': 'black',
'backgroundColor': 'white'
}
}
};
""")
gb.configure_selection('single', use_checkbox=False)
gb.configure_grid_options(domLayout='normal')
gridOptions = gb.build()
grid_response = AgGrid(
user_Rev,
gridOptions=gridOptions,
height=280,
BtnCellRenderer = JsCode('''
class BtnCellRenderer {
init(params) {
this.params = params;
this.eGui = document.createElement('div');
this.eGui.innerHTML = `
<span>
<button id='click-button'
class='btn-simple'
style='color: ${this.params.color}; background-color: ${this.params.background_color}'>Click!</button>
</span>
`;
this.eButton = this.eGui.querySelector('#click-button');
this.btnClickedHandler = this.btnClickedHandler.bind(this);
this.eButton.addEventListener('click', this.btnClickedHandler);
}
getGui() {
return this.eGui;
}
refresh() {
return true;
}
destroy() {
if (this.eButton) {
this.eGui.removeEventListener('click', this.btnClickedHandler);
}
}
btnClickedHandler(event) {
if (confirm('Are you sure you want to CLICK?') == true) {
if(this.params.getValue() == 'clicked') {
this.refreshTable('');
} else {
this.refreshTable('clicked');
}
console.log(this.params);
console.log(this.params.getValue());
}
}
refreshTable(value) {
this.params.setValue(value);
}
};
''')
"minWidth": 150
},
{
"field": "duration",
"valueFormatter": "x.toLocaleString() + 's'"
},
{
"field": "switchCode",
"minWidth": 150
},
],
"defaultColDef": {
"sortable": True,
"flex": 1,
},
},
# get the rows for each Detail Grid
"getDetailRowData":
JsCode("""function (params) {
console.log(params);
params.successCallback(params.data.callRecords);
}""").js_code,
},
}
r = AgGrid(df,
gridOptions=gridOptions,
height=500,
allow_unsafe_jscode=True,
enable_enterprise_modules=True,
update_mode=GridUpdateMode.SELECTION_CHANGED)
data = get_data_ex7()
gb = GridOptionsBuilder.from_dataframe(data)
#make all columns editable
gb.configure_columns(list('abcde'), editable=True)
js = JsCode("""
function(e) {
let api = e.api;
let rowIndex = e.rowIndex;
let col = e.column.colId;
let rowNode = api.getDisplayedRowAtIndex(rowIndex);
api.flashCells({
rowNodes: [rowNode],
columns: [col],
flashDelay: 10000000000
});
};
""")
gb.configure_grid_options(onCellValueChanged=js)
go = gb.build()
st.markdown("""
### JsCode injections
Cell editions are highlighted here by attaching to ```onCellValueChanged``` of the grid, using JsCode injection
```python
js = JsCode(...)
def _aggrid_style_rows(self):
'''Style the cells based on value'''
table = self._state.table
style_dict = {
'bgp': """
function(params) {
if (params.data.state === 'NotEstd') {
return {
'color': 'white',
'backgroundColor': 'red'
}
}
};
""",
'device': """
function(params) {
if (params.data.status === 'dead') {
return {
'color': 'white',
'backgroundColor': 'red'
}
} else if (params.data.status === 'neverpoll') {
return {
'color': 'white',
'backgroundColor': 'darkred'
}
}
};
""",
'arpnd': """
function(params) {
if (params.data.state === 'failed') {
return {
'color': 'white',
'backgroundColor': 'red'
}
}
};
""",
'vlan': """
function(params) {
if (params.data.state != 'active') {
return {
'color': 'white',
'backgroundColor': 'red'
}
}
};
""",
'sqPoller': """
function(params) {
if (params.data.status != 0 &&
params.data.status != 200) {
return {
'color': 'white',
'backgroundColor': 'red'
}
}
};
""",
'interfaces': """
function(params) {
if (params.data.state === 'down') {
return {
'color': 'white',
'backgroundColor': 'red'
}
} else if (params.data.state === 'notConnected') {
return {
'color': 'black',
'backgroundColor': 'gray'
}
} else if (params.data.state === 'errDisabled') {
return {
'color': 'white',
'backgroundColor': 'darkred'
}
}
};
""",
'inventory': """
function(params) {
if (params.data.status == 'absent') {
return {
'color': 'black',
'backgroundColor': 'gray'
}
}
};
""",
'default': """
function(params) {
return {
'backgroundColor': 'white'
}
};
"""
}
style_dict['evpnVni'] = style_dict['interfaces']
style_dict['address'] = style_dict['interfaces']
a = style_dict.get(table, style_dict['default'])
return JsCode(a)