Hello
I get the error: Warning: Invalid aria pro aria-description on
tag.
My code
app.py
from dash import Dash, html, Output, Input, State, no_update, clientside_callback, callback_context
import pandas as pd
import dash_ag_grid as dag
from src.color_palette import discrete_background_color_bins
app = Dash(__name__, suppress_callback_exceptions=True)
df = pd.read_csv('cc1.csv')
styleConditions = discrete_background_color_bins(df, column="res_4")
columnDefs = [
{"field": "res_0"},
{"field": "res_1", "cellStyle": {"styleConditions": styleConditions}},
{"field": "res_2","cellStyle": {"styleConditions": styleConditions}},
{"field": "res_3","cellStyle": {"styleConditions": styleConditions}},
{"field": "res_4", "cellStyle": {"styleConditions": styleConditions}},
{'field': 'res_5',"cellStyle": {"styleConditions": styleConditions}},
]
# df['res_4'] = df['res_4'].apply(lambda x: str(x) + '%')
# df['res_5'] = df['res_5'].apply(lambda x: str(x) + '%')
app.layout = html.Div(
id='mm',
children=[
html.Div( [
dag.AgGrid(
id='my-grid',
rowData=df.to_dict('records'),
columnDefs=columnDefs,
defaultColDef={"resizable": False,
"sortable": True,
"filter": True,
"cellStyle": {"wordBreak": "normal"},
"wrapText": True,
"autoHeight": True,
},
# defaultColDef={"cellStyle": {"styleConditions": styleConditions}},
columnSize="responsiveSizeToFit",
className="ag-theme-balham",
dashGridOptions={"domLayout": "autoHeight",},
suppressDragLeaveHidesColumns=False,
)
],
id='mmm'
)
],
style={
'height': '100vh'
}
)
if __name__ == "__main__":
app.run_server(debug=True)
and
color.py :
from matplotlib.colors import hex2color, to_hex
def create_gradient(value, hex_start_color, hex_end_color):
# Convert Hexadecimal Codes to RGB Components
start_color = hex2color(hex_start_color)
end_color = hex2color(hex_end_color)
# Interpolating RGB values between the start and end colors of the gradient
red_value = int((1 - value / 100) * start_color[0] * 255 + value / 100 * end_color[0] * 255)
green_value = int((1 - value / 100) * start_color[1] * 255 + value / 100 * end_color[1] * 255)
blue_value = int((1 - value / 100) * start_color[2] * 255 + value / 100 * end_color[2] * 255)
hex_color = to_hex((red_value / 255, green_value / 255, blue_value / 255))
return hex_color
def discrete_background_color_bins(df, n_bins=300, column="res_5", hex_start_color='#8ccbff', hex_end_color='#0145a4'):
bounds = [i * (1.0 / n_bins) for i in range(n_bins + 1)]
df_numerics = df[column]
df_max = df_numerics.max()
df_min = df_numerics.min()
ranges = [((df_max - df_min) * i) + df_min for i in bounds]
style_conditions = []
for i in range(1, len(bounds)):
min_bound = ranges[i - 1]
max_bound = ranges[i]
if i == len(bounds) - 1:
max_bound += 1
backgroundColor = create_gradient(
(((min_bound + max_bound) / 2.0) - df_min) / (df_max - df_min) * 100, hex_start_color, hex_end_color
)
color = 'white'
style_conditions.append(
{
"condition": f"params.data.{column} >= {min_bound} && params.data.{column} < {max_bound}",
"style": {"backgroundColor": backgroundColor, "color": color,
'outline': '.1px solid #cccccc'
},
}
)
return style_conditions
In case use {“field”: “res_1”, “cellStyle”: {“styleConditions”: styleConditions}} I get an error in the browser console :
react-dom@16.v2_12_1m1692274705.14.0.js:82 Warning: Invalid aria prop aria-description on
tag. For details, see https://fb.me/invalid-aria-prop
color.py сreates a gradient for two selected colors based on the value of the selected column
(df · Issue #1 · zaphire12/for_topic · GitHub) DF file
How i can fix this.