{% extends "graphs/graph.html" %} {% block axis %}
<!-- Axes settings -->
<section class="col-md-3  order-md-1">
  <div class="h-100 bg-gradient text-light rounded p-3">
    <!-- ------X AXIS on pie chart refers to the prime variable------ -->
    <section class="x-axis-details">
      <h3>Variable</h3>
      <div class="axis-variable">
        {{ form.x_axis.label() }}
        {{ form.x_axis(class="custom-select x-axis-value axis-setting") }}
      </div>
    </section>
    <!-- ------Y AXIS refers to what the main variable is being plotted against------ -->
    <section class="y-axis-details primary-transition hidden-down">
      <h3>Against (optional)</h3>
      <div class="axis-variable">
        {{ form.y_axis.label() }}
        {{ form.y_axis(class="custom-select y-axis-value axis-setting") }}
      </div>
      <div class="aggregate hidden-down">
        {{ form.y_axis_agg.label() }}
        {{ form.y_axis_agg(class="custom-select y-axis-aggregation axis-setting") }}
      </div>
    </section>
    <!-- End of y-axis settings -->
  </div>
</section>
<!-- End of Axis settings -->

<script src="https://d3js.org/d3.v5.min.js" defer></script>
<script src="{{ url_for('static', filename='graphscripts/piechart.js') }}" defer></script>
{% endblock axis %}