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 
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 
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
1 Like
