chg: [app:live-logs] Improved notification activity chart
This commit is contained in:
parent
33bc5ca0bb
commit
58d4af812d
4 changed files with 37 additions and 11 deletions
|
@ -28,7 +28,15 @@ def get_notifications() -> list[dict]:
|
|||
|
||||
|
||||
def get_notifications_history() -> list[dict]:
|
||||
return list(db.NOTIFICATION_HISTORY)
|
||||
return {
|
||||
'history': list(db.NOTIFICATION_HISTORY),
|
||||
'config': {
|
||||
'buffer_resolution_per_minute': db.NOTIFICATION_HISTORY_BUFFER_RESOLUTION_PER_MIN,
|
||||
'buffer_timestamp_min': db.NOTIFICATION_HISTORY_BUFFER_TIMESPAN_MIN,
|
||||
'frequency': db.NOTIFICATION_HISTORY_FREQUENCY,
|
||||
'notification_history_size': db.notification_history_size,
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
def reset_notifications():
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { ref, watch, computed } from "vue"
|
||||
import { notifications, userCount, notificationCounter, notificationAPICounter, notificationHistory, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
|
||||
import { notifications, userCount, notificationCounter, notificationAPICounter, notificationHistory, notificationHistoryConfig, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faSignal, faCloud, faCog, faUser, faCircle } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
|
@ -9,9 +9,10 @@
|
|||
const verbose = ref(false)
|
||||
const api_query = ref(false)
|
||||
const chartInitSeries = [
|
||||
// {data: Array.apply(null, {length: 180}).map(Function.call, Math.random)}
|
||||
// {data: Array.apply(null, {length: 240}).map(Function.call, Math.random)}
|
||||
{data: Array.from(Array(12*20)).map(()=> 0)}
|
||||
]
|
||||
const hasActivity = ref(false)
|
||||
|
||||
const notificationHistorySeries = computed(() => {
|
||||
return [{data: Array.from(notificationHistory.value)}]
|
||||
|
@ -45,8 +46,6 @@
|
|||
columnWidth: '80%'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
},
|
||||
|
@ -64,6 +63,7 @@
|
|||
})
|
||||
|
||||
watch(notificationHistorySeries, (newValue) => {
|
||||
hasActivity.value = notificationHistory.value.filter((x) => x != 0).length > 0
|
||||
theChart.value.updateSeries(newValue)
|
||||
})
|
||||
|
||||
|
@ -122,8 +122,20 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div class="my-2 -ml-1">
|
||||
<apexchart ref="theChart" height="32" width="100%" :options="chartOptions" :series="chartInitSeries"></apexchart>
|
||||
<div class="my-2 --ml-1 bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
|
||||
<div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-40`">
|
||||
<div class="text-xxs flex justify-between h-full items-center">
|
||||
<span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
|
||||
<span class="-rotate-90 w-8 text-xs">–</span>
|
||||
<span class="-rotate-90 w-8 text-lg">–</span>
|
||||
<span class="-rotate-90 w-8 text-xs">–</span>
|
||||
<span class="-rotate-90 w-8 -mr-1.5">- 0min</span>
|
||||
</div>
|
||||
</div>
|
||||
<i :class="['text-center text-slate-600 dark:text-slate-400', hasActivity ? 'hidden' : 'block']">
|
||||
- No recorded activity -
|
||||
</i>
|
||||
<apexchart ref="theChart" :class="hasActivity ? 'block' : 'absolute h-8 w-full'" height="32" width="100%" :options="chartOptions" :series="chartInitSeries"></apexchart>
|
||||
</div>
|
||||
|
||||
<table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full">
|
||||
|
|
|
@ -11,6 +11,7 @@ const initial_state = {
|
|||
notificationCounter: 0,
|
||||
notificationAPICounter: 0,
|
||||
notificationHistory: [],
|
||||
notificationHistoryConfig: {},
|
||||
exercises: [],
|
||||
selected_exercises: [],
|
||||
progresses: {},
|
||||
|
@ -42,6 +43,7 @@ export const notificationAPICounter = computed(() => state.notificationAPICounte
|
|||
export const userCount = computed(() => Object.keys(state.progresses).length)
|
||||
export const diagnostic = computed(() => state.diagnostic)
|
||||
export const notificationHistory = computed(() => state.notificationHistory)
|
||||
export const notificationHistoryConfig = computed(() => state.notificationHistoryConfig)
|
||||
export const socketConnected = computed(() => connectionState.connected)
|
||||
export const zmqLastTime = computed(() => connectionState.zmq_last_time)
|
||||
|
||||
|
@ -196,8 +198,9 @@ socket.on("keep_alive", (keep_alive) => {
|
|||
connectionState.zmq_last_time = keep_alive['zmq_last_time']
|
||||
});
|
||||
|
||||
socket.on("update_notification_history", (notification_history) => {
|
||||
state.notificationHistory = notification_history
|
||||
socket.on("update_notification_history", (notification_history_bundle) => {
|
||||
state.notificationHistory = notification_history_bundle.history
|
||||
state.notificationHistoryConfig = notification_history_bundle.config
|
||||
});
|
||||
|
||||
function addLimited(target, message, maxCount) {
|
||||
|
|
|
@ -8,10 +8,13 @@ export default {
|
|||
extend: {
|
||||
transitionProperty: {
|
||||
'width': 'width'
|
||||
} ,
|
||||
},
|
||||
screens: {
|
||||
'3xl': '1800px',
|
||||
}
|
||||
},
|
||||
fontSize: {
|
||||
'xxs': '0.6rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
|
|
Loading…
Reference in a new issue