Merge pull request #4 from OpenEnergyDashboard/development

update from origin
OpenEnergyDashboard · Feb 22, 2021 · bca4255 · bca4255
2 parents 2116f20 + f4e590d
commit bca4255
Show file tree

Hide file tree

Showing 85 changed files with 665 additions and 233 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,16 +67,16 @@
     "plotly.js": "~1.42.5",
     "prop-types": "~15.5.10",
     "rc-slider": "~8.6.6",
-    "react": "~16.3.2",
-    "react-dom": "~16.3.2",
+    "react": "~16.14.0",
+    "react-dom": "~16.14.0",
     "react-dropzone": "~4.2.13",
     "react-intl": "~2.4.0",
     "react-notification-system": "~0.2.17",
     "react-plotlyjs-ts": "~2.1.0",
     "react-redux": "~5.0.7",
     "react-router": "~3.0.5",
     "react-select": "~1.0.1",
-    "react-tooltip": "~3.4.0",
+    "react-tooltip": "~4.2.10",
     "reactstrap": "~8.0.0",
     "redux": "~3.7.2",
     "redux-thunk": "~2.2.0",
@@ -96,8 +96,8 @@
     "@types/moment": "~2.13.0",
     "@types/plotly.js": "~1.41.0",
     "@types/rc-slider": "~8.2.3",
-    "@types/react": "~16.3.11",
-    "@types/react-dom": "~16.0.5",
+    "@types/react": "~16.14.2",
+    "@types/react-dom": "~16.9.10",
     "@types/react-dropzone": "~4.2.0",
     "@types/react-intl": "~2.3.5",
     "@types/react-notification-system": "~0.2.35",

diff --git a/src/client/app/actions/admin.ts b/src/client/app/actions/admin.ts
@@ -23,6 +23,10 @@ export function updateDisplayTitle(displayTitle: string): t.UpdateDisplayTitleAc
 	return { type: ActionType.UpdateDisplayTitle, displayTitle };
 }
 
+export function updateTimeZone(timeZone: string): t.UpdateDefaultTimeZone {
+	return { type: ActionType.UpdateDefaultTimeZone, timeZone };
+}
+
 export function updateDefaultChartToRender(defaultChartToRender: ChartTypes): t.UpdateDefaultChartToRenderAction {
 	return { type: ActionType.UpdateDefaultChartToRender, defaultChartToRender };
 }
@@ -77,7 +81,8 @@ function submitPreferences() {
 				displayTitle: state.admin.displayTitle,
 				defaultChartToRender: state.admin.defaultChartToRender,
 				defaultBarStacking: state.admin.defaultBarStacking,
-				defaultLanguage: state.admin.defaultLanguage
+				defaultLanguage: state.admin.defaultLanguage,
+				defaultTimezone: state.admin.defaultTimeZone
 			});
 			dispatch(markPreferencesSubmitted());
 			showSuccessNotification(translate('updated.preferences'));

diff --git a/src/client/app/actions/compareReadings.ts b/src/client/app/actions/compareReadings.ts
@@ -4,12 +4,13 @@
 
 import * as moment from 'moment';
 import { TimeInterval } from '../../../common/TimeInterval';
-import { Dispatch, Thunk, ActionType } from '../types/redux/actions';
+import {Dispatch, Thunk, ActionType, GetState} from '../types/redux/actions';
 import { State } from '../types/redux/state';
 import { CompareReadings } from '../types/readings';
 import * as t from '../types/redux/compareReadings';
 import { metersApi, groupsApi } from '../utils/api';
 import { ComparePeriod, calculateCompareShift, calculateCompareTimeInterval } from '../utils/calculateCompare';
+import {changeCompareGraph} from './graph';
 
 /**
  * @param {State} state the Redux state
@@ -80,13 +81,12 @@ function receiveGroupCompareReadings(groupIDs: number[], timeInterval: TimeInter
 /**
  * Fetch the data for the given meters over the given interval. Fully manages the Redux lifecycle.
  * @param {[number]} meterIDs The IDs of the meters whose data should be fetched
- * @param {TimeInterval} timeInterval The time interval over which data should be fetched
- * @param {compareShift} compareShift The time shift between curr and prev
+ * @param {ComparePeriod} comparePeriod enum to represent a kind of time shift between curr and prev
  */
 function fetchMeterCompareReadings(meterIDs: number[], comparePeriod: ComparePeriod): Thunk {
-	const compareShift = calculateCompareShift(comparePeriod);
-	const currTimeInterval = calculateCompareTimeInterval(comparePeriod, moment());
-	return async (dispatch: Dispatch) => {
+	return async (dispatch: Dispatch, getState: GetState) => {
+		const compareShift = calculateCompareShift(comparePeriod);
+		const currTimeInterval = getState().graph.compareTimeInterval;
 		dispatch(requestMeterCompareReadings(meterIDs, currTimeInterval, compareShift));
 		const readings: CompareReadings = await metersApi.compareReadings(meterIDs, currTimeInterval, compareShift);
 		dispatch(receiveMeterCompareReadings(meterIDs, currTimeInterval, compareShift, readings));
@@ -96,13 +96,12 @@ function fetchMeterCompareReadings(meterIDs: number[], comparePeriod: ComparePer
 /**
  * Fetch the data for the given groups over the given interval. Fully manages the Redux lifecycle.
  * @param {[number]} groupIDs The IDs of the groups whose data should be fetched
- * @param {TimeInterval} timeInterval The time interval over which data should be fetched
- * @param {compareShift} compareShift The time shift between curr and prev
+ * @param {ComparePeriod} comparePeriod enum to represent a kind of time shift between curr and prev
  */
 function fetchGroupCompareReadings(groupIDs: number[], comparePeriod: ComparePeriod): Thunk {
-	const compareShift = calculateCompareShift(comparePeriod);
-	const currTimeInterval = calculateCompareTimeInterval(comparePeriod, moment());
-	return async (dispatch: Dispatch) => {
+	return async (dispatch: Dispatch, getState: GetState) => {
+		const compareShift = calculateCompareShift(comparePeriod);
+		const currTimeInterval = getState().graph.compareTimeInterval;
 		dispatch(requestGroupCompareReadings(groupIDs, currTimeInterval, compareShift));
 		const readings = await groupsApi.compareReadings(groupIDs, currTimeInterval, compareShift);
 		dispatch(receiveGroupCompareReadings(groupIDs, currTimeInterval, compareShift, readings));
@@ -117,9 +116,9 @@ function fetchGroupCompareReadings(groupIDs: number[], comparePeriod: ComparePer
  */
 export function fetchNeededCompareReadings(comparePeriod: ComparePeriod): Thunk {
 	return (dispatch, getState) => {
-		const compareShift = calculateCompareShift(comparePeriod);
-		const timeInterval = calculateCompareTimeInterval(comparePeriod, moment());
 		const state = getState();
+		const compareShift = calculateCompareShift(comparePeriod);
+		const timeInterval = state.graph.compareTimeInterval;
 		/* tslint:disable:array-type */
 		const promises: Array<Promise<any>> = [];
 		/* tslint:enable:array-type */

diff --git a/src/client/app/actions/graph.ts b/src/client/app/actions/graph.ts
@@ -61,20 +61,21 @@ export function changeBarDuration(barDuration: moment.Duration): Thunk {
 	};
 }
 
-function updateComparePeriod(comparePeriod: ComparePeriod): t.UpdateComparePeriodAction {
+function updateComparePeriod(comparePeriod: ComparePeriod, currentTime: moment.Moment): t.UpdateComparePeriodAction {
 	return {
 		type: ActionType.UpdateComparePeriod,
 		comparePeriod,
-		currentTime: moment()
+		currentTime
 	};
 }
 
 export function changeCompareGraph(comparePeriod: ComparePeriod): Thunk {
 	return (dispatch: Dispatch) => {
-		return Promise.all([
-			dispatch(updateComparePeriod(comparePeriod)),
-			dispatch(fetchNeededCompareReadings(comparePeriod))
-		]);
+		dispatch(updateComparePeriod(comparePeriod, moment()));
+		dispatch(dispatch2 => {
+			dispatch2(fetchNeededCompareReadings(comparePeriod));
+		});
+		return Promise.resolve();
 	};
 }
 
@@ -178,7 +179,7 @@ export function changeOptionsFromLink(options: LinkOptions) {
 	const dispatchFirst: Thunk[] = [setHotlinkedAsync(true)];
 	/* tslint:disable:array-type */
 	const dispatchSecond: Array<Thunk | t.ChangeChartToRenderAction | t.ChangeBarStackingAction
-		| t.ChangeCompareSortingOrderAction | t.SetOptionsVisibility> = [];
+		| t.ChangeGraphZoomAction |t.ChangeCompareSortingOrderAction | t.SetOptionsVisibility> = [];
 	/* tslint:enable:array-type */
 	if (options.meterIDs) {
 		dispatchFirst.push(fetchMetersDetailsIfNeeded());
@@ -203,6 +204,9 @@ export function changeOptionsFromLink(options: LinkOptions) {
 	if (options.toggleBarStacking) {
 		dispatchSecond.push(changeBarStacking());
 	}
+	if (options.serverRange) {
+		dispatchSecond.push(changeGraphZoomIfNeeded(options.serverRange));
+	}
 	if (options.comparePeriod) {
 		dispatchSecond.push(changeCompareGraph(options.comparePeriod));
 	}

diff --git a/src/client/app/components/ChartDataSelectComponent.tsx b/src/client/app/components/ChartDataSelectComponent.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import MultiSelectComponent from './MultiSelectComponent';
 import { SelectOption } from '../types/items';
 import { defineMessages, FormattedMessage, injectIntl, InjectedIntlProps } from 'react-intl';
+import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 interface ChartDataSelectProps {
 	meters: SelectOption[];
@@ -38,7 +39,9 @@ class ChartDataSelectComponent extends React.Component<ChartDataSelectPropsWithI
 		};
 		const messages = defineMessages({
 			selectGroups: {	id: 'select.groups' },
-			selectMeters: { id: 'select.meters' }
+			selectMeters: { id: 'select.meters' },
+			helpSelectGroups: {id: 'help.home.select.groups'},
+			helpSelectMeters: {id: 'help.home.select.meters'}
 		});
 		const { formatMessage } = this.props.intl;
 
@@ -56,6 +59,7 @@ class ChartDataSelectComponent extends React.Component<ChartDataSelectPropsWithI
 						placeholder={formatMessage(messages.selectGroups)}
 						onValuesChange={handleGroupSelect}
 					/>
+					<TooltipMarkerComponent page='home' helpTextId='help.home.select.groups'/>
 				</div>
 				<p style={labelStyle}>
 					<FormattedMessage id='meters' />:
@@ -67,6 +71,7 @@ class ChartDataSelectComponent extends React.Component<ChartDataSelectPropsWithI
 						placeholder={formatMessage(messages.selectMeters)}
 						onValuesChange={this.handleMeterSelect}
 					/>
+					<TooltipMarkerComponent page='home' helpTextId='help.home.select.meters'/>
 				</div>
 			</div>
 		);

diff --git a/src/client/app/components/ChartLinkComponent.tsx b/src/client/app/components/ChartLinkComponent.tsx
@@ -7,6 +7,7 @@ import { FormattedMessage } from 'react-intl';
 import { Button } from 'reactstrap';
 import {ChartTypes} from '../types/redux/graph';
 import {getRangeSliderInterval} from './DashboardComponent';
+import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 interface ChartLinkProps {
 	linkText: string;
@@ -52,6 +53,7 @@ export default class ChartLinkComponent extends React.Component<ChartLinkProps,
 				<Button	outline	onClick={this.toggleLink}>
 					<FormattedMessage id='toggle.link' />
 				</Button>
+				<TooltipMarkerComponent page='home' helpTextId='help.home.toggle.chart.link'/>
 				{this.state.showLink &&
 					<>
 						<div className='checkbox'>

diff --git a/src/client/app/components/ChartSelectComponent.tsx b/src/client/app/components/ChartSelectComponent.tsx
@@ -10,6 +10,7 @@ import Button from 'reactstrap/lib/Button';
 import ButtonGroup from 'reactstrap/lib/ButtonGroup';
 import { FormEvent } from 'react';
 import { FormattedMessage } from 'react-intl';
+import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 interface ChartSelectProps {
 	selectedChart: ChartTypes;
@@ -60,6 +61,9 @@ export default class ChartSelectComponent extends React.Component<ChartSelectPro
 						<FormattedMessage id='compare' />
 					</Button>
 				</ButtonGroup>
+				<div>
+					<TooltipMarkerComponent page='home' helpTextId='help.home.chart.select'/>
+				</div>
 			</div>
 		);
 	}