13

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")
user20650
  • 24,654
  • 5
  • 56
  • 91
Jon Nagra
  • 1,538
  • 1
  • 16
  • 36
  • 3
    a bit of a dirty trick but you can change the `numberSectionStyles` in the `DiagrammeR.js` file of the library (it's in this folder /Library/Frameworks/R.framework/Versions/3.2/Resources/library/DiagrammeR/htmlwidgets for me). This will increase the number of sections. You'll also need to add css for these. If you want this change just for one of your diagram, you can change the same file in the `lib` folder in the directory in which you are putting your html file. – NicE Nov 11 '15 at 18:33
  • Not the most R way but certainly does the trick. I will have to be careful when updating the packages, but solves my particular issue. – Jon Nagra Nov 11 '15 at 18:55

1 Answers1

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.

Nick Kennedy
  • 12,510
  • 2
  • 30
  • 52