Power Chart - Set X-Trace tag labels to their pen colour
This will set the tag labels and values shown in all x-trace panels to the colour of their chart pens. The script (dodgilly?) grabs the colours from the legend key at the bottom.
I haven’t tested if this works when the legend is collapsed into the smaller version
Instructions
Copy and paste into a View with a Power Chart and your operators will no longer become frustrated trying to eyeball x-trace tags with their corresponding pens on the chart.
Resources
Markdown Version
[
{
"type": "ia.display.markdown",
"version": 0,
"props": {
"style": {
"position": "absolute"
},
"markdown": {
"escapeHtml": false
}
},
"meta": {
"name": "JSInject_PowerChart_XTraceTagColours"
},
"position": {
"shrink": 0,
"basis": 0
},
"custom": {
"inlineJavascript": "(function() {\n function getPenColours() {\n const map = {};\n document.querySelectorAll('svg.pen-visibility-checkbox[data-pen-name]').forEach(svg => {\n const name = svg.getAttribute('data-pen-name');\n const fill = svg.style.fill;\n if (name && fill) map[name] = fill;\n });\n return map;\n }\n\n function colourXTraceLabels() {\n const penColours = getPenColours();\n document.querySelectorAll('.ia_powerChartComponent__xTrace__box__label').forEach(textEl => {\n const boldSpan = textEl.querySelector('tspan[style*="font-weight"]');\n if (!boldSpan) return;\n const penName = boldSpan.textContent.replace(/:\\s*$/, '').trim();\n if (penColours[penName]) {\n textEl.style.fill = penColours[penName];\n }\n });\n }\n\n if (window._xTraceObserver) window._xTraceObserver.disconnect();\n\n window._xTraceObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n const hasXTrace = [...mutation.addedNodes].some(node =>\n node.nodeType === 1 && (\n node.classList?.contains('ia_timeMarker') ||\n node.querySelector?.('.ia_timeMarker')\n )\n );\n const isInsideXTrace = mutation.target.closest?.(\n '.ia_timeMarker, .ia_powerChartComponent__xTrace__box'\n );\n if (hasXTrace || isInsideXTrace) {\n colourXTraceLabels();\n break;\n }\n }\n });\n\n window._xTraceObserver.observe(document.body, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n\n colourXTraceLabels();\n })();"
},
"propConfig": {
"props.source": {
"binding": {
"config": {
"struct": {
"script": "{this.custom.inlineJavascript}"
},
"waitOnAll": true
},
"transforms": [
{
"code": "#\tcode = \"<img style='display:none' src='/favicon.ico' onload=\\\"\" + value.script.replace('\"', '"') + '\\\"></img>'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '"')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile ' ' in script:\n\t script = script.replace(' ', ' ')\n\t\n\tcode = '<img style=\"display:none\" src=\"/favicon.ico\" onload=\"{}\"></img>'.format(script)\n\treturn code",
"type": "script"
}
],
"type": "expr-struct"
}
}
}
}
]
Periscope Version (N/A yet)
