updated toggle.options in data.ts and utilized useTranslate()

OpenEnergyDashboard · Nov 13, 2024 · d3605eb · d3605eb
1 parent cb8af66
commit d3605eb
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 16 deletions.
diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx
@@ -18,8 +18,8 @@ import { selectBarUnitLabel, selectIsRaw } from '../redux/selectors/plotlyDataSe
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import { selectBarStacking } from '../redux/slices/graphSlice';
 import Locales from '../types/locales';
-import translate from '../utils/translate';
 import SpinnerComponent from './SpinnerComponent';
+import { useTranslate } from 'redux/componentHooks';
 
 /**
  * Passes the current redux state of the barchart, and turns it into props for the React
@@ -64,6 +64,8 @@ export default function BarChartComponent() {
 	// useQueryHooks for data fetching
 	const datasets: Partial<Plotly.PlotData>[] = meterReadings.concat(groupData);
 
+	const translate = useTranslate();
+
 	if (meterIsFetching || groupIsFetching) {
 		return <SpinnerComponent loading height={50} width={50} />;
 	}
@@ -112,7 +114,7 @@ export default function BarChartComponent() {
 					modeBarButtonsToRemove: listOfButtons,
 					modeBarButtonsToAdd: [{
 						name: 'toggle-options',
-						title: translate('toggle option'),
+						title: translate('toggle.options'),
 						icon: Icons.pencil,
 						click: function () {
 							// # of items must differ so the length can tell which list of buttons is being set

diff --git a/src/client/app/components/ChartSelectComponent.tsx b/src/client/app/components/ChartSelectComponent.tsx
@@ -13,14 +13,15 @@ import { graphSlice, selectChartToRender } from '../redux/slices/graphSlice';
 import { SelectOption } from '../types/items';
 import { ChartTypes } from '../types/redux/graph';
 import { State } from '../types/redux/state';
-import translate from '../utils/translate';
+import { useTranslate } from 'redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  *  A component that allows users to select which chart should be displayed.
  * @returns Chart select element
  */
 export default function ChartSelectComponent() {
+	const translate = useTranslate();
 	const currentChartToRender = useAppSelector(selectChartToRender);
 	const dispatch = useAppDispatch();
 	const [expand, setExpand] = useState(false);

diff --git a/src/client/app/components/LineChartComponent.tsx b/src/client/app/components/LineChartComponent.tsx
@@ -17,7 +17,7 @@ import { selectLineChartDeps, selectPlotlyGroupData, selectPlotlyMeterData } fro
 import { selectLineUnitLabel } from '../redux/selectors/plotlyDataSelectors';
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import Locales from '../types/locales';
-import translate from '../utils/translate';
+import { useTranslate } from 'redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
 
 
@@ -57,6 +57,8 @@ export default function LineChartComponent() {
 	// Use Query Data to derive plotly datasets memoized selector
 	const unitLabel = useAppSelector(selectLineUnitLabel);
 
+	const translate = useTranslate();
+
 	// Display Plotly Buttons Feature
 	// The number of items in defaultButtons and advancedButtons must differ as discussed below
 	const defaultButtons: Plotly.ModeBarDefaultButtons[] = ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d',
@@ -99,7 +101,7 @@ export default function LineChartComponent() {
 					modeBarButtonsToRemove: listOfButtons,
 					modeBarButtonsToAdd: [{
 						name: 'toggle-options',
-						title: translate('toggle option'),
+						title: translate('toggle.options'),
 						icon: Icons.pencil,
 						click: function () {
 							// # of items must differ so the length can tell which list of buttons is being set

diff --git a/src/client/app/components/RadarChartComponent.tsx b/src/client/app/components/RadarChartComponent.tsx
@@ -23,7 +23,7 @@ import Locales from '../types/locales';
 import { AreaUnitType, getAreaUnitConversion } from '../utils/getAreaUnitConversion';
 import getGraphColor from '../utils/getGraphColor';
 import { lineUnitLabel } from '../utils/graphics';
-import translate from '../utils/translate';
+import { useTranslate } from 'redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
 
 /**
@@ -46,6 +46,8 @@ export default function RadarChartComponent() {
 	const selectedGroups = useAppSelector(selectSelectedGroups);
 	const meterDataById = useAppSelector(selectMeterDataById);
 	const groupDataById = useAppSelector(selectGroupDataById);
+
+	const translate = useTranslate();
 
 	if (meterIsLoading || groupIsLoading) {
 		return <SpinnerComponent loading width={50} height={50} />;
@@ -340,7 +342,7 @@ export default function RadarChartComponent() {
 					modeBarButtonsToRemove: listOfButtons,
 					modeBarButtonsToAdd: [{
 						name: 'toggle-options',
-						title: translate('toggle option'),
+						title: translate('toggle.options'),
 						icon: Icons.pencil,
 						click: function () {
 							// # of items must differ so the length can tell which list of buttons is being set

diff --git a/src/client/app/components/ThreeDComponent.tsx b/src/client/app/components/ThreeDComponent.tsx
@@ -20,7 +20,7 @@ import { UnitDataById } from '../types/redux/units';
 import { isValidThreeDInterval, roundTimeIntervalForFetch } from '../utils/dateRangeCompatibility';
 import { AreaUnitType, getAreaUnitConversion } from '../utils/getAreaUnitConversion';
 import { lineUnitLabel } from '../utils/graphics';
-import translate from '../utils/translate';
+import { useTranslate } from 'redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
 import ThreeDPillComponent from './ThreeDPillComponent';
 import Plot from 'react-plotly.js';
@@ -41,8 +41,7 @@ export default function ThreeDComponent() {
 	const graphState = useAppSelector(selectGraphState);
 	const locale = useAppSelector(selectSelectedLanguage);
 	const { meterOrGroupID, meterOrGroupName, isAreaCompatible } = useAppSelector(selectThreeDComponentInfo);
-
-
+	const translate = useTranslate();
 	// Initialize Default values
 	const threeDData = data;
 	let layout = {};
@@ -92,7 +91,7 @@ export default function ThreeDComponent() {
 						modeBarButtonsToRemove: listOfButtons,
 						modeBarButtonsToAdd: [{
 							name: 'more-options',
-							title: translate('toggle option'),
+							title: translate('toggle.options'),
 							icon: Icons.pencil,
 							click: function () {
 								// # of items must differ so the length can tell which list of buttons is being set
@@ -128,6 +127,8 @@ function formatThreeDData(
 	graphState: GraphState,
 	unitDataById: UnitDataById
 ) {
+	const translate = useTranslate();
+
 	// Initialize Plotly Data
 	const xDataToRender: string[] = [];
 	const yDataToRender: string[] = [];
@@ -250,6 +251,7 @@ function setThreeDLayout(zLabelText: string = 'Resource Usage', yDataToRender: s
 	const dataMin = Math.min(...dateObjects.map(date => date.getTime()));
 	const dataMax = Math.max(...dateObjects.map(date => date.getTime()));
 	const dataRange = dataMax - dataMin;
+	const translate = useTranslate();
 
 	//Calculate nTicks for small num of days on y-axis; possibly a better way
 	let nTicks, dTick = 'd1';

diff --git a/src/client/app/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts
@@ -6,7 +6,7 @@
 
 import { connect } from 'react-redux';
 import { getComparePeriodLabels, getCompareChangeSummary, calculateCompareShift } from '../utils/calculateCompare';
-import translate from '../utils/translate';
+import { useTranslate } from 'redux/componentHooks';
 // import * as React from 'react'; Convert from containers to components
 // import { useState } from 'react';
 import Plot from 'react-plotly.js';
@@ -63,6 +63,7 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps)
 	const groupDataById = selectGroupDataById(state);
 	const selectUnitState = unitDataById[graphingUnit];
 	const locale = selectSelectedLanguage(state);
+	const translate = useTranslate();
 	let unitLabel: string = '';
 	// If graphingUnit is -99 then none selected and nothing to graph so label is empty.
 	// This will probably happen when the page is first loaded.
@@ -251,7 +252,7 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps)
 			// modeBarButtonsToRemove: listOfButtons,
 			// modeBarButtonsToAdd: [{
 			// 	name: 'toggle-options',
-			// 	title: translate('Toggle Option'),
+			// 	title: translate('toggle.options'),
 			// 	icon: Icons.pencil,
 			// 	click: function () {
 			// 		// # of items must differ so the length can tell which list of buttons is being set

diff --git a/src/client/app/translations/data.ts b/src/client/app/translations/data.ts
@@ -442,7 +442,7 @@ const LocaleTranslationData = {
 		"TimeSortTypes.meter": "meter value or default",
 		"today": "Today",
 		"toggle.link": "Toggle chart link",
-		"Toggle Option" : "Toggle Option",
+		"toggle.options" : "Toggle options",
 		"total": "total",
 		"true": "True",
 		"TrueFalseType.false": "no",
@@ -951,7 +951,7 @@ const LocaleTranslationData = {
 		"TimeSortTypes.meter": "valeur du compteur ou valeur par défaut",
 		"today": "Aujourd'hui",
 		"toggle.link": "Bascule du lien du diagramme",
-		"Toggle Option" : "Option de bascule",
+		"toggle.options" : "Basculer les options",
 		"total": "total",
 		"true": "Vrai",
 		"TrueFalseType.false": "no\u{26A1}",
@@ -1461,7 +1461,7 @@ const LocaleTranslationData = {
 		"TimeSortTypes.meter": "valor del medidor o predeterminado",
 		"today": "Hoy",
 		"toggle.link": "Alternar enlace de gráfico",
-		"Toggle Option" : "Opción de alternar",
+		"toggle.options" : "Alternar opciones",
 		"total": "total",
 		"true": "Verdad",
 		"TrueFalseType.false": "no",