From d3605ebb0867eb9aeaf052bb225f8b46ff7afe23 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:34:35 -0500 Subject: [PATCH] updated toggle.options in data.ts and utilized useTranslate() --- src/client/app/components/BarChartComponent.tsx | 6 ++++-- src/client/app/components/ChartSelectComponent.tsx | 3 ++- src/client/app/components/LineChartComponent.tsx | 6 ++++-- src/client/app/components/RadarChartComponent.tsx | 6 ++++-- src/client/app/components/ThreeDComponent.tsx | 10 ++++++---- src/client/app/containers/CompareChartContainer.ts | 5 +++-- src/client/app/translations/data.ts | 6 +++--- 7 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx index 0d0f391cb..22d323fae 100644 --- 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[] = meterReadings.concat(groupData); + const translate = useTranslate(); + if (meterIsFetching || groupIsFetching) { return ; } @@ -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 index 9625734ae..de47867ca 100644 --- a/src/client/app/components/ChartSelectComponent.tsx +++ b/src/client/app/components/ChartSelectComponent.tsx @@ -13,7 +13,7 @@ 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'; /** @@ -21,6 +21,7 @@ import TooltipMarkerComponent from './TooltipMarkerComponent'; * @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 index 2385f80dc..2aeed6dd2 100644 --- 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 index d01241a26..9779ffa57 100644 --- 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 ; @@ -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 index b5f185640..358e34ade 100644 --- 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 index 945c8206d..525fcbe65 100644 --- 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 index 1da3206cf..75c9e7c09 100644 --- 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",