Add basic tables and graphs for various tables.

Add basic tables and graphs for viewing things like uploads over time, new users
over time, comments over time, etc. Located at https://betabooru.donmai.us/reports.

The graphing uses Apache ECharts: https://echarts.apache.org/en/index.html.
This commit is contained in:
evazion
2022-10-20 05:20:22 -05:00
parent 412b7f2727
commit 7646521d0f
16 changed files with 384 additions and 9 deletions

View File

@@ -0,0 +1,13 @@
# frozen_string_literal: true
class TimeSeriesComponent < ApplicationComponent
delegate :current_page_path, :search_params, to: :helpers
attr_reader :results, :columns, :mode
def initialize(results, columns, mode: :table)
@results = results
@columns = columns
@mode = mode.to_sym
end
end

View File

@@ -0,0 +1,43 @@
<div class="flex justify-end text-xs mb-2">
<% if mode == :table %>
<%= link_to "Chart", current_page_path(search: { **search_params, mode: "chart" }) %>
<% else %>
<%= link_to "Table", current_page_path(search: { **search_params, mode: "table" }) %>
<% end %>
</div>
<% if mode == :table %>
<table class="striped autofit" width="100%">
<thead>
<th>Date</th>
<% columns.each do |column| %>
<%= tag.th(column.to_s.capitalize, class: ("col-expand" if column == columns.last)) %>
<% end %>
</thead>
<tbody>
<% results.each do |row| %>
<tr>
<td><%= row["date"].to_date %></td>
<% columns.each do |column| %>
<td><%= row[column.to_s] %></td>
<% end %>
<tr>
<% end %>
</tbody>
</table>
<% elsif mode == :chart %>
<div class="line-chart" style="width: 100%; height: 80vh;"></div>
<script type="text/javascript">
var data = <%= raw results.to_a.to_json %>;
var columns = <%= raw columns.to_json %>;
var chart = new Danbooru.TimeSeriesComponent({
container: $(".line-chart").get(0),
data: data,
columns: columns,
});
</script>
<% end %>

View File

@@ -0,0 +1 @@
../../javascript/src/javascripts/time_series_component.js