{%- macro render_chart_content(c) -%}
    <div id="{{ c.chart_id }}" class="chart-container" style="width:{{ c.width }}; height:{{ c.height }}; {{ c.horizontal_center }}"></div>
    <script>
        {% for js in c.js_functions.items %}
            {{ js }}
        {% endfor %}
        const antv_chart_{{ c.chart_id }} = new G2.Chart({{ c.render_contents }});
        antv_chart_{{ c.chart_id }}.options({{ c.json_contents }});
        antv_chart_{{ c.chart_id }}.render();
        {% if c.width.endswith('%') %}
            window.addEventListener('resize', function(){
                chart_{{ c.chart_id }}.resize();
            })
        {% endif %}
        {% if c.js_events %}
            {% for fn in c.js_events.items %}
                {{ fn }}
            {% endfor %}
        {% endif %}
    </script>
{%- endmacro %}

{%- macro render_notebook_charts(charts, libraries) -%}
    <script>
        require([{{ libraries | join(', ') }}], function(antv_chart) {
        {% for c in charts %}
            {% for js in c.js_functions.items %}
                {{ js }}
            {% endfor %}
            const antv_chart_{{ c.chart_id }} = new G2.Chart({{ c.render_contents }});
            antv_chart_{{ c.chart_id }}.options({{ c.json_contents }});
            antv_chart_{{ c.chart_id }}.render();
            {% if c.js_events %}
                {% for fn in c.js_events.items %}
                    {{ fn }}
                {% endfor %}
            {% endif %}
        {% endfor %}
        });
    </script>
{%- endmacro %}

{%- macro render_chart_dependencies(c) -%}
    {% if 'javascript' in c._render_cache -%}
        {% set _javascript = c._render_cache.javascript %}
        {% for dep in c.dependencies %}
            <script type="text/javascript">
                {{ _javascript.javascript_contents[dep] }}
            </script>
        {% endfor %}
    {%- else -%}
        {% for dep in c.dependencies %}
            <script type="text/javascript" src="{{ dep }}"></script>
        {% endfor %}
    {%- endif %}
{%- endmacro %}

{%- macro render_chart_css(c) -%}
    {% for dep in c.css_libs %}
        <link rel="stylesheet" href="{{ dep }}">
    {% endfor %}
{%- endmacro %}
