moneropro/charts/templates/charts/dailyemissionntv.html

{% extends 'charts/base.html' %}

{% block header %}
<title>Moneroj.net - Daily Emission</title>
{% endblock %}

{% block content %}

<!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">

    <!-- Content Row -->
    <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
        <div class="card" id="graph1" style="width: 100%; height: 100%;">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
                <h6 class="m-0 text-light">
                    Daily Emission (Native Units)
                </h6>
                
                <div class="dropdown no-arrow">
                    <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
                        About this chart?
                    </a>
                    <a class="dropdown-toggle" href="#" role="button"
                        onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
                        <i class="bx bx-expand text-gray-400"></i>
                    </a>
                </div>
            </div>
            <div class="card-body"  style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
                <div id="graph"  style="width: 100%; height: 100%;  margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
            </div>
        </div>
    </div>

</div>
<!-- End of Content Wrapper -->

<!-- Modal -->
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="Modal">Help about the chart</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                This chart shows the number of all mined coins daily.<br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Fim do Modal -->


<!-- Page level plugins -->
<script> 
    var data2 = {
        type: "scatter",
        mode: "lines",
        name: 'Monero Daily Emission',
        x: {{ dates|safe }},
        y: {{ emissionxmr|safe }},
        line: {
            color: '#dd1d1d'
            ,width: 2
        }
    };
    
    var data2_mobile = {
        type: "scatter",
        mode: "lines",
        name: 'Monero Daily Emission',
        x: {{ dates|safe }},
        y: {{ emissionxmr|safe }},
        line: {
            color: '#dd1d1d'
            ,width: 2
        }
    };

    var data3 = {
        type: "scatter",
        mode: "lines",
        name: 'Bitcoin Daily Emission',
        x: {{ dates|safe }},
        y: {{ emissionbtc|safe }},
        line: {
            color: '#ffd311'
            ,width: 2
        }
    };
    
    var data3_mobile = {
        type: "scatter",
        mode: "lines",
        name: 'Bitcoin Daily Emission',
        x: {{ dates|safe }},
        y: {{ emissionxmr|safe }},
        line: {
            color: '#ffd311'
            ,width: 2
        }
    };

    var data = [data3, data2];
    var data_mobile = [data3_mobile, data2_mobile];

    var layout = {
        plot_bgcolor:"#252221",
        paper_bgcolor:"#252221",
        annotations: [
        {
            xref: 'paper',
            yref: 'paper',
            x: 0.50,
            xanchor: 'auto',
            y: 0.02,
            yanchor: 'auto',
            text: 'Moneroj<br>https://www.moneroj.net',
            showarrow: false,
            borderwidth: 1,
            bordercolor: '#5f5f5f',
            bgcolor: '#333333',
            borderpad: 5,
            align: 'center',
            font: {
            color: "white",
            size: 12
            }
        }],
        separators: ",.",
        legend: {
            x: 0.98, 
            y: 0.98, 
            bgcolor: '#333333', 
            bordercolor: '#5f5f5f', 
            borderwidth: 1, 
            font: {
                color: 'white', 
                size: 12
            }, 
            traceorder: 'normal', 
            xanchor: 'auto', 
            yanchor: 'auto'
        },
        hoverlabel: {
            namelength: -1
        },
        yaxis: {
            type: "log",
            title: {
                text: 'Daily Emission (Native Units)',
                font: {
                    size: 20,
                    color: 'white'
                }
            },
            tickformat :",.0f"
            ,nticks: 10
            ,tickfont: {
                color: "#ffffff"
                ,size: 12
            }
            ,gridcolor: "#333333"
        },
        xaxis: {
            hoverformat: "%Y-%m-%d",
            showgrid: true,
            type: 'date',
            nticks: 10
            ,tickfont: {
                color: "#dddddd"
                ,size: 13
            }
            ,gridcolor: "#333333"
            ,range: ['2010-06-14', '2024-01-01']
            ,zeroline: true
        },
        margin: {
            l: 100,
            r: 50,
            b: 50,
            t: 20,
            pad: 10
        }
    };
    
    var layout_mobile = {
        plot_bgcolor:"black",
        paper_bgcolor:"black",
        separators: ",.",
        hoverlabel: {
            namelength: -1
        },
        legend: {
            x: 0.98, 
            y: 0.98, 
            bgcolor: '#000000', 
            bordercolor: '#5f5f5f', 
            borderwidth: 1, 
            font: {
                color: 'white', 
                size: 5
            }, 
            traceorder: 'normal', 
            xanchor: 'auto', 
            yanchor: 'auto'
        },
        showlegend: false,
        yaxis: {
            type: "log",
            tickformat :",.0f"
            ,nticks: 10
            ,tickfont: {
                color: "#ffffff"
                ,size: 7
            }
            ,gridcolor: "#444444"
        },
        xaxis: {
            hoverformat: "%Y",
            showgrid: true,
            type: 'date',
            nticks: 10
            ,tickfont: {
                color: "#dddddd"
                ,size: 7
            }
            ,gridcolor: "#444444"
            ,range: ['2010-06-14', '2024-01-01']
            ,zeroline: true
        },
        margin: {
            l: 100,
            r: 50,
            b: 50,
            t: 20,
            pad: 10
        }
    };

    function findBootstrapEnvironment() {
        let envs = ['xs', 'sm', 'md', 'lg', 'xl'];

        let el = document.createElement('div');
        document.body.appendChild(el);

        let curEnv = envs.shift();

        for (let env of envs.reverse()) {
            el.classList.add(`d-${env}-none`);

            if (window.getComputedStyle(el).display === 'none') {
                curEnv = env;
                break;
            }
        }

        document.body.removeChild(el);
        return curEnv;

    }
    env_size = findBootstrapEnvironment();
    if (env_size == "xs") {
        Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
    }
    else {
        Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
    }
</script>

{% endblock %}