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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
"""
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]
        }]
    }
}

class PanelChildEcharts(pn.viewable.Viewer):
    """
    A Panel component that displays a parent-child ECharts interaction.
    """
    selection = param.String(default="", doc="The selected child to display. '' means no child selected.")

    @param.depends()
    def get_parent_config(self)->dict:
        """
        Returns the parent plot.
        """
        return _parent_config

    def _handle_parent_event(self, event):
        """
        Handles the event from the parent plot.
        """
        if event.type=="click":
            self.selection = event.data["name"]
        else:
            print(event.data)
        
    @param.depends('selection')
    def get_child_config(self)->dict:
        """
        Returns the child based on the child name
        """
        return _child_config.get(self.selection, {})
    
    def __panel__(self):
        """
        Returns the Panel layout.
        """
        parent_plot = pn.pane.ECharts(self.get_parent_config(), sizing_mode="stretch_width", height=400, max_width=1000)
        child_plot = pn.pane.ECharts(self.get_child_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=self._handle_parent_event)
                
        return pn.FlexBox(
            parent_plot,
            child_plot,
            sizing_mode="stretch_width"
        )

if pn.state.served:
    pn.extension('echarts')
    PanelChildEcharts().servable()
Py.Cafe

echarts-parent-child

Interactive Panel Visualization
