wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-16 01:10:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
notmd
2023-01-23 21:10:56 +07:00
parent 2c0e86c29b
commit 037ec3c96e
4 changed files with 105 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/public/locales/en/leaderboard.json
+2 -1
View File
@@ -7,5 +7,6 @@
"rank": "Rank",
"score": "Score",
"user": "User",
"weekly": "Weekly"
"weekly": "Weekly",
"prompt_tasks": "Prompt Tasks"
}
website/src/components/DataTable.tsx
+40 -40
View File
@@ -1,8 +1,6 @@
import {
Box,
Button,
Card,
CardBody,
Flex,
FormControl,
FormLabel,
@@ -49,6 +47,7 @@ export type DataTableProps<T> = {
onFilterChange?: (items: FilterItem[]) => void;
disableNext?: boolean;
disablePrevious?: boolean;
disablePagination?: boolean;
};
export const DataTable = <T,>({
@@ -61,6 +60,7 @@ export const DataTable = <T,>({
onFilterChange,
disableNext,
disablePrevious,
disablePagination,
}: DataTableProps<T>) => {
const { getHeaderGroups, getRowModel } = useReactTable<T>({
data,
@@ -79,8 +79,8 @@ export const DataTable = <T,>({
onFilterChange(newValues);
};
return (
<Card>
<CardBody>
<>
{disablePagination && (
<Flex mb="2">
<Button onClick={onPreviousClick} disabled={disablePrevious}>
Previous
@@ -90,42 +90,42 @@ export const DataTable = <T,>({
Next
</Button>
</Flex>
<TableContainer>
<Table variant="simple">
<TableCaption>{caption}</TableCaption>
<Thead>
{getHeaderGroups().map((headerGroup) => (
<Tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Th key={header.id}>
<Box display="flex" alignItems="center">
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
{(header.column.columnDef as DataTableColumnDef<T>).filterable && (
<FilterModal
value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
onChange={(value) => handleFilterChange({ id: header.id, value })}
label={flexRender(header.column.columnDef.header, header.getContext())}
></FilterModal>
)}
</Box>
</Th>
))}
</Tr>
))}
</Thead>
<Tbody>
{getRowModel().rows.map((row) => (
<Tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</CardBody>
</Card>
)}
<TableContainer>
<Table variant="simple">
<TableCaption>{caption}</TableCaption>
<Thead>
{getHeaderGroups().map((headerGroup) => (
<Tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Th key={header.id}>
<Box display="flex" alignItems="center">
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
{(header.column.columnDef as DataTableColumnDef<T>).filterable && (
<FilterModal
value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
onChange={(value) => handleFilterChange({ id: header.id, value })}
label={flexRender(header.column.columnDef.header, header.getContext())}
></FilterModal>
)}
</Box>
</Th>
))}
</Tr>
))}
</Thead>
<Tbody>
{getRowModel().rows.map((row) => (
<Tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</>
);
};
website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx
+36 -65
View File
@@ -1,90 +1,61 @@
import { Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
import { CircularProgress } from "@chakra-ui/react";
import { createColumnHelper } from "@tanstack/react-table";
import { useTranslation } from "next-i18next";
import React, { useMemo } from "react";
import { useTable } from "react-table";
import { get } from "src/lib/api";
import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
import { LeaderboardEntity, LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
import useSWRImmutable from "swr/immutable";
const getColumns = (t) => [
{
Header: t("rank"),
accessor: "rank",
style: { width: "90px" },
},
{
Header: t("score"),
accessor: "leader_score",
style: { width: "90px" },
},
{
Header: t("user"),
accessor: "display_name",
},
];
import { DataTable } from "../DataTable";
const columnHelper = createColumnHelper<LeaderboardEntity>();
/**
* Presents a grid of leaderboard entries with more detailed information.
*/
const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => {
const { t } = useTranslation(["leaderboard", "common"]);
const { data: reply } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
const { t } = useTranslation("leaderboard");
const {
data: reply,
isLoading,
error,
} = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
revalidateOnMount: true,
});
const columns = useMemo(() => getColumns(t), [t]);
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
columns,
data: reply?.leaderboard ?? [],
});
const backgroundColor = useColorModeValue("white", "gray.800");
const columns = useMemo(
() => [
columnHelper.accessor("rank", {
header: t("rank"),
}),
columnHelper.accessor("display_name", {
header: t("user"),
}),
columnHelper.accessor("leader_score", {
header: t("score"),
}),
columnHelper.accessor("prompts", {
header: t("pro"),
}),
],
[t]
);
const lastUpdated = useMemo(() => {
const val = new Date(reply?.last_updated);
return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
}, [t, reply?.last_updated]);
console.log(reply, isLoading);
if (!reply) {
return null;
if (isLoading) {
return <CircularProgress isIndeterminate></CircularProgress>;
}
return (
<TableContainer>
<Table {...getTableProps()}>
<Thead bg={backgroundColor}>
{headerGroups.map((headerGroup, idx) => (
<Tr key={idx} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<Th {...column.getHeaderProps([{ style: column.style }])} key={column.id}>
{column.render("Header")}
</Th>
))}
</Tr>
))}
</Thead>
if (error) {
return <span>Unable to load leaderboard</span>;
}
<Tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<Tr key={row.id} {...row.getRowProps()}>
{row.cells.map((cell, idx) => {
return (
<Td key={row.id + idx} {...cell.getCellProps([{ style: cell.column.style }])}>
{cell.render("Cell")}
</Td>
);
})}
</Tr>
);
})}
</Tbody>
</Table>
<Text p="2">{lastUpdated}</Text>
</TableContainer>
);
return <DataTable data={reply?.leaderboard || []} columns={columns} caption={lastUpdated}></DataTable>;
};
export { LeaderboardGridCell };
website/src/pages/leaderboard.tsx
+27 -23
View File
@@ -1,4 +1,4 @@
import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import { Box, Card, CardBody, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { getDashboardLayout } from "src/components/Layout";
@@ -18,29 +18,33 @@ const Leaderboard = () => {
<Heading fontSize="2xl" fontWeight="bold" pb="4">
{t("leaderboard")}
</Heading>
<Tabs isFitted isLazy>
<TabList>
<Tab>{t("daily")}</Tab>
<Tab>{t("weekly")}</Tab>
<Tab>{t("monthly")}</Tab>
<Tab>{t("overall")}</Tab>
</TabList>
<Card>
<CardBody>
<Tabs isFitted isLazy>
<TabList mb="4">
<Tab>{t("daily")}</Tab>
<Tab>{t("weekly")}</Tab>
<Tab>{t("monthly")}</Tab>
<Tab>{t("overall")}</Tab>
</TabList>
<TabPanels>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.week} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.month} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.total} />
</TabPanel>
</TabPanels>
</Tabs>
<TabPanels>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.week} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.month} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.total} />
</TabPanel>
</TabPanels>
</Tabs>
</CardBody>
</Card>
</Box>
</>
);