Merge pull request #965 from huss/graphIssues

rate help; notify if cannot graph; fix rate with area
OpenEnergyDashboard · Jul 14, 2023 · 3e2252b · 3e2252b
2 parents 6fcd45a + f3edfea
commit 3e2252b
Show file tree

Hide file tree

Showing 7 changed files with 241 additions and 134 deletions.
diff --git a/src/client/app/components/GraphicRateMenuComponent.tsx b/src/client/app/components/GraphicRateMenuComponent.tsx
@@ -11,6 +11,7 @@ import Select from 'react-select';
 import translate from '../utils/translate';
 import { updateLineGraphRate } from '../actions/graph'
 import { LineGraphRate, LineGraphRates } from '../types/redux/graph';
+import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * React component that controls the line graph rate menu
@@ -58,6 +59,7 @@ export default function GraphicRateMenuComponent() {
 							}
 						}}
 					/>
+					<TooltipMarkerComponent page='home' helpTextId='help.home.select.rates' />
 				</div>
 			}
 		</div>

diff --git a/src/client/app/components/MultiCompareChartComponent.tsx b/src/client/app/components/MultiCompareChartComponent.tsx
@@ -53,7 +53,7 @@ export default function MultiCompareChartComponent(props: MultiCompareChartProps
 			</div>
 			{props.selectedCompareEntities.length === 0 &&
 				<div className='text-center' style={centeredStyle}>
-					<FormattedMessage id='empty.compare' />
+					<FormattedMessage id='select.meter.group' />
 				</div>
 			}
 		</div>

diff --git a/src/client/app/components/TooltipHelpComponent.tsx b/src/client/app/components/TooltipHelpComponent.tsx
@@ -76,6 +76,7 @@ export default class TooltipHelpComponent extends React.Component<TooltipHelpPro
 			'help.home.select.groups': { link: `${BASE_URL}/graphingGroups.html` },
 			'help.home.select.maps': { link: `${BASE_URL}/mapGraphic.html` },
 			'help.home.select.meters': { link: `${BASE_URL}/graphingMeters.html` },
+			'help.home.select.rates': { link: `${BASE_URL}/graphingRates.html` },
 			'help.home.select.units': { link: `${BASE_URL}/graphingUnits.html` },
 			'help.home.toggle.chart.link': { link: `${BASE_URL}/chartLink.html` },
 			'help.groups.groupdetails': { link: `${BASE_URL}/groupDetails.html` },

diff --git a/src/client/app/containers/BarChartContainer.ts b/src/client/app/containers/BarChartContainer.ts
@@ -7,11 +7,13 @@ import * as moment from 'moment';
 import { connect } from 'react-redux';
 import getGraphColor from '../utils/getGraphColor';
 import { State } from '../types/redux/state';
+import translate from '../utils/translate';
 import Plot from 'react-plotly.js';
 import Locales from '../types/locales';
 import { DataType } from '../types/Datasources';
 import { barUnitLabel } from '../utils/graphics';
 import { AreaUnitType, getAreaUnitConversion } from '../utils/getAreaUnitConversion';
+import { UnitRepresentType } from '../types/redux/units';
 
 /**
  * Passes the current redux state of the barchart, and turns it into props for the React
@@ -28,13 +30,18 @@ function mapStateToProps(state: State) {
 	// The unit label depends on the unit which is in selectUnit state.
 	const graphingUnit = state.graph.selectedUnit;
 	let unitLabel: string = '';
+	let raw = false;
 	// If graphingUnit is -99 then none selected and nothing to graph so label is empty.
 	// This will probably happen when the page is first loaded.
 	if (graphingUnit !== -99) {
 		const selectUnitState = state.units.units[state.graph.selectedUnit];
 		if (selectUnitState !== undefined) {
 			// Determine the y-axis label.
 			unitLabel = barUnitLabel(selectUnitState, state.graph.areaNormalization, state.graph.selectedAreaUnit);
+			if (selectUnitState.unitRepresent === UnitRepresentType.raw) {
+				// Cannot graph raw units as bar so put title to indicate that and empty otherwise.
+				raw = true;
+			}
 		}
 	}
 
@@ -155,41 +162,89 @@ function mapStateToProps(state: State) {
 		}
 	}
 
+	let layout: any;
 	// Customize the layout of the plot
-	const layout: any = {
-		barmode: (state.graph.barStacking ? 'stack' : 'group'),
-		bargap: 0.2, // Gap between different times of readings
-		bargroupgap: 0.1, // Gap between different meter's readings under the same timestamp
-		autosize: true,
-		height: 700,	// Height is set to 700 for now, but we do need to scale in the future (issue #466)
-		showlegend: true,
-		legend: {
-			x: 0,
-			y: 1.1,
-			orientation: 'h'
-		},
-		yaxis: {
-			title: unitLabel,
-			showgrid: true,
-			gridcolor: '#ddd'
-		},
-		xaxis: {
-			showgrid: true,
-			gridcolor: '#ddd',
-			tickfont: {
-				size: 10
+	// See https://community.plotly.com/t/replacing-an-empty-graph-with-a-message/31497 for showing text not plot.
+	if (raw) {
+		// This is a raw type graphing unit so cannot plot
+		layout = {
+			'xaxis': {
+				'visible': false
+			},
+			'yaxis': {
+				'visible': false
 			},
-			tickangle: -45,
-			autotick: true,
-			nticks: 10,
-			automargin: true
-		},
-		margin: {
-			t: 0,
-			b: 120,
-			l: 120
+			'annotations': [
+				{
+					'text': `<b>${translate('bar.raw')}</b>`,
+					'xref': 'paper',
+					'yref': 'paper',
+					'showarrow': false,
+					'font': {
+						'size': 28
+					}
+				}
+			]
 		}
-	};
+	} else if (datasets.length === 0) {
+		// There is not data so tell user.
+		layout = {
+			'xaxis': {
+				'visible': false
+			},
+			'yaxis': {
+				'visible': false
+			},
+			'annotations': [
+				{
+					'text': `${translate('select.meter.group')}`,
+					'xref': 'paper',
+					'yref': 'paper',
+					'showarrow': false,
+					'font': {
+						'size': 28
+					}
+				}
+			]
+		}
+
+	} else {
+		// This normal so plot.
+		layout = {
+			barmode: (state.graph.barStacking ? 'stack' : 'group'),
+			bargap: 0.2, // Gap between different times of readings
+			bargroupgap: 0.1, // Gap between different meter's readings under the same timestamp
+			autosize: true,
+			height: 700,	// Height is set to 700 for now, but we do need to scale in the future (issue #466)
+			showlegend: true,
+			legend: {
+				x: 0,
+				y: 1.1,
+				orientation: 'h'
+			},
+			yaxis: {
+				title: unitLabel,
+				showgrid: true,
+				gridcolor: '#ddd'
+			},
+			xaxis: {
+				showgrid: true,
+				gridcolor: '#ddd',
+				tickfont: {
+					size: 10
+				},
+				tickangle: -45,
+				autotick: true,
+				nticks: 10,
+				automargin: true
+			},
+			margin: {
+				t: 0,
+				b: 120,
+				l: 120
+			}
+		};
+	}
 
 	// Assign all the parameters required to create the Plotly object (data, layout, config) to the variable props, returned by mapStateToProps
 	// The Plotly toolbar is displayed if displayModeBar is set to true (not for bar charts)

diff --git a/src/client/app/containers/CompareChartContainer.ts b/src/client/app/containers/CompareChartContainer.ts
@@ -32,12 +32,14 @@ function mapStateToProps(state: State, ownProps: CompareChartContainerProps): an
 	const datasets: any[] = [];
 	const periodLabels = getComparePeriodLabels(comparePeriod);
 	// The unit label depends on the unit which is in selectUnit state.
+	// Also need to determine if raw.
 	const graphingUnit = state.graph.selectedUnit;
+	// This container is not called if there is no data of there are not units so this is safe.
+	const selectUnitState = state.units.units[state.graph.selectedUnit];
 	let unitLabel: string = '';
 	// If graphingUnit is -99 then none selected and nothing to graph so label is empty.
 	// This will probably happen when the page is first loaded.
 	if (graphingUnit !== -99) {
-		const selectUnitState = state.units.units[state.graph.selectedUnit];
 		if (selectUnitState !== undefined) {
 			// Quantity and flow units have different unit labels.
 			// Look up the type of unit if it is for quantity/flow (should not be raw) and decide what to do.
@@ -136,37 +138,64 @@ function mapStateToProps(state: State, ownProps: CompareChartContainerProps): an
 			}
 		);
 	}
-	const layout: any = {
-		title: `<b>${changeSummary}</b>`,
-		titlefont: {
-			size: 10,
-			color: colorize(entity.change)
-		},
-		hovermode: 'closest',
-		autosize: true,
-		width: 370,
-		height: 450,
-		showlegend: false,
-		legend: {
-		},
-		yaxis: {
-			title: unitLabel,
-			showgrid: true,
-			gridcolor: '#ddd'
-		},
-		xaxis: {
-			title: `${xTitle}`,
-			showgrid: false,
-			gridcolor: '#ddd',
-			automargin: true
-		},
-		margin: {
-			t: 20,
-			b: 120,
-			l: 60,
-			r: 20
+
+	let layout: any;
+	// Customize the layout of the plot
+	// See https://community.plotly.com/t/replacing-an-empty-graph-with-a-message/31497 for showing text not plot.
+	if (selectUnitState.unitRepresent === UnitRepresentType.raw) {
+		// This is a raw type graphing unit so cannot plot
+		layout = {
+			'xaxis': {
+				'visible': false
+			},
+			'yaxis': {
+				'visible': false
+			},
+			'annotations': [
+				{
+					'text': `<b>${translate('compare.raw')}</b>`,
+					'xref': 'paper',
+					'yref': 'paper',
+					'showarrow': false,
+					'font': {
+						'size': 18
+					}
+				}
+			]
 		}
-	};
+	} else {
+		layout = {
+			title: `<b>${changeSummary}</b>`,
+			titlefont: {
+				size: 10,
+				color: colorize(entity.change)
+			},
+			hovermode: 'closest',
+			autosize: true,
+			width: 370,
+			height: 450,
+			showlegend: false,
+			legend: {
+			},
+			yaxis: {
+				title: unitLabel,
+				showgrid: true,
+				gridcolor: '#ddd'
+			},
+			xaxis: {
+				title: `${xTitle}`,
+				showgrid: false,
+				gridcolor: '#ddd',
+				automargin: true
+			},
+			margin: {
+				t: 20,
+				b: 120,
+				l: 60,
+				r: 20
+			}
+		};
+	}
 
 	// Assign all the parameters required to create the Plotly object (data, layout, config) to the variable props, returned by mapStateToProps
 	// The Plotly toolbar is displayed if displayModeBar is set to true