smallbenji/pointMaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding SignalR and cleanup

Browse Source
This commit is contained in:
Benjamin
2025-01-08 21:29:21 +01:00
parent 14280f7f97
commit 3beb8ef0d4
15 changed files with 367 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pointMaster/js/package.json
View File

@@ -11,6 +11,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"@aspnet/signalr": "^1.0.27",
"@vue/cli-plugin-typescript": "^5.0.8",
"apexcharts": "^4.0.0",
"axios": "^1.7.7",

259
pointMaster/js/src/components/Stats.vue
View File

@@ -1,23 +1,22 @@
<template>
<div class="stat-dashboard">
<div class="stat-panel">
<div class="grid">
<div class="title">
<h1>Statistikker</h1>
<div class="stats">
<div
class="stat"
v-for="(data, index) in StatData"
:key="index"
>
<p class="stat-title">{{ data.Title }}</p>
<p class="stat-value">{{ data.Value }}</p>
</div>
</div>
<div class="stats">
<div
v-for="(data, index) in statData"
class="box"
>
<p class="header">{{ data.title }}</p>
<p class="content">{{ data.value }}</p>
</div>
</div>
<div class="stat-chart">
<p class="stat-title">Point over tid</p>
<div id="chart"></div>
<p class="stat-title">Point ratio</p>
<div id="pie"></div>
<div class="line-chart">
<div id="line-chart"></div>
</div>
<div class="pie-chart">
<div id="pie-chart"></div>
</div>
</div>
</template>
@@ -26,133 +25,165 @@
import ApexCharts, { ApexOptions } from "apexcharts";
import axios from "axios";
import { defineComponent, onMounted, ref } from "vue";
import { HubConnectionBuilder, LogLevel } from "@aspnet/signalr";
export default defineComponent({
name: "Stats",
setup() {
const StatData = ref<Stat[]>([]);
const statData = ref<Stat[]>([]);
const GetStats = async () => {
const data = (await axios.get("/api/getstats")).data as Stat[];
const lineChartOptions: ApexOptions = {
chart: {
type: "line",
toolbar: {
show: true,
},
},
stroke: {
curve: "smooth"
},
xaxis: {
type: "datetime",
},
series: [],
}
StatData.value = data;
const pieChartOptions: ApexOptions = {
chart: {
type: "pie",
toolbar: {
show: true,
},
},
series: [],
};
const initializeChart = async () => {
const options: ApexOptions = {
chart: {
type: "line",
toolbar: {
show: true,
},
},
xaxis: {
type: "datetime",
},
series: [],
};
var lineChart: ApexCharts;
var pieChart: ApexCharts;
const chart = new ApexCharts(
document.querySelector("#chart"),
options
const initalizeCharts = async () => {
lineChart = new ApexCharts(
document.querySelector("#line-chart"),
lineChartOptions
);
chart.render();
const data = (await axios.get("/api/GetPointsOverTime")).data;
chart.updateOptions({
series: data,
} as ApexOptions);
};
const initializePieChart = async () => {
const options: ApexOptions = {
chart: {
type: "pie",
toolbar: {
show: true,
},
},
series: [],
};
const chart = new ApexCharts(
document.querySelector("#pie"),
options
lineChart.render();
pieChart = new ApexCharts(
document.querySelector("#pie-chart"),
pieChartOptions
);
chart.render();
pieChart.render();
}
const data = (await axios.get("/api/pointratio")).data;
const initializeHub = async () => {
chart.updateOptions({
series: data.data,
labels: data.names,
const connection = new HubConnectionBuilder().withUrl("../DataHub").configureLogging(LogLevel.Information).build();
connection.start();
connection.on("ReceiveMessage", async (data: StatData) => {
connection.invoke("SendData");
console.log(data);
})
connection.on("StatData", (a:StatData) => {
console.log(a);
updateData(a);
})
}
const updateData = (data: StatData) => {
lineChart.updateOptions({
series: data.pointChartModels,
} as ApexOptions);
};
pieChart.updateOptions({
series: data.pointRatio.data,
labels: data.pointRatio.names,
});
statData.value = (data.stats as Stat[]);
}
onMounted(async () => {
await GetStats();
await initializeChart();
await initializePieChart();
await initalizeCharts()
await initializeHub()
});
return {
StatData,
statData,
};
},
});
</script>
<style lang="scss">
.stat-dashboard {
display: flex;
justify-content: space-between;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
}
.stat-panel {
@media (max-width: 768px) {
margin-bottom: 2rem;
}
}
.stat-chart {
flex-grow: 1;
}
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
@media (max-width: 1000px) {
grid-template-columns: repeat(2, 1fr);
.grid {
display: grid;
grid-template-areas:
"a a"
"b b"
"c d";
height: 100%;
width: 100%;
}
.stat {
background-color: rgba(0, 0, 0, 0.1);
padding: 10px;
height: 7rem;
width: 10rem;
border-radius: 5px;
text-align: center;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
margin: auto;
@media (max-width: 640px) {
.grid {
grid-template-areas:
"a"
"b"
"c"
"d";
}
}
.title {
grid-area: a;
}
.stats {
grid-area: b;
display: flex;
justify-content: space-between;
@media (max-width: 640px) {
flex-direction: column;
gap: 1rem;
margin: auto;
margin-bottom: 2rem;
margin-top: 2rem;
}
margin-top: 2rem;
margin-bottom: 6rem;
.box {
height: 6rem;
width: 12rem;
padding: 1rem;
background-color: rgba(0,0,0,.2);
border: solid rgba(0,0,0,0.3) 1px;
border-radius: 5px;
text-align: center;
box-shadow: 5px 5px 5px rgba(0,0,0,.1);
.header {
font-size: 1.25rem;
}
.content {
font-size: 1rem;
}
}
}
&-title {
font-weight: 700;
font-size: 1.25rem;
margin: 0;
.line-chart {
grid-area: c;
}
&-value {
font-weight: 400;
font-size: 1.5rem;
}
}
.pie-chart {
grid-area: d;
}
</style>

10
pointMaster/js/src/typings.d.ts vendored
View File

@@ -8,6 +8,12 @@ type Point = {
}
type Stat = {
Title: string;
Value: string;
title: string;
value: string;
}
type StatData = {
stats: any;
pointRatio: any;
pointChartModels: any;
}