Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/stack display for multiple commodity in account page #384

Merged
merged 4 commits into from
Oct 18, 2024
Merged

Fix/stack display for multiple commodity in account page #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d3ced26
fix: display commodities in col
Kilerd Oct 18, 2024
503d67d
feat: remove gap in trx line
Kilerd Oct 18, 2024
78791e1
fix: correct indent of account tiers
Kilerd Oct 18, 2024
dbb825d
feat: remove dot and only active dot on hover
Kilerd Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions frontend/src/components/AccountBalanceHistoryGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,12 @@ export function AccountBalanceHistoryGraph(props: Props) {
>
<CartesianGrid vertical={false} />
<XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
<YAxis hide type="number" domain={[minAmount, maxAmount]} yAxisId="default" scale="log" padding={{ top: 20, bottom: 20 }} />
<YAxis hide type="number" domain={[minAmount, maxAmount]} yAxisId="default" scale="log"
padding={{ top: 20, bottom: 20 }} />
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
{series.map((it) => (
<Line dataKey={it.name} type="monotone" stroke={it.color} strokeWidth={2} dot yAxisId="default" />
<Line dataKey={it.name} type="monotone" stroke={it.color} strokeWidth={2} dot={false} activeDot
yAxisId="default" />
))}
</LineChart>
</ChartContainer>
Expand Down
13 changes: 7 additions & 6 deletions frontend/src/components/AccountLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ export default function AccountLine({ data, spacing }: Props) {
<div style={{ width: `${spacing * 20}px` }}></div>
{hasChildren ? (
isShow ? (
<ChevronDownIcon onClick={() => setCollapse(!isShow)} className="h-5 w-5 cursor-pointer" />
<ChevronDownIcon onClick={() => setCollapse(!isShow)} className="h-4 w-4 cursor-pointer" />
) : (
<ChevronRightIcon onClick={() => setCollapse(!isShow)} className="h-5 w-5 cursor-pointer" />
<ChevronRightIcon onClick={() => setCollapse(!isShow)} className="h-4 w-4 cursor-pointer" />
)
) : (
<div style={{ width: `${spacing * 20}px` }}></div>
<div style={{ width: `20px` }}></div>
)}
<div onClick={onNavigate} className="cursor-pointer">
<div className="flex items-center gap-2">
Expand All @@ -62,7 +62,7 @@ export default function AccountLine({ data, spacing }: Props) {
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<div className={cn(data.isLeaf ? 'cursor-pointer' : '', 'flex gap-2')}>
<div className={cn(data.isLeaf ? 'cursor-pointer' : 'text-gray-500', 'flex gap-2')}>
<span>≈</span> <Amount amount={data.amount.total} currency={data.amount.commodity}></Amount>
</div>
</TooltipTrigger>
Expand All @@ -83,7 +83,7 @@ export default function AccountLine({ data, spacing }: Props) {
</Tooltip>
</TooltipProvider>
) : (
<div className={cn(data.isLeaf ? '' : 'text-gray-500', 'flex gap-2')}>
<div className={cn(data.isLeaf ? ' ' : 'text-gray-500', 'flex gap-2')}>
<Amount amount={data.amount.total} currency={data.amount.commodity}></Amount>
</div>
)}
Expand All @@ -93,7 +93,8 @@ export default function AccountLine({ data, spacing }: Props) {
{isShow &&
Object.keys(data.children)
.sort()
.map((child) => <AccountLine key={data.children[child].path} data={data.children[child]} spacing={spacing + 1} />)}
.map((child) => <AccountLine key={data.children[child].path} data={data.children[child]}
spacing={spacing + 1} />)}
</>
);
}
4 changes: 3 additions & 1 deletion frontend/src/components/Amount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,12 @@ export default function Amount({ amount, currency, negative, mask, className }:
const displayedValue = value.abs().toFormat(commodity?.precision ?? 2);
const maskedValue = shouldMask ? displayedValue.replace(/\d/g, '*') : displayedValue;
return (
<span className={`inline-flex gap-[calc(theme.spacing.xs*0.25)] ${className}`}>
<span className={`inline-flex gap-0.5 ${className}`}>
{isNegative && <span className="font-feature-settings-tnum">-</span>}
<span className="font-feature-settings-tnum">
{commodity?.prefix}
</span>
<span className="font-feature-settings-tnum">
{maskedValue}
</span>
{commodity?.suffix && <span className="font-feature-settings-tnum">{commodity?.suffix}</span>}
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/ReportGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,17 @@ export default function ReportGraph(props: Props) {
<ComposedChart accessibilityLayer data={data}>
<XAxis dataKey="date" tickLine={false} tickMargin={10} axisLine={false} />

<YAxis hide type="number" domain={total_domain} yAxisId="left" scale="log" padding={{ top: 20, bottom: 20 }} />
<YAxis hide type="number" domain={total_domain} yAxisId="left" scale="log"
padding={{ top: 20, bottom: 20 }} />
<YAxis hide type="number" domain={[0, max_income]} yAxisId="right" padding={{ top: 20, bottom: 0 }} />

<ChartTooltip content={<ChartTooltipContent />} />
<CartesianGrid vertical={false} />

<Bar dataKey="income" stackId="a" fill="#3b82f6" yAxisId="right" />
<Bar dataKey="expense" stackId="a" fill="#ef4444" yAxisId="right" />
<Line type="monotone" dataKey="total" stroke="var(--color-total)" strokeWidth={2} dot={true} yAxisId="left" />
<Line type="monotone" dataKey="total" stroke="var(--color-total)" strokeWidth={2} dot={false} activeDot
yAxisId="left" />
</ComposedChart>
</ChartContainer>
</>
Expand Down
11 changes: 7 additions & 4 deletions frontend/src/components/journalLines/tableView/TableViewTransactionLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ export default function TableViewTransactionLine({ data }: Props) {
const summary = calculate(data);
const hasDocuments = data.metas.some((meta) => meta.key === 'document');
return (
<TableRow className={cn('p-1', !data.is_balanced && 'border-l-[3px] border-l-red-500', data.flag === '!' && 'border-l-[3px] border-l-orange-500')}>
<TableRow
className={cn('p-1', !data.is_balanced && 'border-l-[3px] border-l-red-500', data.flag === '!' && 'border-l-[3px] border-l-orange-500')}>
<TableCell>{time}</TableCell>
<TableCell>
<Badge color="gray" variant="outline">
Expand All @@ -63,21 +64,23 @@ export default function TableViewTransactionLine({ data }: Props) {
<PayeeNarration payee={data.payee} narration={data.narration} onClick={openPreviewModal} />
{data.links &&
data.links.map((it) => (
<Badge key={it} className="cursor-pointer" color="blue" variant="secondary" onClick={() => handleLinkClick(it)()}>
<Badge key={it} className="cursor-pointer" color="blue" variant="secondary"
onClick={() => handleLinkClick(it)()}>
^{it}
</Badge>
))}
{data.tags &&
data.tags.map((tag) => (
<Badge key={tag} className="cursor-pointer" color="blue" variant="secondary" onClick={() => handleTagClick(tag)()}>
<Badge key={tag} className="cursor-pointer" color="blue" variant="secondary"
onClick={() => handleTagClick(tag)()}>
#{tag}
</Badge>
))}
{hasDocuments && <Files className="w-4 h-4 text-gray-500" />}
</div>
</TableCell>
<TableCell className="">
<div className="flex flex-col items-end gap-2">
<div className="flex flex-col items-end">
{Array.from(summary.values()).map((each) => (
<Amount
key={each.currency}
Expand Down
25 changes: 16 additions & 9 deletions frontend/src/pages/SingleAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ function SingleAccount() {
const [lightboxSrc, setLightboxSrc] = useState<string | undefined>(undefined);

const { data: account, error } = useSWR<AccountInfo>(`/api/accounts/${accountName}`, fetcher);
const { data: account_balance_data, error: account_balance_error } = useSWR<AccountBalanceHistory>(`/api/accounts/${accountName}/balances`, fetcher);
const {
data: account_balance_data,
error: account_balance_error,
} = useSWR<AccountBalanceHistory>(`/api/accounts/${accountName}/balances`, fetcher);

const ledgerTitle = useAtomValue(titleAtom);
useDocumentTitle(`${accountName} | Accounts - ${ledgerTitle}`);
Expand All @@ -53,7 +56,8 @@ function SingleAccount() {
<div className="flex items-center gap-4 pb-6">
<div>
<div className="flex items-center gap-2">
<h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">{account.alias ?? account.name}</h1>
<h1
className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">{account.alias ?? account.name}</h1>
<Badge variant="outline" className="ml-auto sm:ml-0">
{account.status}
</Badge>
Expand All @@ -63,16 +67,16 @@ function SingleAccount() {

<div className="hidden items-center gap-2 md:ml-auto md:flex">
<div className="text-right">
<div className="flex items-center justify-end gap-2 text-lg">
<div className="flex items-center justify-end gap-1 text-lg">
{Object.keys(account.amount.detail).length > 1 && <p>≈</p>}
<Amount amount={account.amount.calculated.number} currency={account.amount.calculated.currency}></Amount>
</div>
{Object.keys(account.amount.detail).length > 1 && (
<>
<div className="flex flex-col gap-0.5 items-end text-base">
{Object.entries(account.amount.detail ?? {}).map(([key, value]) => (
<Amount key={key} className="text-lg" amount={value} currency={key}></Amount>
<Amount key={key} amount={value} currency={key}></Amount>
))}
</>
</div>
)}
</div>
</div>
Expand Down Expand Up @@ -154,10 +158,12 @@ function SingleAccount() {
render={(data: Document[]) => (
<>
<ImageLightBox src={lightboxSrc} onChange={setLightboxSrc} />
<div className="grid grid-cols-1 xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4">
<div
className="grid grid-cols-1 xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4">
<AccountDocumentUpload url={`/api/accounts/${accountName}/documents`} />
{data.map((document, idx) => (
<DocumentPreview onClick={(path) => setLightboxSrc(path)} key={idx} uri={document.path} filename={document.path} />
<DocumentPreview onClick={(path) => setLightboxSrc(path)} key={idx} uri={document.path}
filename={document.path} />
))}
</div>
</>
Expand All @@ -184,7 +190,8 @@ function SingleAccount() {
</TableHeader>
<TableBody>
{Object.entries(account?.amount.detail ?? {}).map(([commodity, amount]) => (
<AccountBalanceCheckLine key={commodity} currentAmount={amount} commodity={commodity} accountName={account.name} />
<AccountBalanceCheckLine key={commodity} currentAmount={amount} commodity={commodity}
accountName={account.name} />
))}
</TableBody>
</Table>
Expand Down
Loading