Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

treegraph chart type not working #12

Open
eliasmistler opened this issue Dec 6, 2024 · 4 comments
Open

treegraph chart type not working #12

eliasmistler opened this issue Dec 6, 2024 · 4 comments
Labels
help wanted Extra attention is needed

Comments

@eliasmistler
Copy link

I've got a treegraph chart (simplified), which I tested in JSFiddle and then adapted for python:

def my_chart():
    data = [
        {"id": "step-1", "name": "Step 1", "color": "red"},
        {"id": "step-2", "name": "Step 2", "parent": "ingestion", "color": "grey"},
    ]

    return ui.highchart(
        {
            "title": {"text": ""},
            "series": [
                {
                    "type": "treegraph",
                    "data": data,
                    "tooltip": {"pointFormat": "{point.name}"},
                    "marker": {"symbol": "rect", "width": "25%"},
                    "borderRadius": 5,
                    "dataLabels": {
                        "pointFormat": "{point.name}",
                        "style": {"whiteSpace": "nowrap"},
                    },
                }
            ],
        }
    )

When I load a NiceGUI application with this chart embedded, I am getting the follow error (in the browser console, NiceGUI itself seems happy enough):

vue.global.prod.js:5 Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=treegraph
 - missingModuleFor: treegraph
    at Object.<anonymous> (highcharts.js:8:138)
    at M (highcharts.js:8:2591)
    at o (highcharts.js:8:61)
    at Q.initSeries (highcharts.js:8:197051)
    at highcharts.js:8:212230
    at Proxy.forEach (<anonymous>)
    at Q.firstRender (highcharts.js:8:212208)
    at Q.<anonymous> (highcharts.js:8:196969)
    at M (highcharts.js:8:2591)
    at Q.init (highcharts.js:8:196387)

I take this to mean that the vue library for treegraph is not loaded. However, I can find the path .venv/lib/python3.11/site-packages/nicegui_highcharts/lib/highcharts/modules/treegraph.js and since the Highchart class itself is initialised with the following, I was expecting this to work:

  dependencies=[
                    'lib/highcharts/*.js',
                    'lib/highcharts/modules/*.js',
                ]

And indeed, I can find the following entry in ui.highchart.exposed_libraries:

Library(key='36fb47e853cb0c7e42f708da1527b47e/treegraph.js', name='treegraph', path=PosixPath('/Users/elias/dev/hackathon-lumberjacks/.venv/lib/python3.11/site-packages/nicegui_highcharts/lib/highcharts/modules/treegraph.js'), expose=True)

So I'm a bit lost as to why I am getting the issue.

Just to confirm, if I change the graph type to e.g. line, it does render. Obviously, the series isn't compatible, but I then at least see the axes rendered.

@iamdavidmt
Copy link

do you need to specify it somehow...

@iamdavidmt
Copy link

there is this; https://nicegui.io/documentation/highchart#chart_with_extra_dependencies maybe like

extras=["treegraph"]

@eliasmistler
Copy link
Author

there is this; https://nicegui.io/documentation/highchart#chart_with_extra_dependencies maybe like

extras=["treegraph"]

That's it, thank you!

I am getting a different error now though:

TypeError: Cannot read properties of undefined (reading 'prototype')
    at treegraph.js:8:1961
    at i (treegraph.js:8:399)
    at treegraph.js:8:1836
    at treegraph.js:8:250
    at treegraph.js:8:302

I think that is a highcharts error, possibly related to this. For now,. I'll see if I can make do with another chart type. Thanks!

@falkoschindler
Copy link
Contributor

Adding extras=['treegraph'] is the correct way to add the tree graph dependency.
But I don't know why Highcharts is complaining about reading a prototype property. 😕

@falkoschindler falkoschindler added the help wanted Extra attention is needed label Dec 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants