76 lines
3.2 KiB
HTML
76 lines
3.2 KiB
HTML
{% extends "layout.html" %} {% block content %}
|
|
<main class="graph-container shadow-sm">
|
|
<form class="min-vh-75" action="" method="post" enctype="multipart/form-data">
|
|
{{ form.hidden_tag() }}
|
|
<!-- Form title section -->
|
|
<section class="container-fluid">
|
|
<div class="row pt-3">
|
|
<div class="d-flex col-sm-6 offset-md-3 justify-content-end">
|
|
{% if form.title.errors %}
|
|
{{ form.title(class="primary-colour form-control is-invalid w-75 title") }}
|
|
<div class="invalid">
|
|
{% for error in form.title.errors %}
|
|
<span>{{ error }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
{{ form.title(class="primary-colour form-control w-75 title") }}
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-sm-3 d-flex justify-content-end">
|
|
<div class="dropdown">
|
|
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Save as
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
|
|
<div class="dropdown-item export pointer">Export as PNG</div>
|
|
{{ form.submit(class="dropdown-item no-btn") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="graph-sub-container">
|
|
<div class="row vh-75 p-3">
|
|
<!-- Graph container section -->
|
|
<section class="graph-height col-md-9 p-0 order-md-2">
|
|
<div id="graph" class="h-100 position-relative">
|
|
<!-- ------GRAPH OVERLAY------ -->
|
|
<div class="empty-graph visible h-100 w-100 mr-2">
|
|
<h1>Choose your variables to get started</h1>
|
|
</div>
|
|
<!-- ------TOOLTIP------ -->
|
|
<div class="graph-tooltip tooltip-hidden">
|
|
<p><span class="tooltip-value"></span></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Start of Axis settings. Each graph type has its own HTML -->
|
|
{% block axis %} {% endblock %}
|
|
<!-- End of Axis settings -->
|
|
</div>
|
|
</div>
|
|
<!-- END OF GRAPH GRID -->
|
|
</form>
|
|
</main>
|
|
<!-- Scripts that are used on all of the graph pages. Specific javscripts relating to each
|
|
graph type are included on their own page -->
|
|
<script type="text/javascript" defer>
|
|
// Conversions from python True/False to javascript true/false
|
|
var nan = "N/A";
|
|
var True = true;
|
|
var False = false;
|
|
var graphData = {{ data | safe }}
|
|
// Needed for testing
|
|
{% if 'csrf_token' in form %}
|
|
var csrf = "{{ form.csrf_token._value() }}"
|
|
{% endif %}
|
|
var redirectUrl = "{{ url_for('surveys.dashboard', survey_id=survey_id) }}"
|
|
var url = "{{ url_for('graphs.graph', survey_id=survey_id, graph_id=graph_id, chart_type=chart_type) }}"
|
|
</script>
|
|
<!-- Scripts for exporting graph as image and for saving to dashboard -->
|
|
<script src="{{ url_for('static', filename='graphscripts/postgraph.js') }}" defer></script>
|
|
<!-- Script taken from https://github.com/exupero/saveSvgAsPng -->
|
|
<script src="{{ url_for('static', filename='graphscripts/saveSvgAsPng.js') }}" defer></script>
|
|
{% endblock content %}
|