Solved: Traffic Graph Colour - Help!
-
Guys,
Do any of you know where the default traffic graph colour can be changed?
I have been hunting in every CSS file I can find for about a day to no avail.
Would welcome a point in the right direction.
Cheers
-
It is some kind of new fancy pants web design thing. Style is dynamically updated. In this case with the frequency of graph. No point in editing CSS until you know how to control that thing.
If anyone knows what is this new tech, please link some readings.
My try to customize similar UI costed me couple of days. I wanted to make a simple change so bad that it ended up in a userscript for Tampermonkey that dynamically rewrites the style after the page loaded, but even then if you continue to interact with the page everything becomes messed up. My logic was done. Technology… One day you are a power user, the next day you are a poking things with a stick.. -
Cheers for your reply.
Yeh this is as far as I got so far. If those values are set somewhere they can be changed I just have to figure out where.
I'm pretty sure it relates to these two files, nv.d3.css, nv.d3.js as in this example,
http://nvd3.org/examples/line.html
I just can't pin it down.
Was hoping for a response from the person that made this twitter post,
https://twitter.com/pfsense/status/722489787202994177
I think the lines in this context are called strokes, as in this example .style('stroke', function(d,i,j) { return getOlColor(d,i,j) || color(d,j) }) I just now need to figure out how the values d,i,j are set.
Regards
-
As I though, visuals are set in javascript.
And apparently that color is not even customized in pfSense.
There are sections for "D3 Styles" in:/css/pfSense-dark.css
/css/pfSense.cssbut they don't fiddle with graphs color.
It appear to be a standardized (some links reffered to Google, maybe from Material Design)I suppose you need to be more familiar with the framework to get further:
https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#category20
https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20 -
PERFECT!
Thank you sir, yes this is the bit I was looking for and as you say its not as simple as substituting the new colour / colours.
It uses a fixed range and the colours change depending on how many plots you have on the chart.However I now have something to play with.
Thank you again for your assistance, much appreciated.
Cheesy.
-
No problem.
Was fun to have a peek even though I have no interest at all to tinker with firewall's insides ;) -
Still work in progress.
As I am a little bit OCD there are a few continuity issues with the current dark theme that need a little tweaking so thanks to your help (InQuize) I have now been able it scratch that itch!
What I needed to do was convert the colours I wanted to decimal from hex and then substitute them in the already formatted colour scale in the file d3.min.js,
so,
Al=[2062260,16744206,2924588,14034728,9725885,9197131,14907330,8355711,12369186,1556175].map(xn),
became,
Al=[38536,16777215,2924588,14034728,9725885,9197131,14907330,8355711,12369186,1556175].map(xn),
ChEeSy
