From 0578ebedcac5a48df789fff30bbe75e525c15112 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Wed, 31 Jul 2024 22:20:25 +0000 Subject: [PATCH 01/11] Readded buttons and removed unecessary buttons --- src/client/app/components/BarChartComponent.tsx | 3 ++- src/client/app/components/LineChartComponent.tsx | 4 ++-- src/client/app/components/RadarChartComponent.tsx | 2 +- src/client/app/components/ThreeDComponent.tsx | 3 ++- src/client/app/containers/CompareChartContainer.ts | 3 ++- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx index 755509308..8e80d6636 100644 --- a/src/client/app/components/BarChartComponent.tsx +++ b/src/client/app/components/BarChartComponent.tsx @@ -100,7 +100,8 @@ export default function BarChartComponent() { }} config={{ responsive: true, - displayModeBar: false, + displayModeBar: true, + modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], // Current Locale locale, // Available Locales diff --git a/src/client/app/components/LineChartComponent.tsx b/src/client/app/components/LineChartComponent.tsx index f71058629..299aeb9d3 100644 --- a/src/client/app/components/LineChartComponent.tsx +++ b/src/client/app/components/LineChartComponent.tsx @@ -86,8 +86,8 @@ export default function LineChartComponent() { }} config={{ responsive: true, - displayModeBar: false, - // Current Locale + displayModeBar: true, + modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], // Current Locale locale, // Available Locales locales: Locales diff --git a/src/client/app/components/RadarChartComponent.tsx b/src/client/app/components/RadarChartComponent.tsx index 37ce9a0b7..b40deebc0 100644 --- a/src/client/app/components/RadarChartComponent.tsx +++ b/src/client/app/components/RadarChartComponent.tsx @@ -328,7 +328,7 @@ export default function RadarChartComponent() { useResizeHandler={true} config={{ displayModeBar: true, - responsive: true, + modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], responsive: true, locales: Locales // makes locales available for use }} layout={layout} diff --git a/src/client/app/components/ThreeDComponent.tsx b/src/client/app/components/ThreeDComponent.tsx index 658df7415..d25d156b5 100644 --- a/src/client/app/components/ThreeDComponent.tsx +++ b/src/client/app/components/ThreeDComponent.tsx @@ -80,7 +80,8 @@ export default function ThreeDComponent() { layout={layout as Plotly.Layout} config={{ responsive: true, - displayModeBar: false, + displayModeBar: true, + modeBarButtonsToRemove: ['resetCameraDefault3d'], // Current Locale locale, // Available Locales diff --git a/src/client/app/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts index bfbce1b9c..82599c8c8 100644 --- a/src/client/app/containers/CompareChartContainer.ts +++ b/src/client/app/containers/CompareChartContainer.ts @@ -230,7 +230,8 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) data: datasets, layout, config: { - displayModeBar: false, + displayModeBar: true, + modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], locale, locales: Locales // makes locales available for use } From 7bee93d9a2f4fde816348fc2416442cfcc59d6ef Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Fri, 18 Oct 2024 16:15:00 -0400 Subject: [PATCH 02/11] advance button works to show, but doesn't hide --- .../app/components/BarChartComponent.tsx | 19 ++++++++++++++++++- .../app/components/RadarChartComponent.tsx | 3 ++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx index 8e80d6636..e5dd9a749 100644 --- a/src/client/app/components/BarChartComponent.tsx +++ b/src/client/app/components/BarChartComponent.tsx @@ -7,6 +7,7 @@ import { utc } from 'moment'; import { PlotRelayoutEvent } from 'plotly.js'; import * as React from 'react'; import Plot from 'react-plotly.js'; +import * as Plotly from "plotly.js"; import { TimeInterval } from '../../../common/TimeInterval'; import { updateSliderRange } from '../redux/actions/extraActions'; import { readingsApi, stableEmptyBarReadings } from '../redux/api/readingsApi'; @@ -52,6 +53,14 @@ export default function BarChartComponent() { const raw = useAppSelector(selectIsRaw); const unitLabel = useAppSelector(selectBarUnitLabel); + // Manage button states with useState + const [listOfButtons, setListOfButtons] = React.useState([ + 'zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d' + ]); + + const advancedButtons: Plotly.ModeBarDefaultButtons[] = [ + 'select2d', 'lasso2d', 'autoScale2d', 'resetScale2d' + ]; // useQueryHooks for data fetching const datasets: Partial[] = meterReadings.concat(groupData); @@ -101,7 +110,15 @@ export default function BarChartComponent() { config={{ responsive: true, displayModeBar: true, - modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], + modeBarButtonsToRemove: listOfButtons, + modeBarButtonsToAdd: [{ + name: 'more-options', + title: 'More Options', + icon: Plotly.Icons.pencil, + click: function () { + setListOfButtons(advancedButtons); // Update the state + } + }], // Current Locale locale, // Available Locales diff --git a/src/client/app/components/RadarChartComponent.tsx b/src/client/app/components/RadarChartComponent.tsx index b40deebc0..7fedeac8a 100644 --- a/src/client/app/components/RadarChartComponent.tsx +++ b/src/client/app/components/RadarChartComponent.tsx @@ -328,7 +328,8 @@ export default function RadarChartComponent() { useResizeHandler={true} config={{ displayModeBar: true, - modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], responsive: true, + modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], + responsive: true, locales: Locales // makes locales available for use }} layout={layout} From 0ad2d19060f45da102d94307e82bfcc9289fd943 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Fri, 18 Oct 2024 17:17:57 -0400 Subject: [PATCH 03/11] working advanced buttons --- .../app/components/BarChartComponent.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx index e5dd9a749..f82151a8f 100644 --- a/src/client/app/components/BarChartComponent.tsx +++ b/src/client/app/components/BarChartComponent.tsx @@ -7,7 +7,7 @@ import { utc } from 'moment'; import { PlotRelayoutEvent } from 'plotly.js'; import * as React from 'react'; import Plot from 'react-plotly.js'; -import * as Plotly from "plotly.js"; +import { Icons } from 'plotly.js'; import { TimeInterval } from '../../../common/TimeInterval'; import { updateSliderRange } from '../redux/actions/extraActions'; import { readingsApi, stableEmptyBarReadings } from '../redux/api/readingsApi'; @@ -53,15 +53,16 @@ export default function BarChartComponent() { const raw = useAppSelector(selectIsRaw); const unitLabel = useAppSelector(selectBarUnitLabel); - // Manage button states with useState - const [listOfButtons, setListOfButtons] = React.useState([ - 'zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d' - ]); - - const advancedButtons: Plotly.ModeBarDefaultButtons[] = [ + // The number of items in defaultButtons and advancedButtons must differ as discussed below + const defaultButtons: Plotly.ModeBarDefaultButtons[] = [ + 'zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']; + const advancedButtons: Plotly.ModeBarDefaultButtons[] = [ 'select2d', 'lasso2d', 'autoScale2d', 'resetScale2d' ]; + // Manage button states with useState + const [listOfButtons, setListOfButtons] = React.useState(defaultButtons); + // useQueryHooks for data fetching const datasets: Partial[] = meterReadings.concat(groupData); @@ -114,9 +115,10 @@ export default function BarChartComponent() { modeBarButtonsToAdd: [{ name: 'more-options', title: 'More Options', - icon: Plotly.Icons.pencil, + icon: Icons.pencil, click: function () { - setListOfButtons(advancedButtons); // Update the state + // # of items must differ so the length can tell which list of buttons is being set + setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state } }], // Current Locale From 1355633ac4c34bdc93997f66d6fb7f4e8dbf6e51 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Sat, 19 Oct 2024 00:05:51 +0000 Subject: [PATCH 04/11] custom button added to all graphics --- .../app/components/BarChartComponent.tsx | 26 +++++++++---------- .../app/components/LineChartComponent.tsx | 20 +++++++++++++- .../app/components/RadarChartComponent.tsx | 20 +++++++++++++- src/client/app/components/ThreeDComponent.tsx | 19 +++++++++++++- .../app/containers/CompareChartContainer.ts | 21 ++++++++++++++- 5 files changed, 88 insertions(+), 18 deletions(-) diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx index f82151a8f..2b9394b99 100644 --- a/src/client/app/components/BarChartComponent.tsx +++ b/src/client/app/components/BarChartComponent.tsx @@ -53,16 +53,14 @@ export default function BarChartComponent() { const raw = useAppSelector(selectIsRaw); const unitLabel = useAppSelector(selectBarUnitLabel); + // 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', 'zoomOut2d', 'autoScale2d', 'resetScale2d']; - const advancedButtons: Plotly.ModeBarDefaultButtons[] = [ - 'select2d', 'lasso2d', 'autoScale2d', 'resetScale2d' - ]; - + const defaultButtons: Plotly.ModeBarDefaultButtons[] = ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', + 'resetScale2d']; + const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d']; // Manage button states with useState const [listOfButtons, setListOfButtons] = React.useState(defaultButtons); - + // useQueryHooks for data fetching const datasets: Partial[] = meterReadings.concat(groupData); @@ -113,14 +111,14 @@ export default function BarChartComponent() { displayModeBar: true, modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ - name: 'more-options', - title: 'More Options', - icon: Icons.pencil, - click: function () { + name: 'more-options', + title: 'More Options', + icon: Icons.pencil, + click: function () { // # of items must differ so the length can tell which list of buttons is being set - setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state - } - }], + setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state + } + }], // Current Locale locale, // Available Locales diff --git a/src/client/app/components/LineChartComponent.tsx b/src/client/app/components/LineChartComponent.tsx index 299aeb9d3..77eb8098e 100644 --- a/src/client/app/components/LineChartComponent.tsx +++ b/src/client/app/components/LineChartComponent.tsx @@ -7,6 +7,7 @@ import { utc } from 'moment'; import { PlotRelayoutEvent } from 'plotly.js'; import * as React from 'react'; import Plot from 'react-plotly.js'; +import { Icons } from 'plotly.js'; import { TimeInterval } from '../../../common/TimeInterval'; import { updateSliderRange } from '../redux/actions/extraActions'; import { readingsApi, stableEmptyLineReadings } from '../redux/api/readingsApi'; @@ -56,6 +57,14 @@ export default function LineChartComponent() { // Use Query Data to derive plotly datasets memoized selector const unitLabel = useAppSelector(selectLineUnitLabel); + // 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', + 'zoomOut2d', 'autoScale2d','resetScale2d']; + const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d','autoScale2d','resetScale2d']; + // Manage button states with useState + const [listOfButtons, setListOfButtons] = React.useState(defaultButtons); + const data: Partial[] = React.useMemo(() => meterPlotlyData.concat(groupPlotlyData), [meterPlotlyData, groupPlotlyData]); @@ -87,7 +96,16 @@ export default function LineChartComponent() { config={{ responsive: true, displayModeBar: true, - modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], // Current Locale + modeBarButtonsToRemove: listOfButtons, + modeBarButtonsToAdd: [{ + name: 'more-options', + title: 'More Options', + icon: Icons.pencil, + click: function () { + // # of items must differ so the length can tell which list of buttons is being set + setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state + } + }], locale, // Available Locales locales: Locales diff --git a/src/client/app/components/RadarChartComponent.tsx b/src/client/app/components/RadarChartComponent.tsx index 7fedeac8a..d700ab8da 100644 --- a/src/client/app/components/RadarChartComponent.tsx +++ b/src/client/app/components/RadarChartComponent.tsx @@ -7,6 +7,7 @@ import * as moment from 'moment'; import { Layout } from 'plotly.js'; import * as React from 'react'; import Plot from 'react-plotly.js'; +import { Icons } from 'plotly.js'; import { selectGroupDataById } from '../redux/api/groupsApi'; import { selectMeterDataById } from '../redux/api/metersApi'; import { readingsApi } from '../redux/api/readingsApi'; @@ -67,6 +68,14 @@ export default function RadarChartComponent() { // The rate will be 1 if it is per hour (since state readings are per hour) or no rate scaling so no change. const rateScaling = needsRateScaling ? currentSelectedRate.rate : 1; + // 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', 'zoomOut2d', 'autoScale2d', + 'resetScale2d']; + const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d']; + // Manage button states with useState + const [listOfButtons, setListOfButtons] = React.useState(defaultButtons); + // Add all valid data from existing meters to the radar plot for (const meterID of selectedMeters) { if (meterReadings) { @@ -328,7 +337,16 @@ export default function RadarChartComponent() { useResizeHandler={true} config={{ displayModeBar: true, - modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], + modeBarButtonsToRemove: listOfButtons, + modeBarButtonsToAdd: [{ + name: 'more-options', + title: 'More Options', + icon: Icons.pencil, + click: function () { + // # of items must differ so the length can tell which list of buttons is being set + setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state + } + }], responsive: true, locales: Locales // makes locales available for use }} diff --git a/src/client/app/components/ThreeDComponent.tsx b/src/client/app/components/ThreeDComponent.tsx index d25d156b5..61253533c 100644 --- a/src/client/app/components/ThreeDComponent.tsx +++ b/src/client/app/components/ThreeDComponent.tsx @@ -24,6 +24,7 @@ import translate from '../utils/translate'; import SpinnerComponent from './SpinnerComponent'; import ThreeDPillComponent from './ThreeDPillComponent'; import Plot from 'react-plotly.js'; +import { Icons } from 'plotly.js'; import { selectSelectedLanguage } from '../redux/slices/appStateSlice'; import Locales from '../types/locales'; @@ -47,6 +48,13 @@ export default function ThreeDComponent() { let layout = {}; let dataToRender = null; + // 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', 'zoomOut2d', 'autoScale2d', + 'resetScale2d']; + const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['resetCameraDefault3d']; + // Manage button states with useState + const [listOfButtons, setListOfButtons] = React.useState(defaultButtons); if (!meterOrGroupID) { // No selected Meters @@ -81,7 +89,16 @@ export default function ThreeDComponent() { config={{ responsive: true, displayModeBar: true, - modeBarButtonsToRemove: ['resetCameraDefault3d'], + modeBarButtonsToRemove: listOfButtons, + modeBarButtonsToAdd: [{ + name: 'more-options', + title: 'More Options', + icon: Icons.pencil, + click: function () { + // # of items must differ so the length can tell which list of buttons is being set + setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state + } + }], // Current Locale locale, // Available Locales diff --git a/src/client/app/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts index 82599c8c8..e44b60d1e 100644 --- a/src/client/app/containers/CompareChartContainer.ts +++ b/src/client/app/containers/CompareChartContainer.ts @@ -7,7 +7,9 @@ import { connect } from 'react-redux'; import { getComparePeriodLabels, getCompareChangeSummary, calculateCompareShift } from '../utils/calculateCompare'; import translate from '../utils/translate'; +import * as React from 'react'; import Plot from 'react-plotly.js'; +import { Icons } from 'plotly.js'; import Locales from '../types/locales'; import * as moment from 'moment'; import { UnitRepresentType } from '../types/redux/units'; @@ -84,6 +86,14 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) } } + // 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', 'zoomOut2d', 'autoScale2d', + 'resetScale2d']; + const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d']; + // Manage button states with useState + const [listOfButtons, setListOfButtons] = React.useState(defaultButtons); + // Get the time shift for this comparison as a moment duration const compareShift = calculateCompareShift(comparePeriod); // The start and end of this time period. Need to create new moment objects since subtraction mutates the original. @@ -231,7 +241,16 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) layout, config: { displayModeBar: true, - modeBarButtonsToRemove: ['select2d','lasso2d','autoScale2d','resetScale2d'], + modeBarButtonsToRemove: listOfButtons, + modeBarButtonsToAdd: [{ + name: 'more-options', + title: 'More Options', + icon: Icons.pencil, + click: function () { + // # of items must differ so the length can tell which list of buttons is being set + setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state + } + }], locale, locales: Locales // makes locales available for use } From d4ce8de19a4004d5375981cdab4eee48923d9dc2 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Sat, 26 Oct 2024 23:31:50 -0400 Subject: [PATCH 05/11] requested changes --- .../app/components/BarChartComponent.tsx | 4 +- .../app/components/LineChartComponent.tsx | 4 +- .../app/components/RadarChartComponent.tsx | 4 +- src/client/app/components/ThreeDComponent.tsx | 2 +- .../app/containers/CompareChartContainer.ts | 37 +++++++++++-------- 5 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx index 2b9394b99..8b4b3d486 100644 --- a/src/client/app/components/BarChartComponent.tsx +++ b/src/client/app/components/BarChartComponent.tsx @@ -111,8 +111,8 @@ export default function BarChartComponent() { displayModeBar: true, modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ - name: 'more-options', - title: 'More Options', + name: 'toggle-options', + title: '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/LineChartComponent.tsx b/src/client/app/components/LineChartComponent.tsx index 77eb8098e..d27823c6b 100644 --- a/src/client/app/components/LineChartComponent.tsx +++ b/src/client/app/components/LineChartComponent.tsx @@ -98,8 +98,8 @@ export default function LineChartComponent() { displayModeBar: true, modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ - name: 'more-options', - title: 'More Options', + name: 'toggle-options', + title: '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 d700ab8da..9a436f443 100644 --- a/src/client/app/components/RadarChartComponent.tsx +++ b/src/client/app/components/RadarChartComponent.tsx @@ -339,8 +339,8 @@ export default function RadarChartComponent() { displayModeBar: true, modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ - name: 'more-options', - title: 'More Options', + name: 'toggle-options', + title: '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 61253533c..9ddc8a36c 100644 --- a/src/client/app/components/ThreeDComponent.tsx +++ b/src/client/app/components/ThreeDComponent.tsx @@ -92,7 +92,7 @@ export default function ThreeDComponent() { modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ name: 'more-options', - title: 'More Options', + title: '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/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts index e44b60d1e..272039237 100644 --- a/src/client/app/containers/CompareChartContainer.ts +++ b/src/client/app/containers/CompareChartContainer.ts @@ -7,9 +7,10 @@ import { connect } from 'react-redux'; import { getComparePeriodLabels, getCompareChangeSummary, calculateCompareShift } from '../utils/calculateCompare'; import translate from '../utils/translate'; -import * as React from 'react'; +// import * as React from 'react'; Convert from containers to components +// import { useState } from 'react'; import Plot from 'react-plotly.js'; -import { Icons } from 'plotly.js'; +// import { Icons } from 'plotly.js'; import Locales from '../types/locales'; import * as moment from 'moment'; import { UnitRepresentType } from '../types/redux/units'; @@ -86,13 +87,17 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) } } - // Display Plotly Buttons Feature + // To Do: When I click this icon it crashes OED. The error relates to using a Hook (useState, I think) + // outside a component. This does not use a component as the other graphics do as it is + // a container. It either needs a modified solution or the component needs to be converted. + // Only after the component has been converted uncomment the code below and in plotly config + // 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', 'zoomOut2d', 'autoScale2d', 'resetScale2d']; - const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d']; + // const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d']; // Manage button states with useState - const [listOfButtons, setListOfButtons] = React.useState(defaultButtons); + // const [listOfButtons, setListOfButtons] = useState(defaultButtons); // Get the time shift for this comparison as a moment duration const compareShift = calculateCompareShift(comparePeriod); @@ -241,16 +246,18 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) layout, config: { displayModeBar: true, - modeBarButtonsToRemove: listOfButtons, - modeBarButtonsToAdd: [{ - name: 'more-options', - title: 'More Options', - icon: Icons.pencil, - click: function () { - // # of items must differ so the length can tell which list of buttons is being set - setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state - } - }], + modeBarButtonsToRemove: defaultButtons, + // TO DO: Removes line above and uncomment betlow. Read above for more info + // modeBarButtonsToRemove: listOfButtons, + // modeBarButtonsToAdd: [{ + // name: 'toggle-options', + // title: 'Toggle Options', + // icon: Icons.pencil, + // click: function () { + // // # of items must differ so the length can tell which list of buttons is being set + // setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state + // } + // }], locale, locales: Locales // makes locales available for use } From b6bc76ebc3131292f178a8a20986d89f078b2bb2 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Fri, 1 Nov 2024 22:00:17 -0400 Subject: [PATCH 06/11] implementing request changes and translation --- .../app/components/BarChartComponent.tsx | 2 +- .../app/components/LineChartComponent.tsx | 2 +- .../app/components/RadarChartComponent.tsx | 2 +- src/client/app/components/ThreeDComponent.tsx | 2 +- .../app/containers/CompareChartContainer.ts | 18 +++++++++--------- src/client/app/translations/data.ts | 3 +++ 6 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx index 8b4b3d486..0d0f391cb 100644 --- a/src/client/app/components/BarChartComponent.tsx +++ b/src/client/app/components/BarChartComponent.tsx @@ -112,7 +112,7 @@ export default function BarChartComponent() { modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ name: 'toggle-options', - title: 'Toggle Options', + title: translate('toggle option'), 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/LineChartComponent.tsx b/src/client/app/components/LineChartComponent.tsx index d27823c6b..2385f80dc 100644 --- a/src/client/app/components/LineChartComponent.tsx +++ b/src/client/app/components/LineChartComponent.tsx @@ -99,7 +99,7 @@ export default function LineChartComponent() { modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ name: 'toggle-options', - title: 'Toggle Options', + title: translate('toggle option'), 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 9a436f443..d01241a26 100644 --- a/src/client/app/components/RadarChartComponent.tsx +++ b/src/client/app/components/RadarChartComponent.tsx @@ -340,7 +340,7 @@ export default function RadarChartComponent() { modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ name: 'toggle-options', - title: 'Toggle Options', + title: translate('toggle option'), 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 9ddc8a36c..b5f185640 100644 --- a/src/client/app/components/ThreeDComponent.tsx +++ b/src/client/app/components/ThreeDComponent.tsx @@ -92,7 +92,7 @@ export default function ThreeDComponent() { modeBarButtonsToRemove: listOfButtons, modeBarButtonsToAdd: [{ name: 'more-options', - title: 'Toggle Options', + title: translate('toggle option'), 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/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts index 272039237..197840c02 100644 --- a/src/client/app/containers/CompareChartContainer.ts +++ b/src/client/app/containers/CompareChartContainer.ts @@ -87,17 +87,17 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) } } - // To Do: When I click this icon it crashes OED. The error relates to using a Hook (useState, I think) - // outside a component. This does not use a component as the other graphics do as it is - // a container. It either needs a modified solution or the component needs to be converted. - // Only after the component has been converted uncomment the code below and in plotly config + /* TODO When I click this icon it crashes OED. The error relates to using a Hook (useState, I think) + outside a component. This does not use a component as the other graphics do as it is + a container. It either needs a modified solution or the component needs to be converted. + Only after the component has been converted uncomment the code below and in plotly config // Display Plotly Buttons Feature: - // The number of items in defaultButtons and advancedButtons must differ as discussed below + // The number of items in defaultButtons and advancedButtons must differ as discussed below */ const defaultButtons: Plotly.ModeBarDefaultButtons[] = ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']; - // const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d']; + /* const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d']; // Manage button states with useState - // const [listOfButtons, setListOfButtons] = useState(defaultButtons); + const [listOfButtons, setListOfButtons] = useState(defaultButtons); */ // Get the time shift for this comparison as a moment duration const compareShift = calculateCompareShift(comparePeriod); @@ -247,11 +247,11 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) config: { displayModeBar: true, modeBarButtonsToRemove: defaultButtons, - // TO DO: Removes line above and uncomment betlow. Read above for more info + // TO DO: Removes line above and uncomment below. Read above for more info // modeBarButtonsToRemove: listOfButtons, // modeBarButtonsToAdd: [{ // name: 'toggle-options', - // title: 'Toggle Options', + // title: translate('Toggle Option'), // 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 1ffba4030..1da3206cf 100644 --- a/src/client/app/translations/data.ts +++ b/src/client/app/translations/data.ts @@ -442,6 +442,7 @@ const LocaleTranslationData = { "TimeSortTypes.meter": "meter value or default", "today": "Today", "toggle.link": "Toggle chart link", + "Toggle Option" : "Toggle Option", "total": "total", "true": "True", "TrueFalseType.false": "no", @@ -950,6 +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", "total": "total", "true": "Vrai", "TrueFalseType.false": "no\u{26A1}", @@ -1459,6 +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", "total": "total", "true": "Verdad", "TrueFalseType.false": "no", From f1cc007b14d30ac2a5c6f4882ac1361f58e2c3e2 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Sat, 2 Nov 2024 02:08:13 +0000 Subject: [PATCH 07/11] final changes to pass checks --- src/client/app/containers/CompareChartContainer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/app/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts index 197840c02..945c8206d 100644 --- a/src/client/app/containers/CompareChartContainer.ts +++ b/src/client/app/containers/CompareChartContainer.ts @@ -87,8 +87,8 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) } } - /* TODO When I click this icon it crashes OED. The error relates to using a Hook (useState, I think) - outside a component. This does not use a component as the other graphics do as it is + /* TODO When I click this icon it crashes OED. The error relates to using a Hook (useState, I think) + outside a component. This does not use a component as the other graphics do as it is a container. It either needs a modified solution or the component needs to be converted. Only after the component has been converted uncomment the code below and in plotly config // Display Plotly Buttons Feature: From cb8af66b6f571bf9a75c98fbe727d911f4c77870 Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Tue, 12 Nov 2024 16:40:30 -0500 Subject: [PATCH 08/11] dom package --- package-lock.json | 8 -------- 1 file changed, 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29a99bf36..c39434628 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1633,14 +1633,6 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/add-dom-event-listener": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz", - "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==", - "dependencies": { - "object-assign": "4.x" - } - }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", 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 09/11] 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", From 174a74e7d5722c385d66e3d35f4dd6eb9f19a96a Mon Sep 17 00:00:00 2001 From: William Wu <105890943+williamw04@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:36:27 -0500 Subject: [PATCH 10/11] removed trailing space to pass test and check --- src/client/app/components/RadarChartComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/app/components/RadarChartComponent.tsx b/src/client/app/components/RadarChartComponent.tsx index dc320b5ee..35ff6d34e 100644 --- a/src/client/app/components/RadarChartComponent.tsx +++ b/src/client/app/components/RadarChartComponent.tsx @@ -48,7 +48,7 @@ export default function RadarChartComponent() { const selectedGroups = useAppSelector(selectSelectedGroups); const meterDataById = useAppSelector(selectMeterDataById); const groupDataById = useAppSelector(selectGroupDataById); - + if (meterIsLoading || groupIsLoading) { return ; // return From ea1de0d88e30680c33fbaccfaba238f7d91ea4f8 Mon Sep 17 00:00:00 2001 From: Steven Huss-Lederman Date: Thu, 28 Nov 2024 12:58:59 -0600 Subject: [PATCH 11/11] minor wording fix --- src/client/app/containers/CompareChartContainer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/app/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts index 1f9d33213..cabbd8490 100644 --- a/src/client/app/containers/CompareChartContainer.ts +++ b/src/client/app/containers/CompareChartContainer.ts @@ -249,7 +249,7 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps) config: { displayModeBar: true, modeBarButtonsToRemove: defaultButtons, - // TO DO: Removes line above and uncomment below. Read above for more info + // TODO: Removes line above and uncomment below. Read above for more info // modeBarButtonsToRemove: listOfButtons, // modeBarButtonsToAdd: [{ // name: 'toggle-options',