Skip to content

Commit

Permalink
Merge pull request #1329 from williamw04/Issue1161_RemoveIcons
Browse files Browse the repository at this point in the history
Readded buttons and removed unnecessary buttons
  • Loading branch information
huss authored Nov 28, 2024
2 parents c12f390 + ea1de0d commit c7c25cf
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 8 deletions.
22 changes: 20 additions & 2 deletions src/client/app/components/BarChartComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
22 changes: 20 additions & 2 deletions src/client/app/components/LineChartComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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]);


Expand Down Expand Up @@ -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
Expand Down
19 changes: 19 additions & 0 deletions src/client/app/components/RadarChartComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
}}
Expand Down
23 changes: 20 additions & 3 deletions src/client/app/components/ThreeDComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -115,6 +131,7 @@ function formatThreeDData(
graphState: GraphState,
unitDataById: UnitDataById
) {

// Initialize Plotly Data
const xDataToRender: string[] = [];
const yDataToRender: string[] = [];
Expand Down
30 changes: 29 additions & 1 deletion src/client/app/containers/CompareChartContainer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
}
Expand Down
3 changes: 3 additions & 0 deletions src/client/app/translations/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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}",
Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit c7c25cf

Please sign in to comment.