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] 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 }