{% load i18n static %}

{% block extrajs %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
{#  <script src="{% static 'elegant/js/chart.min.js' %}"></script>#}
  <script src="{% static 'elegant/js/utils.js' %}"></script>
{% endblock %}

{% block extrastyle %}
  <link rel="stylesheet" type="text/css" href="{% static 'elegant/css/dashboard.css' %}">
{% endblock %}

<h4 class="italic-title">Analytics </h4>
<!-- this is just to make the view selector work, no need to display it -->
<div id="view-selector-container">
  <div class="row-fluid" style="margin: 20px 0;">
    <div class="span6">
      <section class="panel">
        <h1>{% trans 'Traffic' %}</h1>
        <h2>{% trans 'Sessions and Users, last 15 days' %}</h2>
        <div id="chart-1-container">
          <canvas id="chart-0"></canvas>
        </div>
      </section>
    </div>
    <div class="span6">
      <section class="panel">
        <h1>{% trans 'Popular' %}</h1>
        <h2>{% trans 'Page views, last 15 days' %}</h2>
        <div id="chart-2-container">
          <canvas id="chart-1"></canvas>
        </div>
      </section>
    </div>
  </div>
  <div class="row-fluid" style="margin: 20px 0;">
    <div class="span6">
      <section class="panel">
        <h1>{% trans 'Top Browsers' %}</h1>
        <h2>{% trans 'Last 15 days' %}</h2>
        <div id="chart-3-container">
          <canvas id="chart-2"></canvas>
        </div>
      </section>
    </div>
    <div class="span6">
      <section class="panel">
        <h1>{% trans 'Acquisition' %}</h1>
        <h2>{% trans 'Referral Traffic, last 15 days' %}</h2>
        <div id="chart-4-container">
          <canvas id="chart-3"></canvas>
        </div>
      </section>
    </div>
  </div>
  <div class="row-fluid" style="margin: 20px 0;">
    <div class="span6">
      <section class="panel">
        <h1>{% trans 'Audience' %}</h1>
        <h2>{% trans 'Countries, last 15 days' %}</h2>
        <div id="chart-5-container">
          <canvas id="chart-4"></canvas>
        </div>
      </section>
    </div>
    <div class="span6">
      <section class="panel">
        <h1>{% trans 'Social' %}</h1>
        <h2>{% trans 'Interactions, last 15 days' %}</h2>
        <div id="chart-6-container">
          <canvas id="chart-5"></canvas>
        </div>
      </section>
    </div>
  </div>
</div>

<script type="text/javascript">
  var presets = window.chartColors;
  var utils = Samples.utils;
  var inputs = {
    min: -100,
    max: 100,
    count: 8,
    decimals: 2,
    continuity: 1
  };

  function generateData(config) {
    return utils.numbers(Chart.helpers.merge(inputs, config || {}));
  }

  function generateLabels(config) {
    return utils.months(Chart.helpers.merge({
      count: inputs.count,
      section: 3
    }, config || {}));
  }

  var options = {
    maintainAspectRatio: false,
    spanGaps: false,
    elements: {
      line: {
        tension: 0.000001
      }
    },
    plugins: {
      filler: {
        propagate: false
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 0
        }
      }]
    }
  };

  [false, 'origin', 'start', 'end', 'x', 'y'].forEach(function (boundary, index) {
    // reset the random seed to generate the same data for all charts
    utils.srand(8);
    new Chart('chart-' + index, {
      type: 'line',
      data: {
        labels: generateLabels(),
        datasets: [{
          backgroundColor: utils.transparentize(presets.red),
          borderColor: presets.red,
          data: generateData(),
          label: 'Dataset',
          fill: boundary
        }]
      },
      options: Chart.helpers.merge(options, {
        title: {
          text: 'fill: ' + boundary,
          display: true
        }
      })
    });
  });
</script>
