I’m trying to figure out the best way to integrate Python code and render the output onto an Angular dashboard.

Here is the library I’d like to execute in Python and then take the rendered output and place it into a Angular JS dashboard: https://robert-haas.github.io/gravis-docs/index.html

The library is called Gravis and this rendering can be outputted in several ways such as using gv.vis(), gv.d3(), fig.display(), fig.export_html(), as well as export to svg and others. I’m trying to figure out what is the most optimal way to do this with Angular Javascript or just JS in general.

Here is an example Python code that outputs a Gravis visualization:

import gravis as gv
graph1 = {
    'graph':{
        'directed': True,
        'metadata': {
            'arrow_size': 5,
            'background_color': 'black',
            'edge_size': 3,
            'edge_label_size': 14,
            'edge_label_color': 'white',
            'node_size': 15,
            'node_color': 'white',
        },
        'nodes': {
            1: {'metadata': {'shape': 'rectangle', 'y': 200}},
            2: {},
            3: {},
            4: {'metadata': {'shape': 'rectangle', 'y': 200}},
            5: {'metadata': {'shape': 'hexagon', 'y': 0}},
        },
        'edges': [
            {'source': 1, 'target': 2, 'metadata': {'color': '#d73027', 'de': 'Das',   'en': 'This'}},
            {'source': 2, 'target': 3, 'metadata': {'color': '#f46d43', 'de': 'ist',   'en': 'is'}},
            {'source': 3, 'target': 1, 'metadata': {'color': '#fdae61', 'de': 'das',   'en': 'the'}},
            {'source': 1, 'target': 4, 'metadata': {'color': '#fee08b', 'de': 'Haus',  'en': 'house'}},
            {'source': 4, 'target': 3, 'metadata': {'color': '#d9ef8b', 'de': 'vom',   'en': 'of'}},
            {'source': 3, 'target': 5, 'metadata': {'color': '#a6d96a', 'de': 'Ni-.',  'en': 'San-'}},
            {'source': 5, 'target': 2, 'metadata': {'color': '#66bd63', 'de': 'ko-',   'en': 'ta'}},
            {'source': 2, 'target': 4, 'metadata': {'color': '#1a9850', 'de': 'laus.', 'en': 'Claus.'}},
        ],
    }
}

gv.d3(graph2, use_node_size_normalization=True, node_size_normalization_max=30,
      use_edge_size_normalization=True, edge_size_data_source='weight', edge_curvature=0.3)`

Is it possible to call this Python script with all its libraries and take than output and display it through an Angular dashboard?

Thank you

I tried PyScript but the libraries it supports are limited. I’ve been experimenting with Flask and Django but have limited knowledge of integration that with Angular Javascript.