|
| 1 | +import dash_nivo as dn |
| 2 | +from dash import Dash, html, dcc, callback, Output, Input, State |
| 3 | +import random |
| 4 | +import uuid |
| 5 | + |
| 6 | +COLOR_SCHEMES = [ |
| 7 | + 'nivo', 'category10', 'accent', 'dark2', 'paired', 'pastel1', 'pastel2', 'set1', 'set2', 'set3', 'tableau10', |
| 8 | + 'brown_blueGreen', 'purpleRed_green', 'pink_yellowGreen', 'purple_orange', 'red_blue', 'red_grey', |
| 9 | + 'red_yellow_blue', 'red_yellow_green', 'spectral', 'blues', 'greens', 'greys', 'oranges', 'purples', 'reds', |
| 10 | + 'blue_green', 'blue_purple', 'green_blue', 'orange_red', 'purple_blue_green', 'purple_blue', 'purple_red', |
| 11 | + 'red_purple', 'yellow_green_blue', 'yellow_green', 'yellow_orange_brown', 'yellow_orange_red' |
| 12 | +] |
| 13 | + |
| 14 | + |
| 15 | +def generate_circle_data(): |
| 16 | + def create_node(name, children=None): |
| 17 | + node = { |
| 18 | + "id": str(uuid.uuid4()), |
| 19 | + "name": name, |
| 20 | + } |
| 21 | + if children: |
| 22 | + node["children"] = children |
| 23 | + else: |
| 24 | + node["loc"] = random.randint(1000, 100000) |
| 25 | + return node |
| 26 | + |
| 27 | + return create_node("root", [ |
| 28 | + create_node(f"group{i}", [ |
| 29 | + create_node(f"subgroup{i}-{j}") |
| 30 | + for j in range(random.randint(2, 5)) |
| 31 | + ]) |
| 32 | + for i in range(random.randint(3, 7)) |
| 33 | + ]) |
| 34 | + |
| 35 | + |
| 36 | +def generate_area_bump_data(): |
| 37 | + return [ |
| 38 | + { |
| 39 | + "id": f"Series {chr(65 + i)}", |
| 40 | + "data": [ |
| 41 | + {"x": str(year), "y": max(1, random.randint(1, 100))} for year in range(2000, 2010) |
| 42 | + ] |
| 43 | + } for i in range(random.randint(3, 8)) |
| 44 | + ] |
| 45 | + |
| 46 | + |
| 47 | +component = html.Div([ |
| 48 | + dcc.Store(id='circle-data'), |
| 49 | + dcc.Store(id='area-bump-data'), |
| 50 | + dcc.Store(id='color-schemes'), |
| 51 | + html.Div(id='area-bump-container', style={'height': '400px'}), # Add a container with fixed height |
| 52 | + html.Div(style={'height': '20px'}), # Spacer |
| 53 | + html.Div(id='responsive-circle-container', style={'height': '400px'}), # Add a container with fixed height |
| 54 | +], style={'backgroundColor': 'white', "color": "black"}) |
| 55 | + |
| 56 | + |
| 57 | +@callback( |
| 58 | + Output('circle-data', 'data'), |
| 59 | + Output('area-bump-data', 'data'), |
| 60 | + Output('color-schemes', 'data'), |
| 61 | + Input('circle-data', 'id') |
| 62 | +) |
| 63 | +def update_data(_): |
| 64 | + circle_data = generate_circle_data() |
| 65 | + area_bump_data = generate_area_bump_data() |
| 66 | + color_schemes = random.sample(COLOR_SCHEMES, 2) |
| 67 | + return circle_data, area_bump_data, color_schemes |
| 68 | + |
| 69 | + |
| 70 | +@callback( |
| 71 | + Output('area-bump-container', 'children'), |
| 72 | + Output('responsive-circle-container', 'children'), |
| 73 | + Input('circle-data', 'data'), |
| 74 | + Input('area-bump-data', 'data'), |
| 75 | + Input('color-schemes', 'data') |
| 76 | +) |
| 77 | +def update_charts(circle_data, area_bump_data, color_schemes): |
| 78 | + area_bump = dn.AreaBump( |
| 79 | + data=area_bump_data, |
| 80 | + colors={'scheme': color_schemes[1]}, |
| 81 | + margin={'top': 40, 'right': 100, 'bottom': 40, 'left': 100}, |
| 82 | + axisBottom={'tickSize': 5, 'tickPadding': 5, 'tickRotation': 0}, |
| 83 | + ) |
| 84 | + |
| 85 | + responsive_circle = dn.ResponsiveCircle( |
| 86 | + data=circle_data, |
| 87 | + colors={'scheme': color_schemes[0]}, |
| 88 | + childColor={'from': 'color', 'modifiers': [['brighter', 0.4]]}, |
| 89 | + margin={'top': 20, 'right': 20, 'bottom': 20, 'left': 20}, |
| 90 | + padding=4, |
| 91 | + ) |
| 92 | + |
| 93 | + return area_bump, responsive_circle |
| 94 | + |
| 95 | + |
0 commit comments