Custom Reports compact additions (actualbudget#2245)

* compact additions * notes * vrt fix * revert AnchorLink * Update upcoming-release-notes/2245.md Co-authored-by: Matiss Janis Aboltins <[email protected]> * merge fixes --------- Co-authored-by: Matiss Janis Aboltins <[email protected]>
FlorianLang06 · Jan 19, 2024 · 7ecab55 · 7ecab55
1 parent 3622ebe
commit 7ecab55
Show file tree

Hide file tree

Showing 15 changed files with 107 additions and 56 deletions.
diff --git a/packages/desktop-client/src/components/common/MenuButton.tsx b/packages/desktop-client/src/components/common/MenuButton.tsx
@@ -1,13 +1,19 @@
-// @ts-strict-ignore
 import React from 'react';
 
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
+import { type CSSProperties } from '../../style';
 
 import { Button } from './Button';
 
-export function MenuButton({ onClick }) {
+export function MenuButton({
+  onClick,
+  style,
+}: {
+  onClick: () => void;
+  style?: CSSProperties;
+}) {
   return (
-    <Button type="bare" onClick={onClick} aria-label="Menu">
+    <Button type="bare" onClick={onClick} aria-label="Menu" style={style}>
       <SvgDotsHorizontalTriple
         width={15}
         height={15}

diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -6,6 +6,7 @@ import {
   type Month,
 } from 'loot-core/src/types/models/reports';
 
+import { type CSSProperties } from '../../style';
 import { View } from '../common/View';
 
 import { AreaGraph } from './graphs/AreaGraph';
@@ -25,11 +26,12 @@ type ChooseGraphProps = {
   graphType: string;
   balanceType: string;
   groupBy: string;
-  showEmpty: boolean;
-  scrollWidth: number;
-  setScrollWidth: (value: number) => void;
-  months: Month[];
-  viewLabels: boolean;
+  scrollWidth?: number;
+  setScrollWidth?: (value: number) => void;
+  months?: Month[];
+  viewLabels?: boolean;
+  compact?: boolean;
+  style?: CSSProperties;
 };
 
 export function ChooseGraph({
@@ -38,12 +40,14 @@ export function ChooseGraph({
   graphType,
   balanceType,
   groupBy,
-  showEmpty,
   scrollWidth,
   setScrollWidth,
   months,
   viewLabels,
+  compact,
+  style,
 }: ChooseGraphProps) {
+  const graphStyle = compact ? { ...style } : { flexGrow: 1 };
   const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
   const groupByData =
     groupBy === 'Category'
@@ -78,7 +82,8 @@ export function ChooseGraph({
   if (graphType === 'AreaGraph') {
     return (
       <AreaGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         data={data}
         balanceTypeOp={balanceTypeOp}
         viewLabels={viewLabels}
@@ -88,7 +93,8 @@ export function ChooseGraph({
   if (graphType === 'BarGraph') {
     return (
       <BarGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         data={data}
         groupBy={groupBy}
         balanceTypeOp={balanceTypeOp}
@@ -97,12 +103,15 @@ export function ChooseGraph({
     );
   }
   if (graphType === 'BarLineGraph') {
-    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />;
+    return (
+      <BarLineGraph style={graphStyle} compact={compact} graphData={data} />
+    );
   }
   if (graphType === 'DonutGraph') {
     return (
       <DonutGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         data={data}
         groupBy={groupBy}
         balanceTypeOp={balanceTypeOp}
@@ -111,12 +120,13 @@ export function ChooseGraph({
     );
   }
   if (graphType === 'LineGraph') {
-    return <LineGraph style={{ flexGrow: 1 }} graphData={data} />;
+    return <LineGraph style={graphStyle} compact={compact} graphData={data} />;
   }
   if (graphType === 'StackedBarGraph') {
     return (
       <StackedBarGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         data={data}
         viewLabels={viewLabels}
       />
@@ -132,6 +142,7 @@ export function ChooseGraph({
           scrollWidth={scrollWidth}
           groupBy={groupBy}
           balanceType={balanceType}
+          compact={compact}
         />
         <ReportTable
           saveScrollWidth={saveScrollWidth}
@@ -142,6 +153,7 @@ export function ChooseGraph({
           data={data[groupByData]}
           mode={mode}
           monthsCount={months.length}
+          compact={compact}
         />
         <ReportTableTotals
           totalScrollRef={totalScrollRef}
@@ -151,6 +163,7 @@ export function ChooseGraph({
           mode={mode}
           balanceTypeOp={balanceTypeOp}
           monthsCount={months.length}
+          compact={compact}
         />
       </View>
     );

diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -190,29 +190,27 @@ export function BarGraph({
                   formatter={numberFormatterTooltip}
                   isAnimationActive={false}
                 />
-                {!compact && <CartesianGrid strokeDasharray="3 3" />}
                 {!compact && (
-                  <XAxis
-                    dataKey={yAxis}
-                    angle={-35}
-                    textAnchor="end"
-                    height={Math.sqrt(longestLabelLength) * 25}
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                  />
-                )}
-                {!compact && (
-                  <YAxis
-                    tickFormatter={value => getCustomTick(value, privacyMode)}
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                  />
-                )}
-                {!compact && (
-                  <ReferenceLine y={0} stroke={theme.pageTextLight} />
+                  <>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis
+                      dataKey={yAxis}
+                      angle={-35}
+                      textAnchor="end"
+                      height={Math.sqrt(longestLabelLength) * 25}
+                      tick={{ fill: theme.pageText }}
+                      tickLine={{ stroke: theme.pageText }}
+                    />
+                    <YAxis
+                      tickFormatter={value => getCustomTick(value, privacyMode)}
+                      tick={{ fill: theme.pageText }}
+                      tickLine={{ stroke: theme.pageText }}
+                    />
+                    <ReferenceLine y={0} stroke={theme.pageTextLight} />
+                  </>
                 )}
                 <Bar dataKey={val => getVal(val)} stackId="a">
-                  {viewLabels && (
+                  {viewLabels && !compact && (
                     <LabelList
                       dataKey={val => getVal(val)}
                       content={customLabel}
@@ -228,7 +226,7 @@ export function BarGraph({
                 </Bar>
                 {yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
                   <Bar dataKey="totalDebts" stackId="a">
-                    {viewLabels && (
+                    {viewLabels && !compact && (
                       <LabelList dataKey="totalDebts" content={customLabel} />
                     )}
                     {data[splitData].map((entry, index) => (

diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -104,9 +104,13 @@ export function BarLineGraph({ style, graphData, compact }: BarLineGraphProps) {
                   formatter={numberFormatterTooltip}
                   isAnimationActive={false}
                 />
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="x" />
-                <YAxis dataKey="y" tickFormatter={tickFormatter} />
+                {!compact && (
+                  <>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="x" />
+                    <YAxis dataKey="y" tickFormatter={tickFormatter} />
+                  </>
+                )}
                 <Bar type="monotone" dataKey="y" fill="#8884d8" />
                 <Line type="monotone" dataKey="y" stroke="#8884d8" />
               </ComposedChart>

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -173,7 +173,9 @@ export function DonutGraph({
                   innerRadius={Math.min(width, height) * 0.2}
                   fill="#8884d8"
                   labelLine={false}
-                  label={e => (viewLabels ? customLabel(e) : <div />)}
+                  label={e =>
+                    viewLabels && !compact ? customLabel(e) : <div />
+                  }
                   onMouseEnter={onPieEnter}
                 >
                   {data.legend.map((entry, index) => (

diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -103,9 +103,13 @@ export function LineGraph({ style, graphData, compact }: LineGraphProps) {
                   formatter={numberFormatterTooltip}
                   isAnimationActive={false}
                 />
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="x" />
-                <YAxis dataKey="y" tickFormatter={tickFormatter} />
+                {!compact && (
+                  <>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="x" />
+                    <YAxis dataKey="y" tickFormatter={tickFormatter} />
+                  </>
+                )}
                 <Line type="monotone" dataKey="y" stroke="#8884d8" />
               </LineChart>
             </div>

diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -159,18 +159,20 @@ export function StackedBarGraph({
                   isAnimationActive={false}
                   cursor={{ fill: 'transparent' }}
                 />
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis
-                  dataKey="date"
-                  tick={{ fill: theme.pageText }}
-                  tickLine={{ stroke: theme.pageText }}
-                />
                 {!compact && (
-                  <YAxis
-                    tickFormatter={value => getCustomTick(value, privacyMode)}
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                  />
+                  <>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis
+                      dataKey="date"
+                      tick={{ fill: theme.pageText }}
+                      tickLine={{ stroke: theme.pageText }}
+                    />
+                    <YAxis
+                      tickFormatter={value => getCustomTick(value, privacyMode)}
+                      tick={{ fill: theme.pageText }}
+                      tickLine={{ stroke: theme.pageText }}
+                    />
+                  </>
                 )}
                 {data.legend
                   .slice(0)
@@ -182,7 +184,7 @@ export function StackedBarGraph({
                       stackId="a"
                       fill={entry.color}
                     >
-                      {viewLabels && (
+                      {viewLabels && !compact && (
                         <LabelList dataKey={entry.name} content={customLabel} />
                       )}
                     </Bar>

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -26,6 +26,7 @@ type ReportTableProps = {
   data: DataEntity[];
   mode: string;
   monthsCount: number;
+  compact: boolean;
 };
 
 export function ReportTable({
@@ -38,6 +39,7 @@ export function ReportTable({
   data,
   mode,
   monthsCount,
+  compact,
 }: ReportTableProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -95,6 +97,7 @@ export function ReportTable({
           mode={mode}
           groupBy={groupBy}
           renderItem={renderItem}
+          compact={compact}
         />
       </Block>
     </View>

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -15,6 +15,7 @@ type ReportTableHeaderProps = {
   balanceType: string;
   headerScrollRef: RefProp<HTMLDivElement>;
   handleScroll: UIEventHandler<HTMLDivElement>;
+  compact: boolean;
 };
 
 export function ReportTableHeader({
@@ -24,6 +25,7 @@ export function ReportTableHeader({
   balanceType,
   headerScrollRef,
   handleScroll,
+  compact,
 }: ReportTableHeaderProps) {
   return (
     <Row

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -13,6 +13,7 @@ type ReportTableListProps = {
   monthsCount?: number;
   groupBy: string;
   renderItem;
+  compact: boolean;
 };
 
 export function ReportTableList({
@@ -21,6 +22,7 @@ export function ReportTableList({
   mode,
   groupBy,
   renderItem,
+  compact,
 }: ReportTableListProps) {
   const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
 

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -21,6 +21,7 @@ type ReportTableTotalsProps = {
   monthsCount: number;
   totalScrollRef: RefProp<HTMLDivElement>;
   handleScroll: UIEventHandler<HTMLDivElement>;
+  compact: boolean;
 };
 
 export function ReportTableTotals({
@@ -31,6 +32,7 @@ export function ReportTableTotals({
   monthsCount,
   totalScrollRef,
   handleScroll,
+  compact,
 }: ReportTableTotalsProps) {
   const [scrollWidthTotals, setScrollWidthTotals] = useState(0);
 

diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -341,6 +341,7 @@ export function CustomReport() {
                     setScrollWidth={setScrollWidth}
                     months={months}
                     viewLabels={viewLabels}
+                    compact={false}
                   />
                 ) : (
                   <LoadingIndicator message="Loading report..." />

diff --git a/packages/desktop-client/src/hooks/useFilters.ts b/packages/desktop-client/src/hooks/useFilters.ts
@@ -8,7 +8,10 @@ export function useFilters<T>(initialFilters: T[] = []) {
 
   const onApply = useCallback(
     newFilter => {
-      if (newFilter.conditions) {
+      if (newFilter === null) {
+        setFilters([]);
+        setSaved(null);
+      } else if (newFilter.conditions) {
         setFilters([...newFilter.conditions]);
         setConditionsOp(newFilter.conditionsOp);
         setSaved(newFilter.id);

diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
@@ -41,6 +41,9 @@ export const styles = {
   verySmallText: {
     fontSize: 13,
   },
+  tinyText: {
+    fontSize: 10,
+  },
   page: {
     flex: 1,
     '@media (max-height: 550px)': {

diff --git a/upcoming-release-notes/2245.md b/upcoming-release-notes/2245.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Adding compact identifier to all of the graphs and cleaning them up. Plus other staging bits for saving custom reports.