moneropro/charts/templates/charts/rank.html

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

{% block header %}
<title>Moneroj.net - Monero's Coinmarketcap Rank</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">
                    Monero's Coinmarketcap Rank
                </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 Monero's rank over the whole cryptocurrency market, judging by Coinmarketcap rankings.<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 data3 = {
        type: "scatter",
        mode: "lines",
        name: 'Rank',
        x: {{ dates|safe }},
        y: {{ values|safe }},
        line: {
            color: '#dd1d1d'
            ,width: 3
        },
    yaxis: "y2"
    };
    
    var data3_mobile = {
        type: "scatter",
        mode: "lines",
        name: 'Rank',
        x: {{ dates|safe }},
        y: {{ values|safe }},
        line: {
            color: '#dd1d1d'
            ,width: 3
        },
    yaxis: "y2"
    };
var data1 = {
    type: "scatter",
    mode: "lines",
    name: 'Price',
    x: {{ dates|safe }},
    y: {{ pricexmr|safe }},
    line: {
        color: '#444444'
        ,width: 1
    }
};

var data1_mobile = {
    type: "scatter",
    mode: "lines",
    name: 'Price',
    x: {{ dates|safe }},
    y: {{ pricexmr|safe }},
    line: {
        color: '#444444'
        ,width: 1
    }
}; 
    
var data = [data3, data1];
var data_mobile = [data3_mobile, data1_mobile];

var layout = {
    plot_bgcolor:"#252221",
    paper_bgcolor:"#252221",
    annotations: [
    {
        xref: 'paper',
        yref: 'paper',
        x: 0.5,
        xanchor: 'auto',
        y: 0,
        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, 
        y: 1, 
        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: 'Price (USD)',
            font: {
                size: 20,
                color: 'white'
            }
        },
        tickformat :",.2f"
        ,nticks: 8
        ,tickfont: {
            color: "#ffffff"
            ,size: 12
        }
        ,gridcolor: "#333333"
    },
    yaxis2: {
    type: "linear",
    title: {
        text: 'Rank (reversed axis)',
        font: {
            size: 20,
            color: 'white'
        }
    },
    tickformat :",.0f"
    ,nticks: 8
        ,tickfont: {
            color: "#ffffff"
            ,size: 12
        }
    ,gridcolor: "#252221"
    ,side: "right"
    ,overlaying: 'y'
    ,autorange: 'reversed'
    },
    xaxis: {
        hoverformat: "%Y-%m-%d",
        showgrid: true,
        type: 'date',
        nticks: 10
        ,tickfont: {
            color: "#dddddd"
            ,size: 13
        }
        ,gridcolor: "#333333"
        ,range: ['2014-05-01', '2023-08-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.5, 
        y: 0, 
        bgcolor: '#000000', 
        bordercolor: '#5f5f5f', 
        borderwidth: 1, 
        font: {
            color: 'white', 
            size: 5
        }, 
        traceorder: 'normal', 
        xanchor: 'auto', 
        yanchor: 'auto'
    },
    showlegend: false,
    yaxis: {
        type: "log",
        tickformat :",.2f"
        ,nticks: 8
        ,tickfont: {
            color: "#ffffff"
            ,size: 7
        }
        ,gridcolor: "#444444"
    },
    yaxis2: {
    type: "linear",
    tickformat :",.0f"
    ,nticks: 8
    ,tickfont: {
        color: "white"
    }
    ,gridcolor: "#252221"
    ,side: "right"
    ,overlaying: 'y'
    },
    xaxis: {
        hoverformat: "%Y",
        showgrid: true,
        type: 'date',
        nticks: 10
        ,tickfont: {
            color: "#dddddd"
            ,size: 7
        }
        ,gridcolor: "#444444"
        ,range: ['2014-05-01', '2023-08-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 %}