performing_patents_otherwise/web/app/templates/data.html

{% extends "base.html" %}

{% block content %}

<a href="{{ url_for('main.index') }}" class="h1 text-left" title="back to index"> ⇽ </a>

<h1 class="h1 text-center"> There are a total of {{ total_number }} patents.</h1>

<div class="anchordata">
<a href="#time">temporal focus</a>
<br>
<a href="#geo">geographic focus</a>
</div>

<br><br>

<div class="row">
  <div class="col-6 text-center">
    {% for i in range(0, year_data|length) %}
      {% if i % 2 %}
        {{ year_data[i] }}<br>
      {% else %}
        <a href="{{ url_for('search.basic_search', year=year_data[i]) }}">
          {{ year_data[i] }}
        </a>:
      {% endif %}
    {% endfor %}
  </div>
  <div class="col-6 text-center">
    {% for i in range(0, country_data|length) %}
      {% if i % 2 %}
        {{ country_data[i] }}<br>
      {% else %}
        {% if country_data[i].name is defined %}
          <a href="{{ url_for('search.basic_search', country=country_data[i].alpha_2) }}">
            {{ country_data[i].name }}
          </a>
          {{ country_data[i].flag }}:
        {% else %}
          <a href="{{ url_for('search.basic_search', country=country_data[i]) }}">
            {{ country_data[i] }}
          </a>:
        {% endif %}
      {% endif %}
    {% endfor %}
  </div>
</div>

<div id="time">
<canvas id="chartOfYearFrequency" width="600" height="300"></canvas>
</div>

<div id="geo">
<canvas id="chartOfCountryFrequency" width="600" height="300"></canvas>
</div>

<script type="text/javascript">
  // retrieve variables passed from Python
  var year_labels = {{ year_labels|safe }}
  var year_dataset = {{ year_dataset|safe }}

  // set up chart
  var data = {
    labels: year_labels,
    datasets: year_dataset,
  };

  var config = {
    type: 'bar',
    data: data,
    options: {
      plugins: {
        title: {
          display: true,
          text: 'number of patent records for each year'
        },
      animation: {
        onComplete: () => {
          delayed = true;
        },
        delay: (context) => {
          let delay = 0;
          if (context.type === 'data' && context.mode === 'default' && !delayed) {
            delay = context.dataIndex * 1000 + context.datasetIndex * 100;
          }
          return delay;
          },
        },
      },
      responsive: true,
      scales: {
        x: {
          title: {
            display: true,
            text: 'year'
          },
          stacked: true,
        },
        y: {
          title: {
            display: true,
            text: 'number of records'
          },
          stacked: true
        }
      }
    }
  };
  
  Chart.defaults.font.family = 'Compagnon'
  var yearGraph = new Chart(
    document.getElementById('chartOfYearFrequency'),
    config
  );

</script>

<script type="text/javascript">
  // retrieve variables passed from Python
  var country_labels = {{ country_labels|safe }}
  var country_dataset = {{ country_dataset|safe }}

  // set up chart
  var data = {
    labels: country_labels,
    datasets: country_dataset,
  };

  var config = {
    type: 'pie',
    data: data,
    options: {
      plugins: {
        title: {
          display: true,
          text: 'number of patent records from each country'
        },
      },
      responsive: true,
    }
  };

  Chart.defaults.font.family = 'Compagnon'
  var yearGraph = new Chart(
    document.getElementById('chartOfCountryFrequency'),
    config
  );
</script>

{% endblock %}