Readded buttons and removed unnecessary buttons

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 { Icons } from 'plotly.js';
 import { TimeInterval } from '../../../common/TimeInterval';
 import { updateSliderRange } from '../redux/actions/extraActions';
 import { readingsApi, stableEmptyBarReadings } from '../redux/api/readingsApi';
@@ -52,6 +53,13 @@ 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'];
+	// Manage button states with useState
+	const	[listOfButtons, setListOfButtons] = React.useState(defaultButtons);
 
 	// useQueryHooks for data fetching
 	const datasets: Partial<Plotly.PlotData>[] = meterReadings.concat(groupData);
@@ -100,7 +108,17 @@ export default function BarChartComponent() {
 				}}
 				config={{
 					responsive: true,
-					displayModeBar: false,
+					displayModeBar: true,
+					modeBarButtonsToRemove: listOfButtons,
+					modeBarButtonsToAdd: [{
+						name: '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
+							setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+						}
+					}],
 					// Current Locale
 					locale,
 					// Available Locales

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<Plotly.PlotData>[] = React.useMemo(() => meterPlotlyData.concat(groupPlotlyData), [meterPlotlyData, groupPlotlyData]);
 
 
@@ -86,8 +95,17 @@ export default function LineChartComponent() {
 				}}
 				config={{
 					responsive: true,
-					displayModeBar: false,
-					// Current Locale
+					displayModeBar: true,
+					modeBarButtonsToRemove: listOfButtons,
+					modeBarButtonsToAdd: [{
+						name: '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
+							setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+						}
+					}],
 					locale,
 					// Available Locales
 					locales: Locales

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,6 +337,16 @@ export default function RadarChartComponent() {
 				useResizeHandler={true}
 				config={{
 					displayModeBar: true,
+					modeBarButtonsToRemove: listOfButtons,
+					modeBarButtonsToAdd: [{
+						name: '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
+							setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+						}
+					}],
 					responsive: true,
 					locales: Locales // makes locales available for use
 				}}

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
@@ -80,7 +88,17 @@ export default function ThreeDComponent() {
 					layout={layout as Plotly.Layout}
 					config={{
 						responsive: true,
-						displayModeBar: false,
+						displayModeBar: true,
+						modeBarButtonsToRemove: listOfButtons,
+						modeBarButtonsToAdd: [{
+							name: 'more-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
+								setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+							}
+						}],
 						// Current Locale
 						locale,
 						// Available Locales

src/client/app/containers/CompareChartContainer.ts

@@ -7,7 +7,10 @@
 import { connect } from 'react-redux';
 import { getComparePeriodLabels, getCompareChangeSummary, calculateCompareShift } from '../utils/calculateCompare';
 import translate from '../utils/translate';
+// 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 Locales from '../types/locales';
 import * as moment from 'moment';
 import { UnitRepresentType } from '../types/redux/units';
@@ -84,6 +87,18 @@ 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
+	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'];
+	// Manage button states with useState
+	const [listOfButtons, setListOfButtons] = 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.
@@ -230,7 +245,19 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps)
 		data: datasets,
 		layout,
 		config: {
-			displayModeBar: false,
+			displayModeBar: true,
+			modeBarButtonsToRemove: defaultButtons,
+			// TO DO: Removes line above and uncomment below. Read above for more info
+			// modeBarButtonsToRemove: listOfButtons,
+			// modeBarButtonsToAdd: [{
+			// 	name: '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
+			// 		setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+			// 	}
+			// }],
 			locale,
 			locales: Locales // makes locales available for use
 		}

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",