How to get page width

[EugeneS]

Hey everyone, will apprereciate your help!

I have some dataview, that is showing multiple charts, 3 charts in a row. The only option I have found to properly render them is to set their width and height to pixels. I get pixels as 700/number of columns.
But, when I change mode to read mode, which is twice as wide, I would like the sizes to recalculate.

Is there any way to dynamicaly get page width instead of hardcoding it?

Code:

```dataviewjs
let dataMap = new Map()
let path = dv.current().file.folder
dv.pages(`"${ path }"`).filter(p => p.workout).forEach(p => 
	p.workout.split(';').forEach(row => {
		const terms = row.split(':')
		const title = terms[0].charAt(0).toUpperCase() + terms[0].slice(1).replace('-', ' ')
		if (!dataMap.has(title)) {
			dataMap.set(title, new Map())
		}
		const weekMap = dataMap.get(title)
		const date = p.file.name
		const week = moment(date, 'YYYY-MM-DD-dddd').isoWeek()
		if (!weekMap.has(week)) {
			weekMap.set(week, [])
		}
		const arr = weekMap.get(week)
		arr.push(terms[1])
	})
)

dataMap.forEach((data, key) => {
	if (key == 'Capoiera')
		return;
		
	dv.header(4, key)
	const aggregated = []
	data.forEach((arr, key) => {
		const sum = arr.reduce((acc, val) => acc + parseInt(val), 0); 
		const average = (sum / arr.length).toFixed(1)
		aggregated.push({ week: key, value: average });
	});
	
	const sortedData = aggregated.sort((d1, d2) => (d1.week > d2.week ? 1 : -1))
	const chartData = {  
		type: 'line',
		data: {
			labels: sortedData.map(d => d.week),
			datasets: [{
				label: key,
				data: [...sortedData.map(d => d.value)],
				borderColor: 'green',
				backgroundColor: 'green',
			}]
		},
		options: {
			plugins: {
				legend: {
					display: false
				}
			}
		}
	}
	window.renderChart(chartData, this.container);
	
})

this.container.style.display = "grid";
this.container.style.gridTemplateColumns = "1fr 1fr 1fr";
const columns = 3;
const totalWidth = 700;
const chartWidth = Math.floor(totalWidth / columns);
const chartHeight = Math.floor(chartWidth / 2);
for (let i = 0; i < this.container.childNodes.length; i += 2) {
	const column = (i / 2) % 3 + 1;
	const row = Math.floor(i / columns / 2) * 2 + 1;
	this.container.childNodes[i].style.gridColumn = column;
	this.container.childNodes[i].style.gridRow = row;
	this.container.childNodes[i+1].style.gridRow = row + 1;
	this.container.childNodes[i+1].style.maxWidth = chartWidth + "px";
	this.container.childNodes[i+1].style.maxHeight = chartHeight + "px";
}

P.S.
On my mobile phone it is not looking good as well. Ideally, I would like to get the relevant page size on mobile, and if it is possible, I would like to change number of columns to two on mobile - is there way to distinguish that it is mobile version?