Merge pull request #4463 from jeclrsg/fix-eclwatch-timeline-formatting

fix(timeline): fix tickFormat being ignored

Author: GordonSmith

packages/chart/src/Axis.ts

@@ -676,6 +676,7 @@ export interface Axis {
     tickFormat(): string;
     tickFormat(_: string): this;
     tickFormat_exists(): boolean;
+    tickFormat_reset(): void;
     tickLength(): number;
     tickLength(_: number): this;
     tickLength_exists(): boolean;

packages/timeline/src/ReactTimeline.ts

@@ -42,22 +42,33 @@ export class ReactTimeline extends ReactAxisGantt {
                     highDateStr = "" + n[2];
                 }
             });
+
+            const axisTickFormat = this._axisLabelFormatter
+                ? this._axisLabelFormatter
+                : (this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : undefined);
+
             this._topAxis
                 .type("time")
                 .timePattern(this.timePattern())
                 .overlapMode("none")
-                .tickFormat(this._axisLabelFormatter)
                 .low(lowDateStr)
                 .high(highDateStr)
                 ;
             this._bottomAxis
                 .type("time")
                 .timePattern(this.timePattern())
                 .overlapMode("none")
-                .tickFormat(this._axisLabelFormatter)
                 .low(lowDateStr)
                 .high(highDateStr)
                 ;
+
+            if (axisTickFormat) {
+                this._topAxis.tickFormat(axisTickFormat);
+                this._bottomAxis.tickFormat(axisTickFormat);
+            } else {
+                this._topAxis.tickFormat_reset();
+                this._bottomAxis.tickFormat_reset();
+            }
             this._gantt._minStart = minTimestamp;
             this._gantt._maxEnd = maxTimestamp;
         }

packages/timeline/src/ReactTimelineSeries.ts

@@ -41,22 +41,33 @@ export class ReactTimelineSeries extends ReactAxisGanttSeries {
                     highDateStr = "" + n[2];
                 }
             });
+
+            const axisTickFormat = this._axisLabelFormatter
+                ? this._axisLabelFormatter
+                : (this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : undefined);
+
             this._topAxis
                 .type("time")
                 .timePattern(this.timePattern())
                 .overlapMode("none")
-                .tickFormat(this._axisLabelFormatter)
                 .low(lowDateStr)
                 .high(highDateStr)
                 ;
             this._bottomAxis
                 .type("time")
                 .timePattern(this.timePattern())
                 .overlapMode("none")
-                .tickFormat(this._axisLabelFormatter)
                 .low(lowDateStr)
                 .high(highDateStr)
                 ;
+
+            if (axisTickFormat) {
+                this._topAxis.tickFormat(axisTickFormat);
+                this._bottomAxis.tickFormat(axisTickFormat);
+            } else {
+                this._topAxis.tickFormat_reset();
+                this._bottomAxis.tickFormat_reset();
+            }
             this._gantt._minStart = minTimestamp;
             this._gantt._maxEnd = maxTimestamp;
         }