@hpcc-js/timeline 3.3.5 → 3.3.6

package/src/ReactAxisGantt.ts

@@ -1,286 +1,286 @@
-import { Axis } from "@hpcc-js/chart";
-import { SVGWidget } from "@hpcc-js/common";
-import { ReactGantt } from "./ReactGantt.ts";
-
-export type IAxisGanttData = [string, number | string, number | string, any?] | any[];
-
-export class ReactAxisGantt extends SVGWidget {
-
-    protected _topAxis: Axis = new Axis("center")
-        .orientation("top")
-        .type("linear")
-        .shrinkToFit("none")
-        .overlapMode("hide")
-        .extend(0)
-        .tickFormat("d")
-        ;
-    protected _gantt: ReactGantt = new ReactGantt("center")
-        .stroke("#000000")
-        ;
-    protected _bottomAxis: Axis = new Axis("center")
-        .orientation("bottom")
-        .type("linear")
-        .shrinkToFit("none")
-        .overlapMode("hide")
-        .extend(0)
-        .tickFormat("d")
-        ;
-
-    protected _topAxisElement;
-    protected _contentElement;
-    protected _bottomAxisElement;
-    protected _topRect;
-    protected _contentRect;
-    protected _bottomRect;
-
-    protected rangeRenderer;
-
-    constructor() {
-        super();
-        this._drawStartPos = "origin";
-        this.rangeRenderer = function () {
-            const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
-            if (!arguments.length) return ret;
-            return this;
-        };
-    }
-
-    selection(_: any[]): this;
-    selection(): any[];
-    selection(_?: any[]): any[] | this {
-        if (!arguments.length) return this._gantt.selection();
-        this._gantt.selection(_);
-        return this;
-    }
-
-    resizeWrappers() {
-
-        const w = this.width();
-        const h = this.height();
-
-        const axisHeight = this.axisHeight(); //TODO: Dynamic scaling to allow for small resolutions?
-
-        const contentHeight = (h - (axisHeight * 2));
-        const borderOffset1 = this.strokeWidth();
-        this._topRect
-            .attr("height", axisHeight)
-            .attr("width", w)
-            .attr("fill", "transparent")
-            ;
-        this._topAxisElement.attr("transform", "translate(0 0)");
-        this._topAxis.resize({ height: axisHeight, width: w });
-        this._contentRect
-            .attr("height", contentHeight)
-            .attr("width", w)
-            .attr("fill", "transparent")
-            ;
-        this._contentElement.attr("transform", `translate(0 ${axisHeight + borderOffset1})`);
-        this._gantt.resize({ height: contentHeight, width: w });
-        this._bottomRect
-            .attr("height", axisHeight)
-            .attr("width", w)
-            .attr("fill", "transparent")
-            ;
-        this._bottomAxisElement.attr("transform", `translate(0 ${axisHeight + contentHeight + borderOffset1})`);
-        this._bottomAxis.resize({ height: axisHeight, width: w });
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        this._gantt.click = (row, col, sel) => {
-            this.click(row, col, sel);
-        };
-
-        this._gantt.dblclick = (row, col, sel) => {
-            this.dblclick(row, col, sel);
-        };
-
-        this._topAxisElement = element.append("g")
-            .attr("class", "top-axis-wrapper")
-            ;
-        this._topRect = this._topAxisElement.append("rect")
-            .attr("class", "top-axis-rect")
-            ;
-        this._contentElement = element.append("g")
-            .attr("class", "content-wrapper")
-            ;
-        this._contentRect = this._contentElement.append("rect")
-            .attr("class", "content-rect")
-            ;
-        this._bottomAxisElement = element.append("g")
-            .attr("class", "bottom-axis-wrapper")
-            ;
-        this._bottomRect = this._bottomAxisElement.append("rect")
-            .attr("class", "top-axis-rect")
-            ;
-        this._topAxis.target(this._topAxisElement.node());
-        this._gantt.target(this._contentElement.node()).bucketHeight(30);
-        this._bottomAxis.target(this._bottomAxisElement.node());
-
-        this.resizeWrappers();
-
-        this._gantt.zoomedHook = (transform) => {
-            this.onzoom(transform);
-        };
-    }
-
-    onzoom(transform) {
-
-        const w = this.width();
-        const low = this._gantt._minStart;
-        const high = this._gantt._maxEnd;
-        const range = high - low;
-        const wpp = range / w;
-        const nextLow = Math.floor(low - (wpp * (transform.x / transform.k)));
-        const nextHigh = Math.ceil((range / transform.k) + nextLow);
-
-        this._topAxis
-            .fontFamily(this.axisFontFamily())
-            .fontSize(this.axisFontSize())
-            .tickLength(this.axisTickLength())
-            .low(nextLow)
-            .high(nextHigh)
-            .render()
-            ;
-        this._bottomAxis
-            .fontFamily(this.axisFontFamily())
-            .fontSize(this.axisFontSize())
-            .tickLength(this.axisTickLength())
-            .low(nextLow)
-            .high(nextHigh)
-            .render()
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        this._topAxis.tickFormat(this.tickFormat()).render();
-        this._bottomAxis.tickFormat(this.tickFormat()).render();
-        this._gantt.render();
-    }
-
-    exit(domNode, element) {
-        this._bottomAxis.target(null);
-        this._gantt.target(null);
-        this._topAxis.target(null);
-        super.exit(domNode, element);
-    }
-
-    columns(): string[];
-    columns(_: string[]): this;
-    columns(_?: string[]): this | string[] {
-        const retVal = super.columns.apply(this, arguments);
-        if (arguments.length > 0) {
-            this._gantt.columns(_);
-        }
-        return retVal;
-    }
-
-    data(): IAxisGanttData[];
-    data(_: IAxisGanttData[]): this;
-    data(_?: IAxisGanttData[]): this | IAxisGanttData[] {
-        const retVal = super.data.apply(this, arguments);
-        if (arguments.length > 0) {
-            const ganttData: any[] = this.data().map(n => {
-                const ret = [...n];
-                ret[1] = isNaN(n[1] as any) ? new Date(n[1]).getTime() : Number(n[1]);
-                ret[2] = isNaN(n[2] as any) ? new Date(n[2]).getTime() : Number(n[2]);
-                return ret;
-            });
-            this._gantt._minStart = Math.min(...ganttData.map(n => n[1])) ?? 0;
-            this._gantt._maxEnd = Math.max(...ganttData.map(n => n[2])) ?? 1;
-            this._gantt.data(ganttData);
-        }
-        return retVal;
-    }
-
-    resize(_size?: { width: number, height: number }) {
-        const retVal = super.resize.apply(this, arguments);
-
-        if (this._topAxisElement) {
-            this.resizeWrappers();
-        }
-
-        return retVal;
-    }
-
-    click(row, col, sel) {
-
-    }
-
-    dblclick(row, col, sel) {
-
-    }
-
-    tooltip() {
-        return this._gantt._tooltip;
-    }
-}
-ReactAxisGantt.prototype._class += " timeline_ReactAxisGantt";
-
-export interface ReactAxisGantt {
-    tickFormat(): string;
-    tickFormat(_: string): this;
-    tickFormat_exists(): boolean;
-    overlapTolerence(): number;
-    overlapTolerence(_: number): this;
-    smallestRangeWidth(): number;
-    smallestRangeWidth(_: number): this;
-    scaleMode(): boolean;
-    scaleMode(_: boolean): this;
-    fontSize(): number;
-    fontSize(_: number): this;
-    fontFamily(): string;
-    fontFamily(_: string): this;
-    strokeWidth(): number;
-    strokeWidth(_: number): this;
-    stroke(): string;
-    stroke(_: string): this;
-    cornerRadius(): number;
-    cornerRadius(_: number): this;
-    axisFontSize(): number;
-    axisFontSize(_: number): this;
-    axisFontFamily(): string;
-    axisFontFamily(_: string): this;
-    axisTickLength(): number;
-    axisTickLength(_: number): this;
-    axisHeight(): number;
-    axisHeight(_: number): this;
-    titleColumn(): string;
-    titleColumn(_: string): this;
-    startDateColumn(): string;
-    startDateColumn(_: string): this;
-    endDateColumn(): string;
-    endDateColumn(_: string): this;
-    iconColumn(): string;
-    iconColumn(_: string): this;
-    colorColumn(): string;
-    colorColumn(_: string): this;
-    bucketColumn(): string;
-    bucketColumn(_: string): this;
-    maxZoom(): number;
-    maxZoom(_: number): this;
-}
-ReactAxisGantt.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", undefined, { optional: true });
-ReactAxisGantt.prototype.publish("axisHeight", 22, "number", "Height of axes (pixels)");
-ReactAxisGantt.prototype.publish("overlapTolerence", 2, "number", "overlapTolerence");
-ReactAxisGantt.prototype.publish("smallestRangeWidth", 10, "number", "Width of the shortest range (pixels)");
-ReactAxisGantt.prototype.publish("axisFontSize", null, "number", "Font size of axis tick labels");
-ReactAxisGantt.prototype.publish("axisFontFamily", null, "string", "Font family of axis tick labels");
-ReactAxisGantt.prototype.publish("axisTickLength", null, "number", "Length of axis ticks");
-ReactAxisGantt.prototype.publishProxy("gutter", "_gantt");
-ReactAxisGantt.prototype.publishProxy("renderMode", "_gantt");
-ReactAxisGantt.prototype.publishProxy("strokeWidth", "_gantt");
-ReactAxisGantt.prototype.publishProxy("fontSize", "_gantt");
-ReactAxisGantt.prototype.publishProxy("fontFamily", "_gantt");
-ReactAxisGantt.prototype.publishProxy("stroke", "_gantt");
-ReactAxisGantt.prototype.publishProxy("cornerRadius", "_gantt");
-ReactAxisGantt.prototype.publishProxy("titleColumn", "_gantt");
-ReactAxisGantt.prototype.publishProxy("startDateColumn", "_gantt");
-ReactAxisGantt.prototype.publishProxy("endDateColumn", "_gantt");
-ReactAxisGantt.prototype.publishProxy("iconColumn", "_gantt");
-ReactAxisGantt.prototype.publishProxy("colorColumn", "_gantt");
-ReactAxisGantt.prototype.publishProxy("bucketColumn", "_gantt");
-ReactAxisGantt.prototype.publishProxy("maxZoom", "_gantt");
-ReactAxisGantt.prototype.publishProxy("bucketHeight", "_gantt");
+import { Axis } from "@hpcc-js/chart";
+import { SVGWidget } from "@hpcc-js/common";
+import { ReactGantt } from "./ReactGantt.ts";
+
+export type IAxisGanttData = [string, number | string, number | string, any?] | any[];
+
+export class ReactAxisGantt extends SVGWidget {
+
+    protected _topAxis: Axis = new Axis("center")
+        .orientation("top")
+        .type("linear")
+        .shrinkToFit("none")
+        .overlapMode("hide")
+        .extend(0)
+        .tickFormat("d")
+        ;
+    protected _gantt: ReactGantt = new ReactGantt("center")
+        .stroke("#000000")
+        ;
+    protected _bottomAxis: Axis = new Axis("center")
+        .orientation("bottom")
+        .type("linear")
+        .shrinkToFit("none")
+        .overlapMode("hide")
+        .extend(0)
+        .tickFormat("d")
+        ;
+
+    protected _topAxisElement;
+    protected _contentElement;
+    protected _bottomAxisElement;
+    protected _topRect;
+    protected _contentRect;
+    protected _bottomRect;
+
+    protected rangeRenderer;
+
+    constructor() {
+        super();
+        this._drawStartPos = "origin";
+        this.rangeRenderer = function () {
+            const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
+            if (!arguments.length) return ret;
+            return this;
+        };
+    }
+
+    selection(_: any[]): this;
+    selection(): any[];
+    selection(_?: any[]): any[] | this {
+        if (!arguments.length) return this._gantt.selection();
+        this._gantt.selection(_);
+        return this;
+    }
+
+    resizeWrappers() {
+
+        const w = this.width();
+        const h = this.height();
+
+        const axisHeight = this.axisHeight(); //TODO: Dynamic scaling to allow for small resolutions?
+
+        const contentHeight = (h - (axisHeight * 2));
+        const borderOffset1 = this.strokeWidth();
+        this._topRect
+            .attr("height", axisHeight)
+            .attr("width", w)
+            .attr("fill", "transparent")
+            ;
+        this._topAxisElement.attr("transform", "translate(0 0)");
+        this._topAxis.resize({ height: axisHeight, width: w });
+        this._contentRect
+            .attr("height", contentHeight)
+            .attr("width", w)
+            .attr("fill", "transparent")
+            ;
+        this._contentElement.attr("transform", `translate(0 ${axisHeight + borderOffset1})`);
+        this._gantt.resize({ height: contentHeight, width: w });
+        this._bottomRect
+            .attr("height", axisHeight)
+            .attr("width", w)
+            .attr("fill", "transparent")
+            ;
+        this._bottomAxisElement.attr("transform", `translate(0 ${axisHeight + contentHeight + borderOffset1})`);
+        this._bottomAxis.resize({ height: axisHeight, width: w });
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        this._gantt.click = (row, col, sel) => {
+            this.click(row, col, sel);
+        };
+
+        this._gantt.dblclick = (row, col, sel) => {
+            this.dblclick(row, col, sel);
+        };
+
+        this._topAxisElement = element.append("g")
+            .attr("class", "top-axis-wrapper")
+            ;
+        this._topRect = this._topAxisElement.append("rect")
+            .attr("class", "top-axis-rect")
+            ;
+        this._contentElement = element.append("g")
+            .attr("class", "content-wrapper")
+            ;
+        this._contentRect = this._contentElement.append("rect")
+            .attr("class", "content-rect")
+            ;
+        this._bottomAxisElement = element.append("g")
+            .attr("class", "bottom-axis-wrapper")
+            ;
+        this._bottomRect = this._bottomAxisElement.append("rect")
+            .attr("class", "top-axis-rect")
+            ;
+        this._topAxis.target(this._topAxisElement.node());
+        this._gantt.target(this._contentElement.node()).bucketHeight(30);
+        this._bottomAxis.target(this._bottomAxisElement.node());
+
+        this.resizeWrappers();
+
+        this._gantt.zoomedHook = (transform) => {
+            this.onzoom(transform);
+        };
+    }
+
+    onzoom(transform) {
+
+        const w = this.width();
+        const low = this._gantt._minStart;
+        const high = this._gantt._maxEnd;
+        const range = high - low;
+        const wpp = range / w;
+        const nextLow = Math.floor(low - (wpp * (transform.x / transform.k)));
+        const nextHigh = Math.ceil((range / transform.k) + nextLow);
+
+        this._topAxis
+            .fontFamily(this.axisFontFamily())
+            .fontSize(this.axisFontSize())
+            .tickLength(this.axisTickLength())
+            .low(nextLow)
+            .high(nextHigh)
+            .render()
+            ;
+        this._bottomAxis
+            .fontFamily(this.axisFontFamily())
+            .fontSize(this.axisFontSize())
+            .tickLength(this.axisTickLength())
+            .low(nextLow)
+            .high(nextHigh)
+            .render()
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        this._topAxis.tickFormat(this.tickFormat()).render();
+        this._bottomAxis.tickFormat(this.tickFormat()).render();
+        this._gantt.render();
+    }
+
+    exit(domNode, element) {
+        this._bottomAxis.target(null);
+        this._gantt.target(null);
+        this._topAxis.target(null);
+        super.exit(domNode, element);
+    }
+
+    columns(): string[];
+    columns(_: string[]): this;
+    columns(_?: string[]): this | string[] {
+        const retVal = super.columns.apply(this, arguments);
+        if (arguments.length > 0) {
+            this._gantt.columns(_);
+        }
+        return retVal;
+    }
+
+    data(): IAxisGanttData[];
+    data(_: IAxisGanttData[]): this;
+    data(_?: IAxisGanttData[]): this | IAxisGanttData[] {
+        const retVal = super.data.apply(this, arguments);
+        if (arguments.length > 0) {
+            const ganttData: any[] = this.data().map(n => {
+                const ret = [...n];
+                ret[1] = isNaN(n[1] as any) ? new Date(n[1]).getTime() : Number(n[1]);
+                ret[2] = isNaN(n[2] as any) ? new Date(n[2]).getTime() : Number(n[2]);
+                return ret;
+            });
+            this._gantt._minStart = Math.min(...ganttData.map(n => n[1])) ?? 0;
+            this._gantt._maxEnd = Math.max(...ganttData.map(n => n[2])) ?? 1;
+            this._gantt.data(ganttData);
+        }
+        return retVal;
+    }
+
+    resize(_size?: { width: number, height: number }) {
+        const retVal = super.resize.apply(this, arguments);
+
+        if (this._topAxisElement) {
+            this.resizeWrappers();
+        }
+
+        return retVal;
+    }
+
+    click(row, col, sel) {
+
+    }
+
+    dblclick(row, col, sel) {
+
+    }
+
+    tooltip() {
+        return this._gantt._tooltip;
+    }
+}
+ReactAxisGantt.prototype._class += " timeline_ReactAxisGantt";
+
+export interface ReactAxisGantt {
+    tickFormat(): string;
+    tickFormat(_: string): this;
+    tickFormat_exists(): boolean;
+    overlapTolerence(): number;
+    overlapTolerence(_: number): this;
+    smallestRangeWidth(): number;
+    smallestRangeWidth(_: number): this;
+    scaleMode(): boolean;
+    scaleMode(_: boolean): this;
+    fontSize(): number;
+    fontSize(_: number): this;
+    fontFamily(): string;
+    fontFamily(_: string): this;
+    strokeWidth(): number;
+    strokeWidth(_: number): this;
+    stroke(): string;
+    stroke(_: string): this;
+    cornerRadius(): number;
+    cornerRadius(_: number): this;
+    axisFontSize(): number;
+    axisFontSize(_: number): this;
+    axisFontFamily(): string;
+    axisFontFamily(_: string): this;
+    axisTickLength(): number;
+    axisTickLength(_: number): this;
+    axisHeight(): number;
+    axisHeight(_: number): this;
+    titleColumn(): string;
+    titleColumn(_: string): this;
+    startDateColumn(): string;
+    startDateColumn(_: string): this;
+    endDateColumn(): string;
+    endDateColumn(_: string): this;
+    iconColumn(): string;
+    iconColumn(_: string): this;
+    colorColumn(): string;
+    colorColumn(_: string): this;
+    bucketColumn(): string;
+    bucketColumn(_: string): this;
+    maxZoom(): number;
+    maxZoom(_: number): this;
+}
+ReactAxisGantt.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", undefined, { optional: true });
+ReactAxisGantt.prototype.publish("axisHeight", 22, "number", "Height of axes (pixels)");
+ReactAxisGantt.prototype.publish("overlapTolerence", 2, "number", "overlapTolerence");
+ReactAxisGantt.prototype.publish("smallestRangeWidth", 10, "number", "Width of the shortest range (pixels)");
+ReactAxisGantt.prototype.publish("axisFontSize", null, "number", "Font size of axis tick labels");
+ReactAxisGantt.prototype.publish("axisFontFamily", null, "string", "Font family of axis tick labels");
+ReactAxisGantt.prototype.publish("axisTickLength", null, "number", "Length of axis ticks");
+ReactAxisGantt.prototype.publishProxy("gutter", "_gantt");
+ReactAxisGantt.prototype.publishProxy("renderMode", "_gantt");
+ReactAxisGantt.prototype.publishProxy("strokeWidth", "_gantt");
+ReactAxisGantt.prototype.publishProxy("fontSize", "_gantt");
+ReactAxisGantt.prototype.publishProxy("fontFamily", "_gantt");
+ReactAxisGantt.prototype.publishProxy("stroke", "_gantt");
+ReactAxisGantt.prototype.publishProxy("cornerRadius", "_gantt");
+ReactAxisGantt.prototype.publishProxy("titleColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("startDateColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("endDateColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("iconColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("colorColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("bucketColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("maxZoom", "_gantt");
+ReactAxisGantt.prototype.publishProxy("bucketHeight", "_gantt");