SIMILE Timeline - коректування формату виводу для тексту підпису у події

Є такий засіб для відображення події у часі : SIMILE Timeline - Web Widget for Visualizing Temporal Data. Написаний на JavaScript.

Якщо використовувати версію timeline 2.3.1 то відображення може бути  у ось такому вигляді:

Базове відображення

Якщо, налаштувати тему так :
var theme = Timeline.ClassicTheme.create();
theme.event.tape.height = 15;

theme.event.tape.height = 15

А якщо потрібно щоб підписи були у тому рядку що і події, то я зробив модифікацію для функції Timeline.OriginalEventPainter.

patch
#cd html/js/timeline/api/scripts

diff original-painter.js original-painter.js.0

347,353c347
<       var labelLeft;
<     if ((startPixel+labelSize.width) > endPixel){
<               labelLeft = endPixel;
<     }else{
<       labelLeft = startPixel;
<     }
<
—

     var labelLeft = startPixel;
358,361c352,354
<     //var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
<
<     var labelTop = Math.round(metrics.trackOffset + track *  metrics.trackIncrement);
<
—
     var labelTop = Math.round(
         metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);

512c505
<     var color = ‘#fff’;//evt.getTextColor();
—
     var color = evt.getTextColor();

html/js/timeline/api/scripts/original-painter.js: ст
Timeline.OriginalEventPainter.prototype.paintPreciseDurationEvent = …
…. 
var labelLeft;
if ((startPixel+labelSize.width) > endPixel){
  labelLeft = endPixel;
}else{
  labelLeft = startPixel;>
}
var labelRight = labelLeft + labelSize.width;
var rightEdge = Math.max(labelRight, endPixel);
var track = this._findFreeTrack(evt, rightEdge);
var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement);
…

index.html:
….



 var theme = Timeline.ClassicTheme.create();
 theme.event.tape.height = 15;

 var d = Timeline.DateTime.parseGregorianDateTime(new Date())

      var bandInfos = [
            Timeline.createBandInfo({
                showEventText:  false,
                width:          “60%”,
                intervalUnit:   Timeline.DateTime.DAY,
                intervalPixels: 200,
                eventSource:    eventSource,
                date:           d,
                theme:          theme,
                layout:         ‘original’  // original, overview, detailed
            }),
            Timeline.createBandInfo({
                width:          “20%”,
                intervalUnit:   Timeline.DateTime.MONTH,
                intervalPixels: 200,
                eventSource:    eventSource,
                date:           d,
                theme:          theme,
                layout:         ‘overview’  // original, overview, detailed
            }),
            Timeline.createBandInfo({
                width:          “20%”,
                intervalUnit:   Timeline.DateTime.YEAR,
                intervalPixels: 200,
                eventSource:    eventSource,
                date:           d,
                theme:          theme,
                layout:         ‘overview’  // original, overview, detailed
            })
        ];

        bandInfos[1].syncWith = 0;
        bandInfos[2].syncWith = 1;
        bandInfos[1].highlight = true;
        tl = Timeline.create(document.getElementById(“tl”), bandInfos);
…

 

   

Timeline

   

   

         

</html>

Після модифікації  функції Timeline.OriginalEventPainter