ntopng/httpdocs/templates/pages/networks_map.html

<div id="treechart"></div>

<script>
   
var url = `{* url *}`;

$.getJSON(url, function(response) {
    var options = {
        series:  response.rsp,
            legend: {
            show: false
        },
        chart: {
            height: 150,
            toolbar: {
                show: false
            },
            animations: {
                enabled: false
            },
            type: 'treemap',
            events: {
                click: function(event, chartContext, config) {
                    let obj = config.config.series[config.seriesIndex]?.data[config.dataPointIndex]
                    if(obj) {
                        let location = '{* prefix *}/lua/host_details.lua?host='+obj.host;
                        window.location.href = location;
                    }            
                }
            }
        },
        tooltip: {
            enabled: true,
            x: {
                show: true
            },

            /*
            y: {
                formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                    return value+" %"
                }
            }
            */
            custom: function({ series, seriesIndex, dataPointIndex, w }) {
                const network_data = response.rsp[seriesIndex];
                const data = network_data.data[dataPointIndex];
                return `
                    <div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><strong>${network_data.name}</strong></div>
                    <div class="apexcharts-tooltip-series-group apexcharts-tooltip-series-group-0 apexcharts-active" style="order: 1; display: flex;">
                        <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                            <div class="apexcharts-tooltip-y-group">
                                <span class="apexcharts-tooltip-text-y-label">${data.host}: </span>
                                <span class="apexcharts-tooltip-text-y-value">${data.y} %</span>
                            </div>
                        </div>
                    </div>
                `;
            }

        },
        title: {
            text: 'Networks Score'
        }
    };

    var treechart = new ApexCharts(document.querySelector("#treechart"), options);
    treechart.render();
});

</script>