Make gridlines aligned to rounded numbers

Add the offset to the time graph unit controller.

Use the offset to make sure that gridlines are set on rounded absolute
times, not rounded relative times to the start of the absolute range.

Calculate the maximum label width using the view range end time instead
of the view range length.

Fixes issue #54

Change-Id: I5ff00c57ae2859703c8eeb8b4db88bc1655d985f
Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>

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

@@ -68,21 +68,20 @@ export class TimeGraphAxisScale extends TimeGraphComponent<null> {
         if (this.unitController.viewRangeLength > 0) {
             let labelWidth = 0;
             if (this.unitController.numberTranslator) {
-                const label = this.unitController.numberTranslator(this.unitController.viewRangeLength);
+                const label = this.unitController.numberTranslator(this.unitController.viewRange.end);
                 if (label) {
                     const style = new PIXI.TextStyle({ fontSize: 10 });
                     const textMetrics = PIXI.TextMetrics.measureText(label, style);
                     labelWidth = textMetrics.width;
                 }
             }
-            const stepLength = this.getStepLength(labelWidth);
+            const stepLength = BigInt(this.getStepLength(labelWidth));
             const canvasDisplayWidth = this.stateController.canvasDisplayWidth;
             const zoomFactor = this.stateController.zoomFactor;
-            const viewRangeStart = this.unitController.viewRange.start;
-            const iLo: number = Math.floor(Number(viewRangeStart) / stepLength);
-            const iHi: number = Math.ceil((canvasDisplayWidth / zoomFactor + Number(viewRangeStart)) / stepLength);
-            for (let i = iLo; i < iHi; i++) {
-                const time = BIMath.round(stepLength * i);
+            const viewRangeStart = this.unitController.viewRange.start + this.unitController.offset;
+            const viewRangeEnd = this.unitController.viewRange.end + this.unitController.offset;
+            const startTime = (viewRangeStart / stepLength) * stepLength;
+            for (let time = startTime; time <= viewRangeEnd; time += stepLength) {
                 const xpos = Number(time - viewRangeStart) * zoomFactor;
                 if (xpos >= 0 && xpos < canvasDisplayWidth) {
                     const position = {
@@ -91,7 +90,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent<null> {
                     };
                     let label;
                     if (drawLabels && this.unitController.numberTranslator) {
-                        label = this.unitController.numberTranslator(time);
+                        label = this.unitController.numberTranslator(time - this.unitController.offset);
                         if (label) {
                             const text = new PIXI.Text(label, {
                                 fontSize: 10,

timeline-chart/src/time-graph-unit-controller.ts

@@ -7,6 +7,8 @@ export class TimeGraphUnitController {
     protected selectionRangeChangedHandlers: ((newRange?: TimelineChart.TimeGraphRange) => void)[];
     protected _selectionRange?: TimelineChart.TimeGraphRange;
 
+    protected _offset: bigint = BigInt(0);
+
     /**
      *  Create a string from the given number, which is shown in TimeAxis.
      *  Or return undefined to not show any text for that number.
@@ -78,4 +80,12 @@ export class TimeGraphUnitController {
     get viewRangeLength(): bigint {
         return this._viewRange.end - this._viewRange.start;
     }
-}
+
+    get offset(): bigint {
+        return this._offset;
+    }
+
+    set offset(offset: bigint) {
+        this._offset = offset;
+    }
+}