I am using the Perspective Power Chart in a setting where a “dark mode” is much more legible for the use case. I’ve been able to configure the settings for the chart itself and the main header but the hideable components (tag browser, pen control) don’t seem to have any exposed style properties. Is there an easy way to edit them?
In general, is there a way to access the parts of a built-in Perspective component so I can make my own version? I’d also like to do things like apply custom methods to the Power Chart’s tag browser similar to the built in “filterBrowserNode” method on the Tag Browser Tree component. For various built-in components, I end up making my own from scratch when I find I can’t access internal properties. Is there source code or something I can access so I can leverage what already exists?
In general, no. By design, Perspective is less flexible in this way than Vision. The nature of Vision has always been a double-edged sword; we’re tightly beholden to Swing’s idiosyncracies, but you’re also able to reach deep into a component and tweak it’s rendering. Perspective meanwhile has much, much more comprehensive theming, but without allowing users to execute arbitrary Javascript, it does lack some customization.
In this particular case, I would recommend creating a post on the ideas portal describing which areas of the component you want better styling for, so we can create new style props. Others on this forum might also be able to help with a temporary workaround using so-called ‘style injection’ (@victordcq, you’re up 
); in some future release we’re planning on having a resource available to author arbitrary CSS in the designer, which would eliminate this need and expose new styling and animation possiblities for advanced users.
In the broadest sense, though, if you want full customization of a component, your last resort is the module SDK; you can create a module that embeds just about any arbitrary React component; it just has to match up with our backing property mechanism. There’s also some creative half-measures I’ve seen here on the forum, such as embedding custom pages in an iframe, which is probably easier than setting up all the scaffolding for a custom module.
1 Like
If you just want to change the colors your best bet would be to change the color vars the chart uses.
Then you wont need to know much about the structure of the chart.
.power-chart-component.ia_powerChartComponent {
--neutral-100: #FFFFFF;
--neutral-90: #EEEEEE;
--neutral-10: #000000;
--neutral-20: #222222;
}
You can apply this using them.css or css injection (check the forum)
You probablyl just one this one chart so use css injection and wrap the css below in }{
also use a class on the chart and add it to the selector, for this case you can just use a class selector rly
for example:
}.psc-darkTheme{ --neutral-100: #FFFFFF; --neutral-90: #EEEEEE; --neutral-10: #000000; --neutral-20: #222222; }{
(note this might not work in the designer (right away) so check the browser)
If you do still need to target specific things. You should try to use the inspector in google chrome
(ctrl +shift +i) and then (ctrl +shift+c) and hover over the component to highlight the html element. then you’ll have to dig around a bit to find the correct css selector.
3 Likes
