@hpcc-js/chart 3.5.1 → 3.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/chart",
-    "version": "3.5.1",
+    "version": "3.5.3",
     "description": "hpcc-js - Viz Chart",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -37,12 +37,12 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.4.1",
-        "@hpcc-js/common": "^3.5.1",
-        "@hpcc-js/util": "^3.4.1"
+        "@hpcc-js/api": "^3.4.3",
+        "@hpcc-js/common": "^3.5.3",
+        "@hpcc-js/util": "^3.4.3"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.6.1",
+        "@hpcc-js/esbuild-plugins": "^1.7.0",
         "@types/d3-shape": "1.3.12",
         "@types/d3-transition": "1.3.6",
         "d3-array": "^1",
@@ -76,5 +76,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "d93d09e45945a39ab056bae20a3dcca3c918cd82"
+    "gitHead": "0289b8552e19395a8da9b70a154821cf70ce42e7"
 }

package/src/Axis.ts

@@ -22,7 +22,7 @@ export class Axis extends SVGWidget {
 
     protected parser;
     protected parserInvert;
-    protected formatter: (date: Date) => string;
+    protected formatter: ((d: Date | any) => string) | null;
     protected d3Scale;
     protected d3Axis;
     protected d3Guides;
@@ -30,6 +30,7 @@ export class Axis extends SVGWidget {
     protected svg;
     protected svgAxis;
     protected svgGuides;
+    protected _tickFormatFunc?: (d: any) => string;
 
     constructor(drawStartPosition: "origin" | "center" = "origin") {
         super();
@@ -91,6 +92,15 @@ export class Axis extends SVGWidget {
         return this.format(this.parse(d));
     }
 
+    tickFormatFunc(fn: (d: any) => string): this;
+    tickFormatFunc(): ((d: any) => string) | undefined;
+    tickFormatFunc(fn?: (d: any) => string): this | ((d: any) => string) | undefined {
+        if (!arguments.length) return this._tickFormatFunc;
+        this._tickFormatFunc = fn;
+        this.updateScale();
+        return this;
+    }
+
     scalePos(d) {
         let retVal = this.d3Scale(this.parse(d));
         if (this.type() === "ordinal") {
@@ -211,7 +221,11 @@ export class Axis extends SVGWidget {
                 }
                 this.parser = this.timePattern_exists() ? d3TimeParse(this.timePattern()) : null;
                 this.parserInvert = this.timePattern_exists() ? d3TimeFormat(this.timePattern()) : null;
-                this.formatter = this.tickFormat_exists() ? d3TimeFormat(this.tickFormat()) : null;
+                if (this._tickFormatFunc) {
+                    this.formatter = this._tickFormatFunc;
+                } else {
+                    this.formatter = this.tickFormat_exists() ? d3TimeFormat(this.tickFormat()) : null;
+                }
                 break;
             default:
         }
@@ -677,6 +691,8 @@ export interface Axis {
     tickFormat(_: string): this;
     tickFormat_exists(): boolean;
     tickFormat_reset(): void;
+    tickFormatFunc(fn: (d: any) => string): this;
+    tickFormatFunc(): ((d: any) => string) | undefined;
     tickLength(): number;
     tickLength(_: number): this;
     tickLength_exists(): boolean;

package/src/index.ts

@@ -25,3 +25,4 @@ export * from "./Summary.ts";
 export * from "./SummaryC.ts";
 export * from "./WordCloud.ts";
 export * from "./XYAxis.ts";
+export * from "./timeFormats.ts";

package/src/timeFormats.ts

@@ -0,0 +1,26 @@
+import { timeFormat } from "d3-time-format";
+
+/**
+ * Adaptive 24-hour multi-scale tick formatter.
+ * Order of precedence (first predicate that matches):
+ *  milliseconds -> seconds -> minutes -> hours -> day -> month -> year.
+ */
+export function multiScale24Hours(): (d: Date) => string {
+    const fmtMs = timeFormat(".%L");
+    const fmtSec = timeFormat(":%S");
+    const fmtMin = timeFormat("%H:%M");
+    const fmtHour = timeFormat("%H:00");
+    const fmtDay = timeFormat("%b %d");
+    const fmtMonth = timeFormat("%b");
+    const fmtYear = timeFormat("%Y");
+
+    return (d: Date): string => {
+        if (d.getMilliseconds() !== 0) return fmtMs(d);
+        if (d.getSeconds() !== 0) return fmtSec(d);
+        if (d.getMinutes() !== 0) return fmtMin(d);
+        if (d.getHours() !== 0) return fmtHour(d);
+        if (d.getDate() !== 1) return fmtDay(d);
+        if (d.getMonth() !== 0) return fmtMonth(d);
+        return fmtYear(d);
+    };
+}

package/types/Axis.d.ts

@@ -13,7 +13,7 @@ export declare class Axis extends SVGWidget {
     _origTimePattern: any;
     protected parser: any;
     protected parserInvert: any;
-    protected formatter: (date: Date) => string;
+    protected formatter: ((d: Date | any) => string) | null;
     protected d3Scale: any;
     protected d3Axis: any;
     protected d3Guides: any;
@@ -21,6 +21,7 @@ export declare class Axis extends SVGWidget {
     protected svg: any;
     protected svgAxis: any;
     protected svgGuides: any;
+    protected _tickFormatFunc?: (d: any) => string;
     constructor(drawStartPosition?: "origin" | "center");
     lowValue(): any;
     highValue(): any;
@@ -28,6 +29,8 @@ export declare class Axis extends SVGWidget {
     parseInvert(d: any): any;
     format(d: any): any;
     parseFormat(d: any): any;
+    tickFormatFunc(fn: (d: any) => string): this;
+    tickFormatFunc(): ((d: any) => string) | undefined;
     scalePos(d: any): any;
     bandwidth(): any;
     isHorizontal(): boolean;
@@ -81,6 +84,8 @@ export interface Axis {
     tickFormat(_: string): this;
     tickFormat_exists(): boolean;
     tickFormat_reset(): void;
+    tickFormatFunc(fn: (d: any) => string): this;
+    tickFormatFunc(): ((d: any) => string) | undefined;
     tickLength(): number;
     tickLength(_: number): this;
     tickLength_exists(): boolean;

package/types/index.d.ts

@@ -25,3 +25,4 @@ export * from "./Summary.ts";
 export * from "./SummaryC.ts";
 export * from "./WordCloud.ts";
 export * from "./XYAxis.ts";
+export * from "./timeFormats.ts";

package/types/timeFormats.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adaptive 24-hour multi-scale tick formatter.
+ * Order of precedence (first predicate that matches):
+ *  milliseconds -> seconds -> minutes -> hours -> day -> month -> year.
+ */
+export declare function multiScale24Hours(): (d: Date) => string;