♻️ (reports) add 'showTooltip' prop to various graphs (#3200)

Author: MatissJanis

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}
       />
     );

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}

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={

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" />

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} />

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} />

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,14 +67,18 @@ export function GetCardData({
   categories,
   earliestTransaction,
   firstDayOfWeekIdx,
+  showTooltip,
 }: {
   report: CustomReportEntity;
   payees: PayeeEntity[];
   accounts: AccountEntity[];
   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>
   ) : (

upcoming-release-notes/3200.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Reports: add `showTooltip` prop for controlling tooltip visibility.