Add charts and tables to the stats page (#1696)

Related to #1655, it's a mix of the graphs, added by @rjmacarthy, and
the table, added by me. It looks like this:


![image](https://user-images.githubusercontent.com/19565386/219817640-dec02aec-a9f3-40e2-ae4e-b521a1dc0654.png)

I'm sure that many things could be improved in my code. Suggestions are
welcome!

---------

Co-authored-by: rjmacarthy <richardmacarthy@hotmail.com>

website/package.json

@@ -45,6 +45,7 @@
     "autoprefixer": "^10.4.13",
     "axios": "^1.2.1",
     "boolean": "^3.2.0",
+    "chart.js": "^4.2.1",
     "clsx": "^1.2.1",
     "date-fns": "^2.29.3",
     "eslint": "8.29.0",
@@ -62,6 +63,7 @@
     "npm": "^9.2.0",
     "postcss-focus-visible": "^7.1.0",
     "react": "18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
     "react-feature-flags": "^1.0.0",

website/public/locales/en/stats.json

@@ -1,6 +1,8 @@
 {
   "aborted_low_grade": "Aborted low grade",
+  "assistant": "Assistant",
   "backlog_ranking": "Backlog ranking",
+  "choose_a_language": "Choose a language",
   "count": "Count",
   "growing": "Growing",
   "halted_by_moderator": "Halted by moderator",
@@ -10,6 +12,7 @@
   "message_trees_by_state": "Message trees by state",
   "message_trees_states_by_lang": "Message trees states by language",
   "prompt_lottery_waiting": "Prompt lottery waiting",
+  "prompter": "Prompter",
   "ranking": "Ranking",
   "ready_for_export": "Ready for export",
   "stats": "Stats",

website/src/components/DataTable/DataTable.tsx

@@ -124,7 +124,7 @@ export const DataTable = <T,>({
           <TableCaption pb={0}>{caption}</TableCaption>
           <Thead>
             {getHeaderGroups().map((headerGroup) => (
-              <Tr key={headerGroup.id}>
+              <Tr key={headerGroup.id} sx={{ "white-space": "normal" }}>
                 {headerGroup.headers.map((header) => (
                   <Th key={header.id}>
                     <Box display="flex" alignItems="center">