refactor(frontend): 非推奨となったReactivity Transformを使わないように (#12539)
* refactor(frontend): 非推奨となったReactivity Transformを使わないように * refactor: 不要な括弧を除去 * fix: 不要なアノテーションを除去 * fix: Refの配列をrefしている部分の対応 * refactor: 不要な括弧を除去 * fix: lint * refactor: Ref、ShallowRef、ComputedRefの変数の宣言をletからconstに置換 * fix: type error * chore: drop reactivity transform from eslint configuration * refactor: remove unnecessary import * fix: 対応漏れ
This commit is contained in:
@@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue';
|
||||
import bytes from '@/filters/bytes.js';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -57,19 +57,19 @@ const props = defineProps<{
|
||||
meta: any
|
||||
}>();
|
||||
|
||||
let viewBoxX: number = $ref(50);
|
||||
let viewBoxY: number = $ref(30);
|
||||
let stats: any[] = $ref([]);
|
||||
let inPolylinePoints: string = $ref('');
|
||||
let outPolylinePoints: string = $ref('');
|
||||
let inPolygonPoints: string = $ref('');
|
||||
let outPolygonPoints: string = $ref('');
|
||||
let inHeadX: any = $ref(null);
|
||||
let inHeadY: any = $ref(null);
|
||||
let outHeadX: any = $ref(null);
|
||||
let outHeadY: any = $ref(null);
|
||||
let inRecent: number = $ref(0);
|
||||
let outRecent: number = $ref(0);
|
||||
const viewBoxX = ref<number>(50);
|
||||
const viewBoxY = ref<number>(30);
|
||||
const stats = ref<any[]>([]);
|
||||
const inPolylinePoints = ref<string>('');
|
||||
const outPolylinePoints = ref<string>('');
|
||||
const inPolygonPoints = ref<string>('');
|
||||
const outPolygonPoints = ref<string>('');
|
||||
const inHeadX = ref<any>(null);
|
||||
const inHeadY = ref<any>(null);
|
||||
const outHeadX = ref<any>(null);
|
||||
const outHeadY = ref<any>(null);
|
||||
const inRecent = ref<number>(0);
|
||||
const outRecent = ref<number>(0);
|
||||
|
||||
onMounted(() => {
|
||||
props.connection.on('stats', onStats);
|
||||
@@ -85,27 +85,27 @@ onBeforeUnmount(() => {
|
||||
});
|
||||
|
||||
function onStats(connStats) {
|
||||
stats.push(connStats);
|
||||
if (stats.length > 50) stats.shift();
|
||||
stats.value.push(connStats);
|
||||
if (stats.value.length > 50) stats.value.shift();
|
||||
|
||||
const inPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.rx)));
|
||||
const outPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.tx)));
|
||||
const inPeak = Math.max(1024 * 64, Math.max(...stats.value.map(s => s.net.rx)));
|
||||
const outPeak = Math.max(1024 * 64, Math.max(...stats.value.map(s => s.net.tx)));
|
||||
|
||||
let inPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY]);
|
||||
let outPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY]);
|
||||
inPolylinePoints = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
|
||||
outPolylinePoints = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
|
||||
let inPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY.value]);
|
||||
let outPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY.value]);
|
||||
inPolylinePoints.value = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
|
||||
outPolylinePoints.value = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
|
||||
|
||||
inPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
|
||||
outPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
|
||||
inPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${inPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
|
||||
outPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${outPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
|
||||
|
||||
inHeadX = inPolylinePointsStats.at(-1)![0];
|
||||
inHeadY = inPolylinePointsStats.at(-1)![1];
|
||||
outHeadX = outPolylinePointsStats.at(-1)![0];
|
||||
outHeadY = outPolylinePointsStats.at(-1)![1];
|
||||
inHeadX.value = inPolylinePointsStats.at(-1)![0];
|
||||
inHeadY.value = inPolylinePointsStats.at(-1)![1];
|
||||
outHeadX.value = outPolylinePointsStats.at(-1)![0];
|
||||
outHeadY.value = outPolylinePointsStats.at(-1)![1];
|
||||
|
||||
inRecent = connStats.net.rx;
|
||||
outRecent = connStats.net.tx;
|
||||
inRecent.value = connStats.net.rx;
|
||||
outRecent.value = connStats.net.tx;
|
||||
}
|
||||
|
||||
function onStatsLog(statsLog) {
|
||||
|
Reference in New Issue
Block a user