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

Add filesystem card to dashboard

Browse Source
This commit is contained in:
Wim Brand
2024-07-11 13:30:46 +02:00
parent ff38a54ae4
commit 94cc04b746
9 changed files with 116 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,8 @@ import Chart from "../../util/Chart.svelte";
import { color_by_name } from "../../util/Util.svelte";
import { formatDataVolume, formatThousands } from "../../util/Formatting.svelte";
export let expanded = false
$: chart_height = expanded ? "250px" : "150px"
let graph_views_downloads = null
let graph_bandwidth = null
@@ -123,51 +125,52 @@ onMount(() => {
})
</script>
<div style="text-align: center">
<div class="time_buttons">
<button
on:click={() => update_graphs(1440, 1)}
class:button_highlight={graph_timespan == 1440}>
Day (1m)
class:button_highlight={graph_timespan == 1440}
class="group_first">
Day
</button>
<button
on:click={() => update_graphs(10080, 60)}
class:button_highlight={graph_timespan == 10080}>
Week (1h)
</button>
<button
on:click={() => update_graphs(20160, 60)}
class:button_highlight={graph_timespan == 20160}>
Two Weeks (1h)
class:button_highlight={graph_timespan == 10080}
class="group_middle">
Week
</button>
<button
on:click={() => update_graphs(43200, 1440)}
class:button_highlight={graph_timespan == 43200}>
Month (1d)
class:button_highlight={graph_timespan == 43200}
class="group_middle">
Month
</button>
<button
on:click={() => update_graphs(131400, 1440)}
class:button_highlight={graph_timespan == 131400}>
Quarter (1d)
class:button_highlight={graph_timespan == 131400}
class="group_middle">
Quarter
</button>
<button
on:click={() => update_graphs(525600, 1440)}
class:button_highlight={graph_timespan == 525600}>
Year (1d)
class:button_highlight={graph_timespan == 525600}
class="group_middle">
Year
</button>
<button
on:click={() => update_graphs(1051200, 1440)}
class:button_highlight={graph_timespan == 1051200}>
Two Years (1d)
class:button_highlight={graph_timespan == 1051200}
class="group_last">
Two Years
</button>
</div>
<Chart bind:this={graph_bandwidth} data_type="bytes" height="200px" ticks={false}/>
<Chart bind:this={graph_bandwidth} data_type="bytes" height={chart_height} ticks={false}/>
<div class="center">
{formatDataVolume(total_bandwidth, 3)} free downloads and
{formatDataVolume(total_transfer_paid, 3)} paid downloads
</div>
<Chart bind:this={graph_views_downloads} data_type="number" height="200px" ticks={false}/>
<Chart bind:this={graph_views_downloads} data_type="number" height={chart_height} ticks={false}/>
<div class="center">
{formatThousands(total_views)} views and
{formatThousands(total_downloads)} downloads
@@ -177,4 +180,15 @@ onMount(() => {
.center {
text-align: center;
}
.time_buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
}
.time_buttons > button {
min-width: 3em;
justify-content: center;
}
</style>