Merge pull request #1360 from hinyan17/development

Revised margins for graphics components
OpenEnergyDashboard · Oct 20, 2024 · fc9def3 · fc9def3
2 parents 3b4b8dc + cfefe8c
commit fc9def3
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 0 deletions.
diff --git a/src/client/app/components/BarChartComponent.tsx b/src/client/app/components/BarChartComponent.tsx
@@ -81,6 +81,7 @@ export default function BarChartComponent() {
 				data={datasets}
 				style={{ width: '100%', height: '100%', minHeight: '700px' }}
 				layout={{
+					margin: { t: 0, b: 0, r: 3 }, // Eliminate top, bottom, and right margins
 					barmode: (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

diff --git a/src/client/app/components/LineChartComponent.tsx b/src/client/app/components/LineChartComponent.tsx
@@ -78,6 +78,7 @@ export default function LineChartComponent() {
 				data={data}
 				style={{ width: '100%', height: '100%', minHeight: '700px' }}
 				layout={{
+					margin: { t: 0, b: 0, r: 3 }, // Eliminate top, bottom, and right margins
 					autosize: true, showlegend: true,
 					legend: { x: 0, y: 1.1, orientation: 'h' },
 					// 'fixedrange' on the yAxis means that dragging is only allowed on the xAxis which we utilize for selecting dateRanges

diff --git a/src/client/app/components/MapChartComponent.tsx b/src/client/app/components/MapChartComponent.tsx
@@ -419,6 +419,7 @@ export default function MapChartComponent() {
 
 	// set map background image
 	const layout: any = {
+		margin: { b: 0, l: 0, r: 0 }, // Eliminate bottom, left, and right margins
 		// Either the actual map name or text to say it is not available.
 		title: {
 			text: (map) ? map.name : translate('map.unavailable')

diff --git a/src/client/app/containers/MapChartContainer.ts b/src/client/app/containers/MapChartContainer.ts
@@ -308,6 +308,7 @@ function mapStateToProps(state: State) {
 
 	// set map background image
 	const layout: any = {
+		margin: { b: 0, l: 0, r: 0 }, // Eliminate bottom, left, and right margins
 		// Either the actual map name or text to say it is not available.
 		title: {
 			text: (map) ? map.name : translate('map.unavailable')