{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
    {{ super() }}

{% endblock %}
{% block content %}
    <h1>{{ title }}</h1>
    <p> Los gráficos de dispersión, o scatter plots, son representaciones visuales que muestran la relación entre dos
        variables mediante puntos individuales en un plano cartesiano. Cada punto representa una observación y su
        posición en el gráfico revela cómo se relacionan las dos variables. Para hacer los scatter plots accesibles, es
        crucial proporcionar etiquetas informativas para los ejes x e y, asegurando que las unidades y la escala sean
        claras. Además, se debe utilizar contraste de color y marcadores distintivos para cada punto, y ofrecer
        descripciones textuales alternativas para aquellos que dependen de tecnologías de asistencia o tienen
        discapacidades visuales. La atención a la claridad y a la simplicidad en el diseño contribuye a una experiencia
        accesible para diversos usuarios.
    </p>

    <label for="miSelector">Select a theme:</label>
    <select id="miSelector">
        <option value="default">Default</option>
        <option value="accessible_theme">Accessible theme</option>
        <option value="dark_accessible_theme">Dark accessible theme</option>
        <option value="filler_pattern_theme">Filler pattern theme</option>
        <option value="print_theme">Print theme</option>
    </select>
    <div class="container-fluid ">
        <div class="d-flex flex-row flex-wrap">
            <div class="c">
                <div id="chart"></div>
            </div>
            <div class="c">
                <div id="chart2"></div>
            </div>
            <div class="c">
                <div id="chart3"></div>
            </div>
            <div class="c">
                <div id="chart4"></div>
            </div>
        </div>
        <div class="row">

        </div>
    </div>

{% endblock %}

{% block script %}

    <script type="text/javascript">

        const apiUrl = 'https://accesible-theme-altair.onrender.com/api/scatterplots';
        let spec;

        let embedOpt = {"renderer": "svg"};

        // Parámetros de consulta
        let theme_chart = "default"


        function showError(el, error) {
            el.innerHTML = ('<div style="color:red;">'
                + '<p>JavaScript Error: ' + error.message + '</p>'
                + "<p>This usually means there's a typo in your chart specification. "
                + "See the javascript console for the full traceback.</p>"
                + '</div>');
            throw error;
        }

        function fetchCharts(params, divId) {
            let el = document.getElementById(divId);
            // Realizar la llamada a la API con Axios
            axios.get(apiUrl, {params: params})
                .then(response => {
                    // Manejar los datos obtenidos de la API
                    spec = response.data
                })
                .then(r => {
                    vegaEmbed("#" + divId, spec, embedOpt).catch(error => showError(el, error));
                })
                .catch(error => {
                    // Manejar errores de la solicitud
                    console.error('Error al realizar la solicitud:', error);
                });
        }

        function callCharts(theme_name) {

            fetchCharts({type_chart: '4', theme_chart: theme_name}, 'chart')
            fetchCharts({type_chart: '3', theme_chart: theme_name}, 'chart2')
            fetchCharts({type_chart: '2', theme_chart: theme_name}, 'chart3')
            fetchCharts({type_chart: '1', theme_chart: theme_name}, 'chart4')
        }

        callCharts("default")


        $(document).ready(function () {
            $("#miSelector").change(function () {
                // Obtener el valor seleccionado
                var valorSeleccionado = $(this).val();

                // Utilizar un switch para manejar diferentes casos
                switch (valorSeleccionado) {
                    case "default":
                        callCharts(valorSeleccionado)
                        break;
                    case "accessible_theme":
                        callCharts(valorSeleccionado)
                        break;
                    case "dark_accessible_theme":
                        callCharts(valorSeleccionado)
                        break;
                    case "filler_pattern_theme":
                        callCharts(valorSeleccionado)
                        break;
                    case "print_theme":
                        callCharts(valorSeleccionado)
                        break;
                    default:
                        console.log("error en el nombre de tema")
                }
            });
        });

    </script>

{% endblock %}