pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Report free and paid transfer separately on filesystem details window

Browse Source
This commit is contained in:
Wim Brand
2025-01-27 14:09:41 +01:00
parent 3f08de7846
commit 47f513a967
2 changed files with 56 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
svelte/src/filesystem/DetailsWindow.svelte
View File

@@ -1,6 +1,6 @@
<script> <script>
import Chart from "../util/Chart.svelte"; import Chart from "../util/Chart.svelte";
import { formatDataVolume, formatDate, formatThousands } from "../util/Formatting.svelte"; import { formatDataVolume, formatDate, formatNumber, formatThousands } from "../util/Formatting.svelte";
import Modal from "../util/Modal.svelte"; import Modal from "../util/Modal.svelte";
import { fs_path_url, fs_timeseries } from "./FilesystemAPI.mjs"; import { fs_path_url, fs_timeseries } from "./FilesystemAPI.mjs";
import { generate_share_path, generate_share_url } from "./Sharebar.svelte"; import { generate_share_path, generate_share_url } from "./Sharebar.svelte";
@@ -19,9 +19,9 @@ const visibility_change = visible => {
} }
} }
$: direct_url = window.location.origin+fs_path_url($nav.base.path) $: direct_url = $nav.base.path ? window.location.origin+fs_path_url($nav.base.path) : ""
$: share_url = generate_share_url($nav.path) $: share_url = generate_share_url($nav.path)
$: direct_share_url = window.location.origin+fs_path_url(generate_share_path($nav.path)) $: direct_share_url = $nav.base.path ? window.location.origin+fs_path_url(generate_share_path($nav.path)) : ""
let chart let chart
let chart_timespan = 0 let chart_timespan = 0
@@ -37,7 +37,7 @@ let chart_timespans = [
] ]
let total_downloads = 0 let total_downloads = 0
let total_transfer_paid = 0 let total_transfer = 0
$: update_chart($nav.base, chart_timespan, chart_interval) $: update_chart($nav.base, chart_timespan, chart_interval)
let update_chart = async (base, timespan, interval) => { let update_chart = async (base, timespan, interval) => {
@@ -77,21 +77,23 @@ let update_chart = async (base, timespan, interval) => {
try { try {
let resp = await fs_timeseries(base.path, start, end, interval) let resp = await fs_timeseries(base.path, start, end, interval)
chart.data().datasets = [ let c = chart.chart()
{
label: "Unique Downloads", c.options.scales.y1 = {
borderWidth: 2, type: "linear",
pointRadius: 0, display: true,
borderColor: color_by_name("chart_1_color"), position: "right",
backgroundColor: color_by_name("chart_1_color"), ticks: {
}, { callback: function (value, index, values) {
label: "Total Downloads", return formatDataVolume(value, 3);
borderWidth: 2,
pointRadius: 0,
borderColor: color_by_name("chart_3_color"),
backgroundColor: color_by_name("chart_3_color"),
}, },
]; },
beginAtZero: true,
grid: {
drawOnChartArea: false,
},
}
resp.downloads.timestamps.forEach((val, idx) => { resp.downloads.timestamps.forEach((val, idx) => {
let date = new Date(val); let date = new Date(val);
@@ -103,16 +105,38 @@ let update_chart = async (base, timespan, interval) => {
}); });
total_downloads = 0 total_downloads = 0
total_transfer_paid = 0 total_transfer = 0
resp.downloads.amounts.forEach(val => total_downloads += val); resp.downloads.amounts.forEach(val => total_downloads += val);
resp.transfer_paid.amounts.forEach((val, idx) => { resp.transfer_free.amounts.forEach((val) => total_transfer += val);
resp.transfer_paid.amounts[idx] = val / base.file_size; resp.transfer_paid.amounts.forEach((val) => total_transfer += val);
total_transfer_paid += val
}); c.data.labels = resp.downloads.timestamps
chart.data().labels = resp.downloads.timestamps c.data.datasets = [
chart.data().datasets[0].data = resp.downloads.amounts {
chart.data().datasets[1].data = resp.transfer_paid.amounts label: "Downloads",
borderWidth: 2,
pointRadius: 0,
borderColor: color_by_name("chart_1_color"),
backgroundColor: color_by_name("chart_1_color"),
data: resp.downloads.amounts,
}, {
label: "Free transfer",
borderWidth: 2,
pointRadius: 0,
borderColor: color_by_name("chart_2_color"),
backgroundColor: color_by_name("chart_2_color"),
yAxisID: "y1",
data: resp.transfer_free.amounts,
}, {
label: "Premium transfer",
borderWidth: 2,
pointRadius: 0,
borderColor: color_by_name("chart_3_color"),
backgroundColor: color_by_name("chart_3_color"),
yAxisID: "y1",
data: resp.transfer_paid.amounts,
},
];
chart.update() chart.update()
} catch (err) { } catch (err) {
console.error("Failed to get time series data:", err) console.error("Failed to get time series data:", err)
@@ -169,9 +193,9 @@ let update_chart = async (base, timespan, interval) => {
<tr> <tr>
<td>Transfer used</td> <td>Transfer used</td>
<td> <td>
{formatDataVolume(total_transfer_paid, 4)} {formatDataVolume(total_transfer, 4)}
( {formatThousands(total_transfer_paid)} B ), ( {formatThousands(total_transfer)} B ),
{(total_transfer_paid/$nav.base.file_size).toFixed(1)}x file size {(total_transfer/$nav.base.file_size).toFixed(1)}x file size
</td> </td>
</tr> </tr>
<tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr> <tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr>

4
svelte/src/user_home/dashboard/CardStatistics.svelte
View File

@@ -106,14 +106,14 @@ onMount(() => {
]; ];
graph_bandwidth.data().datasets = [ graph_bandwidth.data().datasets = [
{ {
label: "Total bandwidth", label: "Free transfer",
borderWidth: 2, borderWidth: 2,
pointRadius: 0, pointRadius: 0,
borderColor: color_by_name("highlight_color"), borderColor: color_by_name("highlight_color"),
backgroundColor: color_by_name("highlight_color"), backgroundColor: color_by_name("highlight_color"),
}, },
{ {
label: "Premium bandwidth", label: "Premium transfer",
borderWidth: 2, borderWidth: 2,
pointRadius: 0, pointRadius: 0,
borderColor: color_by_name("danger_color"), borderColor: color_by_name("danger_color"),