dailyrise.html

<html>

<head>
    <title id="title">COVID statewise daily rise</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

    <link href="./MDB/css/snackbar.css">
    <link href="./MDB/css/style.css" rel="stylesheet">
    <link href="./MDB/css/mdb.css" rel="stylesheet">
    <link href="./MDB/css/bootstrap.min.css" rel="stylesheet">
    <link href="./MDB/css/addons/datatables.min.css" rel="stylesheet">
    <link href="./MDB/css/c3.min.css" rel="stylesheet">

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript" src="./MDB/js/c3.min.js"></script>
    <script type="text/javascript" src="./MDB/js/jquery.min.js"></script>
    <script type="text/javascript" src="./MDB/js/addons/datatables.min.js"></script>
    <script type="text/javascript" src="./MDB/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script type="text/javascript" src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script type="text/javascript" src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <script type="text/javascript" src="./MDB/js/snackbar.js"></script>

    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        #tablediv_wrapper {
            width: 80%;
            padding-left: 10%;
        }

        #loading {
            width: 200px;
            left: calc(50% - 100px);
            top: calc(50% - 100px);
            position: absolute;
        }

        .clickable {
            cursor: pointer;
            text-decoration: underline;
            color: blue;
        }
    </style>
</head>

<body>
    <div class="containter">
        <p>Data as of: <span id="date"></span></p>
        <table id="tablediv" class="table table-striped table-bordered table-sm" cellspacing="0" width="80%"
            style="display: none;">
            <thead>
                <tr>
                    <th class="th-sm">State
                    </th>
                    <th class="th-sm">Reported
                    </th>
                    <th class="th-sm">Recovered
                    </th>
                    <th class="th-sm">Deceased
                    </th>
                    <th class="th-sm">Active
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <img src="./loading.gif" id="loading" style="display: block;" />
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-fluid ">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Daily Active cases</h4>
                </div>
                <div class="modal-body">
                    <div id="chart"></div>
                </div>
                <div class="modal-footer">
                    <select type="text" id="stateSelect">
                        <option value="AN">Andaman & Nicobar</option>
                        <option value="AP">Andhra Pradesh</option>
                        <option value="AR">Arunachal Pradesh</option>
                        <option value="AS">Assam</option>
                        <option value="BR">Bihar</option>
                        <option value="CH">Chandigarh</option>
                        <option value="CT">Chattisgarh</option>
                        <option value="DL">New Delhi</option>
                        <option value="DN">Dadra and Nagar Haveli and Daman and Diu</option>
                        <option value="GA">Goa</option>
                        <option value="GJ">Gujarat</option>
                        <option value="HP">Himachal Pradesh</option>
                        <option value="HR">Haryana</option>
                        <option value="JH">Jharkhand</option>
                        <option value="JK">Jammu & Kashmir</option>
                        <option value="KA">Karnataka</option>
                        <option value="KL">Kerala</option>
                        <option value="LA">Ladakh</option>
                        <option value="MH">Maharashtra</option>
                        <option value="ML">Meghalaya</option>
                        <option value="MN">Manipur</option>
                        <option value="MP">Madhya Pradesh</option>
                        <option value="MZ">Mizoram</option>
                        <option value="NL">Naga Land</option>
                        <option value="OR">Odisha</option>
                        <option value="PB">Punjab</option>
                        <option value="PY">Puducherry</option>
                        <option value="RJ">Rajasthan</option>
                        <option value="SK">Sikkim</option>
                        <option value="TG">Telangana</option>
                        <option value="TN">Tamil Nadu</option>
                        <option value="TR">Tripura</option>
                        <option value="UP">Uttar Pradesh</option>
                        <option value="UT">Uttarakhand</option>
                        <option value="WB">West Bengal</option>
                    </select>
                    <button type="button" class="btn btn-primary" onclick="addState()">Add</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
</body>

<script>
    const STATES = ["AN", "AP", "AR", "AS", "BR", "CH", "CT", "DL", "DN", "GA", "GJ", "HP", "HR", "JH", "JK", "KA", "KL", "LA", "MH", "ML", "MN", "MP", "MZ", "NL", "OR", "PB", "PY", "RJ", "SK", "TG", "TN", "TR", "UP", "UT", "WB"];
    const stateNames = {
        "AN": "Andaman & Nicobar",
        "AP": "Andhra Pradesh",
        "AR": "Arunachal Pradesh",
        "AS": "Assam",
        "BR": "Bihar",
        "CH": "Chandigarh",
        "CT": "Chattisgarh",
        "DL": "New Delhi",
        "DN": "Dadra and Nagar Haveli and Daman and Diu",
        "GA": "Goa",
        "GJ": "Gujarat",
        "HP": "Himachal Pradesh",
        "HR": "Haryana",
        "JH": "Jharkhand",
        "JK": "Jammu & Kashmir",
        "KA": "Karnataka",
        "KL": "Kerala",
        "LA": "Ladakh",
        "MH": "Maharashtra",
        "ML": "Meghalaya",
        "MN": "Manipur",
        "MP": "Madhya Pradesh",
        "MZ": "Mizoram",
        "NL": "Naga Land",
        "OR": "Odisha",
        "PB": "Punjab",
        "PY": "Puducherry",
        "RJ": "Rajasthan",
        "SK": "Sikkim",
        "TG": "Telangana",
        "TN": "Tamil Nadu",
        "TR": "Tripura",
        "UP": "Uttar Pradesh",
        "UT": "Uttarakhand",
        "WB": "West Bengal"
    }
    const ONE_DAY = 24 * 3600 * 1000;

    const stateData = {};
    let prevStates = [];
    let chart = null;

    const sb = new snackbar();

    const addState = function () {

        const state = document.getElementById("stateSelect").value;

        prevStates.push(state);

        chart.load({
            columns: [
                [stateNames[state], ...Object.values(stateData[state])]
            ],
        });
        chart.flush();

    }

    const active = function (state) {
        if (stateData[state] == undefined) {
            sb.error("Loading Data");
            return;
        }
        sb.info("Please wait");
        // chart.unload();
        chart.load({
            columns: [
                ['x', ...Object.keys(stateData[state])],
                [stateNames[state], ...Object.values(stateData[state])]
            ],
            unload: prevStates.map(prevState => stateNames[prevState])
        });
        // chart.flush();
        setTimeout(() => {
            chart.flush();
        }, 300);


        prevStates = [state];

        $('#myModal').modal({ show: true });
    }

    const toTableRow = (state, reported, recovered, deceased, active) => `<tr><td onclick="active('${state}')" class="clickable">${stateNames[state]}</td><td>${reported}</td><td>${recovered}</td><td>${deceased}</td><td>${active}</td></tr>`;

    const toURL = (date) => {
        const [dd, mm, yyyy] = [date.getDate(), date.getMonth() + 1, date.getFullYear()];
        document.getElementById("date").innerText = `${dd}-${mm}-${yyyy}`;
        document.getElementById("title").innerText = `${dd} -${mm} -${yyyy} COVID statewise daily rise`;
        return `https://api.covid19india.org/v4/data-${yyyy}-${mm.toString().padStart(2, 0)}-${dd.toString().padStart(2, 0)}.json`;
    }

    const fetchData = (date) => fetch(toURL(date)).then(z => z.json()).catch(() => fetchData(new Date(new Date(date).getTime() - ONE_DAY)));

    fetchData(new Date()).then(json => {
        const html = STATES.map(state => {
            const { confirmed, deceased, recovered } = json[state].delta;
            const active = +confirmed - (+deceased || 0) - (+recovered || 0);
            return toTableRow(state, confirmed || 0, recovered || 0, deceased || 0, active || 0);
        }).join('');

        $("#tablediv>tbody").html(html);
        $('#tablediv').DataTable();
        $('.dataTables_length').addClass('bs-select');
        document.getElementById("loading").setAttribute("style", "display: none");
        document.getElementById("tablediv").setAttribute("style", "display: block");
    }).then(() => fetch('https://api.covid19india.org/v4/data-all.json')).then(z => z.json()).then(json => {
        for (const date in json) {
            for (const state of STATES) {
                if (stateData[state] == undefined) {
                    stateData[state] = {};
                }
                if (json[date][state] == undefined || json[date][state].total == undefined) {
                    stateData[state][date] = 0;
                    continue;
                }
                const { confirmed, deceased, recovered } = json[date][state].total;
                stateData[state][date] = (+confirmed || 0) - (+deceased || 0) - (+recovered || 0);
            }
        }

        chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'x',
                columns: [
                ]
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        format: '%Y-%m-%d' // format string is also available for timeseries data
                    }
                }
            }
        });

        setTimeout(() => {
            chart.flush();
        }, 300);

    });


</script>

</html>