MMM-GrafanaChart panels side by side

[codac]

Hi Guys, I have a dashboard in Grafana which I would like to display on the MagicMirror with MMM-GrafanaChart.
As MMM-GrafanaChart works with PanelIDs with each module array I can only display one panel instead of the whole Dashboard.
So what I would like to achieve with CSS is to have one panel on top-right in the first row and in the second row I would like to have 3 different panels right next side-by-side.
How would the solution look like?

[iskrenpp]

I was able to do that the following way.
I have added 2 rows of equal size panels - 3 panels on each row and they look the same size.
Now the current master branch of this module still has a bug where the percentage height does not work. Reading some other issues here it looks like height in pixels works in the config.js.
But in my case I kept all panels in config.js same 100% for width and height.
Then in css/custom.css I added same section with matching module name from the HTML elements as this

#module_11_MMM-GrafanaChart iframe {
  width: 650px;
  height: 500px;
}

This effectively resizes the iframe container that holds the chart. Since this is in px and is strictly dependent on the display resolution there will be some finetunning with the correct / best pixel values depending on it.
Also in config.js for each chart I use in sequence positions: top_left, top center, top_right, bottom_left, bottom_center, bottom_right
TIP: once you add modules in config.js DO NOT switch their order in the array. Always add new modules at the end of the array. Otherwise the html element module index will change e.g. module_X and this will break your custom css
@codac I hope this ^^ helps

[klaernie]

@iskrenpp : You found the best solution - setting it in stone using CSS. However we should maybe think about adding a config option to set the id attribute of the iframe directly in the config, so writing CSS for it becomes better maintainable.

[Rene1695]

Hey,

can i get more details on how to realize this? Could you provide an example config.js and css file?

[klaernie]

It's this simple:

modules: [
	{
		module: 'MMM-GrafanaChart',
		position: 'top_right',
		config: {
				url: "https://localhost:5000/....",
				width: "100%",
				height: "69px", // Optional. Default: 100%
				scrolling: "no",
				refreshInterval: 900
		}
	},
]

We actually have a config option for this, so resorting to CSS is not even needed.

[Rene1695]

Hey,

thanks for the reply. Sorry for the misunderstanding, what i meant was to get multiple charts side-by-side. If, for example, two charts were added and position of both is set to "top_left", both charts will be put underneath. Is it possible to put them in the same row?

I also have other stuff in my mirror and would like to keep their positions.