{{!
    This file is part of Moodle - https://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template biblocks_line/preview

    Example context (json):
    {
      "element_id": "12345",
      "ajax_url": "https://example.com/get_chart_data",
      "chart_line_default": "{chart: 123}",
      "chart_options": "options = 123;",
      "code_util_get_js_theme": "options.config = 123;",
      "error_chart_renderer": "Erro ao renderizar o gráfico.",
      "error_data_loader": "Erro ao carregar os dados.",
      "reload_time": "30000"
    }
}}

<div class="area-chart area-chart-line" id="chart_{{element_id}}"></div>

{{#js}}
    require(["jquery", "core/notification"], function($, Notification) {
    function showChart(labels, series) {
    try {
    var options = {{{chart_line_default}}};

    {{{chart_options}}}

    options.labels = labels;
    options.series = series;

    {{{code_util_get_js_theme}}}

    var element = document.querySelector("#chart_{{element_id}}");
    var chart = new ApexCharts(element, options);
    chart.render();
    }
    catch (e) {
    Notification.exception({message: "{{error_chart_renderer}}"});
    }
    }

    function loadDataChart() {
    $.ajax({
    dataType: "json",
    url: "{{{ajax_url}}}",
    success: function(json) {
    showChart(json.labels, json.series);
    },
    error: function() {
    Notification.exception({message: "{{error_chart_renderer}}"});
    }
    });
    }

    loadDataChart();

    var reloadTime = parseInt("{{{reload_time}}}");
    if (reloadTime) {
    setInterval(loadDataChart, reloadTime);
    }
    });
{{/js}}
