FlowFuse / FlowFuse/node-red-dashboard

More colours for charts (and other dashboard widgets?)

Open
#1,307 0 comments 0 reactions 0 assignees View on GitHub
needs-triage type:feature
Dominant language
HTML
Stars
355
Forks
82
Avg merge
4d 20h
Merged PRs (30d)
24

Description

### Description

The chart node config has a palette of 9 colours (of which 4 are red/brown & 4 are blue/magenta)
Once a chart has used all of these, it repeats the sequence.

With dashboard 1 there was the same palette of 9 colours, plus a fallback set of 24 (?) specified in ~/ .node-red/node_modules/node-red-dashboard/dist/js/app-min.js, and these can be augmented to get as many different colours as you might want.
`var c=(t.colors||["#1F77B4","#AEC7E8","#FF7F0E","#2CA02C","#98DF8A","#D62728","#FF9896","#9467BD","#C5B0D5"]).concat(
["#7EB3C6","#BB9A61","#3F8FB9","#57A13F","#BC5879","#6DC2DF","#D7D185","#91CA96",
"#DEB64D","#31615A","#B46E3F","#9B2FAA","#61A240","#AA3167","#9D6D5E","#3498DB",
"#EC7063","#DAF7A6","#FFC300","#D98880","#48C9B0","#7FB3D5","#F9E79F","#922B21"]
);`

Can a similar arrangement allow for more colours beyond the first nine in DB2?
A minified javascript file may not be the best place to specify them since it cannot easily be edited.
Maybe an environment variable could hold a list of colours, or else settings.js?

See [https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536](url) for a discussion of the DB1 arrangement.

### Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the DB2 chart node configuration and the code that assigns its palette. Compare that behavior with the fallback colours described in app-min.js, then review whether settings.js or an environment variable is the appropriate configuration point. Done means dashboard charts and other applicable widgets can use more than the current nine colours through a documented, maintainable setting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.