From 9c0e6a307b99ff115b85f4e01594618152a71873 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 21 Aug 2024 14:41:25 -0500
Subject: [PATCH] Translation: desktop-client/components/reports/graphs (#3299)
---
.../components/reports/graphs/AreaGraph.tsx | 13 +++++++-----
.../components/reports/graphs/BarGraph.tsx | 13 +++++++-----
.../reports/graphs/BarLineGraph.tsx | 12 ++++++++---
.../reports/graphs/CashFlowGraph.tsx | 19 ++++++++++++-----
.../components/reports/graphs/LineGraph.tsx | 4 +++-
.../reports/graphs/NetWorthGraph.tsx | 16 ++++++++++----
.../reports/graphs/SpendingGraph.tsx | 21 ++++++++++++-------
.../reports/graphs/StackedBarGraph.tsx | 4 +++-
.../graphs/tableGraph/ReportTableHeader.tsx | 10 +++++----
.../graphs/tableGraph/ReportTableTotals.tsx | 4 +++-
upcoming-release-notes/3299.md | 6 ++++++
11 files changed, 85 insertions(+), 37 deletions(-)
create mode 100644 upcoming-release-notes/3299.md
diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index 4077f53f7..b3f4bbccc 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
import {
@@ -51,6 +52,8 @@ const CustomTooltip = ({
payload,
balanceTypeOp,
}: CustomTooltipProps) => {
+ const { t } = useTranslation();
+
if (active && payload && payload.length) {
return (
<div
@@ -71,31 +74,31 @@ const CustomTooltip = ({
<div style={{ lineHeight: 1.5 }}>
{['totalAssets', 'totalTotals'].includes(balanceTypeOp) && (
<AlignedText
- left="Assets:"
+ left={t('Assets:')}
right={amountToCurrency(payload[0].payload.totalAssets)}
/>
)}
{['totalDebts', 'totalTotals'].includes(balanceTypeOp) && (
<AlignedText
- left="Debts:"
+ left={t('Debts:')}
right={amountToCurrency(payload[0].payload.totalDebts)}
/>
)}
{['netAssets'].includes(balanceTypeOp) && (
<AlignedText
- left="Net Assets:"
+ left={t('Net Assets:')}
right={amountToCurrency(payload[0].payload.netAssets)}
/>
)}
{['netDebts'].includes(balanceTypeOp) && (
<AlignedText
- left="Net Debts:"
+ left={t('Net Debts:')}
right={amountToCurrency(payload[0].payload.netDebts)}
/>
)}
{['totalTotals'].includes(balanceTypeOp) && (
<AlignedText
- left="Net:"
+ left={t('Net:')}
right={
<strong>
{amountToCurrency(payload[0].payload.totalTotals)}
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index 0928ef813..03519f0d0 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
import {
@@ -73,6 +74,8 @@ const CustomTooltip = ({
balanceTypeOp,
yAxis,
}: CustomTooltipProps) => {
+ const { t } = useTranslation();
+
if (active && payload && payload.length) {
return (
<div
@@ -93,31 +96,31 @@ const CustomTooltip = ({
<div style={{ lineHeight: 1.5 }}>
{['totalAssets', 'totalTotals'].includes(balanceTypeOp) && (
<AlignedText
- left="Assets:"
+ left={t('Assets:')}
right={amountToCurrency(payload[0].payload.totalAssets)}
/>
)}
{['totalDebts', 'totalTotals'].includes(balanceTypeOp) && (
<AlignedText
- left="Debts:"
+ left={t('Debts:')}
right={amountToCurrency(payload[0].payload.totalDebts)}
/>
)}
{['netAssets'].includes(balanceTypeOp) && (
<AlignedText
- left="Net Assets:"
+ left={t('Net Assets:')}
right={amountToCurrency(payload[0].payload.netAssets)}
/>
)}
{['netDebts'].includes(balanceTypeOp) && (
<AlignedText
- left="Net Debts:"
+ left={t('Net Debts:')}
right={amountToCurrency(payload[0].payload.netDebts)}
/>
)}
{['totalTotals'].includes(balanceTypeOp) && (
<AlignedText
- left="Net:"
+ left={t('Net:')}
right={
<strong>
{amountToCurrency(payload[0].payload.totalTotals)}
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index 127f66242..7317272ad 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
import {
@@ -37,6 +38,8 @@ type CustomTooltipProps = {
};
const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+ const { t } = useTranslation();
+
if (active && payload && payload.length) {
return (
<div
@@ -56,10 +59,13 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
</div>
<div style={{ lineHeight: 1.5 }}>
<PrivacyFilter>
- <AlignedText left="Assets:" right={payload[0].payload.assets} />
- <AlignedText left="Debt:" right={payload[0].payload.debt} />
<AlignedText
- left="Change:"
+ left={t('Assets:')}
+ right={payload[0].payload.assets}
+ />
+ <AlignedText left={t('Debt:')} right={payload[0].payload.debt} />
+ <AlignedText
+ left={t('Change:')}
right={<strong>{payload[0].payload.change}</strong>}
/>
</PrivacyFilter>
diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
index 003d5644c..0ce818ab0 100644
--- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import * as d from 'date-fns';
import { css } from 'glamor';
@@ -34,6 +35,8 @@ type CustomTooltipProps = TooltipProps<number, 'date'> & {
};
function CustomTooltip({ active, payload, isConcise }: CustomTooltipProps) {
+ const { t } = useTranslation();
+
if (!active || !payload) {
return null;
}
@@ -58,24 +61,30 @@ function CustomTooltip({ active, payload, isConcise }: CustomTooltipProps) {
</strong>
</div>
<div style={{ lineHeight: 1.5 }}>
- <AlignedText left="Income:" right={amountToCurrency(data.income)} />
<AlignedText
- left="Expenses:"
+ left={t('Income:')}
+ right={amountToCurrency(data.income)}
+ />
+ <AlignedText
+ left={t('Expenses:')}
right={amountToCurrency(data.expenses)}
/>
<AlignedText
- left="Change:"
+ left={t('Change:')}
right={
<strong>{amountToCurrency(data.income + data.expenses)}</strong>
}
/>
{data.transfers !== 0 && (
<AlignedText
- left="Transfers:"
+ left={t('Transfers:')}
right={amountToCurrency(data.transfers)}
/>
)}
- <AlignedText left="Balance:" right={amountToCurrency(data.balance)} />
+ <AlignedText
+ left={t('Balance:')}
+ right={amountToCurrency(data.balance)}
+ />
</div>
</div>
</div>
diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
index dc949d4c3..6a180611a 100644
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
import {
@@ -57,6 +58,7 @@ const CustomTooltip = ({
active,
payload,
}: CustomTooltipProps) => {
+ const { t } = useTranslation();
if (active && payload && payload.length) {
let sumTotals = 0;
return (
@@ -97,7 +99,7 @@ const CustomTooltip = ({
})}
{payload.length > 5 && compact && '...'}
<AlignedText
- left="Total"
+ left={t('Total')}
right={amountToCurrency(sumTotals)}
style={{
fontWeight: 600,
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index 5f23ea862..09ca5d574 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
import {
@@ -33,6 +34,7 @@ export function NetWorthGraph({
compact,
showTooltip = true,
}: NetWorthGraphProps) {
+ const { t } = useTranslation();
const privacyMode = usePrivacyMode();
const tickFormatter = tick => {
@@ -97,13 +99,19 @@ export function NetWorthGraph({
<strong>{payload[0].payload.date}</strong>
</div>
<div style={{ lineHeight: 1.5 }}>
- <AlignedText left="Assets:" right={payload[0].payload.assets} />
- <AlignedText left="Debt:" right={payload[0].payload.debt} />
<AlignedText
- left="Net worth:"
+ left={t('Assets:')}
+ right={payload[0].payload.assets}
+ />
+ <AlignedText left={t('Debt:')} right={payload[0].payload.debt} />
+ <AlignedText
+ left={t('Net worth:')}
right={<strong>{payload[0].payload.networth}</strong>}
/>
- <AlignedText left="Change:" right={payload[0].payload.change} />
+ <AlignedText
+ left={t('Change:')}
+ right={payload[0].payload.change}
+ />
</div>
</div>
</div>
diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
index 0b2401f44..a035c919b 100644
--- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
import {
@@ -58,6 +59,8 @@ const CustomTooltip = ({
selection,
compare,
}: CustomTooltipProps) => {
+ const { t } = useTranslation();
+
if (active && payload && payload.length) {
const comparison =
selection === 'average'
@@ -78,16 +81,18 @@ const CustomTooltip = ({
<div>
<div style={{ marginBottom: 10 }}>
<strong>
- Day:{' '}
+ {t('Day:') + ' '}
{Number(payload[0].payload.day) >= 28
- ? '28+'
+ ? t('28+')
: payload[0].payload.day}
</strong>
</div>
<div style={{ lineHeight: 1.5 }}>
{payload[0].payload.months[thisMonth].cumulative ? (
<AlignedText
- left={compare === 'thisMonth' ? 'This month:' : 'Last month:'}
+ left={
+ compare === 'thisMonth' ? t('This month:') : t('Last month:')
+ }
right={amountToCurrency(
payload[0].payload.months[thisMonth].cumulative * -1,
)}
@@ -97,19 +102,19 @@ const CustomTooltip = ({
<AlignedText
left={
selection === 'average'
- ? 'Average:'
+ ? t('Average:')
: selection === lastYear
- ? 'Last year:'
+ ? t('Last year:')
: compare === 'thisMonth'
- ? 'Last month:'
- : '2 months ago:'
+ ? t('Last month:')
+ : t('2 months ago:')
}
right={amountToCurrency(comparison)}
/>
)}
{payload[0].payload.months[thisMonth].cumulative ? (
<AlignedText
- left="Difference:"
+ left={t('Difference:')}
right={amountToCurrency(
payload[0].payload.months[thisMonth].cumulative * -1 -
comparison,
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 547a812b7..172d9280b 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
import {
@@ -61,6 +62,7 @@ const CustomTooltip = ({
payload,
label,
}: CustomTooltipProps) => {
+ const { t } = useTranslation();
if (active && payload && payload.length) {
let sumTotals = 0;
return (
@@ -103,7 +105,7 @@ const CustomTooltip = ({
})}
{payload.length > 5 && compact && '...'}
<AlignedText
- left="Total"
+ left={t('Total')}
right={amountToCurrency(sumTotals)}
style={{
fontWeight: 600,
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 926beef7e..dd20f9f11 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -1,4 +1,5 @@
import React, { type RefObject, type UIEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
import {
type balanceTypeOpType,
@@ -36,6 +37,7 @@ export function ReportTableHeader({
compactStyle,
mode,
}: ReportTableHeaderProps) {
+ const { t } = useTranslation();
return (
<Row
collapsed={true}
@@ -94,7 +96,7 @@ export function ReportTableHeader({
minWidth: compact ? 50 : 85,
}}
valueStyle={compactStyle}
- value="Deposits"
+ value={t('Deposits')}
width="flex"
/>
<Cell
@@ -102,7 +104,7 @@ export function ReportTableHeader({
minWidth: compact ? 50 : 85,
}}
valueStyle={compactStyle}
- value="Payments"
+ value={t('Payments')}
width="flex"
/>
</>
@@ -112,7 +114,7 @@ export function ReportTableHeader({
minWidth: compact ? 50 : 85,
}}
valueStyle={compactStyle}
- value="Totals"
+ value={t('Totals')}
width="flex"
/>
<Cell
@@ -120,7 +122,7 @@ export function ReportTableHeader({
minWidth: compact ? 50 : 85,
}}
valueStyle={compactStyle}
- value="Average"
+ value={t('Average')}
width="flex"
/>
</View>
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 ed192f0c4..5db57ad5b 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -4,6 +4,7 @@ import React, {
useState,
type RefObject,
} from 'react';
+import { useTranslation } from 'react-i18next';
import {
type GroupedEntity,
@@ -63,6 +64,7 @@ export function ReportTableTotals({
style,
renderTotals,
}: ReportTableTotalsProps) {
+ const { t } = useTranslation();
const [scrollWidthTotals, setScrollWidthTotals] = useState(0);
useLayoutEffect(() => {
@@ -81,7 +83,7 @@ export function ReportTableTotals({
const metadata: GroupedEntity = {
id: '',
- name: 'Totals',
+ name: t('Totals'),
intervalData: data.intervalData,
totalAssets: data.totalAssets,
totalDebts: data.totalDebts,
diff --git a/upcoming-release-notes/3299.md b/upcoming-release-notes/3299.md
new file mode 100644
index 000000000..713830845
--- /dev/null
+++ b/upcoming-release-notes/3299.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Support translations in desktop-client/components/reports/graphs.
--
GitLab