Custom Reports Adjustments (#2659)

* monthly Spending * Add Average * notes * title * date filter * TS fixes and hide average when no data * fix average tooltip and relabel x-axis * Wording/verbiage * remove spending files * adjustments * reports.d revert * revert filter changes * adjust update filters * notes * remove old notes * adjust style * lint fixes
2026-03-09 03:32:54 -05:00 · 2024-04-26 08:59:16 +01:00
parent 164dd399b0
commit d49f907f53
18 changed files with 44 additions and 27 deletions
--- a/packages/desktop-client/src/components/filters/AppliedFilters.tsx
+++ b/packages/desktop-client/src/components/filters/AppliedFilters.tsx
@@ -12,7 +12,7 @@ type AppliedFiltersProps = {
  onUpdate: (
    filter: RuleConditionEntity,
    newFilter: RuleConditionEntity,
-  ) => RuleConditionEntity;
+  ) => void;
  onDelete: (filter: RuleConditionEntity) => void;
  conditionsOp: string;
  onCondOpChange: (value: string, filters: RuleConditionEntity[]) => void;
--- a/packages/desktop-client/src/components/filters/FilterExpression.tsx
+++ b/packages/desktop-client/src/components/filters/FilterExpression.tsx
@@ -24,7 +24,7 @@ type FilterExpressionProps = {
  value: string | string[] | number | boolean | undefined;
  options: RuleConditionEntity['options'];
  style?: CSSProperties;
-  onChange: (cond: RuleConditionEntity) => RuleConditionEntity;
+  onChange: (cond: RuleConditionEntity) => void;
  onDelete: () => void;
 };

--- a/packages/desktop-client/src/components/filters/FiltersMenu.jsx
+++ b/packages/desktop-client/src/components/filters/FiltersMenu.jsx
@@ -243,7 +243,7 @@ function ConfigureField({
  );
 }

-export function FilterButton({ onApply, compact, hover }) {
+export function FilterButton({ onApply, compact, hover, exclude }) {
  const filters = useFilters();

  const dateFormat = useDateFormat() || 'MM/dd/yyyy';
@@ -359,10 +359,12 @@ export function FilterButton({ onApply, compact, hover }) {
            onMenuSelect={name => {
              dispatch({ type: 'configure', field: name });
            }}
-            items={filterFields.map(([name, text]) => ({
-              name,
-              text: titleFirst(text),
-            }))}
+            items={filterFields
+              .filter(f => (exclude ? !exclude.includes(f[0]) : true))
+              .map(([name, text]) => ({
+                name,
+                text: titleFirst(text),
+              }))}
          />
        </Tooltip>
      )}
--- a/packages/desktop-client/src/components/filters/FiltersStack.tsx
+++ b/packages/desktop-client/src/components/filters/FiltersStack.tsx
@@ -27,7 +27,7 @@ export function FiltersStack({
  onUpdateFilter: (
    filter: RuleConditionEntity,
    newFilter: RuleConditionEntity,
-  ) => RuleConditionEntity;
+  ) => void;
  onDeleteFilter: (filter: RuleConditionEntity) => void;
  onClearFilters: () => void;
  onReloadSavedFilter: (savedFilter: SavedFilter, value?: string) => void;
--- a/packages/desktop-client/src/components/reports/Change.tsx
+++ b/packages/desktop-client/src/components/reports/Change.tsx
@@ -2,15 +2,24 @@ import React from 'react';

 import { integerToCurrency } from 'loot-core/src/shared/util';

-import { theme, styles } from '../../style';
+import { styles } from '../../style/styles';
+import { theme } from '../../style/theme';
+import { type CSSProperties } from '../../style/types';
 import { Block } from '../common/Block';

-export function Change({ amount }) {
+export function Change({
+  amount,
+  style,
+}: {
+  amount: number;
+  style?: CSSProperties;
+}) {
  return (
    <Block
      style={{
        ...styles.smallText,
        color: amount < 0 ? theme.errorText : theme.noticeTextLight,
+        ...style,
      }}
    >
      {amount >= 0 ? '+' : ''}
--- a/packages/desktop-client/src/components/reports/ModeButton.tsx
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -6,7 +6,7 @@ import { Button } from '../common/Button';
 type ModeButtonProps = {
  selected: boolean;
  children: ReactNode;
-  style: CSSProperties;
+  style?: CSSProperties;
  onSelect: MouseEventHandler<HTMLButtonElement>;
 };

--- a/packages/desktop-client/src/components/reports/ReportCard.tsx
+++ b/packages/desktop-client/src/components/reports/ReportCard.tsx
@@ -8,8 +8,8 @@ import { View } from '../common/View';

 type ReportCardProps = {
  to: string;
-  report: CustomReportEntity;
  children: ReactNode;
+  report?: CustomReportEntity;
  flex?: string;
  style?: CSSProperties;
 };
--- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
@@ -102,10 +102,7 @@ export function CashFlowCard() {
          {data && (
            <View style={{ textAlign: 'right' }}>
              <PrivacyFilter activationFilters={[!isCardHovered]}>
-                <Change
-                  amount={income - expenses}
-                  style={{ color: theme.tableText, fontWeight: 300 }}
-                />
+                <Change amount={income - expenses} />
              </PrivacyFilter>
            </View>
          )}
--- a/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx
+++ b/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx
@@ -3,7 +3,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';

-import { theme, styles } from '../../../style';
+import { styles } from '../../../style';
 import { Block } from '../../common/Block';
 import { View } from '../../common/View';
 import { PrivacyFilter } from '../../PrivacyFilter';
@@ -59,10 +59,7 @@ export function NetWorthCard({ accounts }) {
                </PrivacyFilter>
              </Block>
              <PrivacyFilter activationFilters={[!isCardHovered]}>
-                <Change
-                  amount={data.totalChange}
-                  style={{ color: theme.tableText, fontWeight: 300 }}
-                />
+                <Change amount={data.totalChange} />
              </PrivacyFilter>
            </View>
          )}
--- a/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts
@@ -110,7 +110,6 @@ export function createCustomSpreadsheet({
          startDate,
          endDate,
          interval,
-          selectedCategories,
          categoryFilter,
          conditionsOpKey,
          filters,
@@ -122,7 +121,6 @@ export function createCustomSpreadsheet({
          startDate,
          endDate,
          interval,
-          selectedCategories,
          categoryFilter,
          conditionsOpKey,
          filters,
--- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
@@ -59,7 +59,6 @@ export function createGroupedSpreadsheet({
          startDate,
          endDate,
          interval,
-          selectedCategories,
          categoryFilter,
          conditionsOpKey,
          filters,
@@ -71,7 +70,6 @@ export function createGroupedSpreadsheet({
          startDate,
          endDate,
          interval,
-          selectedCategories,
          categoryFilter,
          conditionsOpKey,
          filters,
--- a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
@@ -8,7 +8,6 @@ export function makeQuery(
  startDate: string,
  endDate: string,
  interval: string,
-  selectedCategories: CategoryEntity[],
  categoryFilter: CategoryEntity[],
  conditionsOpKey: string,
  filters: unknown[],
@@ -27,7 +26,7 @@ export function makeQuery(
  const query = q('transactions')
    //Apply Category_Selector
    .filter(
-      selectedCategories && {
+      categoryFilter && {
        $or: [
          {
            category: null,
@@ -66,6 +65,7 @@ export function makeQuery(
      { date: intervalGroup },
      { category: { $id: '$category.id' } },
      { categoryHidden: { $id: '$category.hidden' } },
+      { categoryIncome: { $id: '$category.is_income' } },
      { categoryGroup: { $id: '$category.group.id' } },
      { categoryGroupHidden: { $id: '$category.group.hidden' } },
      { account: { $id: '$account.id' } },
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -188,5 +188,6 @@ export const pillBorderSelected = colorPalette.purple400;

 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
 export const reportsLabel = pageText;
 export const reportsInnerLabel = colorPalette.navy800;
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -187,4 +187,6 @@ export const pillBorderSelected = colorPalette.purple500;

 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
 export const reportsLabel = colorPalette.navy900;
+export const reportsInnerLabel = colorPalette.navy800;
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -190,5 +190,6 @@ export const pillBorderSelected = colorPalette.purple500;

 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
 export const reportsLabel = colorPalette.navy900;
 export const reportsInnerLabel = colorPalette.navy800;
--- a/packages/desktop-client/src/style/themes/midnight.ts
+++ b/packages/desktop-client/src/style/themes/midnight.ts
@@ -190,4 +190,6 @@ export const pillBorderSelected = colorPalette.purple300;

 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
 export const reportsLabel = pageText;
+export const reportsInnerLabel = colorPalette.navy800;
--- a/packages/loot-core/src/shared/months.ts
+++ b/packages/loot-core/src/shared/months.ts
@@ -347,6 +347,10 @@ export function getMonth(day: string): string {
  return day.slice(0, 7);
 }

+export function getDay(day: string): number {
+  return Number(d.format(_parse(day), 'dd'));
+}
+
 export function getMonthEnd(day: string): string {
  return subDays(nextMonth(day.slice(0, 7)) + '-01', 1);
 }
--- a/upcoming-release-notes/2659.md
+++ b/upcoming-release-notes/2659.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Some slight adjustments to tidy up the code and make it work better. Some TS updates as well.