feat: add footer total to statistics

theodorusclarence · Dec 26, 2021 · 1137e5e · 1137e5e
1 parent 1033941
commit 1137e5e
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 1 deletion.
diff --git a/src/components/ReactTable.tsx b/src/components/ReactTable.tsx
@@ -19,6 +19,7 @@ type Props<T extends object = {}> = {
  options?: Omit<TableOptions<T>, 'data' | 'columns'>;
  plugins?: PluginHook<T>[];
  className?: string;
+ withFooter?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -28,6 +29,7 @@ export default function ReactTable<T extends object>({
  options,
  plugins = [],
  className,
+ withFooter = true,
 }: Props<T>) {
  const {
  getTableProps,
@@ -37,6 +39,7 @@ export default function ReactTable<T extends object>({
  prepareRow,
  state,
  setGlobalFilter,
+ footerGroups,
  } = useTable<T>(
  { ...options, data, columns },
  useGlobalFilter,
@@ -166,6 +169,29 @@ export default function ReactTable<T extends object>({
  );
  })}
  </tbody>
+ {withFooter && (
+ <tfoot className='bg-gray-50 dark:bg-gray-700'>
+ {footerGroups.map((footerGroup, index) => (
+ <tr
+ {...footerGroup.getFooterGroupProps()}
+ key={index}
+ className='group px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-200'
+ >
+ {footerGroup.headers.map((column) => (
+ <td
+ {...column.getFooterProps()}
+ className={clsx(
+ 'px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-200'
+ )}
+ key={column.id}
+ >
+ {column.render('Footer')}
+ </td>
+ ))}
+ </tr>
+ ))}
+ </tfoot>
+ )}
  </table>
  </div>
  </div>

diff --git a/src/pages/statistics.tsx b/src/pages/statistics.tsx
@@ -27,31 +27,56 @@ export default function StatisticsPage() {
  () => [
  {
  Header: 'Blog Slug',
+ Footer: 'Total',
  accessor: 'slug',
  sortDescFirst: true,
  },
  {
  Header: 'Total Views',
  accessor: 'views',
  Cell: ({ value }) => value.toLocaleString(),
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () => rows.reduce((sum, row) => sum + row.original.views, 0),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  {
  Header: 'Web Views',
  accessor: 'webViews',
  Cell: ({ value }) => value.toLocaleString(),
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () => rows.reduce((sum, row) => sum + row.original.webViews, 0),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  {
  Header: 'Dev.to',
  accessor: 'devtoViews',
  Cell: ({ value }) => value?.toLocaleString() || '-',
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () =>
+ rows.reduce(
+ (sum, row) => sum + (row.original?.devtoViews ?? 0),
+ 0
+ ),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  {
  Header: 'Likes',
  accessor: 'likes',
  Cell: ({ value }) => value.toLocaleString(),
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () => rows.reduce((sum, row) => sum + row.original.likes, 0),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  ],
@@ -66,18 +91,29 @@ export default function StatisticsPage() {
  {
  Header: 'Project Slug',
  accessor: 'slug',
+ Footer: 'Total',
  sortDescFirst: true,
  },
  {
  Header: 'Total Views',
  accessor: 'views',
  Cell: ({ value }) => value.toLocaleString(),
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () => rows.reduce((sum, row) => sum + row.original.views, 0),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  {
  Header: 'Likes',
  accessor: 'likes',
  Cell: ({ value }) => value.toLocaleString(),
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () => rows.reduce((sum, row) => sum + row.original.likes, 0),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  ],
@@ -92,18 +128,29 @@ export default function StatisticsPage() {
  {
  Header: 'Library Slug',
  accessor: 'slug',
+ Footer: 'Total',
  sortDescFirst: true,
  },
  {
  Header: 'Total Views',
  accessor: 'views',
  Cell: ({ value }) => value.toLocaleString(),
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () => rows.reduce((sum, row) => sum + row.original.views, 0),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  {
  Header: 'Likes',
  accessor: 'likes',
  Cell: ({ value }) => value.toLocaleString(),
+ Footer: ({ rows }) =>
+ React.useMemo(
+ () => rows.reduce((sum, row) => sum + row.original.likes, 0),
+ [rows]
+ ).toLocaleString(),
  sortDescFirst: true,
  },
  ],
@@ -113,7 +160,10 @@ export default function StatisticsPage() {
 
  return (
  <Layout>
- <Seo templateTitle='Statistics' />
+ <Seo
+ templateTitle='Statistics'
+ description='Metadata statistics of theodorusclarence.com blogs, projects and libraries.'
+ />
 
  <main>
  <section className=''>