diff --git a/apps/portal/package.json b/apps/portal/package.json index f1bdb9e7..208b1940 100644 --- a/apps/portal/package.json +++ b/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" diff --git a/apps/portal/src/components/questions/QuestionAggregateBadge.tsx b/apps/portal/src/components/questions/QuestionAggregateBadge.tsx index 5219a522..25f7afef 100644 --- a/apps/portal/src/components/questions/QuestionAggregateBadge.tsx +++ b/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; export type QuestionAggregateBadgeProps = Omit & { @@ -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 ( - - + <> + + {visible && ( +
+
+
    + {sortedStatistics.map(({ key, value }) => ( +
  • + {key} + {value} +
  • + ))} +
+
- -
+ )} + ); } diff --git a/yarn.lock b/yarn.lock index 04c23ef7..728e939d 100644 --- a/yarn.lock +++ b/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"