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: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12)
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: :stuck_out_tongue:](https://emoji.discourse-cdn.com/twitter/stuck_out_tongue.png?v=12)
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: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12)
1 Like