Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Readded buttons and removed unnecessary buttons #1329

Merged
merged 13 commits into from
Nov 28, 2024
Merged
22 changes: 20 additions & 2 deletions src/client/app/components/BarChartComponent.tsx
Original file line number Diff line number Diff line change
@@ -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';
@@ -17,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 { useTranslate } from '../redux/componentHooks';
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
@@ -53,6 +54,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);
@@ -102,7 +110,17 @@ export default function BarChartComponent() {
}}
config={{
responsive: true,
displayModeBar: false,
displayModeBar: true,
modeBarButtonsToRemove: listOfButtons,
modeBarButtonsToAdd: [{
name: 'toggle-options',
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
setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
}
}],
// Current Locale
locale,
// Available Locales
22 changes: 20 additions & 2 deletions src/client/app/components/LineChartComponent.tsx
Original file line number Diff line number Diff line change
@@ -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';
@@ -57,6 +58,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]);


@@ -88,8 +97,17 @@ export default function LineChartComponent() {
}}
config={{
responsive: true,
displayModeBar: false,
// Current Locale
displayModeBar: true,
modeBarButtonsToRemove: listOfButtons,
modeBarButtonsToAdd: [{
name: 'toggle-options',
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
setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
}
}],
locale,
// Available Locales
locales: Locales
19 changes: 19 additions & 0 deletions src/client/app/components/RadarChartComponent.tsx
Original file line number Diff line number Diff line change
@@ -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';
@@ -69,6 +70,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) {
@@ -322,6 +331,16 @@ export default function RadarChartComponent() {
useResizeHandler={true}
config={{
displayModeBar: true,
modeBarButtonsToRemove: listOfButtons,
modeBarButtonsToAdd: [{
name: 'toggle-options',
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
setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
}
}],
responsive: true,
locales: Locales // makes locales available for use
}}
23 changes: 20 additions & 3 deletions src/client/app/components/ThreeDComponent.tsx
Original file line number Diff line number Diff line change
@@ -28,6 +28,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';

@@ -45,13 +46,18 @@ export default function ThreeDComponent() {
const graphState = useAppSelector(selectGraphState);
const locale = useAppSelector(selectSelectedLanguage);
const { meterOrGroupID, meterOrGroupName, isAreaCompatible } = useAppSelector(selectThreeDComponentInfo);


// Initialize Default values
const threeDData = data;
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
@@ -85,7 +91,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.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
@@ -115,6 +131,7 @@ function formatThreeDData(
graphState: GraphState,
unitDataById: UnitDataById
) {

// Initialize Plotly Data
const xDataToRender: string[] = [];
const yDataToRender: string[] = [];
30 changes: 29 additions & 1 deletion src/client/app/containers/CompareChartContainer.ts
Original file line number Diff line number Diff line change
@@ -6,9 +6,13 @@

import { connect } from 'react-redux';
import { getComparePeriodLabels, getCompareChangeSummary, calculateCompareShift } from '../utils/calculateCompare';
// import { useTranslate } from 'redux/componentHooks';
// import * as React from 'react'; Convert from containers to components
// import { useState } from 'react';
// When this container gets converted to component,migrate to useTranslate() from componentHooks.ts
import translate from '../utils/translate';
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';
@@ -85,6 +89,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.
@@ -231,7 +247,19 @@ function mapStateToProps(state: RootState, ownProps: CompareChartContainerProps)
data: datasets,
layout,
config: {
displayModeBar: false,
displayModeBar: true,
modeBarButtonsToRemove: defaultButtons,
// TODO: Removes line above and uncomment below. Read above for more info
// modeBarButtonsToRemove: listOfButtons,
// modeBarButtonsToAdd: [{
// name: 'toggle-options',
// 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
// setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
// }
// }],
locale,
locales: Locales // makes locales available for use
}
3 changes: 3 additions & 0 deletions src/client/app/translations/data.ts
Original file line number Diff line number Diff line change
@@ -451,6 +451,7 @@ const LocaleTranslationData = {
"TimeSortTypes.increasing": "increasing",
"today": "Today",
"toggle.link": "Toggle chart link",
"toggle.options" : "Toggle options",
"total": "total",
"true": "True",
"TrueFalseType.false": "no",
@@ -972,6 +973,7 @@ const LocaleTranslationData = {
"TimeSortTypes.increasing": "en augmentant",
"today": "Aujourd'hui",
"toggle.link": "Bascule du lien du diagramme",
"toggle.options" : "Basculer les options",
"total": "total",
"true": "Vrai",
"TrueFalseType.false": "no\u{26A1}",
@@ -1494,6 +1496,7 @@ const LocaleTranslationData = {
"TimeSortTypes.increasing": "creciente",
"today": "Hoy",
"toggle.link": "Alternar enlace de gráfico",
"toggle.options" : "Alternar opciones",
"total": "total",
"true": "Verdad",
"TrueFalseType.false": "no",