<template> <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent"> <template #header><i class="fas fa-chart-bar"></i>{{ $ts._widgets.activity }}</template> <template #func><button class="_button" @click="toggleView()"><i class="fas fa-sort"></i></button></template> <div> <MkLoading v-if="fetching"/> <template v-else> <XCalendar v-show="widgetProps.view === 0" :data="[].concat(activity)"/> <XChart v-show="widgetProps.view === 1" :data="[].concat(activity)"/> </template> </div> </MkContainer> </template> <script lang="ts" setup> import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'; import { GetFormResultType } from '@/scripts/form'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import * as os from '@/os'; import MkContainer from '@/components/ui/container.vue'; import XCalendar from './activity.calendar.vue'; import XChart from './activity.chart.vue'; import { $i } from '@/account'; const name = 'activity'; const widgetPropsDef = { showHeader: { type: 'boolean' as const, default: true, }, transparent: { type: 'boolean' as const, default: false, }, view: { type: 'number' as const, default: 0, hidden: true, }, }; type WidgetProps = GetFormResultType<typeof widgetPropsDef>; // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない //const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>(); const { widgetProps, configure, save } = useWidgetPropsManager(name, widgetPropsDef, props, emit, ); const activity = ref(null); const fetching = ref(true); const toggleView = () => { if (widgetProps.view === 1) { widgetProps.view = 0; } else { widgetProps.view++; } save(); }; os.api('charts/user/notes', { userId: $i.id, span: 'day', limit: 7 * 21, }).then(res => { activity.value = res.diffs.normal.map((_, i) => ({ total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i], notes: res.diffs.normal[i], replies: res.diffs.reply[i], renotes: res.diffs.renote[i] })); fetching.value = false; }); defineExpose<WidgetComponentExpose>({ name, configure, id: props.widget ? props.widget.id : null, }); </script>