From 2c1967d7884e55132bfe0f5bf9b917d86b46df26 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Tue, 6 Aug 2024 20:31:35 +0100
Subject: [PATCH] :recycle: (reports) add 'showTooltip' prop to various graphs
(#3200)
---
.../src/components/reports/ChooseGraph.tsx | 15 +++++++++++++-
.../components/reports/graphs/AreaGraph.tsx | 6 +++---
.../components/reports/graphs/BarGraph.tsx | 4 +++-
.../reports/graphs/BarLineGraph.tsx | 20 +++++++++++++------
.../components/reports/graphs/LineGraph.tsx | 4 +++-
.../reports/graphs/StackedBarGraph.tsx | 4 +++-
.../reports/reports/GetCardData.tsx | 6 ++++++
upcoming-release-notes/3200.md | 6 ++++++
8 files changed, 52 insertions(+), 13 deletions(-)
create mode 100644 upcoming-release-notes/3200.md
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index bf5dec7b0..c74da4659 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -29,6 +29,7 @@ type ChooseGraphProps = {
style?: CSSProperties;
showHiddenCategories?: boolean;
showOffBudget?: boolean;
+ showTooltip?: boolean;
intervalsCount: number;
};
@@ -46,6 +47,7 @@ export function ChooseGraph({
style,
showHiddenCategories = false,
showOffBudget = false,
+ showTooltip = true,
intervalsCount,
}: ChooseGraphProps) {
const graphStyle = compact
@@ -102,6 +104,7 @@ export function ChooseGraph({
data={data}
balanceTypeOp={balanceTypeOp}
viewLabels={viewLabels}
+ showTooltip={showTooltip}
/>
);
}
@@ -117,11 +120,19 @@ export function ChooseGraph({
viewLabels={viewLabels}
showHiddenCategories={showHiddenCategories}
showOffBudget={showOffBudget}
+ showTooltip={showTooltip}
/>
);
}
if (graphType === 'BarLineGraph') {
- return <BarLineGraph style={graphStyle} compact={compact} data={data} />;
+ return (
+ <BarLineGraph
+ style={graphStyle}
+ compact={compact}
+ data={data}
+ showTooltip={showTooltip}
+ />
+ );
}
if (graphType === 'DonutGraph') {
return (
@@ -149,6 +160,7 @@ export function ChooseGraph({
balanceTypeOp={balanceTypeOp}
showHiddenCategories={showHiddenCategories}
showOffBudget={showOffBudget}
+ showTooltip={showTooltip}
interval={interval}
/>
);
@@ -165,6 +177,7 @@ export function ChooseGraph({
groupBy={groupBy}
showHiddenCategories={showHiddenCategories}
showOffBudget={showOffBudget}
+ showTooltip={showTooltip}
interval={interval}
/>
);
diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index 60c315d2a..d450f5261 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -22,7 +22,6 @@ import {
} from 'loot-core/src/types/models/reports';
import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { useResponsive } from '../../../ResponsiveProvider';
import { theme } from '../../../style';
import { type CSSProperties } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
@@ -152,6 +151,7 @@ type AreaGraphProps = {
balanceTypeOp: balanceTypeOpType;
compact?: boolean;
viewLabels: boolean;
+ showTooltip?: boolean;
};
export function AreaGraph({
@@ -160,9 +160,9 @@ export function AreaGraph({
balanceTypeOp,
compact,
viewLabels,
+ showTooltip = true,
}: AreaGraphProps) {
const privacyMode = usePrivacyMode();
- const { isNarrowWidth } = useResponsive();
const dataMax = Math.max(...data.intervalData.map(i => i[balanceTypeOp]));
const dataMin = Math.min(...data.intervalData.map(i => i[balanceTypeOp]));
@@ -249,7 +249,7 @@ export function AreaGraph({
tickSize={0}
/>
)}
- {(!isNarrowWidth || !compact) && (
+ {showTooltip && (
<Tooltip
content={<CustomTooltip balanceTypeOp={balanceTypeOp} />}
isAnimationActive={false}
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index 37ca3cef8..ef9545ded 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -159,6 +159,7 @@ type BarGraphProps = {
viewLabels: boolean;
showHiddenCategories?: boolean;
showOffBudget?: boolean;
+ showTooltip?: boolean;
};
export function BarGraph({
@@ -171,6 +172,7 @@ export function BarGraph({
viewLabels,
showHiddenCategories,
showOffBudget,
+ showTooltip = true,
}: BarGraphProps) {
const navigate = useNavigate();
const categories = useCategories();
@@ -230,7 +232,7 @@ export function BarGraph({
bottom: 0,
}}
>
- {(!isNarrowWidth || !compact) && (
+ {showTooltip && (
<Tooltip
cursor={{ fill: 'transparent' }}
content={
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index c7e5ec785..0aeb4d85a 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -75,9 +75,15 @@ type BarLineGraphProps = {
style?: CSSProperties;
data;
compact?: boolean;
+ showTooltip?: boolean;
};
-export function BarLineGraph({ style, data, compact }: BarLineGraphProps) {
+export function BarLineGraph({
+ style,
+ data,
+ compact,
+ showTooltip = true,
+}: BarLineGraphProps) {
const tickFormatter = tick => {
return `${amountToCurrencyNoDecimal(Math.round(tick))}`; // Formats the tick values as strings with commas
};
@@ -100,11 +106,13 @@ export function BarLineGraph({ style, data, compact }: BarLineGraphProps) {
data={data.data}
margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
>
- <Tooltip
- content={<CustomTooltip />}
- formatter={numberFormatterTooltip}
- isAnimationActive={false}
- />
+ {showTooltip && (
+ <Tooltip
+ content={<CustomTooltip />}
+ formatter={numberFormatterTooltip}
+ isAnimationActive={false}
+ />
+ )}
{!compact && (
<>
<CartesianGrid strokeDasharray="3 3" />
diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
index 14c53ad28..162290a3e 100644
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -121,6 +121,7 @@ type LineGraphProps = {
balanceTypeOp: balanceTypeOpType;
showHiddenCategories?: boolean;
showOffBudget?: boolean;
+ showTooltip?: boolean;
interval?: string;
};
@@ -133,6 +134,7 @@ export function LineGraph({
balanceTypeOp,
showHiddenCategories,
showOffBudget,
+ showTooltip = true,
interval,
}: LineGraphProps) {
const navigate = useNavigate();
@@ -186,7 +188,7 @@ export function LineGraph({
margin={{ top: 10, right: 10, left: leftMargin, bottom: 10 }}
style={{ cursor: pointer }}
>
- {(!isNarrowWidth || !compact) && (
+ {showTooltip && (
<Tooltip
content={
<CustomTooltip compact={compact} tooltip={tooltip} />
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 309fa8618..3b9bae5bf 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -150,6 +150,7 @@ type StackedBarGraphProps = {
balanceTypeOp: balanceTypeOpType;
showHiddenCategories?: boolean;
showOffBudget?: boolean;
+ showTooltip?: boolean;
interval?: string;
};
@@ -163,6 +164,7 @@ export function StackedBarGraph({
balanceTypeOp,
showHiddenCategories,
showOffBudget,
+ showTooltip = true,
interval,
}: StackedBarGraphProps) {
const navigate = useNavigate();
@@ -199,7 +201,7 @@ export function StackedBarGraph({
style={{ cursor: pointer }}
stackOffset="sign" //stacked by sign
>
- {(!isNarrowWidth || !compact) && (
+ {showTooltip && (
<Tooltip
content={
<CustomTooltip compact={compact} tooltip={tooltip} />
diff --git a/packages/desktop-client/src/components/reports/reports/GetCardData.tsx b/packages/desktop-client/src/components/reports/reports/GetCardData.tsx
index 56331559a..a18cb5a5b 100644
--- a/packages/desktop-client/src/components/reports/reports/GetCardData.tsx
+++ b/packages/desktop-client/src/components/reports/reports/GetCardData.tsx
@@ -9,6 +9,7 @@ import { type PayeeEntity } from 'loot-core/types/models/payee';
import { type CustomReportEntity } from 'loot-core/types/models/reports';
import { type LocalPrefs } from 'loot-core/types/prefs';
+import { useResponsive } from '../../../ResponsiveProvider';
import { styles } from '../../../style/styles';
import { theme } from '../../../style/theme';
import { Text } from '../../common/Text';
@@ -66,6 +67,7 @@ export function GetCardData({
categories,
earliestTransaction,
firstDayOfWeekIdx,
+ showTooltip,
}: {
report: CustomReportEntity;
payees: PayeeEntity[];
@@ -73,7 +75,10 @@ export function GetCardData({
categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] };
earliestTransaction: string;
firstDayOfWeekIdx?: LocalPrefs['firstDayOfWeekIdx'];
+ showTooltip?: boolean;
}) {
+ const { isNarrowWidth } = useResponsive();
+
let startDate = report.startDate;
let endDate = report.endDate;
@@ -170,6 +175,7 @@ export function GetCardData({
compact={true}
style={{ height: 'auto', flex: 1 }}
intervalsCount={intervals.length}
+ showTooltip={!isNarrowWidth && showTooltip}
/>
</ErrorBoundary>
) : (
diff --git a/upcoming-release-notes/3200.md b/upcoming-release-notes/3200.md
new file mode 100644
index 000000000..ea72dae5c
--- /dev/null
+++ b/upcoming-release-notes/3200.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Reports: add `showTooltip` prop for controlling tooltip visibility.
--
GitLab