PyCafe - Panel - Interactive Panel Visualization

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
"""
A simple ECharts Parent-Child app that displays a parent plot and a child plot is displayed on (`click`) interactions.

See https://panel.holoviz.org/reference/panes/ECharts.html

Motivated by https://www.linkedin.com/posts/andfanilo_i-had-fun-building-this-small-python-echarts-activity-7325769079401709569-YTBB
"""

import panel as pn
import param

_parent_config = {
    "title": {"text": "Parent: Bubble Chart"},
    "tooltip": {"trigger": "item"},
    "xAxis": {"type": "value"},
    "yAxis": {"type": "value"},
    "series": [{
        "type": "scatter",
        "data": [
            {"name": "Category A", "value": [10, 20, 40], "symbolSize": 40},
            {"name": "Category B", "value": [20, 30, 60], "symbolSize": 60},
            {"name": "Category C", "value": [30, 10, 80], "symbolSize": 80},
        ],
        "encode": {"tooltip": [0, 1, 2]}
    }]
}

_child_config = {
    "Category A": {
        "title": {"text": "Child: Details for Category A"},
        "xAxis": {
            "type": "category",
            "data": ["Metric 1", "Metric 2", "Metric 3"]
        },
        "yAxis": {"type": "value"},
        "series": [{
            "type": "bar",
            "data": [5, 10, 15]
        }]
    },
    "Category B": {
        "title": {"text": "Child: Details for Category B"},
        "xAxis": {
            "type": "category",
            "data": ["Metric 1", "Metric 2", "Metric 3"]
        },
        "yAxis": {"type": "value"},
        "series": [{
            "type": "bar",
            "data": [20, 10, 5]
        }]
    },
    "Category C": {
        "title": {"text": "Child: Details for Category C"},
        "xAxis": {
            "type": "category",
            "data": ["Metric 1", "Metric 2", "Metric 3"]
        },
        "yAxis": {"type": "value"},
        "series": [{
            "type": "bar",
            "data": [10, 30, 10]
        }]
    }
}

# The selected child to display. '' means no child selected.
selection = pn.rx()

def get_parent_config():
    """
    Returns the parent plot.
    """
    return _parent_config

def handle_parent_event(event):
    """
    Handles the event from the parent plot.
    """
    if event.type=="click":
        selection.rx.value = event.data["name"]
    else:
        print(event.data)
        
def get_child_config(name)->dict:
    """
    Returns the child based on the child name
    """
    return _child_config.get(name, {})
    
parent_plot = pn.pane.ECharts(get_parent_config(), sizing_mode="stretch_width", height=400, max_width=1000)
# Other events are not working
# See https://github.com/holoviz/panel/issues/7889
parent_plot.on_event('click', callback=handle_parent_event)
child_plot = pn.pane.ECharts(pn.bind(get_child_config, selection), sizing_mode="stretch_width", height=400, max_width=1000)
                
pn.FlexBox(
    parent_plot,
    child_plot,
    sizing_mode="stretch_width"
).servable()
Py.Cafe

echarts-parent-child-basic

Interactive Panel Visualization
