You've already forked AstralRinth
forked from didirus/AstralRinth
Modrinth Servers Mega Features & Bug Fix-a-thon (#3222)
* fix(content): changing mod versions works again * chore(assets): update pyro logo * fix(properties): deprecate fetchconfigfile * Revert "fix(content): changing mod versions works again" This reverts commit d7c0d1196f8c1850fd7ccbc1644941c6db4dc306. * feat(files): ability to sort via column click * chore(startup): update clunky wording * feat(serverListing): server icons SSR friendly * fix(servers): if archon fails, display err in listing * chore(serverlisting): use pyroserver hook to init icon * chore(servers): much more graceful reinstall * fix(servers): tw warn * fix(platform): correctly react when pack reinstalled * fix(serversroot): explicitly import navigateTo Signed-off-by: Evan Song <theevansong@gmail.com> * chore(serverlabels): show skeleton instead of hiding Signed-off-by: Evan Song <theevansong@gmail.com> * feat(platform): install-aware controls Signed-off-by: Evan Song <theevansong@gmail.com> * refactor!(platform): rewrite platform page * fix(platform): regression in autoselecting loader * chore(platform): prefer version over project modification date * fix(platform): permanent hang after initial mount * chore(platform): do not silently fail and hang if modpack fails loading * oops: remove hardcoded error causer * fix(platform): switch modpack btn while installing doesnt need class Signed-off-by: Evan Song <theevansong@gmail.com> * chore(platform): adjust styling in version modal Signed-off-by: Evan Song <theevansong@gmail.com> * chore(platform): prevent changing project card style Signed-off-by: Evan Song <theevansong@gmail.com> * refactor(pyrodropdown): rewrite Signed-off-by: Evan Song <theevansong@gmail.com> * fix(pyrodropdown): do nopt use deprecated substr Signed-off-by: Evan Song <theevansong@gmail.com> * chore: clean Signed-off-by: Evan Song <theevansong@gmail.com> * fix(network): sentence case Signed-off-by: Evan Song <theevansong@gmail.com> * refactor(terminal): initial batch Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): fulllog over fullscreen Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): fullscreen conflict with body scroll Signed-off-by: Evan Song <theevansong@gmail.com> * feat(terminal): init drag select * feat(terminal): shift click support Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): double lines limit Signed-off-by: Evan Song <theevansong@gmail.com> * feat(terminal): copy button Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): protip style Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): improve styles Signed-off-by: Evan Song <theevansong@gmail.com> * feat(terminal): regex search Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): move icons to icons dir Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): improve drag select autoscroll inertia Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): cancel selection on right click Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): progblur and stb btn disappearing Signed-off-by: Evan Song <theevansong@gmail.com> * refactor(serverstats): power efficiency * fix(subdomainlabel): correct tooltip terminology Signed-off-by: Evan Song <theevansong@gmail.com> * feat(preferences): users hide subdomain label Signed-off-by: Evan Song <theevansong@gmail.com> * chore(servers): clean Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): deselect lines on escape Signed-off-by: Evan Song <theevansong@gmail.com> * fix(serversidebar): type err Signed-off-by: Evan Song <theevansong@gmail.com> * fix(fileitem): vue server render type Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): disable pointer events on lines if scrolling Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): search result counts style Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): plural Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): clean Signed-off-by: Evan Song <theevansong@gmail.com> * feat(terminal): view selection Signed-off-by: Evan Song <theevansong@gmail.com> * feat(terminal): show actively selected lines in scrollbar Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminallog): btn color Signed-off-by: Evan Song <theevansong@gmail.com> * chore: clean Signed-off-by: Evan Song <theevansong@gmail.com> * fix(gamelabel): align to text Signed-off-by: Evan Song <theevansong@gmail.com> * fix(gamelabel): align to text Signed-off-by: Evan Song <theevansong@gmail.com> * fix(listing): remove deadcode Signed-off-by: Evan Song <theevansong@gmail.com> * fix(serverlisting): deprecated process.server Signed-off-by: Evan Song <theevansong@gmail.com> * fix(platform): correctly disable button Signed-off-by: Evan Song <theevansong@gmail.com> * fix(backups): do not allow backup creation during server installation Signed-off-by: Evan Song <theevansong@gmail.com> * fix(platform): flush stale currentversion data on successful install Signed-off-by: Evan Song <theevansong@gmail.com> * fix(gamelabel): fix gap Signed-off-by: Evan Song <theevansong@gmail.com> * chore(network): vaporize uppercase Signed-off-by: Evan Song <theevansong@gmail.com> * chore(info): vaporize uppercase Signed-off-by: Evan Song <theevansong@gmail.com> * chore(backups): style unification Signed-off-by: Evan Song <theevansong@gmail.com> * chore(backups): finalize style change Signed-off-by: Evan Song <theevansong@gmail.com> * fix(servers): catch pyro servers fetch errors during ssr Signed-off-by: Evan Song <theevansong@gmail.com> * fix(serverstats): ram as bytes graph now works Signed-off-by: Evan Song <theevansong@gmail.com> * fix(platform): unify attempts and refresh interval Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): input Signed-off-by: Evan Song <theevansong@gmail.com> * feat(servers): installing ticket + update available notice back in platform Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): dont add bg to scroll track Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): preserve whitespace Signed-off-by: Evan Song <theevansong@gmail.com> * chore(serversroot): unnest blurred icon query Signed-off-by: Evan Song <theevansong@gmail.com> * fix(serverstats): clamp memory usage to 100% no matter what Signed-off-by: Evan Song <theevansong@gmail.com> * feat(terminal): allow copy of single lines, show btn Signed-off-by: Evan Song <theevansong@gmail.com> * chore(terminal): animate copy>view transition Signed-off-by: Evan Song <theevansong@gmail.com> * init: search improvements Signed-off-by: Evan Song <theevansong@gmail.com> * fix: lint Signed-off-by: Evan Song <theevansong@gmail.com> * chore: change log modal title Signed-off-by: Evan Song <theevansong@gmail.com> * fix: hide fullscreen when selecting and cancel selection on clickout Signed-off-by: Evan Song <theevansong@gmail.com> * refactor(terminal): more reliable jumpToLine Signed-off-by: Evan Song <theevansong@gmail.com> * feat: search results separator Signed-off-by: Evan Song <theevansong@gmail.com> * chore: remove buggy isScrollable check Signed-off-by: Evan Song <theevansong@gmail.com> * fix: style Signed-off-by: Evan Song <theevansong@gmail.com> * refactor: correctly store pos to make jump reliable Signed-off-by: Evan Song <theevansong@gmail.com> * fix: disparity between search/log dragselect Signed-off-by: Evan Song <theevansong@gmail.com> * fix: prevent propagation of click events when clicking on jump btn Signed-off-by: Evan Song <theevansong@gmail.com> * fix: switch selection strategies depending on terminal mode Signed-off-by: Evan Song <theevansong@gmail.com> * chore: smarter esc handling Signed-off-by: Evan Song <theevansong@gmail.com> * finalize Signed-off-by: Evan Song <theevansong@gmail.com> * run fix * fix: ensure lines between cannot be selected Signed-off-by: Evan Song <theevansong@gmail.com> * fix: increase initial log batch to 256 Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): click on scroll track should take user to new scroll position Signed-off-by: Evan Song <theevansong@gmail.com> * fix(terminal): update aria label for view selected logs btn Signed-off-by: Evan Song <theevansong@gmail.com> * chore: clean Signed-off-by: Evan Song <theevansong@gmail.com> --------- Signed-off-by: Evan Song <theevansong@gmail.com>
This commit is contained in:
Evan Song
@@ -9,44 +9,34 @@
|
||||
:key="index"
|
||||
class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
|
||||
>
|
||||
<div
|
||||
class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1"
|
||||
:style="{
|
||||
backdropFilter: 'blur(6px)',
|
||||
}"
|
||||
>
|
||||
<div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
|
||||
<h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">
|
||||
{{ metric.value }}
|
||||
</h2>
|
||||
<h3 class="relative z-10 text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
|
||||
<div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
|
||||
<div class="relative z-10">
|
||||
<div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
|
||||
<h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">{{ metric.value }}</h2>
|
||||
<h3 class="text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
|
||||
</div>
|
||||
<h3 class="flex items-center gap-2 text-base font-normal text-secondary">
|
||||
{{ metric.title }}
|
||||
<WarningIcon
|
||||
v-if="metric.warning"
|
||||
v-tooltip="metric.warning"
|
||||
class="size-5"
|
||||
:style="{ color: 'var(--color-orange)' }"
|
||||
/>
|
||||
</h3>
|
||||
</div>
|
||||
<h3 class="relative z-10 flex items-center gap-2 text-base font-normal text-secondary">
|
||||
{{ metric.title }}
|
||||
<WarningIcon
|
||||
v-tooltip="getPotentialWarning(metric)"
|
||||
:style="{
|
||||
color: 'var(--color-orange)',
|
||||
width: '1.25rem',
|
||||
height: '1.25rem',
|
||||
display: getPotentialWarning(metric) ? 'block' : 'none',
|
||||
}"
|
||||
/>
|
||||
</h3>
|
||||
<div class="absolute -left-8 -top-4 h-28 w-56 rounded-full bg-bg-raised blur-lg" />
|
||||
</div>
|
||||
|
||||
<component :is="metric.icon" class="absolute right-10 top-10 z-10" />
|
||||
<ClientOnly>
|
||||
<VueApexCharts
|
||||
v-if="
|
||||
metric.data.length && !(metric.title === 'Memory usage' && userPreferences.ramAsNumber)
|
||||
"
|
||||
ref="chart"
|
||||
v-if="metric.showGraph"
|
||||
type="area"
|
||||
height="142"
|
||||
:options="generateOptions(metric)"
|
||||
:series="[{ name: 'Chart', data: metric.data }]"
|
||||
class="chart chart-animation absolute bottom-0 left-0 right-0 w-full"
|
||||
:options="getChartOptions(metric.warning)"
|
||||
:series="[{ name: metric.title, data: metric.data }]"
|
||||
class="chart absolute bottom-0 left-0 right-0 w-full opacity-0"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
@@ -57,21 +47,17 @@
|
||||
>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
|
||||
{{ formatBytes(animatedStorageUsage) }}
|
||||
{{ formatBytes(stats.storage_usage_bytes) }}
|
||||
</h2>
|
||||
<!-- <h3 class="relative z-10 text-sm font-normal text-secondary">
|
||||
/ {{ formatBytes(props.data.current.storage_total_bytes) }}
|
||||
</h3> -->
|
||||
</div>
|
||||
<h3 class="relative z-10 text-base font-normal text-secondary">Storage usage</h3>
|
||||
|
||||
<h3 class="text-base font-normal text-secondary">Storage usage</h3>
|
||||
<FolderOpenIcon class="absolute right-10 top-10 size-8" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, computed, shallowRef } from "vue";
|
||||
import { FolderOpenIcon, CPUIcon, DBIcon } from "@modrinth/assets";
|
||||
import { useStorage } from "@vueuse/core";
|
||||
import type { Stats } from "~/types/servers";
|
||||
@@ -79,252 +65,132 @@ import WarningIcon from "~/assets/images/utils/issues.svg?component";
|
||||
|
||||
const route = useNativeRoute();
|
||||
const serverId = route.params.id;
|
||||
const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
|
||||
|
||||
const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
|
||||
ramAsNumber: false,
|
||||
autoRestart: false,
|
||||
backupWhileRunning: false,
|
||||
});
|
||||
|
||||
const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
|
||||
const props = defineProps<{ data: Stats }>();
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<Stats>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const stats = shallowRef(props.data.current);
|
||||
|
||||
const lerp = (a: number, b: number) => {
|
||||
return a + (b - a) * 0.5;
|
||||
};
|
||||
|
||||
// I told you it would go into prod
|
||||
const formatBytes = (bytes: number) => {
|
||||
const units = ["Bytes", "KB", "MB", "GB", "TB"];
|
||||
const units = ["B", "KB", "MB", "GB"];
|
||||
let value = bytes;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (value >= 1024 && unitIndex < units.length - 2) {
|
||||
let unit = 0;
|
||||
while (value >= 1024 && unit < units.length - 1) {
|
||||
value /= 1024;
|
||||
unitIndex++;
|
||||
unit++;
|
||||
}
|
||||
|
||||
return `${Math.round(value * 100) / 100} ${units[unitIndex]}`;
|
||||
return `${Math.round(value * 10) / 10} ${units[unit]}`;
|
||||
};
|
||||
|
||||
const animatedStorageUsage = ref(0);
|
||||
const cpuData = ref<number[]>(Array(20).fill(0));
|
||||
const ramData = ref<number[]>(Array(20).fill(0));
|
||||
|
||||
const animateValue = (start: number, end: number, duration: number): void => {
|
||||
let startTimestamp: number | null = null;
|
||||
const step = (timestamp: number) => {
|
||||
if (!startTimestamp) startTimestamp = timestamp;
|
||||
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
||||
animatedStorageUsage.value = Math.floor(progress * (end - start) + start);
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
const updateGraphData = (arr: number[], newValue: number) => {
|
||||
arr.push(newValue);
|
||||
arr.shift();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
animateValue(0, props.data.current.storage_usage_bytes, 250);
|
||||
const metrics = computed(() => {
|
||||
const ramPercent = Math.min(
|
||||
(stats.value.ram_usage_bytes / stats.value.ram_total_bytes) * 100,
|
||||
100,
|
||||
);
|
||||
const cpuPercent = Math.min(stats.value.cpu_percent, 100);
|
||||
|
||||
updateGraphData(cpuData.value, cpuPercent);
|
||||
updateGraphData(ramData.value, ramPercent);
|
||||
|
||||
return [
|
||||
{
|
||||
title: "CPU usage",
|
||||
value: `${cpuPercent.toFixed(2)}%`,
|
||||
max: "100%",
|
||||
icon: CPUIcon,
|
||||
data: cpuData.value,
|
||||
showGraph: true,
|
||||
warning: cpuPercent >= 90 ? "CPU usage is very high" : null,
|
||||
},
|
||||
{
|
||||
title: "Memory usage",
|
||||
value: userPreferences.value.ramAsNumber
|
||||
? formatBytes(stats.value.ram_usage_bytes)
|
||||
: `${ramPercent.toFixed(2)}%`,
|
||||
max: userPreferences.value.ramAsNumber ? formatBytes(stats.value.ram_total_bytes) : "100%",
|
||||
icon: DBIcon,
|
||||
data: ramData.value,
|
||||
showGraph: true,
|
||||
warning: ramPercent >= 90 ? "Memory usage is very high" : null,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const getChartOptions = (hasWarning: string | null) => ({
|
||||
chart: {
|
||||
type: "area",
|
||||
animations: { enabled: false },
|
||||
sparkline: { enabled: true },
|
||||
toolbar: { show: false },
|
||||
padding: {
|
||||
left: -10,
|
||||
right: -10,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
},
|
||||
stroke: { curve: "smooth", width: 3 },
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.25,
|
||||
opacityTo: 0.05,
|
||||
stops: [0, 100],
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
grid: { show: false },
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
type: "numeric",
|
||||
tickAmount: 20,
|
||||
range: 20,
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 100,
|
||||
forceNiceScale: false,
|
||||
},
|
||||
colors: [hasWarning ? "var(--color-orange)" : "var(--color-brand)"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data.current.storage_usage_bytes,
|
||||
(newValue, oldValue) => {
|
||||
animateValue(oldValue, newValue, 250);
|
||||
() => props.data.current,
|
||||
(newStats) => {
|
||||
stats.value = newStats;
|
||||
},
|
||||
);
|
||||
|
||||
const metrics = ref([
|
||||
{
|
||||
title: "CPU usage",
|
||||
value: "0%",
|
||||
max: "100%",
|
||||
icon: markRaw(CPUIcon),
|
||||
data: [] as number[],
|
||||
},
|
||||
{
|
||||
title: "Memory usage",
|
||||
value: "0%",
|
||||
max: userPreferences.value.ramAsNumber
|
||||
? formatBytes(props.data.current.ram_total_bytes)
|
||||
: "100%",
|
||||
icon: markRaw(DBIcon),
|
||||
data: [] as number[],
|
||||
},
|
||||
]);
|
||||
|
||||
const updateMetrics = () => {
|
||||
console.log(props.data.current.ram_usage_bytes);
|
||||
metrics.value = metrics.value.map((metric, index) => {
|
||||
if (userPreferences.value.ramAsNumber && index === 1) {
|
||||
return {
|
||||
...metric,
|
||||
value: formatBytes(props.data.current.ram_usage_bytes),
|
||||
data: [...metric.data.slice(-10), props.data.current.ram_usage_bytes],
|
||||
max: formatBytes(props.data.current.ram_total_bytes),
|
||||
};
|
||||
} else {
|
||||
const currentValue =
|
||||
index === 0
|
||||
? props.data.current.cpu_percent
|
||||
: Math.min(
|
||||
(props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100,
|
||||
100,
|
||||
);
|
||||
const pastValue =
|
||||
index === 0
|
||||
? props.data.past.cpu_percent
|
||||
: Math.min(
|
||||
(props.data.past.ram_usage_bytes / props.data.past.ram_total_bytes) * 100,
|
||||
100,
|
||||
);
|
||||
|
||||
const newValue = lerp(currentValue, pastValue);
|
||||
return {
|
||||
...metric,
|
||||
value: `${newValue.toFixed(2)}%`,
|
||||
data: [...metric.data.slice(-10), newValue],
|
||||
// data: [36, 36],
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// aww, you gotta give em that rinth tuah, mod on that thang
|
||||
const getPotentialWarning = (metric: (typeof metrics.value)[0]) => {
|
||||
// make all words in the string lowercase, unless the word is in all caps
|
||||
const split = metric.title.split(" ");
|
||||
const title = split
|
||||
.map((word) => {
|
||||
if (word === word.toUpperCase()) {
|
||||
return word;
|
||||
}
|
||||
return word.toLowerCase();
|
||||
})
|
||||
.join(" ");
|
||||
let data = metric.data.at(-1) || 0;
|
||||
if (userPreferences.value.ramAsNumber) {
|
||||
data = (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100;
|
||||
}
|
||||
switch (true) {
|
||||
case data >= 90:
|
||||
return `Your server's ${title} is very high.`;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const generateOptions = (metric: (typeof metrics.value)[0]) => {
|
||||
let color = "var(--color-brand)";
|
||||
let data = metric.data.at(-1) || 0;
|
||||
if (userPreferences.value.ramAsNumber) {
|
||||
data = (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100;
|
||||
}
|
||||
switch (true) {
|
||||
case data >= 90:
|
||||
color = "var(--color-red)";
|
||||
break;
|
||||
case data >= 80:
|
||||
color = "var(--color-orange)";
|
||||
break;
|
||||
}
|
||||
return {
|
||||
chart: {
|
||||
id: "stats",
|
||||
fontFamily:
|
||||
"Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
|
||||
foreColor: "var(--color-base)",
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
sparkline: { enabled: true },
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: "linear",
|
||||
dynamicAnimation: { speed: 1000 },
|
||||
},
|
||||
},
|
||||
stroke: { curve: "smooth" },
|
||||
fill: {
|
||||
colors: [color],
|
||||
type: "gradient",
|
||||
opacity: 1,
|
||||
gradient: {
|
||||
shade: "light",
|
||||
type: "vertical",
|
||||
shadeIntensity: 0,
|
||||
gradientToColors: [color],
|
||||
inverseColors: true,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100],
|
||||
colorStops: [],
|
||||
},
|
||||
},
|
||||
grid: { show: false },
|
||||
legend: { show: false },
|
||||
colors: [color],
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
type: "numeric",
|
||||
lines: { show: false },
|
||||
axisBorder: { show: false },
|
||||
labels: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
tickAmount: 5,
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
};
|
||||
};
|
||||
|
||||
// watch(
|
||||
// metrics,
|
||||
// () => {
|
||||
// console.log(metrics.value[0].data.at(-1));
|
||||
// },
|
||||
// {
|
||||
// deep: true,
|
||||
// immediate: true,
|
||||
// },
|
||||
// );
|
||||
|
||||
let interval: number;
|
||||
|
||||
onMounted(() => {
|
||||
updateMetrics();
|
||||
interval = window.setInterval(updateMetrics, 1000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes chart-enter-animation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
.chart {
|
||||
animation: fadeIn 0.2s ease-out 0.2s forwards;
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
width: calc(100% + 48px) !important;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-animation {
|
||||
opacity: 0;
|
||||
animation: chart-enter-animation 0.5s ease-out forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user