From 5a67b7e822eb6d10b1e661869b71083e0b4cc8f6 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:31:54 -0800
Subject: [PATCH] Dynamic graph margins (#2346)
* dynamic graph margins
* notes
---
.../src/components/reports/ChooseGraph.tsx | 1 +
.../components/reports/graphs/AreaGraph.tsx | 12 +++++++++--
.../components/reports/graphs/BarGraph.tsx | 20 +++++++++++++++++--
.../reports/graphs/StackedBarGraph.tsx | 17 ++++++++++++++--
upcoming-release-notes/2346.md | 6 ++++++
5 files changed, 50 insertions(+), 6 deletions(-)
create mode 100644 upcoming-release-notes/2346.md
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index a3149c391..6fcddebb3 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -127,6 +127,7 @@ export function ChooseGraph({
compact={compact}
data={data}
viewLabels={viewLabels}
+ balanceTypeOp={balanceTypeOp}
/>
);
}
diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index 28b47e352..58caaebb8 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -133,6 +133,7 @@ export function AreaGraph({
const labelsMargin = viewLabels ? 30 : 0;
const dataDiff = dataMax - dataMin;
+ const absDataMax = Math.max(Math.abs(dataMax), Math.abs(dataMin));
//Calculate how much to add to max and min values for graph range
const extendRangeAmount = Math.floor(dataDiff / 20);
const labelsMin =
@@ -149,7 +150,7 @@ export function AreaGraph({
const lastLabel = data.monthData.length - 1;
const tickFormatter = tick => {
- if (!privacyMode) return `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas
+ if (!privacyMode) return `${amountToCurrencyNoDecimal(tick)}`; // Formats the tick values as strings with commas
return '...';
};
@@ -166,6 +167,7 @@ export function AreaGraph({
const off = gradientOffset();
+ const leftMargin = Math.abs(absDataMax) > 1000000 ? 20 : 0;
return (
<Container
style={{
@@ -182,7 +184,12 @@ export function AreaGraph({
width={width}
height={height}
data={data.monthData}
- margin={{ top: 0, right: labelsMargin, left: 0, bottom: 0 }}
+ margin={{
+ top: 0,
+ right: labelsMargin,
+ left: leftMargin,
+ bottom: 0,
+ }}
>
{compact ? null : (
<CartesianGrid strokeDasharray="3 3" vertical={false} />
@@ -204,6 +211,7 @@ export function AreaGraph({
tickFormatter={tickFormatter}
tick={{ fill: theme.pageText }}
tickLine={{ stroke: theme.pageText }}
+ tickSize={0}
/>
)}
<Tooltip
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index 7f4f9ec3b..3d81b5ced 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -160,6 +160,11 @@ export function BarGraph({
.map(c => c[yAxis])
.reduce((acc, cur) => (cur.length > acc ? cur.length : acc), 0);
+ const largestValue = data[splitData]
+ .map(c => c[balanceTypeOp])
+ .reduce((acc, cur) => (Math.abs(cur) > Math.abs(acc) ? cur : acc), 0);
+
+ const leftMargin = Math.abs(largestValue) > 1000000 ? 20 : 0;
return (
<Container
style={{
@@ -177,7 +182,12 @@ export function BarGraph({
height={height}
stackOffset="sign"
data={data[splitData]}
- margin={{ top: labelsMargin, right: 0, left: 0, bottom: 0 }}
+ margin={{
+ top: labelsMargin,
+ right: 0,
+ left: leftMargin,
+ bottom: 0,
+ }}
>
<Tooltip
cursor={{ fill: 'transparent' }}
@@ -202,9 +212,15 @@ export function BarGraph({
tickLine={{ stroke: theme.pageText }}
/>
<YAxis
- tickFormatter={value => getCustomTick(value, privacyMode)}
+ tickFormatter={value =>
+ getCustomTick(
+ amountToCurrencyNoDecimal(value),
+ privacyMode,
+ )
+ }
tick={{ fill: theme.pageText }}
tickLine={{ stroke: theme.pageText }}
+ tickSize={0}
/>
<ReferenceLine y={0} stroke={theme.pageTextLight} />
</>
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 16b584667..67d0ec1d1 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -125,6 +125,7 @@ type StackedBarGraphProps = {
data: GroupedEntity;
compact?: boolean;
viewLabels: boolean;
+ balanceTypeOp: string;
};
export function StackedBarGraph({
@@ -132,9 +133,15 @@ export function StackedBarGraph({
data,
compact,
viewLabels,
+ balanceTypeOp,
}: StackedBarGraphProps) {
const privacyMode = usePrivacyMode();
+ const largestValue = data.monthData
+ .map(c => c[balanceTypeOp])
+ .reduce((acc, cur) => (Math.abs(cur) > Math.abs(acc) ? cur : acc), 0);
+
+ const leftMargin = Math.abs(largestValue) > 1000000 ? 20 : 0;
return (
<Container
style={{
@@ -151,7 +158,7 @@ export function StackedBarGraph({
width={width}
height={height}
data={data.monthData}
- margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+ margin={{ top: 0, right: 0, left: leftMargin, bottom: 0 }}
>
<Tooltip
content={<CustomTooltip />}
@@ -168,9 +175,15 @@ export function StackedBarGraph({
tickLine={{ stroke: theme.pageText }}
/>
<YAxis
- tickFormatter={value => getCustomTick(value, privacyMode)}
+ tickFormatter={value =>
+ getCustomTick(
+ amountToCurrencyNoDecimal(value),
+ privacyMode,
+ )
+ }
tick={{ fill: theme.pageText }}
tickLine={{ stroke: theme.pageText }}
+ tickSize={0}
/>
</>
)}
diff --git a/upcoming-release-notes/2346.md b/upcoming-release-notes/2346.md
new file mode 100644
index 000000000..dce24bc6c
--- /dev/null
+++ b/upcoming-release-notes/2346.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Dynamically changing graph margins for large budgets with YAxis max > 1,000,000.
--
GitLab