Merge pull request #384 from zhang-accounting/fix/stack-display-for-m…

…ultiple-commodity-in-account-page Fix/stack display for multiple commodity in account page
zhang-accounting · Oct 18, 2024 · e1ffd3b · e1ffd3b
2 parents 0468db0 + dbb825d
commit e1ffd3b
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 24 deletions.
diff --git a/frontend/src/components/AccountBalanceHistoryGraph.tsx b/frontend/src/components/AccountBalanceHistoryGraph.tsx
@@ -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>

diff --git a/frontend/src/components/AccountLine.tsx b/frontend/src/components/AccountLine.tsx
@@ -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">
@@ -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>
@@ -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>
             )}
@@ -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} />)}
     </>
   );
 }
diff --git a/frontend/src/components/Amount.tsx b/frontend/src/components/Amount.tsx
@@ -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>}

diff --git a/frontend/src/components/ReportGraph.tsx b/frontend/src/components/ReportGraph.tsx
@@ -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>
     </>

diff --git a/frontend/src/components/journalLines/tableView/TableViewTransactionLine.tsx b/frontend/src/components/journalLines/tableView/TableViewTransactionLine.tsx
@@ -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">
@@ -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}

diff --git a/frontend/src/pages/SingleAccount.tsx b/frontend/src/pages/SingleAccount.tsx
@@ -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}`);
@@ -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>
@@ -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>
@@ -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>
                   </>
@@ -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>