-
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 #54 from Vizzuality/develop
Update staging with develop
- Loading branch information
Showing
83 changed files
with
10,508 additions
and
364 deletions.
There are no files selected for viewing
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
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
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
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,21 @@ | ||
| import CircleLegend from "@/components/ui/circle-legend"; | ||
| import { LegendComponent } from "../../types"; | ||
|
|
||
| type LegendComponentProps = { | ||
| items: LegendComponent["items"]; | ||
| }; | ||
|
|
||
| const BasicLegend = ({ items }: LegendComponentProps) => { | ||
| return ( | ||
| <ul className="space-y-2"> | ||
| {items?.map((i) => ( | ||
| <li key={i.name} className="flex gap-4"> | ||
| {!!i.color && <CircleLegend colors={[i.color]} />} | ||
| <span className="text-xs font-light">{i.name}</span> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| }; | ||
|
|
||
| export default BasicLegend; |
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 { LegendComponent } from "../../types"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| type LegendComponentProps = { | ||
| items: LegendComponent["items"]; | ||
| }; | ||
|
|
||
| const GradientLegend = ({ items }: LegendComponentProps) => { | ||
| return ( | ||
| <div> | ||
| <div | ||
| className="flex h-3 w-full rounded-full" | ||
| style={{ | ||
| backgroundImage: `linear-gradient(to right, ${items.map((i) => i.color).join(",")})`, | ||
| }} | ||
| /> | ||
| <ul className="mt-1 flex w-full justify-between"> | ||
| {items | ||
| .filter(({ name }) => typeof name !== "undefined" && name !== null) | ||
| .map(({ name }) => ( | ||
| <li | ||
| key={`${name}`} | ||
| className={cn({ | ||
| "flex-shrink-0 text-xs font-light text-foreground": true, | ||
| })} | ||
| > | ||
| {name} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GradientLegend; |
106 changes: 106 additions & 0 deletions
106
client/src/components/map/legends/content/rangeland.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,106 @@ | ||
| "use client"; | ||
| import { useMemo } from "react"; | ||
| import { LegendComponent } from "../../types"; | ||
| import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; | ||
| import CircleLegend from "@/components/ui/circle-legend"; | ||
| import { ChevronDownIcon } from "lucide-react"; | ||
| import { RANGELAND_BIOMES, RANGELAND_ECOREGIONS } from "@/containers/datasets/constants"; | ||
| import { useGetRangelands } from "@/types/generated/rangeland"; | ||
| import { useSyncRangelandRegions, useSyncRangelandType } from "@/store/map"; | ||
| import { useTranslations } from "@/i18n"; | ||
| import { useGetLocalizedList } from "@/lib/localized-query"; | ||
|
|
||
| const RangelandLegend = () => { | ||
| const t = useTranslations(); | ||
| const [rangelandType] = useSyncRangelandType(); | ||
| const [rangelandRegions] = useSyncRangelandRegions(); | ||
|
|
||
| const rangelandsQuery = useGetRangelands({ | ||
| populate: "*", | ||
| sort: "title:asc", | ||
| locale: "all", | ||
| }); | ||
|
|
||
| const { data: rangelandsData } = useGetLocalizedList(rangelandsQuery); | ||
|
|
||
| const items = useMemo((): LegendComponent["items"] => { | ||
| const biomes = | ||
| rangelandType === RANGELAND_BIOMES && !!rangelandRegions?.length | ||
| ? rangelandsData?.data?.filter((rd) => rangelandRegions.includes(`${rd?.attributes?.code}`)) | ||
| : rangelandsData?.data; | ||
|
|
||
| const biomesItems = biomes?.map((rd) => { | ||
| const ecoregions = | ||
| rangelandType === RANGELAND_ECOREGIONS | ||
| ? !!rangelandRegions?.length | ||
| ? rd?.attributes?.ecoregions?.data?.filter((rd) => | ||
| rangelandRegions.includes(`${rd?.attributes?.code}`), | ||
| ) | ||
| : rd?.attributes?.ecoregions?.data | ||
| : []; | ||
| return { | ||
| name: rd?.attributes?.title, | ||
| color: rd?.attributes?.color, | ||
| items: ecoregions?.map((e) => ({ | ||
| name: e?.attributes?.title, | ||
| color: e?.attributes?.color, | ||
| })), | ||
| }; | ||
| }); | ||
|
|
||
| return biomesItems | ||
| ? rangelandType === RANGELAND_BIOMES | ||
| ? biomesItems | ||
| : biomesItems.filter((i) => !!i.items?.length) | ||
| : []; | ||
| }, [rangelandRegions, rangelandsData, rangelandType]); | ||
|
|
||
| const subtitle = useMemo(() => { | ||
| if (rangelandType === RANGELAND_BIOMES) { | ||
| return t("Types"); | ||
| } | ||
| if (rangelandType === RANGELAND_ECOREGIONS) { | ||
| return t("Ecoregions"); | ||
| } | ||
| }, [rangelandType]); | ||
|
|
||
| return ( | ||
| <div className="space-y-2"> | ||
| {!!subtitle && <p className="text-xs">{subtitle}</p>} | ||
| <ul className="space-y-2"> | ||
| {items?.map((i) => ( | ||
| <li key={i.name} className="flex gap-4"> | ||
| {i.items?.length ? ( | ||
| <Collapsible> | ||
| <CollapsibleTrigger className="group flex gap-2.5"> | ||
| <ChevronDownIcon className="h-4 w-4 flex-shrink-0 opacity-50 group-data-[state=open]:rotate-180" /> | ||
| {!!i.color && <CircleLegend className="h-3.5 w-3.5" colors={[i.color]} />} | ||
| <span className="text-start text-xs font-light">{i.name}</span> | ||
| </CollapsibleTrigger> | ||
| <CollapsibleContent asChild> | ||
| <ul className="space-y-1.5 pl-12 pt-2"> | ||
| {i.items.map((subItem) => ( | ||
| <li key={subItem.name} className="flex gap-2.5"> | ||
| {!!subItem.color && ( | ||
| <CircleLegend className="h-3.5 w-3.5" colors={[subItem.color]} /> | ||
| )} | ||
| <span className="text-xs font-light">{subItem.name}</span> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </CollapsibleContent> | ||
| </Collapsible> | ||
| ) : ( | ||
| <> | ||
| {!!i.color && <CircleLegend colors={[i.color]} />} | ||
| <span className="text-xs font-light">{i.name}</span> | ||
| </> | ||
| )} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default RangelandLegend; |
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,69 @@ | ||
| import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; | ||
| import { Toggle } from "@/components/ui/toggle"; | ||
| import { CircleHelpIcon } from "lucide-react"; | ||
| import OpacityIcon from "@/svgs/opacity.svg"; | ||
| import Slider from "@/components/ui/slider"; | ||
| import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "@/components/ui/dialog"; | ||
| import EyeOffIcon from "@/svgs/eye-off.svg"; | ||
| import EyeIcon from "@/svgs/eye.svg"; | ||
| import { ReactNode } from "react"; | ||
| import { DialogProps } from "@radix-ui/react-dialog"; | ||
|
|
||
| type LayerVisibilityProps = { | ||
| onChangeVisibility: (v: boolean) => void; | ||
| visible?: boolean; | ||
| }; | ||
| const LayerVisibility = ({ onChangeVisibility, visible }: LayerVisibilityProps) => { | ||
| return ( | ||
| <Toggle className="group h-min px-0" onPressedChange={onChangeVisibility} pressed={visible}> | ||
| <EyeIcon className="h-5 w-5 fill-foreground group-data-[state=off]:hidden" /> | ||
| <EyeOffIcon className="h-5 w-5 fill-foreground group-data-[state=on]:hidden" /> | ||
| </Toggle> | ||
| ); | ||
| }; | ||
|
|
||
| type LayerOpacityProps = { | ||
| opacity?: number; | ||
| onChangeOpacity: (o: number) => void; | ||
| }; | ||
| const LayerOpacity = ({ opacity = 1, onChangeOpacity }: LayerOpacityProps) => ( | ||
| <Popover> | ||
| <PopoverTrigger className="h-min"> | ||
| <OpacityIcon | ||
| style={{ | ||
| opacity: opacity + 0.2, | ||
| }} | ||
| className="h-5 w-5 fill-foreground stroke-1" | ||
| /> | ||
| </PopoverTrigger> | ||
| <PopoverContent side="top" sideOffset={8} className="w-20 bg-background p-3"> | ||
| <Slider | ||
| value={[opacity]} | ||
| onValueChange={(v) => onChangeOpacity(v[0])} | ||
| aria-label="Opacity" | ||
| min={0} | ||
| max={1} | ||
| step={0.01} | ||
| /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
|
|
||
| type LayerInfoProps = DialogProps & { | ||
| info?: ReactNode; | ||
| title?: string; | ||
| }; | ||
|
|
||
| const LayerInfo = ({ info, title, ...props }: LayerInfoProps) => ( | ||
| <Dialog {...props}> | ||
| <DialogTrigger disabled={!info} className="h-min"> | ||
| <CircleHelpIcon className="h-5 w-5 stroke-foreground" /> | ||
| </DialogTrigger> | ||
| <DialogContent> | ||
| <DialogHeader>{title}</DialogHeader> | ||
| <div className="text-sm">{info}</div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
|
|
||
| export { LayerVisibility, LayerOpacity, LayerInfo }; |
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 { LayerInfo, LayerOpacity, LayerVisibility } from "./buttons"; | ||
|
|
||
| type LegendHeaderProps = { | ||
| title?: string; | ||
| subtitle?: string; | ||
| setOpacity: (o: number) => void; | ||
| opacity?: number; | ||
| setVisibility: (v: boolean) => void; | ||
| visible: boolean; | ||
| info?: string; | ||
| }; | ||
|
|
||
| const LegendHeader = ({ | ||
| title, | ||
| subtitle, | ||
| setOpacity, | ||
| setVisibility, | ||
| info, | ||
| opacity, | ||
| visible, | ||
| }: LegendHeaderProps) => { | ||
| return ( | ||
| <div> | ||
| <div className="flex items-center gap-2"> | ||
| <span className="flex-1 font-medium">{title}</span> | ||
| <LayerOpacity onChangeOpacity={setOpacity} opacity={opacity} /> | ||
| {!!info && <LayerInfo info={info} title={title} />} | ||
| <LayerVisibility onChangeVisibility={setVisibility} visible={visible} /> | ||
| </div> | ||
| {subtitle && <span className="text-xs">{subtitle}</span>} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LegendHeader; |
Oops, something went wrong.