diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index 4077f53f7f244100cf56bf73526fbcfbf98df370..b3f4bbcccdb476b31d1b85096ff12fcf895b4ce1 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 0928ef813519321c7dc90ba69a90fdc42841b31d..03519f0d0c81e9dc7d8869c87c0fd4c2a9269c41 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 127f66242703f2bdf9cba942ea31bdfc760f79c0..7317272ad43a27837d7e182240a2e7966004bc80 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 003d5644ca8df4691c5469b5e01c960ffab9ffd9..0ce818ab008a151225a416b04e7dac29d6602601 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 dc949d4c3c42c7859745b9bc9ec3253650a8122c..6a180611a1a7bd66275802da17a3a2b6c623e85e 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 5f23ea8627a1c9fd1f33e717bcf1c96736d034be..09ca5d57460509b04bf5d9a1d008ca79bde0023a 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 0b2401f44e14da8e9fffd1f9da4868fc07b18146..a035c919b8bd6f36072378ef064b158b39287251 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 547a812b7bbc266c2df35f982f8a6db2cf6854b9..172d9280bf72055aedfac4ebd15c4e0cd9ef4bb4 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 926beef7ecc1680824fe198394c2840de37f6eaf..dd20f9f1151b9d10a610168eec41a88d337dc8ee 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 ed192f0c4eb5e625fe591f488bd4e141ac6cb891..5db57ad5b87e878703f18904c0f073a2eef9796c 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 0000000000000000000000000000000000000000..713830845b2d6ae56ed67f5521817b93cb508985
--- /dev/null
+++ b/upcoming-release-notes/3299.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Support translations in desktop-client/components/reports/graphs.