[questions][feat] show question statistics dropdown

apps/portal/package.json

@@ -15,6 +15,7 @@
     "@headlessui/react": "^1.7.3",
     "@heroicons/react": "^2.0.11",
     "@next-auth/prisma-adapter": "^1.0.4",
+    "@popperjs/core": "^2.11.6",
     "@prisma/client": "^4.4.0",
     "@supabase/supabase-js": "^1.35.7",
     "@tih/ui": "*",
@@ -33,6 +34,8 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.36.1",
     "react-pdf": "^5.7.2",
+    "react-popper": "^2.3.0",
+    "react-popper-tooltip": "^4.4.2",
     "react-query": "^3.39.2",
     "superjson": "^1.10.0",
     "zod": "^3.18.0"

apps/portal/src/components/questions/QuestionAggregateBadge.tsx

@@ -1,8 +1,10 @@
 import type { ComponentProps } from 'react';
 import { useMemo } from 'react';
-import { Popover } from '@headlessui/react';
+import { usePopperTooltip } from 'react-popper-tooltip';
 import { Badge } from '@tih/ui';
 
+import 'react-popper-tooltip/dist/styles.css';
+
 type BadgeProps = ComponentProps<typeof Badge>;
 
 export type QuestionAggregateBadgeProps = Omit<BadgeProps, 'label'> & {
@@ -13,6 +15,13 @@ export default function QuestionAggregateBadge({
   statistics,
   ...badgeProps
 }: QuestionAggregateBadgeProps) {
+  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
+    usePopperTooltip({
+      interactive: true,
+      placement: 'bottom-start',
+      trigger: ['focus', 'hover'],
+    });
+
   const mostCommonStatistic = useMemo(
     () =>
       Object.entries(statistics).reduce(
@@ -27,6 +36,15 @@ export default function QuestionAggregateBadge({
     [statistics],
   );
 
+  const sortedStatistics = useMemo(
+    () =>
+      Object.entries(statistics)
+        .sort((a, b) => b[1] - a[1])
+        .map(([key, value]) => ({ key, value })),
+
+    [statistics],
+  );
+
   const additionalStatisticCount = Object.keys(statistics).length - 1;
 
   const label = useMemo(() => {
@@ -37,15 +55,26 @@ export default function QuestionAggregateBadge({
   }, [mostCommonStatistic, additionalStatisticCount]);
 
   return (
-    <Popover>
-      <Popover.Button>
+    <>
+      <button ref={setTriggerRef} className="rounded-full" type="button">
         <Badge label={label} {...badgeProps} />
-      </Popover.Button>
-      <Popover.Panel>
-        <div className="flex flex-col gap-2">
-          <h1>Hello</h1>
+      </button>
+      {visible && (
+        <div ref={setTooltipRef} {...getTooltipProps()}>
+          <div className="flex flex-col gap-2 rounded-md bg-white p-2 shadow-md">
+            <ul>
+              {sortedStatistics.map(({ key, value }) => (
+                <li
+                  key={key}
+                  className="flex justify-between gap-x-4 rtl:flex-row-reverse">
+                  <span className="flex text-start font-bold">{key}</span>
+                  <span className="float-end">{value}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
-      </Popover.Panel>
-    </Popover>
+      )}
+    </>
   );
 }

yarn.lock

@@ -1240,6 +1240,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.18.3":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
+  integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.7", "@babel/template@^7.18.10":
   version "7.18.10"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz"
@@ -2156,6 +2163,11 @@
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.11.5", "@popperjs/core@^2.11.6":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@prisma/client@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@prisma/client/-/client-4.4.0.tgz"
@@ -12197,7 +12209,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.2.0:
+react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
@@ -12275,6 +12287,23 @@ react-pdf@^5.7.2:
     tiny-invariant "^1.0.0"
     tiny-warning "^1.0.0"
 
+react-popper-tooltip@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz#0dc4894b8e00ba731f89bd2d30584f6032ec6163"
+  integrity sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@popperjs/core" "^2.11.5"
+    react-popper "^2.3.0"
+
+react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-query@^3.39.2:
   version "3.39.2"
   resolved "https://registry.npmjs.org/react-query/-/react-query-3.39.2.tgz"
@@ -14744,6 +14773,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.12"
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz"