-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from Vizzuality/SKY30-92-fe-column-header-tool…
…tips [SKY30-92] Add tooltips to the data tables headers
- Loading branch information
Showing
7 changed files
with
137 additions
and
3 deletions.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
frontend/src/containers/data-tool/content/details/table/tooltip-button/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { useState } from 'react'; | ||
|
|
||
| import { Column } from '@tanstack/react-table'; | ||
| import { Info } from 'lucide-react'; | ||
|
|
||
| import { Button } from '@/components/ui/button'; | ||
| import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; | ||
| import { GlobalRegionalTableColumns } from '@/containers/data-tool/content/details/tables/global-regional/useColumns'; | ||
| import { NationalHighseasTableColumns } from '@/containers/data-tool/content/details/tables/national-highseas/useColumns'; | ||
|
|
||
| type TooltipButtonProps = { | ||
| column: | ||
| | Column<GlobalRegionalTableColumns, unknown> | ||
| | Column<NationalHighseasTableColumns, unknown>; | ||
| tooltips: { [key: string]: string[] }; | ||
| }; | ||
|
|
||
| const TooltipButton: React.FC<TooltipButtonProps> = ({ column, tooltips }) => { | ||
| const [isTooltipOpen, setIsTooltipOpen] = useState<boolean>(false); | ||
|
|
||
| const tooltip = tooltips[column.id]; | ||
|
|
||
| if (!tooltip) return null; | ||
|
|
||
| return ( | ||
| <Popover open={isTooltipOpen} onOpenChange={setIsTooltipOpen}> | ||
| <PopoverTrigger> | ||
| <Button className="mt-1 h-auto w-auto pl-2" size="icon" variant="ghost"> | ||
| <span className="sr-only">Info</span> | ||
| <Info className="h-4 w-4" aria-hidden="true" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent | ||
| align="center" | ||
| className="flex max-w-[300px] flex-col gap-6 font-mono text-xs" | ||
| > | ||
| {tooltip} | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| }; | ||
|
|
||
| export default TooltipButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
frontend/src/containers/data-tool/content/details/tables/global-regional/useTooltips.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { useGetDataInfos } from '@/types/generated/data-info'; | ||
|
|
||
| const TOOLTIP_MAPPING = { | ||
| coverage: 'coverage', | ||
| locationType: 'location-type', | ||
| mpas: 'mpas', | ||
| oecms: 'oecms', | ||
| fullyHighlyProtected: 'fully-highly-protected', | ||
| highlyProtectedLfp: 'highly-protected-lfp', | ||
| globalContribution: 'global-contribution', | ||
| }; | ||
|
|
||
| const useTooltips = () => { | ||
| const { data: dataInfo } = useGetDataInfos( | ||
| {}, | ||
| { | ||
| query: { | ||
| select: ({ data }) => data, | ||
| placeholderData: { data: [] }, | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| const tooltips = {}; | ||
|
|
||
| Object.entries(TOOLTIP_MAPPING).map(([key, value]) => { | ||
| const tooltip = dataInfo.find(({ attributes }) => attributes.slug === value)?.attributes | ||
| ?.content; | ||
|
|
||
| if (!tooltip) return; | ||
| tooltips[key] = tooltip; | ||
| }); | ||
|
|
||
| return tooltips; | ||
| }; | ||
|
|
||
| export default useTooltips; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
frontend/src/containers/data-tool/content/details/tables/national-highseas/useTooltips.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useGetDataInfos } from '@/types/generated/data-info'; | ||
|
|
||
| const TOOLTIP_MAPPING = { | ||
| coverage: 'coverage', | ||
| protectedAreaType: 'protected-area-type', | ||
| establishmentStage: 'establishment-stage', | ||
| protectionLevel: 'protection-level', | ||
| fishingProtectionLevel: 'fishing-protection-level', | ||
| }; | ||
|
|
||
| const useTooltips = () => { | ||
| const { data: dataInfo } = useGetDataInfos( | ||
| {}, | ||
| { | ||
| query: { | ||
| select: ({ data }) => data, | ||
| placeholderData: { data: [] }, | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| const tooltips = {}; | ||
|
|
||
| Object.entries(TOOLTIP_MAPPING).map(([key, value]) => { | ||
| const tooltip = dataInfo.find(({ attributes }) => attributes.slug === value)?.attributes | ||
| ?.content; | ||
|
|
||
| if (!tooltip) return; | ||
| tooltips[key] = tooltip; | ||
| }); | ||
|
|
||
| return tooltips; | ||
| }; | ||
|
|
||
| export default useTooltips; |