Translation: desktop-client/components/reports/graphs (#3299)

actualbudget · Aug 21, 2024 · 9c0e6a3 · 9c0e6a3
1 parent 3e5ce72
commit 9c0e6a3
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +96,15 @@ export function ReportTableHeader({
                     minWidth: compact ? 50 : 85,
                   }}
                   valueStyle={compactStyle}
-                  value="Deposits"
+                  value={t('Deposits')}
                   width="flex"
                 />
                 <Cell
                   style={{
                     minWidth: compact ? 50 : 85,
                   }}
                   valueStyle={compactStyle}
-                  value="Payments"
+                  value={t('Payments')}
                   width="flex"
                 />
               </>
@@ -112,15 +114,15 @@ export function ReportTableHeader({
             minWidth: compact ? 50 : 85,
           }}
           valueStyle={compactStyle}
-          value="Totals"
+          value={t('Totals')}
           width="flex"
         />
         <Cell
           style={{
             minWidth: compact ? 50 : 85,
           }}
           valueStyle={compactStyle}
-          value="Average"
+          value={t('Average')}
           width="flex"
         />
       </View>