chg: [front:live-logs-activity-graph] Split graph into its own component

This commit is contained in:
Sami Mokaddem 2024-07-08 13:47:57 +02:00
parent 58d4af812d
commit e1010793dc
6 changed files with 1563 additions and 848 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1480
dist/assets/index-Ps6u4sK2.js vendored Normal file

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View file

@ -5,8 +5,8 @@
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index-C72pAF6z.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BZKBaN7W.css">
<script type="module" crossorigin src="/assets/index-Ps6u4sK2.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dayglfmc.css">
</head>
<body>
<div id="app"></div>

View file

@ -1,58 +1,13 @@
<script setup>
import { ref, watch, computed } from "vue"
import { notifications, userCount, notificationCounter, notificationAPICounter, notificationHistory, notificationHistoryConfig, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
import { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSignal, faCloud, faCog, faUser, faCircle } from '@fortawesome/free-solid-svg-icons'
import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue";
const theChart = ref(null)
const verbose = ref(false)
const api_query = ref(false)
const chartInitSeries = [
// {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)}]
})
const chartOptions = {
chart: {
type: 'bar',
width: '100%',
height: 32,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 2,
left: 1,
blur: 3,
color: '#000',
opacity: 0.45
},
animations: {
enabled: true,
easing: 'easeinout',
speed: 200,
},
},
plotOptions: {
bar: {
columnWidth: '80%'
}
},
yaxis: {
min: 0,
},
tooltip: {
enabled: false,
},
}
watch(verbose, (newValue) => {
toggleVerboseMode(newValue == true)
@ -62,11 +17,6 @@
toggleApiQueryMode(newValue == true)
})
watch(notificationHistorySeries, (newValue) => {
hasActivity.value = notificationHistory.value.filter((x) => x != 0).length > 0
theChart.value.updateSeries(newValue)
})
function getClassFromResponseCode(response_code) {
if (String(response_code).startsWith('2')) {
return 'text-green-500'
@ -122,21 +72,7 @@
</span>
</div>
<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>
<TheLiveLogsActivityGraphVue></TheLiveLogsActivityGraphVue>
<table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full">
<thead>

View file

@ -0,0 +1,77 @@
<script setup>
import { ref, watch, computed } from "vue"
import { notificationHistory, notificationHistoryConfig } from "@/socket";
const theChart = ref(null)
const chartInitSeries = [
// {data: Array.apply(null, {length: 240}).map(Function.call, Math.random)}
{data: Array.from(Array(12*20)).map(()=> 0)}
]
const hasActivity = computed(() => notificationHistory.value.length > 0)
const chartSeries = computed(() => {
return notificationHistory.value ? notificationHistorySeries.value : chartInitSeries.value
})
const notificationHistorySeries = computed(() => {
return [{data: Array.from(notificationHistory.value)}]
})
const chartOptions = {
chart: {
type: 'bar',
width: '100%',
height: 32,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 2,
left: 1,
blur: 3,
color: '#000',
opacity: 0.45
},
animations: {
enabled: false,
easing: 'easeinout',
speed: 200,
},
},
plotOptions: {
bar: {
columnWidth: '80%'
}
},
yaxis: {
min: 0,
},
tooltip: {
enabled: false,
},
}
</script>
<template>
<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="chartSeries"
></apexchart>
</div>
</template>