rust-search-extension/manage/templates/index.html
shwin0901 d2b14291e4
New display of search records by year (#205)
* Setup eslint

* Add year select list

* Add new save data

* Optimize code structure

* Add heat map display by year

* Fix incorrect export of stats

* Filter and format date, week, month and hour data

* Optimize and improve the year record function

* Improve the code
2022-11-10 22:53:04 +08:00

62 lines
2.4 KiB
HTML

{% extends "base.html" %}
{% block head %}
<script type="text/javascript" src="./js/calendar-heatmap.js"></script>
<script type="text/javascript" src="./js/d3.min.js"></script>
<script type="text/javascript" src="./js/moment.min.js"></script>
<script type="text/javascript" src="./js/charts.js"></script>
<link rel="stylesheet" href="./css/calendar-heatmap.css">
<link rel="stylesheet" href="./css/charts.css">
{% endblock head %}
{% block content %}
<div style="flex-direction: column;" class="flex-layout">
<div class="chart-heatmap"></div>
</div>
<div class="search-time" style="text-align: center;font-size: 20px;">
<b>0</b> searches in total since the first day, approximately saved <b>0 seconds</b>.
<b aria-label="We consider one search save 5 seconds in average, just an estimated value." data-balloon-pos="up" data-balloon-length="large" style="vertical-align: middle" class="tooltip-color">
<img src="../assets/info.svg" alt="info">
</b>
</div>
<div id="chart">
<div style="padding: 30px 0;">
<div class="search-stats-graph" style=" height: 8px; width: 100%; display: flex;">
</div>
<div class="search-stats-text" style=" padding: 10px;">
<ol style="display: flex; justify-content: space-around;">
</ol>
</div>
</div>
<div style="display: flex; flex-direction: row-reverse; align-items: flex-start; padding-top: 30px;">
<div>
<div class="" style="padding-bottom: 20px;">
<h3>Searches per weekday</h3>
<div class="chart-histogram-week" style="position: relative;"></div>
</div>
<div class="" style="padding-bottom: 20px;">
<h3>Searches per day of month</h3>
<div class="chart-histogram-date" style="position: relative;"></div>
</div>
<div class="" style="padding-bottom: 20px;">
<h3>Searches per hour (local time)</h3>
<div class="chart-histogram-hour" style="position: relative;"></div>
</div>
</div>
<div class="" style="padding-right: 80px;">
<h3>Top searched crates</h3>
<div class="topCratesData" style="position: relative;box-sizing: border-box;">
</div>
</div>
</div>
</div>
<ul class="filter-list"></ul>
{% endblock %}
{% block js %}
<script type="text/javascript" src="./js/bar-chart.js"></script>
<script type="text/javascript" src="../statistics.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
{% endblock %}