diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 0c8825046cad60f2cb783a9cd8ba8bd39f191e14..66574f564d77df38f44e7addd1cd3e99d64bad04 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -48,9 +48,19 @@ function ChooseGraph({
const listScrollRef = useRef<HTMLDivElement>(null);
const totalScrollRef = useRef<HTMLDivElement>(null);
- const handleScrollTotals = scroll => {
- headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
- listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+ const handleScroll = scroll => {
+ if (scroll.target.id === 'header') {
+ totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+ listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+ }
+ if (scroll.target.id === 'total') {
+ headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+ listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+ }
+ if (scroll.target.id === 'list') {
+ headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+ totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+ }
};
if (graphType === 'AreaGraph') {
@@ -96,7 +106,8 @@ function ChooseGraph({
<View>
<ReportTableHeader
headerScrollRef={headerScrollRef}
- interval={mode === 'time' && months}
+ handleScroll={handleScroll}
+ interval={mode === 'time' && data.monthData}
scrollWidth={scrollWidth}
groupBy={groupBy}
balanceType={balanceType}
@@ -104,6 +115,7 @@ function ChooseGraph({
<ReportTable
saveScrollWidth={saveScrollWidth}
listScrollRef={listScrollRef}
+ handleScroll={handleScroll}
>
<ReportTableList
data={data}
@@ -116,7 +128,7 @@ function ChooseGraph({
</ReportTable>
<ReportTableTotals
totalScrollRef={totalScrollRef}
- handleScrollTotals={handleScrollTotals}
+ handleScroll={handleScroll}
scrollWidth={scrollWidth}
data={data}
mode={mode}
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
index a16f47c4cd938b4c6f24e86f346c040bed26fbab..d2d4e5d209be773f53c6cdcc1685e194c4f8c4fe 100644
--- a/packages/desktop-client/src/components/reports/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -1,4 +1,9 @@
-import React, { useLayoutEffect, useRef, type ReactNode } from 'react';
+import React, {
+ type UIEventHandler,
+ useLayoutEffect,
+ useRef,
+ type ReactNode,
+} from 'react';
import { type RefProp } from 'react-spring';
import { type CSSProperties } from '../../style';
@@ -9,6 +14,7 @@ type ReportTableProps = {
listScrollRef?: RefProp<HTMLDivElement>;
style?: CSSProperties;
children?: ReactNode;
+ handleScroll?: UIEventHandler<HTMLDivElement>;
};
export default function ReportTable({
@@ -16,6 +22,7 @@ export default function ReportTable({
listScrollRef,
style,
children,
+ handleScroll,
}: ReportTableProps) {
const contentRef = useRef<HTMLDivElement>(null);
@@ -28,6 +35,8 @@ export default function ReportTable({
return (
<View
innerRef={listScrollRef}
+ onScroll={handleScroll}
+ id="list"
style={{
overflowY: 'auto',
scrollbarWidth: 'none',
@@ -38,7 +47,6 @@ export default function ReportTable({
...style,
}}
tabIndex={1}
- data-testid="table"
>
<View>
<div ref={contentRef}>{children}</div>
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index 7a1f5be90e56aa752f6d25e0b99bf52ec1871c12..da1e795258ab0ee5d33bf6007c8c7bd8cbe49587 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -1,55 +1,60 @@
-import React, { type Ref } from 'react';
-
-import * as d from 'date-fns';
+import React, { type UIEventHandler } from 'react';
+import { type RefProp } from 'react-spring';
import { styles, theme } from '../../style';
import View from '../common/View';
import { Row, Cell } from '../table';
-import { type Month } from './entities';
+import { type MonthData } from './entities';
type ReportTableHeaderProps = {
scrollWidth?: number;
groupBy: string;
- interval?: Month[];
+ interval?: MonthData[];
balanceType: string;
- headerScrollRef?: Ref<HTMLDivElement>;
+ headerScrollRef: RefProp<HTMLDivElement>;
+ handleScroll?: UIEventHandler<HTMLDivElement>;
};
-export default function ReportTableHeader({
+function ReportTableHeader({
scrollWidth,
groupBy,
interval,
balanceType,
headerScrollRef,
+ handleScroll,
}: ReportTableHeaderProps) {
return (
- <View
- innerRef={headerScrollRef}
+ <Row
+ collapsed={true}
style={{
- overflowX: 'auto',
- scrollbarWidth: 'none',
- '::-webkit-scrollbar': { display: 'none' },
justifyContent: 'center',
- borderTopWidth: 1,
+ borderBottomWidth: 1,
borderColor: theme.tableBorder,
+ color: theme.tableHeaderText,
+ backgroundColor: theme.tableHeaderBackground,
+ fontWeight: 600,
}}
>
- <Row
- collapsed={true}
+ <View
+ innerRef={headerScrollRef}
+ onScroll={handleScroll}
+ id="header"
style={{
- color: theme.tableHeaderText,
- backgroundColor: theme.tableHeaderBackground,
- fontWeight: 600,
+ overflowX: 'auto',
+ scrollbarWidth: 'none',
+ '::-webkit-scrollbar': { display: 'none' },
+ flexDirection: 'row',
+ flex: 1,
}}
>
<Cell
style={{
- minWidth: 125,
+ width: 120,
+ flexShrink: 0,
...styles.tnum,
}}
value={groupBy}
- width="flex"
/>
{interval
? interval.map((header, index) => {
@@ -60,8 +65,7 @@ export default function ReportTableHeader({
...styles.tnum,
}}
key={index}
- // eslint-disable-next-line rulesdir/typography
- value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
+ value={header.date}
width="flex"
/>
);
@@ -102,8 +106,9 @@ export default function ReportTableHeader({
value="Average"
width="flex"
/>
- {scrollWidth > 0 && <Cell width={scrollWidth} />}
- </Row>
- </View>
+ </View>
+ </Row>
);
}
+
+export default ReportTableHeader;
diff --git a/packages/desktop-client/src/components/reports/ReportTableList.tsx b/packages/desktop-client/src/components/reports/ReportTableList.tsx
index ddfdeca2c409f0f96f18c39c4dbb55ea4f398cae..40939b0e640a38d9beb63816ebe5021c72d2be18 100644
--- a/packages/desktop-client/src/components/reports/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableList.tsx
@@ -47,10 +47,10 @@ const TableRow = memo(
>
<Cell
value={item[groupByItem]}
- width="flex"
title={item[groupByItem].length > 12 && item[groupByItem]}
style={{
- minWidth: 125,
+ width: 120,
+ flexShrink: 0,
...styles.tnum,
}}
/>
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index 625ba16f81f08b7fef78ec5d06e734348bf4de32..3fa158a03b97ae996e2390afdce3dd21af79c0ab 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -1,4 +1,4 @@
-import React, { type UIEventHandler } from 'react';
+import React, { type UIEventHandler, useLayoutEffect, useState } from 'react';
import { type RefProp } from 'react-spring';
import {
@@ -20,45 +20,63 @@ type ReportTableTotalsProps = {
mode: string;
monthsCount: number;
totalScrollRef: RefProp<HTMLDivElement>;
- handleScrollTotals: UIEventHandler<HTMLDivElement>;
+ handleScroll: UIEventHandler<HTMLDivElement>;
};
-export default function ReportTableTotals({
+function ReportTableTotals({
data,
scrollWidth,
balanceTypeOp,
mode,
monthsCount,
totalScrollRef,
- handleScrollTotals,
+ handleScroll,
}: ReportTableTotalsProps) {
+ const [scrollWidthTotals, setScrollWidthTotals] = useState(0);
+
+ useLayoutEffect(() => {
+ if (totalScrollRef.current) {
+ const [parent, child] = [
+ totalScrollRef.current.offsetParent
+ ? totalScrollRef.current.parentElement.scrollHeight
+ : 0,
+ totalScrollRef.current ? totalScrollRef.current.scrollHeight : 0,
+ ];
+ setScrollWidthTotals(parent > 0 && child > 0 && parent - child);
+ }
+ });
+
const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
return (
- <View
- innerRef={totalScrollRef}
- onScroll={handleScrollTotals}
+ <Row
+ collapsed={true}
+ height={32 + scrollWidthTotals}
style={{
- overflowX: 'auto',
borderTopWidth: 1,
borderColor: theme.tableBorder,
justifyContent: 'center',
+ color: theme.tableHeaderText,
+ backgroundColor: theme.tableHeaderBackground,
+ fontWeight: 600,
}}
>
- <Row
- collapsed={true}
+ <View
+ innerRef={totalScrollRef}
+ onScroll={handleScroll}
+ id="total"
style={{
- color: theme.tableHeaderText,
- backgroundColor: theme.tableHeaderBackground,
- fontWeight: 600,
+ overflowX: 'auto',
+ flexDirection: 'row',
+ flex: 1,
}}
>
<Cell
style={{
- minWidth: 125,
+ width: 120,
+ flexShrink: 0,
...styles.tnum,
}}
value="Totals"
- width="flex"
/>
{mode === 'time'
? data.monthData.map(item => {
@@ -133,9 +151,9 @@ export default function ReportTableTotals({
width="flex"
privacyFilter
/>
-
- {scrollWidth > 0 && <Cell width={scrollWidth} />}
- </Row>
- </View>
+ </View>
+ </Row>
);
}
+
+export default ReportTableTotals;
diff --git a/packages/desktop-client/src/components/reports/entities.d.ts b/packages/desktop-client/src/components/reports/entities.d.ts
index d58698837380243eb08253b585ee0799b04bf574..db251812ee7ecca053f815f6b96e5d7a3c660072 100644
--- a/packages/desktop-client/src/components/reports/entities.d.ts
+++ b/packages/desktop-client/src/components/reports/entities.d.ts
@@ -31,19 +31,16 @@ export type MonthData = {
totalTotals: number;
};
-/* this will be used in a future PR
-
-export type GroupedEntity = {
+type GroupedEntity = {
id: string;
name: string;
date?: string;
- monthData: Array<MonthData>;
- categories?: Array<ItemEntity>;
+ monthData: MonthData[];
+ categories?: ItemEntity[];
totalAssets: number;
totalDebts: number;
totalTotals: number;
};
-*/
export type Month = {
month: string;
diff --git a/upcoming-release-notes/2085.md b/upcoming-release-notes/2085.md
new file mode 100644
index 0000000000000000000000000000000000000000..5f3fefcdb98ed17dfb4fbcae0283ae72e447052b
--- /dev/null
+++ b/upcoming-release-notes/2085.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [carkom]
+---
+
+Realign and fix header/totals row for table graph in custom reports