Merge branch 'master' into jfdoming/fix-case-sensitive-regexp-match

actualbudget · Sep 25, 2024 · 7f84dc1 · 7f84dc1
2 parents d6c7e45 + 88a7432
commit 7f84dc1
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,6 @@ Make Actual Budget accessible to more people by helping with the [Internationali
 
 ## Sponsors
 
-Thanks to our wonderful sponsors who make Actual budget possible!
+Thanks to our wonderful sponsors who make Actual Budget possible!
 
 <a href="https://www.netlify.com"> <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Deploys by Netlify" /> </a>
diff --git a/bin/run-vrt b/bin/run-vrt
@@ -28,5 +28,5 @@ echo "Running VRT tests with the following parameters:"
 echo "E2E_START_URL: $E2E_START_URL"
 echo "VRT_ARGS: $VRT_ARGS"
 
-docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash \
+MSYS_NO_PATHCONV=1 docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash \
   -c "E2E_START_URL=$E2E_START_URL yarn vrt $VRT_ARGS"
diff --git a/packages/desktop-client/src/components/reports/LegendItem.tsx b/packages/desktop-client/src/components/reports/LegendItem.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { type CSSProperties } from '../../style/types';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+
+export function LegendItem({
+  color,
+  label,
+  style,
+}: {
+  color: string;
+  label: string;
+  style?: CSSProperties;
+}) {
+  return (
+    <View
+      style={{
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        ...style,
+      }}
+    >
+      <View
+        style={{
+          marginRight: 5,
+          borderRadius: 1000,
+          width: 14,
+          height: 14,
+          backgroundColor: color,
+        }}
+      />
+      <Text
+        style={{
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          flexShrink: 0,
+        }}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}
diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx
@@ -4,6 +4,7 @@ import { theme, styles } from '../../style';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
+import { LegendItem } from './LegendItem';
 import { ReportOptions } from './ReportOptions';
 
 type ReportLegendProps = {
@@ -39,33 +40,11 @@ export function ReportLegend({ legend, groupBy, interval }: ReportLegendProps) {
         {legend &&
           legend.map(item => {
             return (
-              <View
+              <LegendItem
                 key={item.name}
-                style={{
-                  padding: 10,
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                }}
-              >
-                <View
-                  style={{
-                    marginRight: 5,
-                    borderRadius: 1000,
-                    width: 14,
-                    height: 14,
-                    backgroundColor: item.color,
-                  }}
-                />
-                <Text
-                  style={{
-                    whiteSpace: 'nowrap',
-                    textOverflow: 'ellipsis',
-                    flexShrink: 0,
-                  }}
-                >
-                  {item.name}
-                </Text>
-              </View>
+                color={item.color}
+                label={item.name}
+              />
             );
           })}
       </View>

diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -299,10 +299,10 @@ export function SpendingGraph({
                   activeDot={false}
                   animationDuration={0}
                   dataKey={val => getVal(val, selection)}
-                  stroke="gray"
+                  stroke={theme.reportsGray}
                   strokeDasharray="10 10"
                   strokeWidth={3}
-                  fill="gray"
+                  fill={theme.reportsGray}
                   fillOpacity={0.2}
                 />
               </AreaChart>

diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -32,6 +32,7 @@ import { MobileBackButton } from '../../mobile/MobileBackButton';
 import { MobilePageHeader, Page, PageHeader } from '../../Page';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { SpendingGraph } from '../graphs/SpendingGraph';
+import { LegendItem } from '../LegendItem';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { ModeButton } from '../ModeButton';
 import { calculateSpendingReportTimeRange } from '../reportRanges';
@@ -169,7 +170,12 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
         ? 27
         : monthUtils.getDay(monthUtils.currentDay()) - 1;
 
-  const showCompareTo = Math.abs(data.intervalData[27].compareTo) > 0;
+  const showCompareTo =
+    compareTo === monthUtils.currentMonth() ||
+    Math.abs(data.intervalData[27].compareTo) > 0;
+  const showCompare =
+    compare === monthUtils.currentMonth() ||
+    Math.abs(data.intervalData[27].compare) > 0;
 
   const title = widget?.meta?.name ?? t('Monthly Spending');
 
@@ -431,6 +437,24 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
                   flexDirection: 'row',
                 }}
               >
+                <View>
+                  <LegendItem
+                    color={theme.reportsGreen}
+                    label={monthUtils.format(compare, 'MMM, yyyy')}
+                    style={{ padding: 0, paddingBottom: 10 }}
+                  />
+                  <LegendItem
+                    color={theme.reportsGray}
+                    label={
+                      reportMode === 'single-month'
+                        ? monthUtils.format(compareTo, 'MMM, yyyy')
+                        : reportMode === 'budget'
+                          ? 'Budgeted'
+                          : 'Average'
+                    }
+                    style={{ padding: 0, paddingBottom: 10 }}
+                  />
+                </View>
                 <View style={{ flex: 1 }} />
                 <View
                   style={{
@@ -439,7 +463,7 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
                   }}
                 >
                   <View>
-                    {showCompareTo && (
+                    {showCompare && (
                       <AlignedText
                         style={{ marginBottom: 5, minWidth: 210 }}
                         left={
@@ -459,12 +483,13 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
                         }
                       />
                     )}
-                    {reportMode === 'single-month' && (
+                    {reportMode === 'single-month' && showCompareTo && (
                       <AlignedText
                         style={{ marginBottom: 5, minWidth: 210 }}
                         left={
                           <Block>
-                            Spent {monthUtils.format(compareTo, 'MMM, yyyy')}:
+                            Spent {monthUtils.format(compareTo, 'MMM, yyyy')}
+                            {compare === monthUtils.currentMonth() && ' MTD'}:
                           </Block>
                         }
                         right={
@@ -479,24 +504,26 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
                       />
                     )}
                   </View>
-                  <AlignedText
-                    style={{ marginBottom: 5, minWidth: 210 }}
-                    left={
-                      <Block>
-                        Budgeted
-                        {compare === monthUtils.currentMonth() && ' MTD'}:
-                      </Block>
-                    }
-                    right={
-                      <Text style={{ fontWeight: 600 }}>
-                        <PrivacyFilter blurIntensity={5}>
-                          {amountToCurrency(
-                            Math.abs(data.intervalData[todayDay].budget),
-                          )}
-                        </PrivacyFilter>
-                      </Text>
-                    }
-                  />
+                  {Math.abs(data.intervalData[todayDay].budget) > 0 && (
+                    <AlignedText
+                      style={{ marginBottom: 5, minWidth: 210 }}
+                      left={
+                        <Block>
+                          Budgeted
+                          {compare === monthUtils.currentMonth() && ' MTD'}:
+                        </Block>
+                      }
+                      right={
+                        <Text style={{ fontWeight: 600 }}>
+                          <PrivacyFilter blurIntensity={5}>
+                            {amountToCurrency(
+                              Math.abs(data.intervalData[todayDay].budget),
+                            )}
+                          </PrivacyFilter>
+                        </Text>
+                      }
+                    />
+                  )}
                   {showAverage && (
                     <AlignedText
                       style={{ marginBottom: 5, minWidth: 210 }}

diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
@@ -191,6 +191,7 @@ export const pillTextSubdued = colorPalette.navy500;
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
 export const reportsLabel = pageText;
 export const reportsInnerLabel = colorPalette.navy800;
 

diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
@@ -190,6 +190,7 @@ export const pillTextSubdued = colorPalette.navy200;
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
 export const reportsLabel = colorPalette.navy900;
 export const reportsInnerLabel = colorPalette.navy800;
 

diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
@@ -193,6 +193,7 @@ export const pillTextSubdued = colorPalette.navy200;
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
 export const reportsLabel = colorPalette.navy900;
 export const reportsInnerLabel = colorPalette.navy800;
 

diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts
@@ -193,6 +193,7 @@ export const pillTextSubdued = colorPalette.gray500;
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
 export const reportsLabel = pageText;
 export const reportsInnerLabel = colorPalette.navy800;
 

diff --git a/upcoming-release-notes/3451.md b/upcoming-release-notes/3451.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Fixing display issues in spending report and adding a legend.
diff --git a/upcoming-release-notes/3497.md b/upcoming-release-notes/3497.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [UnderKoen]
+---
+
+Fix running `yarn vrt:docker` on windows with git bash
diff --git a/upcoming-release-notes/3501.md b/upcoming-release-notes/3501.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [Jonathan-Fang]
+---
+
+Fix typo in README for Actual Budget Github homepage