{% load dashboard_tags %}
{% load staticfiles %}
{% load i18n %}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart_{{widget.id}});

      function drawChart_{{widget.id}}() {

          var data = google.visualization.arrayToDataTable([
              [{% for c in widget.columns %}
               '{{c}}'{% if not forloop.last %},{% endif %}
               {% endfor %},
               {type: 'string', role: 'annotation'},
               {type:'string', role:'annotationText', 'p': {'html': true}}
              ],
              {% for row in widget.rows_matrix %}
              {{row|jsonencode|safe}}{% if not forloop.last %},{% endif %}
              {% endfor %}
          ]);


          var tickMarks = [];
          for (var i = 0; i < data.getNumberOfRows(); i++) {
              tickMarks.push(data.getValue(i, 0));
          }

          var options = {
	      title: "{{widget.name}}",
              tooltip: {isHtml: true, trigger: 'selection'},
              interpolateNulls: false,
	      {% if "curvetype" in widget %}
              curveType: '{{widget.curvetype}}',
	      {% endif %}
              legend: { position: 'top' },
              hAxis: {title: "Week", titleTextStyle: {color: "green"}},
              hAxis: {
                  ticks: tickMarks,
                  slantedText: true,
                  slantedTextAngle: 90
              },
	      {% if widget.dashed|length > 0 %}
	      series: {
		  {% for i in widget.dashed %}
		  {{i}}: {type: 'line', lineDashStyle: [4, 2]}{% if not forloop.last %},{% endif %}
		  {% endfor %}
	      },
	      {% endif %}
              annotations: {
               stem: {
                    color: '#D3D3D3',
                    length: 40
               },
                alwaysOutside : true,
              textStyle: {
                  fontName: 'Times-Roman',
                  fontSize: 11,
                  color: '#000',
                },
              },

          };

          var chart = new google.visualization.ComboChart(document.getElementById('curve_chart_{{widget.id}}'));

          chart.setAction({
          id: 'annotation',
          action: function() {
            var selection = chart.getSelection();
            if (selection) {
            }
          }
        });

          chart.draw(data, options);
      }
  });
</script>


<!--
Jinja2 partial to render an image

{ % include 'sharedapp/partials/full_width_chart.html' with usecase=usecase spec=spec widget=widget % }

-->
<div class="block-widget-box mb-3" id="widget_{{widget.id}}">
  <div class="block-filter-container d-flex flex-wrap align-items-center">
    <div class="crc-head-inside d-flex align-items-center">
      <div class="crc-head-icon"  data-bs-toggle="collapse" data-bs-target="#collapseresults_{{widget.id}}" aria-expanded="true">
        <img class="expand-open" src={% static 'gui2/appstore2/images/new-caret-icon-1.svg' %} alt="" />
        <img class="expand-add" src={% static 'gui2/appstore2/images/expand-add.svg' %} alt="" />
      </div>
      <div class="accor-right">
        <div class="block-filter-left">
          <ul class="cp-text-list d-flex align-items-center">
            <li><b>{% translate widget.name|safe %}</b></li>
          </ul>
            <p>{% translate widget.description|safe %}</p>
        </div>
      </div>
    </div>
    <div class="block-filter-option ms-auto d-flex align-items-center justify-content-end align-block-filter-option">
      {% for k,values in widget.header_components.items %}
      {% for v in  values %}
      <div class="cp-download">
        {% include 'sharedapp/components/'|add:v.template|add:'.html' with widget=widget content=v %}
      </div>
      {% endfor %}
      {% endfor %}
    </div>
  </div>
  <div id="collapseresults_{{widget.id}}" class="crc-body accordion-collapse collapse show">
    <div class="bw-body">
        {% for k,values in widget.body_components.items %}
            {% for v in  values %}
                {% include 'sharedapp/components/'|add:v.template|add:'.html' with widget=widget content=v %}
            {% endfor %}
        {% endfor %}
      <div id="curve_chart_{{widget.id}}" style="{{widget.chart_style}}"></div>
    </div>
  </div>
</div>
