{% extends "layout.html.twig" %}

{% block title %}Statistics Report{% endblock %}

{% block pageheader %}Statistics Report{% endblock %}

{% block body %}
<div class="row">
  <form name="campaign-period" class="right-side" action="{{ path('statisticsReport') }}" method="post">
    <input type="hidden" name="byPeriod" value="{{ byPeriod }}">
    <div class="col-md-3">
      <select class="form-control combo-selected" name="campaign">
        {% for key, value in selectCampaigns %}
        <option value="{{key}}" {% if campaignid == key %}selected=selected class="combo-selected"{% endif %}>{{value}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-2 col-md-offset-2">
      <div class="specific-period-container">
        <div class="input-group date">
          <input type="text" id="period-start" name="period-start" class="form-control" placeholder="Start Date" title="Specific Start Date" value="{{formStartPeriod}}"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="specific-period-container">
        <div class="input-group date">
          <input type="text" id="period-end" name="period-end" class="form-control" placeholder="End Date" title="Specific End Date" value="{{formEndPeriod}}"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <select class="form-control combo-selected" id="period" name="period">
        {% for key, value in selectPeriods %}
        <option value="{{key}}" {% if period == key %}selected=selected class="combo-selected"{% endif %}>{{value}}</option>
        {% endfor %}
      </select>
    </div>
    <input type="hidden" name="impressionsSession" value="{{sessionItems['impressionsSession']}}">
    <input type="hidden" name="clicksSession" value="{{sessionItems['clicksSession']}}">
    <input type="hidden" name="actionsSession" value="{{sessionItems['actionsSession']}}">
    <input type="hidden" name="spentSession" value="{{sessionItems['spentSession']}}">
    <input type="hidden" name="cpmSession" value="{{sessionItems['cpmSession']}}">
    <input type="hidden" name="ctrSession" value="{{sessionItems['ctrSession']}}">
    <input type="hidden" name="cpcSession" value="{{sessionItems['cpcSession']}}">
    <input type="hidden" name="cpaSession" value="{{sessionItems['cpaSession']}}">
  </form>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default panel-dataTable">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-12 period-buttons">
              <div class="btn-group " data-toggle="buttons">
                <label class="btn btn-default {% if byPeriod == "day" %}active{% endif %}">
                  <input type="radio" name="day" autocomplete="off" {% if byPeriod == "day" %}checked{% endif %}> By Day
                </label>
                <label class="btn btn-default {% if byPeriod == "week" %}active{% endif %}">
                  <input type="radio" name="week" autocomplete="off" {% if byPeriod == "week" %}checked{% endif %}> By Week
                </label>
                <label class="btn btn-default {% if byPeriod == "month" %}active{% endif %}">
                  <input type="radio" name="month" autocomplete="off" {% if byPeriod == "month" %}checked{% endif %}> By Month
                </label>
                <label class="btn btn-default {% if byPeriod == "quarter" %}active{% endif %}">
                  <input type="radio" name="quarter" autocomplete="off" {% if byPeriod == "quarter" %}checked{% endif %}> By Quarter
                </label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-10">
              <canvas id="chart" height="100px"></canvas>
            </div>
            <div class="col-md-2 check-graph">
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="impressionsCheck" {%if sessionItems['impressionsSession'] == 'yes' %}checked{%endif%}>
                  Impressions
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="clicksCheck" {%if sessionItems['clicksSession'] == 'yes' %}checked{%endif%}>
                  Clicks
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="actionsCheck" {%if sessionItems['actionsSession'] == 'yes' %}checked{%endif%}>
                  Conversions
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="spentCheck" {%if sessionItems['spentSession'] == 'yes' %}checked{%endif%}>
                  Spend
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="cpmCheck" {%if sessionItems['cpmSession'] == 'yes' %}checked{%endif%}>
                  CPM
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="ctrCheck" {%if sessionItems['ctrSession'] == 'yes' %}checked{%endif%}>
                  CTR
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="cpcCheck" {%if sessionItems['cpcSession'] == 'yes' %}checked{%endif%}>
                  CPC
                </label>
              </div>
              {% if campaignid == "all" %}
                <div class="checkbox">
                  <label>
                    <input type="checkbox" id="cpaCheck" {%if sessionItems['cpaSession'] == 'yes' %}checked{%endif%}>
                    CPA
                  </label>
                </div>
              {% else %}
                {% for i in 1..nbConversionsPixel %}
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" id="cpa{{ i }}Check">
                      CPA{{ " " ~ i }}
                    </label>
                  </div>
                {% endfor %}
              {% endif %}
            </div>
          </div>
        </div>
        <hr>
        <!-- /.panel-heading -->
        <div class="panel-body">
            <div class="dataTable_wrapper table-responsive">
                <table class="table table-striped table-bordered table-hover" id="dataTables">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Impr</th>
                            <th>Clicks</th>
                            <th>Cost</th>
                            <th>CPM</th>
                            <th>CTR</th>
                            <th>CPC</th>
                            {% if campaignid == "all" %}
                              <th>Conversions</th>
                              <th>CPA</th>
                            {% else %}
                              {% for i in 1..nbConversionsPixel %}
                                <th>{{tags[i]}}</th>
                                <th>CPA {{i}}</th>
                              {% endfor %}
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="dataTable-total">
                          <td>Total</td>
                          <td>{{ totalSumsCampaigns['sumImpressions']|number_format(0, '.', ',') }}</td>
                          <td>{{ totalSumsCampaigns['sumClicks']|number_format(0, '.', ',') }}</td>
                          <td>{% if totalSumsCampaigns['sumSpentBudget'] %}{{ totalSumsCampaigns['sumSpentBudget']|number_format(2, '.', ',') }}{% else %}0{% endif %}&euro;</td>
                          <td>{% if totalSumsCampaigns['sumImpressions'] > 0 %}{{ ((totalSumsCampaigns['sumSpentBudget'] / totalSumsCampaigns['sumImpressions'])*1000)|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>
                          <td>{% if totalSumsCampaigns['sumImpressions'] > 0 %}{{ ((totalSumsCampaigns['sumClicks'] / totalSumsCampaigns['sumImpressions'])|round(4, 'floor')*100) }}{% else %}0{% endif %}%</td>
                          <td>{% if totalSumsCampaigns['sumClicks'] > 0 %}{{ (totalSumsCampaigns['sumSpentBudget'] / totalSumsCampaigns['sumClicks'])|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>
                          {% if campaignid == "all" %}
                            {% set v = 'sumActions1' %}
                            <td>{% if totalSumsCampaigns[v] %}{{ totalSumsCampaigns[v]|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                            <td>{% if totalSumsCampaigns[v] > 0 %}{{ (totalSumsCampaigns['sumSpentBudget'] / totalSumsCampaigns[v])|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>
                          {% else %}
                            {% for i in 1..nbConversionsPixel %}
                            {% set v = 'sumActions' ~ i %}
                            <td>{% if totalSumsCampaigns[v] %}{{ totalSumsCampaigns[v]|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                            <td>{% if totalSumsCampaigns[v] > 0 %}{{ (totalSumsCampaigns['sumSpentBudget'] / totalSumsCampaigns[v])|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>
                            {% endfor %}
                          {% endif %}
                        </tr>
                        {% for key,value in sumsCampaigns %}
                            <tr>
                              {% if byPeriod == "day" %}
                                <td>{{ value['date_only'] }}</td>
                              {% elseif byPeriod == "week" %}
                                  <td>{{ value['year'] ~ " week " ~ value['week'] }}</td>
                              {% elseif byPeriod == "month" %}
                                  <td>{{ value['year'] ~ " " ~ value['month'] }}</td>
                              {% elseif byPeriod == "quarter" %}
                                  <td>{{ value['year'] ~ " quarter " ~ value['quarter'] }}</td>
                              {% endif %}
                              <td>{{ value['sumImpressions']|number_format(0, '.', ',') }}</td>
                              <td>{{ value['sumClicks']|number_format(0, '.', ',') }}</td>
                              <td>{% if value['sumSpentBudget'] %}{{ value['sumSpentBudget']|number_format(2, '.', ',') }}{% else %}0{% endif %}&euro;</td>
                              <td>{% if value['sumImpressions'] > 0 %}{{ ((value['sumSpentBudget'] / value['sumImpressions'])*1000)|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>
                              <td>{% if value['sumImpressions'] > 0 %}{{ ((value['sumClicks'] / value['sumImpressions']) * 100)|round(2, 'floor') }}{% else %}0{% endif %}%</td>
                              <td>{% if value['sumClicks'] > 0 %}{{ (value['sumSpentBudget'] / value['sumClicks'])|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>

                              {% if campaignid == "all" %}
                                {% set v = 'sumActions1' %}
                                <td>{% if value[v] %}{{ value[v]|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                                <td>{% if value[v] > 0 %}{{ (value['sumSpentBudget'] / value[v])|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>
                              {% else %}
                                {% for i in 1..nbConversionsPixel %}
                                {% set v = 'sumActions' ~ i %}
                                <td>{% if value[v] %}{{ value[v]|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                                <td>{% if value[v] > 0 %}{{ (value['sumSpentBudget'] / value[v])|round(2, 'floor') }}{% else %}0{% endif %}&euro;</td>
                                {% endfor %}
                              {% endif %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
    </div>
  </div>
</div>

<a href="#" id="exportData" style="display:none;"></a>
{% endblock %}

{% block specificJS %}
  <script type="text/javascript">
    var myChart = null;
    var ctx = null;
    var labels = {{dateslabels|json_encode|raw}};
    var dataImpressions = {{campaignImpressions|json_encode|raw}};
    var dataClicks = {{campaignClicks|json_encode|raw}};
    var dataCTR = {{campaignCTR|json_encode|raw}};
    var dataCPC = {{campaignCPC|json_encode|raw}};
    var dataCPM = {{campaignCPM|json_encode|raw}};
    var dataActions = {{campaignActions|json_encode|raw}};
    var dataCPA = {{campaignCPA|json_encode|raw}};
    var CPA = {{CPA|json_encode|raw}};
    var dataSpentBudget = {{campaignSpentBudget|json_encode|raw}};
    var isSpecificPeriod = {% if isSpecificPeriod %}true{% else %}false{% endif %};

    $(document).ready(function(){
        if(isSpecificPeriod)
          $('div.specific-period-container').fadeIn(250);

        $('form[name=campaign-period] .input-group.date').datepicker({
          format: "yyyy-mm-dd",
          maxViewMode: 2,
          language: 'en'
        });

        // Soumission du formulaire
        $('form.right-side select[name=period]').change(function(){
          var optValue = $(this).val();
          if(optValue !== "specific") {
            $('form.right-side').submit();
            displayLoader();
          }
          else
            $('div.specific-period-container').fadeIn(500);
        });
        $('form.right-side select[name=campaign], form.right-side input[name^=period-], form.right-side select[name=byPeriod]').change(function(){
          $('form.right-side').submit();
          displayLoader();
        });

        // Boutons par période
        $('.period-buttons input').change(function(){
          if($(this).is(':checked')) {
            $('input[name=byPeriod]').val($(this).prop('name'));
            $('form.right-side').submit();
            displayLoader();
          }
        });

        $('#dataTables').DataTable({
            responsive: true,
            paging: false,
            info: false,
            ordering: false,
            language: {
              search: "",
              thousands: ",",
              decimal: ".",
              zeroRecords: "No matching records found"
            },
            initComplete: function(){
              $('#dataTables_filter').prepend('<button style="margin-right: 15px;" type="button" id="excel-button" title="Export as Excel" class="btn btn-default btn-sm">Export <span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>');
              $('#dataTables_filter .input-sm').wrap("<div class='input-group'></div>");
              $('#dataTables_filter .input-sm').parent("div.input-group").append("<div class='input-group-addon'><span class='glyphicon glyphicon-search' aria-hidden='true'></span></div>");
              $('#dataTables_filter .input-sm').prop("placeholder", "Search");
            }
        });

        // Graphique
        ctx = document.getElementById("chart").getContext("2d");
        updateChart();

        // Checkboxes graphiques
        $('div.check-graph input').change(function(){
          $('div.check-graph input').prop("disabled", "disabled");

          var item = $(this).prop('id').replace('Check', '') + 'Session';
          
          if($(this).is(':checked'))
            $('input[name='+item+']').val('yes');
          else
            $('input[name='+item+']').val('no');

          updateChart();
          $('div.check-graph input').prop("disabled", "");
        });

        // Export Excel
        $('#excel-button').click(function(){
          var tableToExcel = (function() {
            var uri = 'data:application/vnd.ms-excel;base64,'
              , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
              , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
              , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
            return function(table, name, filename) {
              if (!table.nodeType) table = document.getElementById(table)
              var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
              document.getElementById("exportData").href = uri + base64(format(template, ctx));
              document.getElementById("exportData").download = filename + ".xls";
              document.getElementById("exportData").click();
            }
          })();
          tableToExcel("dataTables", "Statistics Report", "Statistics Report");
        });
  });

  function updateChart() {
    if(myChart != null)
      myChart.destroy();
    var ds = [];
    var yAxes = [];
    $('.check-graph input').each(function(k, v){
      var idCheck = $(v).prop('id');
      if($(v).is(':checked')) {
        switch(idCheck) {
          case "impressionsCheck":
            ds.push({
              lineTension: 0,
              "label": "Impressions",
              "fill": false,
              "borderColor": "rgba(192, 57, 43, 1)",
              "backgroundColor": "rgba(192, 57, 43, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(192, 57, 43, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-0",
              "data": dataImpressions
            });
            yAxes.push({
              position: "left",
              "id": "y-axis-0",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(192, 57, 43, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "IMPRESSIONS",
                fontColor: "rgba(192, 57, 43, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "ctrCheck":
            ds.push({
              lineTension: 0,
              "label": "CTR",
              "fill": false,
              "borderColor": "rgba(34, 49, 63, 1)",
              "backgroundColor": "rgba(34, 49, 63, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(34, 49, 63, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-1",
              "data": dataCTR
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-1",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(34, 49, 63, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CTR",
                fontColor: "rgba(34, 49, 63, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "clicksCheck":
            ds.push({
              lineTension: 0,
              "label": "Clicks",
              "fill": false,
              "borderColor": "rgba(102, 51, 153, 1)",
              "backgroundColor": "rgba(102, 51, 153, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(102, 51, 153, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-2",
              "data": dataClicks
            });
            yAxes.push({
              position: "left",
              "id": "y-axis-2",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(102, 51, 153, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CLICKS",
                fontColor: "rgba(102, 51, 153, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpcCheck":
            ds.push({
              lineTension: 0,
              "label": "CPC",
              "fill": false,
              "borderColor": "rgba(108, 122, 137, 1)",
              "backgroundColor": "rgba(108, 122, 137, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(108, 122, 137, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-3",
              "data": dataCPC
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-3",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(108, 122, 137, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPC",
                fontColor: "rgba(108, 122, 137, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpmCheck":
            ds.push({
              lineTension: 0,
              "label": "CPM",
              "fill": false,
              "borderColor": "rgba(247, 202, 24, 1)",
              "backgroundColor": "rgba(247, 202, 24, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(247, 202, 24, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-4",
              "data": dataCPM
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-4",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(247, 202, 24, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPM",
                fontColor: "rgba(247, 202, 24, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "actionsCheck":
            ds.push({
              lineTension: 0,
              "label": "Conversions",
              "fill": false,
              "borderColor": "rgba(38, 166, 91, 1)",
              "backgroundColor": "rgba(38, 166, 91, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(38, 166, 91, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-5",
              "data": dataActions
            });
            yAxes.push({
              position: "left",
              "id": "y-axis-5",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(38, 166, 91, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CONVERSIONS",
                fontColor: "rgba(38, 166, 91, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpaCheck":
            ds.push({
              lineTension: 0,
              "label": "CPA",
              "fill": false,
              "borderColor": "rgba(249, 105, 14, 1)",
              "backgroundColor": "rgba(249, 105, 14, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(249, 105, 14, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-6",
              "data": dataCPA
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-6",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(249, 105, 14, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPA",
                fontColor: "rgba(249, 105, 14, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "spentCheck":
            ds.push({
              lineTension: 0,
              "label": "Spend",
              "fill": false,
              "borderColor": "rgba(37, 116, 169, 1)",
              "backgroundColor": "rgba(37, 116, 169, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(37, 116, 169, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-7",
              "data": dataSpentBudget
            });
            yAxes.push({
              position: "left",
              "id": "y-axis-7",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(37, 116, 169, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "SPEND",
                fontColor: "rgba(37, 116, 169, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpa1Check":
            ds.push({
              lineTension: 0,
              "label": "CPA 1",
              "fill": false,
              "borderColor": "rgba(249, 105, 14, 1)",
              "backgroundColor": "rgba(249, 105, 14, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(249, 105, 14, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-6",
              "data": CPA['1']
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-6",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(249, 105, 14, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPA",
                fontColor: "rgba(249, 105, 14, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpa2Check":
            ds.push({
              lineTension: 0,
              "label": "CPA 2",
              "fill": false,
              "borderColor": "rgba(232, 126, 4, 1)",
              "backgroundColor": "rgba(232, 126, 4, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(232, 126, 4, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-6",
              "data": CPA['2']
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-6",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(249, 105, 14, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPA",
                fontColor: "rgba(249, 105, 14, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpa3Check":
            ds.push({
              lineTension: 0,
              "label": "CPA 3",
              "fill": false,
              "borderColor": "rgba(235, 149, 50, 1)",
              "backgroundColor": "rgba(235, 149, 50, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(235, 149, 50, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-6",
              "data": CPA['3']
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-6",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(249, 105, 14, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPA",
                fontColor: "rgba(249, 105, 14, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpa4Check":
            ds.push({
              lineTension: 0,
              "label": "CPA 4",
              "fill": false,
              "borderColor": "rgba(235, 151, 78, 1)",
              "backgroundColor": "rgba(235, 151, 78, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(235, 151, 78, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-6",
              "data": CPA['4']
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-6",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(249, 105, 14, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPA",
                fontColor: "rgba(249, 105, 14, 1)",
                fontStyle: "bold"
              }
            });
          break;
          case "cpa5Check":
            ds.push({
              lineTension: 0,
              "label": "CPA 5",
              "fill": false,
              "borderColor": "rgba(244, 179, 80, 1)",
              "backgroundColor": "rgba(244, 179, 80, 1)",
              "pointBorderColor": "#fff",
              "pointBackgroundColor": "rgba(244, 179, 80, 1)",
              "pointRadius": 5,
              "pointHoverRadius": 6,
              yAxisID: "y-axis-6",
              "data": CPA['5']
            });
            yAxes.push({
              position: "right",
              "id": "y-axis-6",
              ticks: {
                beginAtZero: true,
                fontStyle: "bold",
                fontColor: "rgba(249, 105, 14, 1)",
                maxTicksLimit: 7
              },
              gridLines: {
                display: false,
                color: "rgba(0, 0, 0, 0)",
                zeroLineColorr: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: true,
                labelString: "CPA",
                fontColor: "rgba(249, 105, 14, 1)",
                fontStyle: "bold"
              }
            });
          break;
        }
      }
    });
    myChart = new Chart(ctx, {
      type: "line",
      data: {
        "labels": labels,
        "datasets": ds
      },
      options: {
        defaultFontFamily: "'Open Sans'",
        legend: {
          display: false
        },
        animation: false,
        tooltips: {
          "mode": 'label'
        },
        scales: {
          yAxes: yAxes
        }
      }
    });
  }
  </script>
{% endblock %}