<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
    <script src="https://cdn.socket.io/3.1.3/socket.io.min.js"
        integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh"
        crossorigin="anonymous"></script>
    <style>
        .c3-chart-arcs-background {
            fill: rgb(238, 237, 237)
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="title">Realtime Language Identification On Tweets Containing Netflix</h1>
        <h2 class="subtitle">Total Tweets : <span id="total"></span></h2>
        <div class="card">
            <div class="card-content">
                <div class="content">
                    <div id="chart" style="width:80%;height:400px"></div>
                </div>
            </div>
        </div>
    </div>


    <script>
        //Change this to your ngrok url or simply enter http://localhost:3000 if running a browser from
        //your local system.
        var endpointUrl = "https://your_ngrok_url"
        let languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
        let counter = 0;
        var chart = c3.generate({
            data: {
                columns: [],
                type: 'gauge'
            },
            bar: { width: { ratio: 0.1 } }
        });

        let chart_data = {}
        var socket = io(endpointUrl);
        socket.on('data', function (data) {
            var x = JSON.parse(data.line)
            if (chart_data[x[1]]) {
                chart_data[x[1]] = chart_data[x[1]] + 1
            } else {
                chart_data[x[1]] = 1
            }
            counter += 1;
            document.getElementById("total").innerText = counter.toString();
        });


        setInterval(function () {
            let updated_data = {
                "columns": []
            }
            let values = []
            for (var key in chart_data) {
                values.push(chart_data[key])
            }
            let n = 5
            let top_n = values.sort(function (a, b) { return b - a }).slice(0, n)
            let max_val = (top_n.length >= n) ? top_n[n - 1] : 1
            for (var a in chart_data) {
                if (chart_data[a] < max_val || updated_data.columns.length == n) {
                    continue;
                }
                updated_data.columns.push([languageNames.of(a), chart_data[a] * 100 / counter])
            }
            chart.load(updated_data);
        }, 1000)
    </script>
</body>

</html>