{% extends "base.html" %}
{% block container %}
{% if chart.display_container %}
    {{ chart.container }}
{% endif %}
{%  endblock  container %}

{% block body %}
    {% block data %}
        data_{{ chart.name }}={{ chart.series_js }};
    {% endblock data %}

    {% block init %}
    nv.addGraph(function() {
        var chart = nv.models.{{ chart.model }}(){% if chart.use_interactive_guideline %}.useInteractiveGuideline(true){% endif %}{% if not chart.show_controls %}.showControls(false){% endif %};

        chart.margin({top: {{ chart.margin_top }}, right: {{ chart.margin_right }}, bottom: {{ chart.margin_bottom }}, left: {{ chart.margin_left }}});
        chart.xAxis.rotateLabels({{chart.xAxis_rotateLabel}})

        var datum = data_{{ chart.name }};

    {% if not chart.color_list and chart.color_category %}
        chart.color(d3.scale.{{ chart.color_category }}().range());
    {% endif %}
    {% endblock init %}

    {% if chart.stacked %}
        chart.stacked(true);
    {% endif %}

    {% block focus %}
    {% endblock focus %}


    {% block axes %}
        {% for axis, a in chart.axislist.items() %}
            {% if a.items() %}
            chart.{{ axis }}
            {% for attr, value in a.items() %}
                .{{ attr}}({{ value}}){% if loop.last %};
                {% endif %}
            {% endfor %}
            {% endif %}
        {% endfor %}
    {% endblock axes %}

    {# generate custom tooltip for the chart #}
    {% block tooltip %}
        {% if chart.custom_tooltip_flag %}
            {% if not chart.date_flag %}
                {% if chart.model == 'pieChart' %}
                    {% block pietooltip %}
                    {% endblock pietooltip %}
                {% else %}
                    chart.tooltip.contentGenerator(function(obj) {
                        var x = String(obj.data.x);
                        var y = String(obj.data.y);
                        
                        tooltip_str = '<div class="chart_tooltip"><center><b>'+obj.data.key+'</b> <span> ' + y + '</span> <i class="fa fa-chevron-right"></i> ' + x +'</center></div>';
                        return tooltip_str;
                    });
                {% endif %}
            {% else %}
                chart.tooltip.contentGenerator(function(obj) {
                    var x = d3.time.format("{{ chart.charttooltip_dateformat }}")(new Date(parseInt(obj.data.x)));
                    var y = String(obj.data.y);
                    
                    tooltip_str = '<div class="chart_tooltip"><center><b>'+key+'</b> <span> ' + y + '</span> <i class="fa fa-chevron-right"></i> ' + x +'</center></div>';
                    return tooltip_str;
                });
            {% endif %}
        {% endif %}
    {% endblock tooltip %}

    {# the shape attribute in kwargs is not applied when #}
    {# not allowing other shapes to be rendered #}
    {% block legend %}
      chart.showLegend({{chart.show_legend|lower}});
    {% endblock legend %}

    {% block custoattr %}
        {# add custom chart attributes #}
        {% for attr, value in chart.chart_attr.items() %}
            {% if value is string and value.startswith(".") %}
                chart.{{ attr }}{{ value }};
            {% else %}
                chart.{{ attr }}({{ value }});
            {% endif %}
        {% endfor %}

        {% if chart.resize %}
            nv.utils.windowResize(chart.update);
        {% endif %}

        {# include specific subchart #}
        {{ chart.jschart }}

    {% endblock custoattr %}

    {% block y_axis_scale %}
    {% if chart.y_axis_scale_min or chart.y_axis_scale_max %}
        chart.forceY([{{ chart.y_axis_scale_min }},{{ chart.y_axis_scale_max }}]);
    {% endif %}
    {% endblock y_axis_scale %}

    {% block inject %}
        {# Inject data to D3 #}
        d3.select('#{{ chart.name }} svg')
            .datum(datum)
            .transition().duration(500)
            {% if chart.width %}
            .attr('width', '{{ chart.width}}')
            {% endif %}
            {% if chart.height %}
            .attr('height', {{ chart.height}})
            {% endif %}
            .call(chart);
    {% endblock inject %}

    {# extra chart attributes #}
    {% if chart.extras %}
        {{ chart.extras }}
    {% endif %}

    {# callback for clicking on charts #}
    {% if chart.callback %}
       },{{ chart.callback }});
    {% endif %}

    {# closing nv.addGraph #}
    {% block close %}
    });
    {% endblock close %}

{% endblock body %}
