What I’m trying to do:
I’m trying to create a treemap in Anvil by transforming a plotly python code to anvil native plotly.
The original code is:
dict_traffic_lights = {'Rijwoning_koop': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 66}, 'Rijwoning_huur': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 31}, 'Rijwoning_sociaal-huur': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 18}, 'Hoekwoning_koop': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 60}, 'Hoekwoning_huur': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 24}, 'Hoekwoning_sociaal-huur': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 11}, 'Twee-onder-een-kap_koop': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 53}, 'Twee-onder-een-kap_huur': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 30}, 'Vrijstaand_koop': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 53}, 'Vrijstaand_huur': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 30}, 'Appartement_big_koop': {'traffic_light': 'grey', 'min_go':
110, 'max_go': 999, 'in_project': 0, 'move_to_project': 52}, 'Appartement_big_huur': {'traffic_light': 'grey', 'min_go': 110, 'max_go': 999, 'in_project': 0, 'move_to_project': 26}, 'Appartement_middle_koop': {'traffic_light': 'grey', 'min_go': 70, 'max_go': 110, 'in_project': 0, 'move_to_project': 79}, 'Appartement_middle_huur': {'traffic_light': 'grey', 'min_go': 70, 'max_go': 110, 'in_project': 0, 'move_to_project': 43}, 'Appartement_middle_sociaal-huur': {'traffic_light': 'grey', 'min_go': 70, 'max_go': 110, 'in_project': 0, 'move_to_project': 29}, 'Appartement_small_koop': {'traffic_light': 'grey', 'min_go': 0, 'max_go': 70, 'in_project': 0, 'move_to_project': 80}, 'Appartement_small_huur': {'traffic_light': 'grey', 'min_go': 0, 'max_go': 70, 'in_project': 0, 'move_to_project': 53}, 'Appartement_small_sociaal-huur': {'traffic_light': 'grey', 'min_go': 0, 'max_go': 70, 'in_project': 0, 'move_to_project': 44}, 'Penthouse_koop': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 8}, 'Penthouse_huur': {'traffic_light': 'grey', 'min_go': '', 'max_go': '', 'in_project': 0, 'move_to_project': 1}}
prop_types = ['Rijwoning', 'Hoekwoning', 'Twee-onder-een-kap', 'Vrijstaand', 'Appartement_small', 'Appartement_middle', 'Appartement_big', 'Penthouse']
names_prop_types = ['Rijwoning', 'Hoekwoning', 'Twee-onder-een-kap', 'Vrijstaand', 'Appartement klein', 'Appartement middelgroot', 'Appartement groot', 'Penthouse']
living_situations = ['sociaal-huur', 'huur', 'koop']
demands = []
for prop in prop_types:
demand_prop_type = 0
for living_situation in living_situations:
prop_living_type = prop + '_' + living_situation
if not prop_living_type in ['Vrijstaand_sociaal-huur', 'Penthouse_sociaal-huur', 'Twee-onder-een-kap_sociaal-huur', 'Appartement_big_sociaal-huur']:
demand_prop_type += dict_traffic_lights[prop_living_type]['move_to_project']
demands.append(demand_prop_type)
demands[7] *= 3
widths = [(sum(demands[:i])/sum(demands) * 8) - 0.5 for i in range(len(demands))]
widths.append(7.5)
tick_values = [(widths[i]+widths[i+1])/2 for i in range(len(widths)-1)]
fig_new.update_xaxes(range=[-0.5, 7.5], type="category", categoryorder="array",
tickvals=tick_values, ticktext=names_prop_types)
# fig_new.update_xaxes(tickvals=tick_values)
fig_new.update_yaxes(range=[0, 100])
color_mapping = {'sociaal-huur': 'orange', 'huur': 'green', 'koop': 'blue'}
for i, prop in enumerate(prop_types):
total_demand = 0
for living_situation in living_situations:
prop_living_type = prop + '_' + living_situation
if not prop_living_type in ['Vrijstaand_sociaal-huur', 'Penthouse_sociaal-huur', 'Twee-onder-een-kap_sociaal-huur', 'Appartement_big_sociaal-huur']:
total_demand += dict_traffic_lights[prop_living_type]['move_to_project']
current_height = 0
for living_situation in living_situations:
prop_living_type = prop + '_' + living_situation
if not prop_living_type in ['Vrijstaand_sociaal-huur', 'Penthouse_sociaal-huur', 'Twee-onder-een-kap_sociaal-huur', 'Appartement_big_sociaal-huur']:
height = current_height + (dict_traffic_lights[prop_living_type]['move_to_project']/ total_demand) * 100
fig_new.add_shape(
type="rect", xref="x", yref="y", x0=widths[i], y0=current_height,
x1=widths[i+1], y1=height, line=dict(color="black", width=2),
fillcolor=color_mapping[living_situation],
)
fig_new.add_annotation(text=f"({dict_traffic_lights[prop_living_type]['move_to_project']})",
x=tick_values[i]+0.01, y=(current_height+height)/2, xref="x", yref="y", showarrow=False, font=dict(color='white'))
current_height = height
fig_new.add_trace(go.Bar(y=[0], name='Marktvraag naar nieuwbouw<br>koopwoningen in 12 maanden',
marker=dict(color=color_mapping['koop'])))
fig_new.add_trace(go.Bar(y=[0], name='Marktvraag naar nieuwbouw vrije<br>sector huurwoningen in 12 maanden',
marker=dict(color=color_mapping['huur'])))
fig_new.add_trace(go.Bar(y=[0], name='Marktvraag naar nieuwbouw<br>sociale huurwoningen 12 maanden',
marker=dict(color=color_mapping['sociaal-huur'])))
fig_new.update_layout(title_text="Marktvraag - absoluut", title_x=0.3, title_y=0.95)
To replace add_annotation and update_xaxes, update_yaxes. I tried taking use of plotly.graph_objects.Layout.Annotation and plotly.graph_objects.Layout.Grid , found in their documentation.
Example code:
self.plot_3.layout = go.Layout(annotation = go.Layout.Annotation(text=f"({dict_traffic_lights[prop_living_type]['move_to_project']})",
x=tick_values[i]+0.01, y=(current_height+height)/2, xref="x", yref="y", showarrow=False, font=dict(color='white')))
Errors:
AttributeError: type object 'Layout' has no attribute 'Grid'
AttributeError: type object 'Layout' has no attribute 'Annotation'
How can I use these attributes in anvil?
