How to add a custom toolbox in ui.echart

[wasabismile]

Question

I tried to add a custom function button on the toolbox of ui.echart to implement the view switching of 3D charts. I created an object named echart3D and used the variable name as an event parameter in the

':onclick': '()=>{emitEvent("myFrontView","echart3D")}' 

In the event handling function on_myFrontView(e), I used the eval function to convert it into a real variable and then updated the echart.
I don't know if there is a more NiceGui way to implement this function, and here is my code.

from nicegui import ui
echart3D = ui.echart({
    'xAxis3D': {'type': 'value'},
    'yAxis3D': {'type': 'value'},
    'zAxis3D': {'type': 'value'},
    'toolbox': {
                'feature': {
                    'myViewFront': {
                        'show': True,
                        'title': 'FrontView',
                        "icon":'image://https://echarts.apache.org/zh/images/favicon.png',
                        ':onclick': '()=>{emitEvent("myFrontView","echart3D")}' # Here, echart3D object as string args be emited
                    },
                    },
                },
    'grid3D': {
        'viewControl': {"projection":"orthographic",
                        }
    },
   'series': [{'type': 'line3D', 'data': [[1, 1, 1], [3, 3, 3]]}]
}).classes('w-64')
def on_myFrontView(e):
    sender=eval(e.args) #here, echart3D string args be translated as real object
    sender.options['grid3D']['viewControl']['beta']=0
    sender.options['grid3D']['viewControl']['alpha']=0
    sender.update()
    ui.notify('FrontView')
ui.on('myFrontView', lambda e: on_myFrontView(e))
ui.run()

[falkoschindler]

That's a pretty good solution, @wasabismile. The only downside might be to rely on eval to get the sender. It might be slightly better to emit an event on the echart element itself. Using the getElement function you only need the element's ID. In order to use the ID for defining the toolbox, we need to create the element first and add the toolbox afterwards:

echart3D = ui.echart({
    'xAxis3D': {'type': 'value'},
    'yAxis3D': {'type': 'value'},
    'zAxis3D': {'type': 'value'},
    'grid3D': {'viewControl': {'projection': 'orthographic'}},
    'series': [{'type': 'line3D', 'data': [[1, 1, 1], [3, 3, 3]]}]
}).classes('w-64')
echart3D.options['toolbox'] = {
    'feature': {
        'myViewFront': {
            'show': True,
            'title': 'FrontView',
            'icon': 'image://https://echarts.apache.org/zh/images/favicon.png',
            ':onclick': f'() => getElement({echart3D.id}).$emit("myFrontView")',
        },
    },
}

def on_myFrontView(e: events.GenericEventArguments):
    e.sender.options['grid3D']['viewControl']['beta'] = 0
    e.sender.options['grid3D']['viewControl']['alpha'] = 0
    e.sender.update()
    ui.notify('FrontView')

echart3D.on('myFrontView', on_myFrontView)

[wasabismile]

Thank you very much, I always learn new usages from you, @falkoschindler very nice.