Files
ui/src/features/history-chart/useHistoryChartQueries.ts

53 lines
1.2 KiB
TypeScript

import { useMemo } from 'react';
import { useQueries } from '@tanstack/react-query';
import { getHistory } from '../../entities/history/api';
import type { HistoryPoint } from '../../entities/history/types';
type UseHistoryChartQueriesParams = {
edge: string;
from: string;
granulate: string;
tags: string[];
to: string;
tagLabels: Record<string, string>;
};
export type HistoryChartLineData = {
index: number;
label: string;
loading: boolean;
rows: HistoryPoint[];
tag: string;
};
export function useHistoryChartQueries({
edge,
from,
granulate,
tags,
to,
tagLabels,
}: UseHistoryChartQueriesParams): HistoryChartLineData[] {
const enabled = Boolean(edge && from && granulate && to);
const queries = useQueries({
queries: tags.map((tag) => ({
queryKey: ['history', edge, tag, from, to, granulate],
queryFn: () => getHistory({ edge, tag, from, to, granulate }),
enabled,
})),
});
return useMemo(
() =>
tags.map((tag, index) => ({
index,
label: tagLabels[tag] ?? tag,
loading: enabled && queries[index].isPending,
rows: queries[index].data?.rows ?? [],
tag,
})),
[enabled, queries, tagLabels, tags],
);
}