Where to edit the colors for XIBO Chart Dashboard in docker

[WeDo30]

Hi, created a custom theme but cannot seem to find where the chart colors are in the docker image for the Xibo Dashboard.

The chart colors seem to change on every refresh is there a way to stop and apply a uniform color across the charts, i.e dont want it go pink/green/red/etc want to define a shade of colors to make the theme more consistent (dull) …neutral?

[talipcakir]

Good luck with. you made the design beautiful.
Inside the “dashboard-status-page.twig” file.

var displayStatusChart = new Chart($("#displayStatusChart"), {
type: ‘doughnut’,
data: {
datasets: [{
data: displayData,
backgroundColor: ["rgb(0,255,0)", "rgb(255,0,0)"]
}],
labels: ["Online", "Offline"]
},
options: {
maintainAspectRatio: false
}
});

var displayContentChart = new Chart($("#displayContentChart"), {
type: ‘doughnut’,
data: {
datasets: [{
data: displayMediaStatusData,
backgroundColor: ["rgb(0,255,0)", "rgb(255,0,0)"]
}],
labels: ["Up to Date", "Not up to date"]
},
options: {
maintainAspectRatio: false
}
});

var coloursDG = ;
for(var i = 0; i < displayGroupNames.length; i++) {
coloursDG.push($c.rand());
}

for(var i = 0; i < libraryData.length; i++) {
colours.push($c.rand());
}
var libraryChart = new Chart($("#libraryChart"), {
type: ‘pie’,
data: {
datasets: [{
data: libraryData,
backgroundColor: colours
}],
labels: {{ libraryWidgetLabels|raw }}
},
options: {
maintainAspectRatio: false
}
});

random colors are given here. You can set them yourself. but you have to call them according to the number of content.

backgroundColor: ["rgb(0,255,0)", "rgb(255,0,0)"]

With this code, you change individual colors. For individual content, it will be sufficient for me to specify rgb colors.

colours.push($c.rand());

With this code, you change multiple colors.
To do this you need to disable the random command and create an array with colors instead. “colors” array and “colorsDG” array. You need to add a color scale for these two arrays.

[talipcakir]

We hope you share your design with us.

[talipcakir]

There may also be a problem accessing these files for docker. You may want to change from one-to-one codes.

for container list:

docker ps –a

for terminal access:

docker exec -it xibo_cms-web_1 bash

xibo_cms-web_1 is container name.

[WeDo30]

Thanks talipcakir, yes found that piece seems changes to how XIBO cms renders charts, we had it working in version 1.7 series. Using a different chart from just standard css in previous version or I completely forgot where I edited the chart colors before. Plus only got Docker working in latest build of CMS and that changes how things are done again from simply uploading a CSS have to play around with it again. Custom themes dont work across version also - so more work than I need at this stage, but a quick fix was I removed the 3 charts that generated the random colors charts as the overall info was available not in chart format above in general, and they weren’t that important for the dashboard view on my use case at least. Just have to rework the dashboard twig file some time to display more information in the Display Activity table with links to direct support is what I’m working at the moment, removing Latest News is pretty easy, saves clicking on Display Menu to access info.

[WeDo30]

Not really optimised and ready, some glitches even in schedule calender view, haven’t gotten around to it. WIP, but if it’s usable i will post once i figure it out and have time. Will be alot of twig editing i think.