Roundtable UI configuration

Dash Python
1

Hello,

I’m making a Roundtable tool application.

The application needs to have a roundatable UI with position from 1-22 and you can not edit those.

In each section of the pie chart there needs to be the name of the tool that is in use at the moment.

For an example: Section 2 has a tool named HGF33.

The other function is that when you click on the pie section to get a list of the tools and then click on a tool and the name of the tool to be changed.

The tools are fetched from an api.

Do you guys have any idea how to code this?

Example picture how it needs to look:

image
image971×827 99.5 KB

this is my code so far:

from dash import dcc, html, Input, Output, State
import plotly.graph_objs as go
import requests
from app import app

API_URL = "http://10.3.41.24:5002/api/active"

# Fetch tools from API only when a section is selected and button clicked
def fetch_tools():
    # Attempt to fetch data from the API
    try:
        response = requests.get(API_URL)
        if response.status_code == 200:
            inventory_data = response.json()
            # Parse the tool data to get the "Alat" names
            tool_options = [{"label": tool["Alat"], "value": tool["Alat"]} for tool in inventory_data if "Alat" in tool]
            return tool_options
        else:
            return []  # Return empty if response is not 200 OK
    except Exception as e:
        print(f"Error fetching tools: {e}")
        return []

# Generate the pie chart with numbered sections
def create_pie_chart():
    num_slices = 22
    theta = [i * (360 / num_slices) for i in range(num_slices)]
    r = [1] * num_slices
    trace = go.Barpolar(
        r=r,
        theta=theta,
        text=[str(i + 1) for i in range(num_slices)],
        marker=dict(color="lightskyblue", line=dict(color="white", width=2)),
        hoverinfo="text"
    )
    layout = go.Layout(
        polar=dict(radialaxis=dict(visible=False)),
        showlegend=False,
        height=800,
        width=800,
        margin=dict(t=20, b=20, l=20, r=20)
    )
    fig = go.Figure(data=[trace], layout=layout)
    return fig

# Define layout
layout = html.Div([
    # Centering the chart
    html.Div([
        dcc.Graph(id="pie-chart", figure=create_pie_chart(), config={'displayModeBar': False}),
    ], style={"display": "flex", "justify-content": "center", "align-items": "center"}),

    # Tool selection and save area
    html.Div([
        html.H4("Selected Section:"),
        html.Div(id="selected-section", style={"font-weight": "bold", "margin-bottom": "10px"}),
        dcc.Dropdown(id="tool-dropdown", placeholder="Select a tool"),
        html.Button("Save Tool to Section", id="save-tool-btn", style={"margin-top": "10px"}),
    ], style={"text-align": "center", "margin-top": "20px"}),

    # Saved tools display
    html.Div(id="saved-tools", style={"text-align": "center", "margin-top": "20px"})
])

# Callback to update tool dropdown options and selected section based on pie chart click
@app.callback(
    Output("tool-dropdown", "options"),
    Output("selected-section", "children"),
    Input("pie-chart", "clickData"),
    Input("save-tool-btn", "n_clicks")
)
def load_tools(clickData, n_clicks):
    if clickData:
        section = clickData["points"][0]["text"]
        tools = fetch_tools()  # Fetch tools every time a section is clicked
        return tools, f"Section {section}"
    return [], "No section selected"

# Callback to handle tool saving
@app.callback(
    Output("saved-tools", "children"),
    Input("save-tool-btn", "n_clicks"),
    State("tool-dropdown", "value"),
    State("selected-section", "children"),
    prevent_initial_call=True
)
def save_tool_to_section(n_clicks, selected_tool, selected_section):
    if n_clicks and selected_tool and selected_section:
        print(f"Saving tool {selected_tool} to {selected_section}")  # Debugging print statement
        return f"Tool '{selected_tool}' saved to {selected_section}"
    return "Select a section and tool to save."

Thank you!

2

from the cheap seats (i.e. not a coder) … maybe some form of radar chart might be an option ?

1 Like
3

do you have some kind of an example?

4

I actually do not understand what you are trying to do, unfortunately.

5

I wish to put items from an api on a pie section.For an example if I click on pie section (slice) number 1 I get a list of tools from the api, then when I choose one it stays writteon on the pie schat section or slice. Then again when I click it I can chage to some other tool.

6

So you actually do not need the plotly figure, right?

I would just create a segmented circle using html.Div() and css like detailed here: html - Segments in a circle using CSS - Stack Overflow

Once you have this, you can open a modal once the segment is clicked, select the tool from a dropdown within the modal and update the children of the clicked div with the selected tool name.

2 Likes