Custom reports header fix (#2085)

* tablechanges

* notes

* trigger rerun

* fixes

* lint fixes

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}

packages/desktop-client/src/components/reports/ReportTable.tsx

-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>

packages/desktop-client/src/components/reports/ReportTableHeader.tsx

-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;

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,
           }}
         />

packages/desktop-client/src/components/reports/ReportTableTotals.tsx

-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;

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;

upcoming-release-notes/2085.md

+---
+category: Bugfix
+authors: [carkom]
+---
+
+Realign and fix header/totals row for table graph in custom reports