Refactor widgets and fix lint issues (#8719)

* fix(client): refactor widgets and fix lint issues

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
Andreas Nedbal 2022-05-25 09:43:12 +02:00 committed by GitHub
parent 81fccb5656
commit b049633db7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 261 additions and 318 deletions

View File

@ -23,45 +23,41 @@
</svg> </svg>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; const props = defineProps<{
import * as os from '@/os'; activity: any[]
}>();
export default defineComponent({ for (const d of props.activity) {
props: ['data'], d.total = d.notes + d.replies + d.renotes;
created() { }
for (const d of this.data) { const peak = Math.max(...props.activity.map(d => d.total));
d.total = d.notes + d.replies + d.renotes;
}
const peak = Math.max.apply(null, this.data.map(d => d.total));
const now = new Date(); const now = new Date();
const year = now.getFullYear(); const year = now.getFullYear();
const month = now.getMonth(); const month = now.getMonth();
const day = now.getDate(); const day = now.getDate();
let x = 20; let x = 20;
this.data.slice().forEach((d, i) => { props.activity.slice().forEach((d, i) => {
d.x = x; d.x = x;
const date = new Date(year, month, day - i); const date = new Date(year, month, day - i);
d.date = { d.date = {
year: date.getFullYear(), year: date.getFullYear(),
month: date.getMonth(), month: date.getMonth(),
day: date.getDate(), day: date.getDate(),
weekday: date.getDay() weekday: date.getDay()
}; };
d.v = peak === 0 ? 0 : d.total / (peak / 2); d.v = peak === 0 ? 0 : d.total / (peak / 2);
if (d.v > 1) d.v = 1; if (d.v > 1) d.v = 1;
const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170; const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170;
const cs = d.v * 100; const cs = d.v * 100;
const cl = 15 + ((1 - d.v) * 80); const cl = 15 + ((1 - d.v) * 80);
d.color = `hsl(${ch}, ${cs}%, ${cl}%)`; d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
if (d.date.weekday === 0) x--; if (d.date.weekday === 0) x--;
});
}
}); });
</script> </script>

View File

@ -24,9 +24,19 @@
</svg> </svg>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; const props = defineProps<{
import * as os from '@/os'; activity: any[]
}>();
let viewBoxX: number = $ref(147);
let viewBoxY: number = $ref(60);
let zoom: number = $ref(1);
let pos: number = $ref(0);
let pointsNote: any = $ref(null);
let pointsReply: any = $ref(null);
let pointsRenote: any = $ref(null);
let pointsTotal: any = $ref(null);
function dragListen(fn) { function dragListen(fn) {
window.addEventListener('mousemove', fn); window.addEventListener('mousemove', fn);
@ -40,60 +50,35 @@ function dragClear(fn) {
window.removeEventListener('mouseup', dragClear); window.removeEventListener('mouseup', dragClear);
} }
export default defineComponent({ function onMousedown(ev) {
props: ['data'], const clickX = ev.clientX;
data() { const clickY = ev.clientY;
return { const baseZoom = zoom;
viewBoxX: 147, const basePos = pos;
viewBoxY: 60,
zoom: 1,
pos: 0,
pointsNote: null,
pointsReply: null,
pointsRenote: null,
pointsTotal: null
};
},
created() {
for (const d of this.data) {
d.total = d.notes + d.replies + d.renotes;
}
this.render(); //
}, dragListen(me => {
methods: { let moveLeft = me.clientX - clickX;
render() { let moveTop = me.clientY - clickY;
const peak = Math.max.apply(null, this.data.map(d => d.total));
if (peak != 0) {
const data = this.data.slice().reverse();
this.pointsNote = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' ');
this.pointsReply = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' ');
this.pointsRenote = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' ');
this.pointsTotal = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
}
},
onMousedown(e) {
const clickX = e.clientX;
const clickY = e.clientY;
const baseZoom = this.zoom;
const basePos = this.pos;
// zoom = Math.max(1, baseZoom + (-moveTop / 20));
dragListen(me => { pos = Math.min(0, basePos + moveLeft);
let moveLeft = me.clientX - clickX; if (pos < -(((props.activity.length - 1) * zoom) - viewBoxX)) pos = -(((props.activity.length - 1) * zoom) - viewBoxX);
let moveTop = me.clientY - clickY;
this.zoom = baseZoom + (-moveTop / 20); render();
this.pos = basePos + moveLeft; });
if (this.zoom < 1) this.zoom = 1; }
if (this.pos > 0) this.pos = 0;
if (this.pos < -(((this.data.length - 1) * this.zoom) - this.viewBoxX)) this.pos = -(((this.data.length - 1) * this.zoom) - this.viewBoxX);
this.render(); function render() {
}); const peak = Math.max(...props.activity.map(d => d.total));
} if (peak !== 0) {
const activity = props.activity.slice().reverse();
pointsNote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.notes / peak)) * viewBoxY}`).join(' ');
pointsReply = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.replies / peak)) * viewBoxY}`).join(' ');
pointsRenote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.renotes / peak)) * viewBoxY}`).join(' ');
pointsTotal = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.total / peak)) * viewBoxY}`).join(' ');
} }
}); }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -6,8 +6,8 @@
<div> <div>
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<template v-else> <template v-else>
<XCalendar v-show="widgetProps.view === 0" :data="[].concat(activity)"/> <XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
<XChart v-show="widgetProps.view === 1" :data="[].concat(activity)"/> <XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
</template> </template>
</div> </div>
</MkContainer> </MkContainer>
@ -47,7 +47,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -24,7 +24,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -43,7 +43,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,
@ -94,7 +94,7 @@ const run = async () => {
let ast; let ast;
try { try {
ast = parse(widgetProps.script); ast = parse(widgetProps.script);
} catch (e) { } catch (err) {
os.alert({ os.alert({
type: 'error', type: 'error',
text: 'Syntax error :(', text: 'Syntax error :(',
@ -103,10 +103,10 @@ const run = async () => {
} }
try { try {
await aiscript.exec(ast); await aiscript.exec(ast);
} catch (e) { } catch (err) {
os.alert({ os.alert({
type: 'error', type: 'error',
text: e, text: err,
}); });
} }
}; };

View File

@ -40,7 +40,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,
@ -73,7 +73,7 @@ const run = async () => {
let ast; let ast;
try { try {
ast = parse(widgetProps.script); ast = parse(widgetProps.script);
} catch (e) { } catch (err) {
os.alert({ os.alert({
type: 'error', type: 'error',
text: 'Syntax error :(', text: 'Syntax error :(',
@ -82,10 +82,10 @@ const run = async () => {
} }
try { try {
await aiscript.exec(ast); await aiscript.exec(ast);
} catch (e) { } catch (err) {
os.alert({ os.alert({
type: 'error', type: 'error',
text: e, text: err,
}); });
} }
}; };

View File

@ -53,7 +53,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -39,7 +39,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -41,7 +41,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -41,7 +41,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>(); //const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -73,7 +73,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -32,7 +32,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -41,7 +41,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -27,7 +27,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -43,7 +43,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -19,7 +19,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -38,7 +38,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -69,79 +69,72 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted, onBeforeUnmount } from 'vue';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
export default defineComponent({ const props = defineProps<{
props: { connection: any,
connection: { meta: any
required: true, }>();
},
meta: {
required: true,
}
},
data() {
return {
viewBoxX: 50,
viewBoxY: 30,
stats: [],
cpuGradientId: uuid(),
cpuMaskId: uuid(),
memGradientId: uuid(),
memMaskId: uuid(),
cpuPolylinePoints: '',
memPolylinePoints: '',
cpuPolygonPoints: '',
memPolygonPoints: '',
cpuHeadX: null,
cpuHeadY: null,
memHeadX: null,
memHeadY: null,
cpuP: '',
memP: ''
};
},
mounted() {
this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog);
this.connection.send('requestLog', {
id: Math.random().toString().substr(2, 8)
});
},
beforeUnmount() {
this.connection.off('stats', this.onStats);
this.connection.off('statsLog', this.onStatsLog);
},
methods: {
onStats(stats) {
this.stats.push(stats);
if (this.stats.length > 50) this.stats.shift();
const cpuPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - s.cpu) * this.viewBoxY]); let viewBoxX: number = $ref(50);
const memPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - (s.mem.active / this.meta.mem.total)) * this.viewBoxY]); let viewBoxY: number = $ref(30);
this.cpuPolylinePoints = cpuPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); let stats: any[] = $ref([]);
this.memPolylinePoints = memPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); const cpuGradientId = uuid();
const cpuMaskId = uuid();
const memGradientId = uuid();
const memMaskId = uuid();
let cpuPolylinePoints: string = $ref('');
let memPolylinePoints: string = $ref('');
let cpuPolygonPoints: string = $ref('');
let memPolygonPoints: string = $ref('');
let cpuHeadX: any = $ref(null);
let cpuHeadY: any = $ref(null);
let memHeadX: any = $ref(null);
let memHeadY: any = $ref(null);
let cpuP: string = $ref('');
let memP: string = $ref('');
this.cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${this.viewBoxY} ${this.cpuPolylinePoints} ${this.viewBoxX},${this.viewBoxY}`; onMounted(() => {
this.memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${this.viewBoxY} ${this.memPolylinePoints} ${this.viewBoxX},${this.viewBoxY}`; props.connection.on('stats', onStats);
props.connection.on('statsLog', onStatsLog);
this.cpuHeadX = cpuPolylinePoints[cpuPolylinePoints.length - 1][0]; props.connection.send('requestLog', {
this.cpuHeadY = cpuPolylinePoints[cpuPolylinePoints.length - 1][1]; id: Math.random().toString().substr(2, 8)
this.memHeadX = memPolylinePoints[memPolylinePoints.length - 1][0]; });
this.memHeadY = memPolylinePoints[memPolylinePoints.length - 1][1];
this.cpuP = (stats.cpu * 100).toFixed(0);
this.memP = (stats.mem.active / this.meta.mem.total * 100).toFixed(0);
},
onStatsLog(statsLog) {
for (const stats of [...statsLog].reverse()) {
this.onStats(stats);
}
}
}
}); });
onBeforeUnmount(() => {
props.connection.off('stats', onStats);
props.connection.off('statsLog', onStatsLog);
});
function onStats(connStats) {
stats.push(connStats);
if (stats.length > 50) stats.shift();
let cpuPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - s.cpu) * viewBoxY]);
let memPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY]);
cpuPolylinePoints = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
memPolylinePoints = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
cpuPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
memPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
cpuHeadX = cpuPolylinePoints[cpuPolylinePoints.length - 1][0];
cpuHeadY = cpuPolylinePoints[cpuPolylinePoints.length - 1][1];
memHeadX = memPolylinePoints[memPolylinePoints.length - 1][0];
memHeadY = memPolylinePoints[memPolylinePoints.length - 1][1];
cpuP = (connStats.cpu * 100).toFixed(0);
memP = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
}
function onStatsLog(statsLog) {
for (const revStats of [...statsLog].reverse()) {
onStats(revStats);
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -9,38 +9,27 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted, onBeforeUnmount } from 'vue';
import XPie from './pie.vue'; import XPie from './pie.vue';
export default defineComponent({ const props = defineProps<{
components: { connection: any,
XPie meta: any
}, }>();
props: {
connection: { let usage: number = $ref(0);
required: true,
}, function onStats(stats) {
meta: { usage = stats.cpu;
required: true, }
}
}, onMounted(() => {
data() { props.connection.on('stats', onStats);
return { });
usage: 0,
}; onBeforeUnmount(() => {
}, props.connection.off('stats', onStats);
mounted() {
this.connection.on('stats', this.onStats);
},
beforeUnmount() {
this.connection.off('stats', this.onStats);
},
methods: {
onStats(stats) {
this.usage = stats.cpu;
}
}
}); });
</script> </script>

View File

@ -50,7 +50,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,
@ -65,7 +65,7 @@ os.api('server-info', {}).then(res => {
}); });
const toggleView = () => { const toggleView = () => {
if (widgetProps.view == 4) { if (widgetProps.view === 4) {
widgetProps.view = 0; widgetProps.view = 0;
} else { } else {
widgetProps.view++; widgetProps.view++;

View File

@ -10,46 +10,34 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted, onBeforeUnmount } from 'vue';
import XPie from './pie.vue'; import XPie from './pie.vue';
import bytes from '@/filters/bytes'; import bytes from '@/filters/bytes';
export default defineComponent({ const props = defineProps<{
components: { connection: any,
XPie meta: any
}, }>();
props: {
connection: { let usage: number = $ref(0);
required: true, let total: number = $ref(0);
}, let used: number = $ref(0);
meta: { let free: number = $ref(0);
required: true,
} function onStats(stats) {
}, usage = stats.mem.active / props.meta.mem.total;
data() { total = props.meta.mem.total;
return { used = stats.mem.active;
usage: 0, free = total - used;
total: 0, }
used: 0,
free: 0, onMounted(() => {
}; props.connection.on('stats', onStats);
}, });
mounted() {
this.connection.on('stats', this.onStats); onBeforeUnmount(() => {
}, props.connection.off('stats', onStats);
beforeUnmount() {
this.connection.off('stats', this.onStats);
},
methods: {
onStats(stats) {
this.usage = stats.mem.active / this.meta.mem.total;
this.total = this.meta.mem.total;
this.used = stats.mem.active;
this.free = this.meta.mem.total - stats.mem.active;
},
bytes
}
}); });
</script> </script>

View File

@ -43,79 +43,71 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted, onBeforeUnmount } from 'vue';
import bytes from '@/filters/bytes'; import bytes from '@/filters/bytes';
export default defineComponent({ const props = defineProps<{
props: { connection: any,
connection: { meta: any
required: true, }>();
},
meta: {
required: true,
}
},
data() {
return {
viewBoxX: 50,
viewBoxY: 30,
stats: [],
inPolylinePoints: '',
outPolylinePoints: '',
inPolygonPoints: '',
outPolygonPoints: '',
inHeadX: null,
inHeadY: null,
outHeadX: null,
outHeadY: null,
inRecent: 0,
outRecent: 0
};
},
mounted() {
this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog);
this.connection.send('requestLog', {
id: Math.random().toString().substr(2, 8)
});
},
beforeUnmount() {
this.connection.off('stats', this.onStats);
this.connection.off('statsLog', this.onStatsLog);
},
methods: {
onStats(stats) {
this.stats.push(stats);
if (this.stats.length > 50) this.stats.shift();
const inPeak = Math.max(1024 * 64, Math.max(...this.stats.map(s => s.net.rx))); let viewBoxX: number = $ref(50);
const outPeak = Math.max(1024 * 64, Math.max(...this.stats.map(s => s.net.tx))); 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 inPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - (s.net.rx / inPeak)) * this.viewBoxY]); onMounted(() => {
const outPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - (s.net.tx / outPeak)) * this.viewBoxY]); props.connection.on('stats', onStats);
this.inPolylinePoints = inPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); props.connection.on('statsLog', onStatsLog);
this.outPolylinePoints = outPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); props.connection.send('requestLog', {
id: Math.random().toString().substr(2, 8)
this.inPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${this.viewBoxY} ${this.inPolylinePoints} ${this.viewBoxX},${this.viewBoxY}`; });
this.outPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${this.viewBoxY} ${this.outPolylinePoints} ${this.viewBoxX},${this.viewBoxY}`;
this.inHeadX = inPolylinePoints[inPolylinePoints.length - 1][0];
this.inHeadY = inPolylinePoints[inPolylinePoints.length - 1][1];
this.outHeadX = outPolylinePoints[outPolylinePoints.length - 1][0];
this.outHeadY = outPolylinePoints[outPolylinePoints.length - 1][1];
this.inRecent = stats.net.rx;
this.outRecent = stats.net.tx;
},
onStatsLog(statsLog) {
for (const stats of [...statsLog].reverse()) {
this.onStats(stats);
}
},
bytes
}
}); });
onBeforeUnmount(() => {
props.connection.off('stats', onStats);
props.connection.off('statsLog', onStatsLog);
});
function onStats(connStats) {
stats.push(connStats);
if (stats.length > 50) stats.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)));
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(' ');
inPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
outPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
inHeadX = inPolylinePoints[inPolylinePoints.length - 1][0];
inHeadY = inPolylinePoints[inPolylinePoints.length - 1][1];
outHeadX = outPolylinePoints[outPolylinePoints.length - 1][0];
outHeadY = outPolylinePoints[outPolylinePoints.length - 1][1];
inRecent = connStats.net.rx;
outRecent = connStats.net.tx;
}
function onStatsLog(statsLog) {
for (const revStats of [...statsLog].reverse()) {
onStats(revStats);
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -37,7 +37,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,
@ -51,7 +51,7 @@ const slideA = ref<HTMLElement>();
const slideB = ref<HTMLElement>(); const slideB = ref<HTMLElement>();
const change = () => { const change = () => {
if (images.value.length == 0) return; if (images.value.length === 0) return;
const index = Math.floor(Math.random() * images.value.length); const index = Math.floor(Math.random() * images.value.length);
const img = `url(${ images.value[index].url })`; const img = `url(${ images.value[index].url })`;

View File

@ -63,7 +63,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -40,7 +40,7 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

View File

@ -13,7 +13,7 @@ export type WidgetComponentProps<P extends Record<string, unknown>> = {
}; };
export type WidgetComponentEmits<P extends Record<string, unknown>> = { export type WidgetComponentEmits<P extends Record<string, unknown>> = {
(e: 'updateProps', props: P); (ev: 'updateProps', props: P);
}; };
export type WidgetComponentExpose = { export type WidgetComponentExpose = {