chg: [front:live-logs-activity-graph] Split graph into its own component
This commit is contained in:
Sami Mokaddem
parent
58d4af812d
commit
e1010793dc
6 changed files with 1563 additions and 848 deletions
778
dist/assets/index-C72pAF6z.js
vendored
778
dist/assets/index-C72pAF6z.js
vendored
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
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
4
dist/index.html
vendored
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
77
src/components/TheLiveLogsActivityGraph.vue
Normal file
77
src/components/TheLiveLogsActivityGraph.vue
Normal 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>
|
||||
Loading…
Reference in a new issue