jeder/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

Refactor Chart component (#8622)

Browse source 
* refactor(client): refactor Chart component

* Apply review suggestions from @Johann150

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

* fix(client): don't expose values from Chart

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
Andy 2022-05-14 14:20:41 +02:00 committed by GitHub
parent e0cce893be
commit 88307327e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 789 additions and 793 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
packages/client/src/components/chart.vue
View file

@ -7,8 +7,13 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, onMounted, ref, watch, PropType, onUnmounted, shallowRef } from 'vue'; /* eslint-disable id-denylist --
Chart.js has a `data` attribute in most chart definitions, which triggers the
id-denylist violation when setting it. This is causing about 60+ lint issues.
As this is part of Chart.js's API it makes sense to disable the check here.
*/
import { defineProps, onMounted, ref, watch, PropType, onUnmounted } from 'vue';
import { import {
Chart, Chart,
ArcElement, ArcElement,
@ -36,6 +41,46 @@ import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import MkChartTooltip from '@/components/chart-tooltip.vue'; import MkChartTooltip from '@/components/chart-tooltip.vue';
const props = defineProps({
src: {
type: String,
required: true,
},
args: {
type: Object,
required: false,
},
limit: {
type: Number,
required: false,
default: 90
},
span: {
type: String as PropType<'hour' | 'day'>,
required: true,
},
detailed: {
type: Boolean,
required: false,
default: false
},
stacked: {
type: Boolean,
required: false,
default: false
},
bar: {
type: Boolean,
required: false,
default: false
},
aspectRatio: {
type: Number,
required: false,
default: null
},
});
Chart.register( Chart.register(
ArcElement, ArcElement,
LineElement, LineElement,
@ -80,51 +125,9 @@ const getColor = (i) => {
return colorSets[i % colorSets.length]; return colorSets[i % colorSets.length];
}; };
export default defineComponent({
props: {
src: {
type: String,
required: true,
},
args: {
type: Object,
required: false,
},
limit: {
type: Number,
required: false,
default: 90
},
span: {
type: String as PropType<'hour' | 'day'>,
required: true,
},
detailed: {
type: Boolean,
required: false,
default: false
},
stacked: {
type: Boolean,
required: false,
default: false
},
bar: {
type: Boolean,
required: false,
default: false
},
aspectRatio: {
type: Number,
required: false,
default: null
},
},
setup(props) {
const now = new Date(); const now = new Date();
let chartInstance: Chart = null; let chartInstance: Chart = null;
let data: { let chartData: {
series: { series: {
name: string; name: string;
type: 'line' | 'area'; type: 'line' | 'area';
@ -205,13 +208,13 @@ export default defineComponent({
// フォントカラー // フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const maxes = data.series.map((x, i) => Math.max(...x.data.map(d => d.y))); const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));
chartInstance = new Chart(chartEl.value, { chartInstance = new Chart(chartEl.value, {
type: props.bar ? 'bar' : 'line', type: props.bar ? 'bar' : 'line',
data: { data: {
labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(), labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
datasets: data.series.map((x, i) => ({ datasets: chartData.series.map((x, i) => ({
parsing: false, parsing: false,
label: x.name, label: x.name,
data: x.data.slice().reverse(), data: x.data.slice().reverse(),
@ -373,7 +376,7 @@ export default defineComponent({
// TODO // TODO
}; };
const fetchFederationChart = async (): Promise<typeof data> => { const fetchFederationChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/federation', { limit: props.limit, span: props.span }); const raw = await os.api('charts/federation', { limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -423,7 +426,7 @@ export default defineComponent({
}; };
}; };
const fetchApRequestChart = async (): Promise<typeof data> => { const fetchApRequestChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/ap-request', { limit: props.limit, span: props.span }); const raw = await os.api('charts/ap-request', { limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -445,13 +448,13 @@ export default defineComponent({
}; };
}; };
const fetchNotesChart = async (type: string): Promise<typeof data> => { const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
const raw = await os.api('charts/notes', { limit: props.limit, span: props.span }); const raw = await os.api('charts/notes', { limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'All', name: 'All',
type: 'line', type: 'line',
data: format(type == 'combined' data: format(type === 'combined'
? sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec)) ? sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec))
: sum(raw[type].inc, negate(raw[type].dec)) : sum(raw[type].inc, negate(raw[type].dec))
), ),
@ -459,7 +462,7 @@ export default defineComponent({
}, { }, {
name: 'Renotes', name: 'Renotes',
type: 'area', type: 'area',
data: format(type == 'combined' data: format(type === 'combined'
? sum(raw.local.diffs.renote, raw.remote.diffs.renote) ? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
: raw[type].diffs.renote : raw[type].diffs.renote
), ),
@ -467,7 +470,7 @@ export default defineComponent({
}, { }, {
name: 'Replies', name: 'Replies',
type: 'area', type: 'area',
data: format(type == 'combined' data: format(type === 'combined'
? sum(raw.local.diffs.reply, raw.remote.diffs.reply) ? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
: raw[type].diffs.reply : raw[type].diffs.reply
), ),
@ -475,7 +478,7 @@ export default defineComponent({
}, { }, {
name: 'Normal', name: 'Normal',
type: 'area', type: 'area',
data: format(type == 'combined' data: format(type === 'combined'
? sum(raw.local.diffs.normal, raw.remote.diffs.normal) ? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
: raw[type].diffs.normal : raw[type].diffs.normal
), ),
@ -483,7 +486,7 @@ export default defineComponent({
}, { }, {
name: 'With file', name: 'With file',
type: 'area', type: 'area',
data: format(type == 'combined' data: format(type === 'combined'
? sum(raw.local.diffs.withFile, raw.remote.diffs.withFile) ? sum(raw.local.diffs.withFile, raw.remote.diffs.withFile)
: raw[type].diffs.withFile : raw[type].diffs.withFile
), ),
@ -492,7 +495,7 @@ export default defineComponent({
}; };
}; };
const fetchNotesTotalChart = async (): Promise<typeof data> => { const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/notes', { limit: props.limit, span: props.span }); const raw = await os.api('charts/notes', { limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -511,7 +514,7 @@ export default defineComponent({
}; };
}; };
const fetchUsersChart = async (total: boolean): Promise<typeof data> => { const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
const raw = await os.api('charts/users', { limit: props.limit, span: props.span }); const raw = await os.api('charts/users', { limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -539,7 +542,7 @@ export default defineComponent({
}; };
}; };
const fetchActiveUsersChart = async (): Promise<typeof data> => { const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/active-users', { limit: props.limit, span: props.span }); const raw = await os.api('charts/active-users', { limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -591,7 +594,7 @@ export default defineComponent({
}; };
}; };
const fetchDriveChart = async (): Promise<typeof data> => { const fetchDriveChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/drive', { limit: props.limit, span: props.span }); const raw = await os.api('charts/drive', { limit: props.limit, span: props.span });
return { return {
bytes: true, bytes: true,
@ -627,7 +630,7 @@ export default defineComponent({
}; };
}; };
const fetchDriveFilesChart = async (): Promise<typeof data> => { const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/drive', { limit: props.limit, span: props.span }); const raw = await os.api('charts/drive', { limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -662,7 +665,7 @@ export default defineComponent({
}; };
}; };
const fetchInstanceRequestsChart = async (): Promise<typeof data> => { const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -684,7 +687,7 @@ export default defineComponent({
}; };
}; };
const fetchInstanceUsersChart = async (total: boolean): Promise<typeof data> => { const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -699,7 +702,7 @@ export default defineComponent({
}; };
}; };
const fetchInstanceNotesChart = async (total: boolean): Promise<typeof data> => { const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -714,7 +717,7 @@ export default defineComponent({
}; };
}; };
const fetchInstanceFfChart = async (total: boolean): Promise<typeof data> => { const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -737,7 +740,7 @@ export default defineComponent({
}; };
}; };
const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof data> => { const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
return { return {
bytes: true, bytes: true,
@ -753,7 +756,7 @@ export default defineComponent({
}; };
}; };
const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof data> => { const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -768,7 +771,7 @@ export default defineComponent({
}; };
}; };
const fetchPerUserNotesChart = async (): Promise<typeof data> => { const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span }); const raw = await os.api('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
return { return {
series: [...(props.args.withoutAll ? [] : [{ series: [...(props.args.withoutAll ? [] : [{
@ -800,7 +803,7 @@ export default defineComponent({
}; };
}; };
const fetchPerUserFollowingChart = async (): Promise<typeof data> => { const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span }); const raw = await os.api('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -815,7 +818,7 @@ export default defineComponent({
}; };
}; };
const fetchPerUserFollowersChart = async (): Promise<typeof data> => { const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span }); const raw = await os.api('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -830,7 +833,7 @@ export default defineComponent({
}; };
}; };
const fetchPerUserDriveChart = async (): Promise<typeof data> => { const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
const raw = await os.api('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span }); const raw = await os.api('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
@ -859,7 +862,6 @@ export default defineComponent({
case 'notes-total': return fetchNotesTotalChart(); case 'notes-total': return fetchNotesTotalChart();
case 'drive': return fetchDriveChart(); case 'drive': return fetchDriveChart();
case 'drive-files': return fetchDriveFilesChart(); case 'drive-files': return fetchDriveFilesChart();
case 'instance-requests': return fetchInstanceRequestsChart(); case 'instance-requests': return fetchInstanceRequestsChart();
case 'instance-users': return fetchInstanceUsersChart(false); case 'instance-users': return fetchInstanceUsersChart(false);
case 'instance-users-total': return fetchInstanceUsersChart(true); case 'instance-users-total': return fetchInstanceUsersChart(true);
@ -879,7 +881,7 @@ export default defineComponent({
} }
}; };
fetching.value = true; fetching.value = true;
data = await fetchData(); chartData = await fetchData();
fetching.value = false; fetching.value = false;
render(); render();
}; };
@ -893,13 +895,7 @@ export default defineComponent({
onUnmounted(() => { onUnmounted(() => {
if (disposeTooltipComponent) disposeTooltipComponent(); if (disposeTooltipComponent) disposeTooltipComponent();
}); });
/* eslint-enable id-denylist */
return {
chartEl,
fetching,
};
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>