diff --git a/components/forms/MemberAttributes.tsx b/components/forms/MemberAttributes.tsx
index e36ed94..838a321 100644
--- a/components/forms/MemberAttributes.tsx
+++ b/components/forms/MemberAttributes.tsx
@@ -23,6 +23,13 @@ export interface MemberAttributesProps {
export function MemberAttributes(props: MemberAttributesProps) {
const { title, subtitle, isRequired, attributes, onAdd, onChange, onRemove } = props
+ const calculateMemberPercent = (id: string) => {
+ const total = attributes.reduce((acc, [, { weight }]) => acc + (weight ? weight : 0), 0)
+ // return attributes.map(([id, { weight }]) => [id, weight / total])
+ const memberWeight = attributes.find(([memberId]) => memberId === id)?.[1].weight
+ return memberWeight ? memberWeight / total : 0
+ }
+
return (
{attributes.map(([id], i) => (
@@ -34,6 +41,7 @@ export function MemberAttributes(props: MemberAttributesProps) {
onAdd={onAdd}
onChange={onChange}
onRemove={onRemove}
+ percentage={(Number(calculateMemberPercent(id)) * 100).toFixed(2)}
/>
))}
@@ -47,9 +55,18 @@ export interface MemberAttributeProps {
onChange: MemberAttributesProps['onChange']
onRemove: MemberAttributesProps['onRemove']
defaultAttribute: Attribute
+ percentage?: string
}
-export function MemberAttribute({ id, isLast, onAdd, onChange, onRemove, defaultAttribute }: MemberAttributeProps) {
+export function MemberAttribute({
+ id,
+ isLast,
+ onAdd,
+ onChange,
+ onRemove,
+ defaultAttribute,
+ percentage,
+}: MemberAttributeProps) {
const Icon = useMemo(() => (isLast ? FaPlus : FaMinus), [isLast])
const htmlId = useId()
@@ -64,7 +81,7 @@ export function MemberAttribute({ id, isLast, onAdd, onChange, onRemove, default
const weightState = useNumberInputState({
id: `ma-weight-${htmlId}`,
name: `ma-weight-${htmlId}`,
- title: `Weight`,
+ title: `Weight ${percentage ? `: ${percentage}%` : ''}`,
defaultValue: defaultAttribute.weight,
})
@@ -73,7 +90,7 @@ export function MemberAttribute({ id, isLast, onAdd, onChange, onRemove, default
}, [addressState.value, weightState.value, id])
return (
-