22
33class TimelineEngine {
44 /**
5+ * @param {Theme } theme
56 * @param {Renderer } renderer
67 * @param {Legend } legend
78 * @param {Element } threshold
89 * @param {Object } request
910 * @param {Number } eventHeight
1011 * @param {Number } horizontalMargin
1112 */
12- constructor ( renderer , legend , threshold , request , eventHeight = 36 , horizontalMargin = 10 ) {
13+ constructor ( theme , renderer , legend , threshold , request , eventHeight = 36 , horizontalMargin = 10 ) {
14+ this . theme = theme ;
1315 this . renderer = renderer ;
1416 this . legend = legend ;
1517 this . threshold = threshold ;
@@ -81,7 +83,7 @@ class TimelineEngine {
8183 const lines = periods . map ( period => this . createPeriod ( period , category ) ) ;
8284 const label = this . createLabel ( this . getShortName ( name ) , duration , memory , periods [ 0 ] ) ;
8385 const title = this . renderer . createTitle ( name ) ;
84- const group = this . renderer . group ( [ title , border , label ] . concat ( lines ) , this . legend . getClassname ( event . category ) ) ;
86+ const group = this . renderer . group ( [ title , border , label ] . concat ( lines ) , this . theme . getCategoryColor ( event . category ) ) ;
8587
8688 event . elements = Object . assign ( event . elements || { } , { group, label, border } ) ;
8789
@@ -100,7 +102,7 @@ class TimelineEngine {
100102 }
101103
102104 createPeriod ( period , category ) {
103- const timeline = this . renderer . createPath ( null , 'timeline-period' ) ;
105+ const timeline = this . renderer . createPath ( null , 'timeline-period' , this . theme . getCategoryColor ( category ) ) ;
104106
105107 period . draw = category === 'section' ? this . renderer . setSectionLine : this . renderer . setPeriodLine ;
106108 period . elements = Object . assign ( period . elements || { } , { timeline } ) ;
@@ -213,14 +215,14 @@ class TimelineEngine {
213215}
214216
215217class Legend {
216- constructor ( element , classnames ) {
218+ constructor ( element , theme ) {
217219 this . element = element ;
218- this . classnames = classnames ;
220+ this . theme = theme ;
219221
220222 this . toggle = this . toggle . bind ( this ) ;
221223 this . createCategory = this . createCategory . bind ( this ) ;
222224
223- this . categories = Array . from ( Object . keys ( classnames ) ) . map ( this . createCategory ) ;
225+ this . categories = Array . from ( this . theme . getDefaultCategories ( ) ) . map ( this . createCategory ) ;
224226 }
225227
226228 add ( category ) {
@@ -229,8 +231,8 @@ class Legend {
229231
230232 createCategory ( category ) {
231233 const element = document . createElement ( 'button' ) ;
232-
233- element . className = `timeline-category ${ this . getClassname ( category ) } active` ;
234+ element . className = `timeline-category active` ;
235+ element . style . borderColor = this . theme . getCategoryColor ( category ) ;
234236 element . innerText = category ;
235237 element . value = category ;
236238 element . type = 'button' ;
@@ -390,13 +392,17 @@ class SvgRenderer {
390392 return element ;
391393 }
392394
393- createPath ( path = null , className = null ) {
395+ createPath ( path = null , className = null , color = null ) {
394396 const element = this . create ( 'path' , className ) ;
395397
396398 if ( path ) {
397399 element . setAttribute ( 'd' , path ) ;
398400 }
399401
402+ if ( color ) {
403+ element . setAttribute ( 'fill' , color ) ;
404+ }
405+
400406 return element ;
401407 }
402408
@@ -410,3 +416,55 @@ class SvgRenderer {
410416 return element ;
411417 }
412418}
419+
420+ class Theme {
421+ constructor ( element ) {
422+ this . reservedCategoryColors = {
423+ 'default' : '#777' ,
424+ 'section' : '#999' ,
425+ 'event_listener' : '#00b8f5' ,
426+ 'template' : '#66cc00' ,
427+ 'doctrine' : '#ff6633' ,
428+ 'messenger_middleware' : '#bdb81e' ,
429+ 'controller.argument_value_resolver' : '#8c5de6' ,
430+ } ;
431+
432+ this . customCategoryColors = [
433+ '#dbab09' , // dark yellow
434+ '#ea4aaa' , // pink
435+ '#964b00' , // brown
436+ '#22863a' , // dark green
437+ '#0366d6' , // dark blue
438+ '#17a2b8' , // teal
439+ ] ;
440+
441+ this . getCategoryColor = this . getCategoryColor . bind ( this ) ;
442+ this . getDefaultCategories = this . getDefaultCategories . bind ( this ) ;
443+ }
444+
445+ getDefaultCategories ( ) {
446+ return Object . keys ( this . reservedCategoryColors ) ;
447+ }
448+
449+ getCategoryColor ( category ) {
450+ return this . reservedCategoryColors [ category ] || this . getRandomColor ( category ) ;
451+ }
452+
453+ getRandomColor ( category ) {
454+ // instead of pure randomness, colors are assigned deterministically based on the
455+ // category name, to ensure that each custom category always displays the same color
456+ return this . customCategoryColors [ this . hash ( category ) % this . customCategoryColors . length ] ;
457+ }
458+
459+ // copied from https://github.com/darkskyapp/string-hash
460+ hash ( string ) {
461+ var hash = 5381 ;
462+ var i = string . length ;
463+
464+ while ( i ) {
465+ hash = ( hash * 33 ) ^ string . charCodeAt ( -- i ) ;
466+ }
467+
468+ return hash >>> 0 ;
469+ }
470+ }
0 commit comments