Skip to content

Commit

Permalink
adds inventory/scenario legends
Browse files Browse the repository at this point in the history
  • Loading branch information
andresgnlez committed Sep 25, 2023
1 parent e0e9af6 commit 7f4846a
Show file tree
Hide file tree
Showing 53 changed files with 1,900 additions and 743 deletions.
9 changes: 9 additions & 0 deletions app/components/collapsible/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';

const Collapsible = CollapsiblePrimitive.Root;

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;

export { Collapsible, CollapsibleTrigger, CollapsibleContent };
18 changes: 9 additions & 9 deletions app/components/features/selected-item/component.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { useCallback, useMemo, useState, ReactNode } from 'react';

import { HiEye, HiEyeOff } from 'react-icons/hi';

import { useFeatureFlags } from 'hooks/feature-flags';

import Button from 'components/button';
Expand All @@ -14,11 +16,9 @@ import STRAT_1_IMG from 'images/info-buttons/img_strat_1.png';
import STRAT_2_IMG from 'images/info-buttons/img_strat_2.png';
import STRAT_3_IMG from 'images/info-buttons/img_strat_3.png';

import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
import INTERSECT_SVG from 'svgs/ui/intersect.svg?sprite';
import PLUS_SVG from 'svgs/ui/plus.svg?sprite';
import REMOVE_SVG from 'svgs/ui/remove.svg?sprite';
import SHOW_SVG from 'svgs/ui/show.svg?sprite';
import SPLIT_SVG from 'svgs/ui/split.svg?sprite';

export interface ItemProps {
Expand Down Expand Up @@ -132,12 +132,7 @@ export const Item: React.FC<ItemProps> = ({
[className]: !!className,
})}
>
<header
className={cn({
'border-l-4 px-4 py-2': true,
'border-yellow-500': true,
})}
>
<header className="border-l-4 border-yellow-400 px-4 py-2">
<div className="flex items-start justify-between">
<h2 className="font-heading text-sm">{name}</h2>

Expand Down Expand Up @@ -181,7 +176,12 @@ export const Item: React.FC<ItemProps> = ({
'text-gray-400': !isShown,
})}
>
<Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} />
{isShown ? (
<HiEye className="h-4 w-4 text-blue-400" />
) : (
<HiEyeOff className="h-4 w-4" />
)}
{/* <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} /> */}
</button>
</Tooltip>

Expand Down
95 changes: 0 additions & 95 deletions app/components/map/legend/component.tsx

This file was deleted.

63 changes: 63 additions & 0 deletions app/components/map/legend/group/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { ComponentProps, PropsWithChildren, useEffect, useState } from 'react';

import { HiChevronDown, HiChevronUp } from 'react-icons/hi';

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/collapsible';
import { cn } from 'utils/cn';

const ICON_COMMON_CLASSES =
'text-white group-data-[state=open]:text-blue-400 group-data-[disabled]:hidden';

const LegendGroup = ({
title,
children,
defaultOpen = true,
className,
disabled = false,
...props
}: PropsWithChildren<
ComponentProps<typeof Collapsible> & {
title: string;
}
>): JSX.Element => {
const [isOpen, setOpen] = useState(defaultOpen && !disabled);

useEffect(() => {
if (!disabled && defaultOpen) setOpen(true);
}, [disabled, defaultOpen]);

return (
<Collapsible
defaultOpen={defaultOpen && !disabled}
onOpenChange={setOpen}
className={cn({
group: true,
[className]: Boolean(className),
})}
disabled={disabled}
open={isOpen}
{...props}
>
<CollapsibleTrigger className="py-2">
<header
className={cn({
'flex items-center space-x-1': true,
'group-data-[disabled]:pl-4': true,
})}
>
{isOpen ? (
<HiChevronUp className={ICON_COMMON_CLASSES} />
) : (
<HiChevronDown className={ICON_COMMON_CLASSES} />
)}
<h4 className="text-sm font-semibold group-data-[disabled]:text-gray-300 group-data-[state=open]:text-blue-400">
{title}
</h4>
</header>
</CollapsibleTrigger>
<CollapsibleContent>{children}</CollapsibleContent>
</Collapsible>
);
};

export default LegendGroup;
1 change: 0 additions & 1 deletion app/components/map/legend/index.ts

This file was deleted.

54 changes: 54 additions & 0 deletions app/components/map/legend/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, { useMemo, Children, isValidElement, PropsWithChildren } from 'react';

import { ScrollArea } from 'components/scroll-area';
import { cn } from 'utils/cn';

import SortableList from './sortable/list';

export const Legend = ({
open,
children,
className = '',
sortable,
onChangeOrder,
}: PropsWithChildren<{
open: boolean;
className?: string;
sortable?: {
enabled: boolean;
handle: boolean;
handleIcon: React.ReactNode;
};
onChangeOrder?: (id: string[]) => void;
onChangeOpen?: (open: boolean) => void;
}>): JSX.Element => {
const isChildren = useMemo(() => {
return !!Children.count(Children.toArray(children).filter((c) => isValidElement(c)));
}, [children]);

return (
<div
className={cn({
'flex flex-col': true,
hidden: !isChildren,
[className]: !!className,
})}
>
{open && (
<ScrollArea className="relative flex w-full flex-col rounded-3xl bg-black px-2 py-2 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-black before:via-black after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-black after:via-black">
<div className="divide-y divide-gray-600 divide-opacity-50 py-2">
{!!sortable && (
<SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
{children}
</SortableList>
)}

{!sortable && children}
</div>
</ScrollArea>
)}
</div>
);
};

export default Legend;
1 change: 0 additions & 1 deletion app/components/map/legend/item/index.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Children, isValidElement, ReactNode, useMemo, useState } from 'react';

import { useNumberFormatter } from '@react-aria/i18n';
import { HiEye, HiEyeOff } from 'react-icons/hi';

import Slider from 'components/forms/slider';
import Icon from 'components/icon';
Expand All @@ -9,8 +10,6 @@ import { cn } from 'utils/cn';

import OPACITY_SVG from 'svgs/map/opacity.svg?sprite';
import DRAG_SVG from 'svgs/ui/drag.svg?sprite';
import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
import SHOW_SVG from 'svgs/ui/show.svg?sprite';

export interface LegendItemProps {
id: string;
Expand All @@ -35,7 +34,7 @@ export interface LegendItemProps {
};
theme?: 'dark' | 'light';
className?: string;
onChangeOpacity?: () => void;
onChangeOpacity?: (opacity: number) => void;
onChangeVisibility?: () => void;
}

Expand Down Expand Up @@ -63,8 +62,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
});
return chldn && chldn.some((c) => !!c);
}, [children]);

const { opacity = 1, visibility = true } = settings || {};
const { opacity = 1, visibility = false } = settings || {};

const { format } = useNumberFormatter({
style: 'percent',
Expand All @@ -74,21 +72,20 @@ export const LegendItem: React.FC<LegendItemProps> = ({
<div
key={id}
className={cn({
'px-5 py-2.5': !className,
'space-y-2.5 px-5 py-2': true,
[className]: !!className,
})}
>
<header className="relative mb-1 flex justify-between">
<header className="relative flex justify-between">
<div
className={cn({
relative: true,
'pl-5': icon,
'flex items-center space-x-2': true,
})}
>
{icon && <div className="absolute left-0 top-0">{icon}</div>}
{icon ?? null}
<div
className={cn({
'font-heading text-sm': true,
'text-sm': true,
'text-white': theme === 'dark' || !theme,
'text-gray-800': theme === 'light',
})}
Expand All @@ -109,7 +106,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
</button>
)}

<div className="flex space-x-3">
<div className="flex space-x-[10px]">
{settingsManager?.opacity && (
<div className="flex">
<Tooltip
Expand Down Expand Up @@ -156,7 +153,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
type="button"
className={cn({
'flex h-5 w-5 items-center justify-center text-white': true,
'text-gray-400': opacity !== 1,
'text-white': opacity,
})}
>
<Icon className="h-4 w-4 pt-px" icon={OPACITY_SVG} />
Expand All @@ -183,17 +180,19 @@ export const LegendItem: React.FC<LegendItemProps> = ({
'text-gray-400': !visibility,
})}
>
<Icon className="h-4 w-4" icon={visibility ? SHOW_SVG : HIDE_SVG} />
{visibility ? (
<HiEye className="h-4 w-4 text-blue-400" />
) : (
<HiEyeOff className="h-4 w-4" />
)}
</button>
</Tooltip>
</div>
)}
</div>
</header>

<div className="text-sm text-gray-400">{description}</div>

{validChildren && <div className="mt-2.5">{children}</div>}
{description && <div className="text-sm text-gray-400">{description}</div>}
{validChildren && children}
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions app/components/map/legend/types.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type LegendItemType = 'matrix' | 'basic' | 'choropleth' | 'gradient';
1 change: 0 additions & 1 deletion app/components/map/legend/types/basic/index.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export const LegendTypeBasic: React.FC<LegendTypeBasicProps> = ({
className = '',
items,
}: LegendTypeBasicProps) => {
if (items.length === 0) return null;

return (
<div
className={cn({
Expand Down
1 change: 0 additions & 1 deletion app/components/map/legend/types/choropleth/index.ts

This file was deleted.

1 change: 0 additions & 1 deletion app/components/map/legend/types/gradient/index.ts

This file was deleted.

Loading

0 comments on commit 7f4846a

Please sign in to comment.