<script>
    require.config({
        paths: {
            "G2": "https://unpkg.com/@antv/g2@5"
        }
    });
</script>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body, div.pyg2-plot-container {
        height: 100%;
        overflow: hidden;
    }
</style>

<div id="{{ plot.plot_id }}" class="pyg2-plot-container"></div>

<script>
    require(['G2'], function (G2) {
        const chart_{{ plot.plot_id }} = new G2.Chart({
            container: '{{ plot.plot_id }}',
            width: {{ plot.width }},
            height: {{ plot.height }},
            depth: {{ plot.depth }},
            autoFit: {{ "true" if plot.autoFit else "false" }},
            padding: {{ plot.padding }},
        })
        {% if plot.plot_api_type == "spec" %}
            chart_{{ plot.plot_id }}.options({{ plot.js_options }})
        {% elif plot.plot_api_type == "api" %}
            {% for item in plot.render_data %}
                chart_{{ plot.plot_id }}.{{ item | join(".") }}
            {% endfor %}
        {% endif %}
        chart_{{ plot.plot_id }}.render()
    });
</script>