Perspective Power Chart Selected Pen

Is there any way to get the currently selected/highlighted pen? I've been trying for a while looking over some of @victordcq's Javascript injections and haven't made it very far. I figured if I could get the stroke width of the clicked pen, I could assign them unique widths when highlighted.

This is as far as I got:

	code =  """<img style='display:none' src='/favicon.ico' onload=\"
		const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; 
		console.log(view);
				
		document.querySelectorAll('#trend-power-chart g.ia_lineChart g g path').forEach(e => {
			const computedStyle = window.getComputedStyle(e);
			const strokeWidth = computedStyle.getPropertyValue('stroke-width');
			console.log(strokeWidth);

			view.custom.write('selectedIndex',strokeWidth);
		});	
				
	\"></img>""".replace("\n", "").replace("\t", "")
	return code

Is there a better / different way?

So actually you just want to make them bigger when hovered?

You can do that with some css too

#trend-power-chart g.ia_lineChart:has(path:hover) path {
    stroke-width: 5px !important
}

Or what do you mean with selected pen? I see a property selectable, but i dont realy see what it does.

There are also pen styles about selected

I guess I should have been more clear - I'm just trying to figure out what the currently selected pen is so I can display some markers with it. For example, if I had 3 analog points on the chart, clicking on one could read the alarm bounds from the tag and show as markers. The only thing I don't know how to do is get the currently active pen.

My thought was I could do some sort of markdown to detect when #<dom-id> g.ia_lineChart g g path is clicked and have it write to a custom prop. With the click I was thinking I could watch for the stroke-width to change, or something else?

Thanks for looking!

i dont understand why you would need to check stroke width?

I probably don't, it's just what I notice changes when I click on a pen in CSS.

if you have the click event you already know which pen is clicked, since you are adding an event on every line

How would I know which pen was clicked? Count the path element that I'm on?

You can get the index by looking at the parent

This should work :slight_smile:
Add in your id's in the selector too ofc

#make the propName the key to write too in the view.custom 
		propName = "penId"
		code =  """<img style='display:none' src='/favicon.ico' onload=\"
			const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.closest('[data-component-path]').getAttributeNode('data-component-path').value.split('.')[0]).value; 
			function onclick(ev) {				
				const line = ev.target.closest('.ia_lineChart');
				console.log(line);
				ev.preventDefault(); 				
				const penId = Array.prototype.indexOf.call(line.parentNode.children, line);
				console.log(penId);
				view.custom.write('"""+propName+"""',penId);
			};	
			const callbackChart = (mutationList, observer) => {
				document.querySelectorAll('g.ia_lineChart').forEach(e => {											
						e.onclick = onclick;
					});	
			};							
			const observerChart = new MutationObserver(callbackChart); 
			const charts = document.querySelectorAll('.main-chart-container');
			charts.forEach(chart => observerChart.observe(chart, { attributes: false, childList: true, subtree: true }));	
			document.querySelectorAll('g.ia_lineChart').forEach(e => {										
						e.onclick = onclick;
					});			
		\"></img>""".replace("\n", "").replace("\t", "")
		return code
2 Likes

Excellent - exactly what I was looking for. Wish I could say I was closer than I was to getting that working :stuck_out_tongue:

The charts and tables are a bit more tricky since you need an mutation observer for it to work properly.

And yes JS in perspective is not very easy^^ But good job for trying before asking :slight_smile:

1 Like