How can I have more than 4 section colours in mermaid (Gantt) via DiagrammeR?

Question

I will have to generate a gantt diagram in a daily basis. My idea is to use the mermaid api included in R's DiagrammeR package.

My data will always have the same structure and, therefore, I have created a quite primitive parser that is included in the reproducible example.

The problem I face is that after 4 sections the styling starts again from zero:

rect.section.section0
rect.section.section1
rect.section.section2
rect.section.section3
rect.section.section0

I can change rect.section.sectionx colour from the .css but I cannot add new ones.

Is there a way around to change/personalise the section's colour/styling?

My R reproducible example:

library(DiagrammeR)
library(htmltools)

fromdftogantt<-function(df,Title="Proba",filename="proba.html"){
  txt<-paste("gantt","dateFormat  YYYY-MM-DD",paste("title",Title),"",sep="\n")
  for(i in unique(df$section)){
    txt<-paste(txt,paste("section",i),sep="\n")
    for(j in which(df$section==i)){

      txt<-paste(txt,paste0(df$name[j],":",df$status[j],",",
                            df$fecini[j],",",
                            df$fecfin[j]),sep="\n")
    }
    txt<-paste0(txt,"\n")
  }
  m<-mermaid(txt)
  m$x$config = list(ganttConfig = list(
    axisFormatter = list(list(
      "%m-%Y" 
      ,htmlwidgets::JS(
        'function(d){ return d.getDate() == 1 }' 
      )
    ))
  ))
  save_html(as.tags(m),file=filename)
}

df<-data.frame(section=letters[1:6],name=paste("Name",1:6),
               status=rep("active",6),
               fecini=as.Date(c("2015-02-03","2015-03-05","2015-04-07",
                                "2015-02-03","2015-03-05","2015-04-07")),
               fecfin=as.Date(c("2015-06-01","2015-04-30","2015-12-31",
                                "2015-06-01","2015-04-30","2015-12-31")),
               stringsAsFactors = FALSE)

fromdftogantt(df,Title="Proba",filename="proba.html")

Answer 1

You don't need to change the .js file at all. mermaid supports a numberSectionStyles config parameter. Just add the following line to your R function before saving the HTML:

m$x$config$ganttConfig$numberSectionStyles = 6

You'll still need to adjust the .css file to add the additional sections following the same template as the existing ones.