diff --git a/packages/desktop-client/src/components/common/MenuButton.tsx b/packages/desktop-client/src/components/common/MenuButton.tsx
index 30cd077226c49f1b8b67da2008549db3815f22ad..b707ef6ba7440e24e2ce0b9c785ee3818f5ba3b5 100644
--- 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
index 2188d075c724a8c7dd53484322539046d99b3931..244a4b05009ec9154a89d4d8d403fb5383a9c96f 100644
--- 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
index 6f34a07b5039f59fc0941a010abfb87fa861da02..e17171b56354f19b9bd81630c9e40e7358ea757f 100644
--- 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
index 9e39d8003f9e3c9cfd038d1669de81a40352dbf1..fe659df811b1947b18ace19c942edda810579a19 100644
--- 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
index e7c70c88b1f149f5be98497a5fe66d9e8f46e275..6a69bb2ec9bea1fa8a8c8c7e7e9f026d32ca9ede 100644
--- 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
index ba78ad7e3809cc6df0e0f00d7e15aa1540d9adb7..4cba1f3e74442130a730a056dc7df5e28264845a 100644
--- 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
index 683969f3cb514ed655b262de4d2908c09f79006f..812be419ac03b5f6aed8bf3cbdff2feb4e430934 100644
--- 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
index b7f34e1f012ca3dae2a367af9d474785edcac743..ca7f71188d9de2663a34fc5ef4723f7b0237a2b6 100644
--- 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
index 3abe2077530a26bc0af8ae1ca71808bba9aa8282..7db0209fde0591b643a10dafbb92a4b6f41cb3b0 100644
--- 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
index ec462b61198c118e6ee28b05168a4c7f00c157df..95b377995a3f52e77883bb038ad6d7da8fa09cf1 100644
--- 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
index 79e89583809a8c9e926fcab4e656bf124ea25e57..c98527cd0e8cfede2284f371d200e3417c54c037 100644
--- 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
index a5a149c93fa00e3041130fa15f5a659871d32d04..07666855a6636b55fa88558ec70da8419f281993 100644
--- 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
index fb54839ec80c3e901880ca3807bfc54a92dce4d6..586b0f3b270193e3594b0de0a3026744d6d68390 100644
--- 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
index 027cd27adb7b0128f784fad5018483e699015b9a..862ac7ebfffe1eadced06345e210bbc2e7b5065b 100644
--- 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
new file mode 100644
index 0000000000000000000000000000000000000000..207f535515293d1c2ee2f4dd6d962029a73caad0
--- /dev/null
+++ 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.