Add support for configurable location of time axis ticks

This commit adds support for configurable location of time
axis ticks. Currently, the ticks can only be displayed above
the time labels in the time axis, which do not make sense UI-wise
when we have graphs that are displayed under the time axis.
This commit allows the ticks of the time axis to be displayed
dynamically either on top or under the time labels by adding
a configuration parameter to the TimeGraphAxisScale component,
so that developers can position the ticks correctly.

Signed-off-by: Hoang Thuan Pham <hoang.pham@calian.ca>

example/src/index.ts

@@ -132,7 +132,7 @@ const timeGraphAxisContainer = new TimeGraphContainer({
 }, unitController, axisCanvas);
 axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas);
 
-const timeAxisLayer = new TimeGraphAxis('timeGraphAxis', { color: styleConfig.naviBackgroundColor });
+const timeAxisLayer = new TimeGraphAxis('timeGraphAxis', { color: styleConfig.naviBackgroundColor, verticalAlign: 'bottom'});
 timeGraphAxisContainer.addLayers([timeAxisLayer]);
 
 const chartHTMLContainer = document.createElement('div');

timeline-chart/src/components/time-graph-axis-scale.ts

@@ -7,7 +7,8 @@ import * as _ from "lodash";
 import { TimelineChart } from "../time-graph-model";
 
 export interface TimeGraphAxisStyle extends TimeGraphStyledRect {
-    lineColor?: number
+    lineColor?: number,
+    verticalAlign?: string
 }
 import { BIMath } from "../bigint-utils";
 
@@ -84,7 +85,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent<null> {
             for (let time = startTime; time <= viewRangeEnd; time += stepLength) {
                 const xpos = Number(time - viewRangeStart) * zoomFactor;
                 if (xpos >= 0 && xpos < canvasDisplayWidth) {
-                    const position = {
+                    const labelCenter = {
                         x: xpos,
                         y: this._options.position.y
                     };
@@ -96,16 +97,24 @@ export class TimeGraphAxisScale extends TimeGraphComponent<null> {
                                 fontSize: 10,
                                 fill: lineColor
                             });
-                            text.x = position.x - (text.width / 2);
-                            text.y = position.y + lineStyle(label).lineHeight;
+
+                            const textPosition = this.getTextPosition(labelCenter, text, lineStyle);
+                            text.x = textPosition.x;
+                            text.y = textPosition.y;
                             this.labels.push(text);
                             this._displayObject.addChild(text);
                         }
                     }
+
+                    const verticalLinePosition = {
+                        x: xpos,
+                        y: this.getVerticalLineYPosition(lineStyle(label).lineHeight)
+                    };
+
                     this.vline({
-                        position,
+                        position: verticalLinePosition,
                         height: lineStyle(label).lineHeight,
-                        color: lineColor
+                        color: lineColor 
                     });
                 }
             }
@@ -136,4 +145,28 @@ export class TimeGraphAxisScale extends TimeGraphComponent<null> {
             }
         }
     }
+
+    private getVerticalLineYPosition(lineHeight: number) {
+        if (this._options.verticalAlign === 'bottom') {
+            return this._options.height - lineHeight;
+        } 
+
+        // By default the tick will be at the top
+        return 0;
+    }
+
+    private getTextPosition(labelCenter: {x: number, y: number}, textElement: PIXI.Text, lineStyle: (label: string | undefined) => { lineHeight: number }): {x: number, y: number}{
+        const xPosition = labelCenter.x - (textElement.width / 2);
+        let yPosition = labelCenter.y + lineStyle(textElement.text).lineHeight;
+
+        // If the vertical line is at the bottom, we add some space between the line and the textElement
+        if (this._options.verticalAlign === 'bottom') {
+            yPosition = yPosition - 3;
+        }
+
+        return {
+            x: xPosition,
+            y: yPosition
+        }
+    }
 }

timeline-chart/src/layer/time-graph-axis.ts

@@ -17,17 +17,21 @@ export class TimeGraphAxis extends TimeGraphLayer {
     private _keyUpHandler: { (event: KeyboardEvent): void; (this: Document, ev: KeyboardEvent): any; };
     private _keyDownHandler: { (event: KeyboardEvent): void; (this: Document, ev: KeyboardEvent): any; };
 
-    constructor(id: string, protected style?: { color?: number, lineColor?: number }) {
+    constructor(id: string, protected style?: { color?: number, lineColor?: number, verticalAlign?: string }) {
         super(id);
     }
 
     protected getOptions(): TimeGraphAxisStyle {
         let color;
         let lineColor;
+        let verticalAlign: string | undefined = 'top'; // Default position is top, same as CSS verticalAlign is 'baseline'
+
         if (this.style) {
             color = this.style.color;
             lineColor = this.style.lineColor;
+            verticalAlign = this.style.verticalAlign;
         }
+
         return {
             height: this.stateController.canvasDisplayHeight,
             width: this.stateController.canvasDisplayWidth,
@@ -36,7 +40,8 @@ export class TimeGraphAxis extends TimeGraphLayer {
                 y: 0
             },
             color,
-            lineColor
+            lineColor,
+            verticalAlign
         }
     }