@devexperts/dxcharts-lite 2.4.5 → 2.5.0

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -8,7 +8,6 @@ import { merge, Subject } from 'rxjs';
 import { ChartBaseElement } from '../model/chart-base-element';
 import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
 import { EVENT_RESIZED } from '../events/events';
-import { touchpadDetector } from '../utils/device/touchpad.utils';
 import { deviceDetector } from '../utils/device/device-detector.utils';
 /**
  * Gathers user input on canvas element:
@@ -53,8 +52,6 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.longTouchStartSubject = new Subject();
         this.longTouchEndSubject = new Subject();
         this.contextMenuSubject = new Subject();
-        this.pinchSubject = new Subject();
-        this.scrollGestureSubject = new Subject();
         this.fastTouchScroll = new Subject();
         this.mouseLeavesCanvasSubject = new Subject();
         // point at which start dragging
@@ -269,20 +266,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.addSubscription(subscribeListener(this.element, (e) => this.touchEndSubject.next(e), 'touchend'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchCancelSubject.next(e), 'touchcancel'));
         this.addSubscription(subscribeListener(this.element, (e) => {
-            // pinch gesture, we needs the same behaviour as mouse wheel
-            if (e.ctrlKey) {
-                this.pinchSubject.next(e);
-            }
-            else {
-                // mouse wheel or scroll gesture
-                const isTouchpad = touchpadDetector(e);
-                if (isTouchpad) {
-                    this.scrollGestureSubject.next(e);
-                }
-                else {
-                    this.wheelSubject.next(e);
-                }
-            }
+            this.wheelSubject.next(e);
             e.preventDefault(); // to disable the scroll over the document, if for example chart is used as widget
         }, 'wheel'));
         this.addSubscription(subscribeListener(this.element, (e) => this.contextMenuSubject.next(e), 'contextmenu'));
@@ -557,24 +541,6 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             .asObservable()
             .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
     }
-    /**
-     * Returns an Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
-     * @param {HitBoundsTest} hitBoundsTest - A function that takes the current point's x and y coordinates as arguments and returns a boolean indicating whether the point is within the desired bounds.
-     * @returns {Observable<WheelEvent>} - An Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
-     */
-    observePinch(hitBoundsTest = () => true) {
-        return this.pinchSubject
-            .asObservable()
-            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
-    }
-    /**
-     * Returns an Observable that emits a WheelEvent whenever a scroll gesture is detected.
-     * The Observable is created from a Subject that is subscribed to by the component's template.
-     * @returns {Observable<WheelEvent>} An Observable that emits a WheelEvent whenever a scroll gesture is detected.
-     */
-    observeScrollGesture() {
-        return this.scrollGestureSubject.asObservable();
-    }
     /**
      * Returns an Observable that emits TouchEvent when a touchstart event occurs within the bounds of the current point.
      * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the touch event occurred within the bounds of the current point.

package/dist/chart/model/baseline.model.d.ts

@@ -19,6 +19,7 @@ export declare const BASELINE_RESIZER_UUID = "BASELINE_RESIZER";
  */
 export declare class BaselineModel extends ChartBaseElement {
     private chartModel;
+    private chartPanComponent;
     private canvasModel;
     private canvasInputListener;
     private config;
@@ -29,6 +30,8 @@ export declare class BaselineModel extends ChartBaseElement {
     ht: HitBoundsTest;
     constructor(chartModel: ChartModel, chartPanComponent: ChartPanComponent, canvasModel: CanvasModel, canvasInputListener: CanvasInputListenerComponent, config: FullChartConfig, canvasBoundContainer: CanvasBoundsContainer, cursorHandler: CursorHandler);
     protected doActivate(): void;
+    private dragStartCb;
+    private dragEndCb;
     private dragTickCb;
     /**
      * Recalculates the bounds of the baseline resizer based on the current chart and y-axis bounds.

package/dist/chart/model/baseline.model.js

@@ -15,6 +15,7 @@ export class BaselineModel extends ChartBaseElement {
     constructor(chartModel, chartPanComponent, canvasModel, canvasInputListener, config, canvasBoundContainer, cursorHandler) {
         super();
         this.chartModel = chartModel;
+        this.chartPanComponent = chartPanComponent;
         this.canvasModel = canvasModel;
         this.canvasInputListener = canvasInputListener;
         this.config = config;
@@ -26,6 +27,8 @@ export class BaselineModel extends ChartBaseElement {
         this.ht = CanvasBoundsContainer.hitTestOf(this.resizerBounds, {
             extensionY: this.config.components.paneResizer.dragZone,
         });
+        this.dragStartCb = () => this.chartPanComponent.deactivatePanHandlers();
+        this.dragEndCb = () => this.chartPanComponent.activateChartPanHandlers();
         this.dragTickCb = (dragInfo) => {
             const { delta: yDelta } = dragInfo;
             const chart = this.canvasBoundContainer.getBounds(CanvasElement.CHART);
@@ -37,6 +40,8 @@ export class BaselineModel extends ChartBaseElement {
         };
         const dndHelper = new DragNDropYComponent(this.ht, {
             onDragTick: this.dragTickCb,
+            onDragStart: this.dragStartCb,
+            onDragEnd: this.dragEndCb,
         }, canvasInputListener, chartPanComponent);
         this.addChildEntity(dndHelper);
     }

package/dist/chart/model/candle-series.model.d.ts

@@ -12,7 +12,7 @@ import EventBus from '../events/event-bus';
 import { DeepPartial } from '../utils/object.utils';
 import { Candle } from './candle.model';
 import { DataSeriesType } from './data-series.config';
-import { DataSeriesModel } from './data-series.model';
+import { DataSeriesModel, DataSeriesViewportIndexes } from './data-series.model';
 import { HighLowWithIndex, ScaleModel } from './scale.model';
 import { Unit } from './scaling/viewport.model';
 import VisualCandle from './visual-candle';
@@ -44,6 +44,15 @@ export declare class CandleSeriesModel extends DataSeriesModel<Candle, VisualCan
      * @returns {void}
      */
     recalculateDataViewportIndexes(xStart?: number, xEnd?: number): void;
+    /**
+     * Calculates and returns the indexes of the start and end points of the data viewport,
+     * based on the given start and end units on the x-axis.
+     *
+     * @param {Unit} xStart - The start value of the viewport on the x-axis.
+     * @param {Unit} xEnd - The end value of the viewport on the x-axis.
+     * @returns {DataSeriesViewportIndexes} An object containing the calculated start and end indexes of the data viewport.
+     */
+    calculateDataViewportIndexes(xStart: Unit, xEnd: Unit): DataSeriesViewportIndexes;
     /**
      * Calculates the price movement of the last candle by comparing the open and close prices.
      * Sets the lastPriceMovement property of the instance with the name of the direction of the price movement.

package/dist/chart/model/candle-series.model.js

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { getDefaultConfig } from '../chart.config';
 import { defaultCandleTransformer } from '../components/chart/candle-transformer.functions';
 import { calculateCandleWidth } from '../components/chart/candle-width-calculator.functions';
-import { lastOf } from '../utils/array.utils';
+import { binarySearch, lastOf } from '../utils/array.utils';
 import { merge } from '../utils/merge.utils';
 import { PriceIncrementsUtils } from '../utils/price-increments.utils';
 import { calculateCandlesHighLow, createCandleSeriesHighLowProvider } from './candle-series-high-low.provider';
@@ -58,10 +58,28 @@ export class CandleSeriesModel extends DataSeriesModel {
      * @returns {void}
      */
     recalculateDataViewportIndexes(xStart = this.scale.xStart, xEnd = this.scale.xEnd) {
-        super.recalculateDataViewportIndexes(xStart, xEnd);
+        const { dataIdxStart, dataIdxEnd } = this.calculateDataViewportIndexes(xStart, xEnd);
+        this.dataIdxStart = dataIdxStart;
+        this.dataIdxEnd = dataIdxEnd;
         this.recalculateZippedHighLow();
         this.eventBus.fireDraw();
     }
+    /**
+     * Calculates and returns the indexes of the start and end points of the data viewport,
+     * based on the given start and end units on the x-axis.
+     *
+     * @param {Unit} xStart - The start value of the viewport on the x-axis.
+     * @param {Unit} xEnd - The end value of the viewport on the x-axis.
+     * @returns {DataSeriesViewportIndexes} An object containing the calculated start and end indexes of the data viewport.
+     */
+    calculateDataViewportIndexes(xStart, xEnd) {
+        const dataIdxStart = binarySearch(this.visualPoints, xStart, (it) => it.startUnit).index;
+        const dataIdxEnd = binarySearch(this.visualPoints, xEnd, (it) => it.startUnit).index;
+        return {
+            dataIdxStart,
+            dataIdxEnd,
+        };
+    }
     /**
      * Calculates the price movement of the last candle by comparing the open and close prices.
      * Sets the lastPriceMovement property of the instance with the name of the direction of the price movement.

package/dist/chart/model/chart-base-element.d.ts

@@ -46,12 +46,14 @@ export declare abstract class ChartBaseElement implements ChartEntity {
      * Enables the functionality of an object.
      * If the object is not currently active, it sets the state to 'deactivated' and activates it.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.activate()` instead
      */
     enable(): void;
     /**
      * Disables the current object if it is not already disabled.
      * If the object is not disabled, it will be deactivated and its state will be set to 'disabled'.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.deactivate()` instead
      */
     disable(): void;
     /**

package/dist/chart/model/chart-base-element.js

@@ -34,6 +34,7 @@ export class ChartBaseElement {
      * Enables the functionality of an object.
      * If the object is not currently active, it sets the state to 'deactivated' and activates it.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.activate()` instead
      */
     enable() {
         if (this._state !== 'active') {
@@ -45,6 +46,7 @@ export class ChartBaseElement {
      * Disables the current object if it is not already disabled.
      * If the object is not disabled, it will be deactivated and its state will be set to 'disabled'.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.deactivate()` instead
      */
     disable() {
         if (this._state !== 'disabled') {

package/dist/chart/model/data-series.model.js

@@ -138,7 +138,9 @@ export class DataSeriesModel extends ChartBaseElement {
     }
     doActivate() {
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.recalculateDataViewportIndexes()));
-        this.addRxSubscription(this.scale.scaleInversedSubject.subscribe(() => { this.recalculateVisualPoints(); }));
+        this.addRxSubscription(this.scale.scaleInversedSubject.subscribe(() => {
+            this.recalculateVisualPoints();
+        }));
     }
     /**
      * Sets the data points and recalculates internal state
@@ -215,8 +217,8 @@ export class DataSeriesModel extends ChartBaseElement {
      * @returns {DataSeriesViewportIndexes} An object containing the calculated start and end indexes of the data viewport.
      */
     calculateDataViewportIndexes(xStart, xEnd) {
-        const dataIdxStart = binarySearch(this.visualPoints, xStart, i => i.centerUnit).index;
-        const dataIdxEnd = binarySearch(this.visualPoints, xEnd, i => i.centerUnit).index;
+        const dataIdxStart = binarySearch(this.visualPoints, xStart, (i) => i.centerUnit).index;
+        const dataIdxEnd = binarySearch(this.visualPoints, xEnd, (i) => i.centerUnit).index;
         return {
             dataIdxStart,
             dataIdxEnd,

package/dist/chart/model/date-time.formatter.d.ts

@@ -9,10 +9,10 @@ export interface TimeFormatterConfig {
     shortMonths?: string[];
 }
 export interface DateTimeFormatter {
-    (date: Date | number): string;
+    (date: number): string;
 }
 export type DateTimeFormatterFactory = (format: string) => DateTimeFormatter;
-export declare const defaultDateTimeFormatter: () => (date: Date | number) => string;
+export declare const defaultDateTimeFormatter: () => (date: number) => string;
 /**
  * Default chart-core time formatter.
  * @param config
@@ -20,4 +20,21 @@ export declare const defaultDateTimeFormatter: () => (date: Date | number) => st
  * @doc-tags chart-core,default-config,date-formatter
  */
 export declare const dateTimeFormatterFactory: (config: FullChartConfig, offsetFunction: (timezone: string) => (time: number) => Date) => DateTimeFormatterFactory;
-export declare const recalculateXFormatter: (xAxisLabelFormat: string | Array<DateTimeFormatConfig>, period: number, formatterFactory: (format: string) => (timestamp: number | Date) => string) => DateTimeFormatter;
+/**
+ * Returns an array of short day names based on the provided configuration object.
+ * If the configuration object does not contain shortDays property, it returns an array of default short day names.
+ *
+ * @param {TimeFormatterConfig} config - The configuration object containing shortDays property.
+ * @returns {string[]} - An array of short day names.
+ */
+export declare function getShortDays(config: TimeFormatterConfig): string[];
+/**
+ * Returns an array of short month names based on the provided configuration object.
+ * If the configuration object does not have a 'shortMonths' property, it returns the default array of short month names.
+ *
+ * @param {TimeFormatterConfig} config - The configuration object that contains the shortMonths property.
+ * @returns {string[]} - An array of short month names.
+ */
+export declare function getShortMonths(config: TimeFormatterConfig): string[];
+export declare const recalculateXFormatter: (xAxisLabelFormat: string | Array<DateTimeFormatConfig>, period: number, formatterFactory: (format: string) => (timestamp: number) => string) => DateTimeFormatter;
+export declare const formatDate: (date: Date, patternStr: string, daysOfWeek: string[], months: string[]) => string;

package/dist/chart/model/date-time.formatter.js

@@ -31,7 +31,6 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
     ['s', 'm', 'H', 'd', 'M'].forEach(function (k) {
         patterns[k + k] = 'this.' + 'addZero' + '(' + patterns[k] + ')';
     });
-    const re = new RegExp(Object.keys(patterns).sort().reverse().join('|'), 'g');
     /**
      * Returns a string that concatenates the result of the function getPrefix with the input string fn and the string '()'.
      * @param {string} fn - The input string to concatenate.
@@ -58,14 +57,6 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
     function upperCase(fn) {
         return fn + '.toUpperCase()';
     }
-    /**
-     * Returns a string that concatenates a pattern from an object with a string
-     * @param {string} pattern - The key of the pattern to be concatenated
-     * @returns {string} - A string that concatenates a pattern from an object with a string
-     */
-    function applyPattern(pattern) {
-        return "' + (" + patterns[pattern] + ") + '";
-    }
     return function (pattern) {
         var _a;
         const context = {
@@ -89,11 +80,10 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
             },
             tzDate: offsetFunction((_a = config.timezone) !== null && _a !== void 0 ? _a : '') ||
                 function (date) {
-                    return date instanceof Date ? date : new Date(+date);
+                    return new Date(+date);
                 },
         };
-        // eslint-disable-next-line no-new-func
-        return new Function('date', 'date=this.' + 'tzDate' + "(date); return '" + pattern.replace(re, applyPattern) + "'").bind(context);
+        return (date) => formatDate(context.tzDate(date), pattern, context.shortDays, context.shortMonths);
     };
 };
 /**
@@ -103,7 +93,7 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
  * @param {TimeFormatterConfig} config - The configuration object containing shortDays property.
  * @returns {string[]} - An array of short day names.
  */
-function getShortDays(config) {
+export function getShortDays(config) {
     var _a;
     return (_a = config.shortDays) !== null && _a !== void 0 ? _a : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 }
@@ -114,7 +104,7 @@ function getShortDays(config) {
  * @param {TimeFormatterConfig} config - The configuration object that contains the shortMonths property.
  * @returns {string[]} - An array of short month names.
  */
-function getShortMonths(config) {
+export function getShortMonths(config) {
     var _a;
     return (_a = config.shortMonths) !== null && _a !== void 0 ? _a : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 }
@@ -154,3 +144,61 @@ export const recalculateXFormatter = (xAxisLabelFormat, period, formatterFactory
     }
     return defaultDateTimeFormatter();
 };
+//#region Custom date pattern parser, transforms Date object to string by given pattern
+// examples: dd.MM => 15.12, YYYY => 2024, HH:mm => 15:56
+export const formatDate = (date, patternStr, daysOfWeek, months) => {
+    if (!patternStr) {
+        patternStr = 'M/d/yyyy';
+    }
+    const day = date.getDate();
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    const hour = date.getHours();
+    const minute = date.getMinutes();
+    const second = date.getSeconds();
+    const miliseconds = date.getMilliseconds();
+    const h = hour % 12;
+    const hh = twoDigitPad(h);
+    const HH = twoDigitPad(hour);
+    const mm = twoDigitPad(minute);
+    const ss = twoDigitPad(second);
+    const aaa = hour < 12 ? 'AM' : 'PM';
+    const EEEE = daysOfWeek[date.getDay()];
+    const EEE = EEEE.substring(0, 3);
+    const dd = twoDigitPad(day);
+    const M = month + 1;
+    const MM = twoDigitPad(M);
+    const MMMM = months[month];
+    const MMM = MMMM.substring(0, 3);
+    const yyyy = year + '';
+    const yy = yyyy.substring(2, 4);
+    // checks to see if month name will be used
+    patternStr = patternStr
+        .replace('hh', hh + '')
+        .replace('h', h + '')
+        .replace('HH', HH + '')
+        .replace('H', hour + '')
+        .replace('mm', mm + '')
+        .replace('m', minute + '')
+        .replace('ss', ss + '')
+        .replace('s', second + '')
+        .replace('S', miliseconds + '')
+        .replace('dd', dd + '')
+        .replace('d', day + '')
+        .replace('EEEE', EEEE)
+        .replace('EEE', EEE)
+        .replace('YYYY', yyyy)
+        .replace('yyyy', yyyy)
+        .replace('YY', yy)
+        .replace('yy', yy)
+        .replace('aaa', aaa);
+    if (patternStr.indexOf('MMM') > -1) {
+        patternStr = patternStr.replace('MMMM', MMMM).replace('MMM', MMM);
+    }
+    else {
+        patternStr = patternStr.replace('MM', MM + '').replace('M', M + '');
+    }
+    return patternStr;
+};
+const twoDigitPad = (num) => (typeof num === 'number' && num < 10 ? '0' + num : num);
+//#endregion

package/dist/chart/model/scale.model.d.ts

@@ -46,6 +46,10 @@ export declare class ScaleModel extends ViewportModel {
     zoomXYRatio: ZoomXToZoomYRatio;
     offsets: ChartConfigComponentsOffsets;
     xConstraints: Constraints[];
+    maxZoomReached: {
+        zoomIn: boolean;
+        zoomOut: boolean;
+    };
     readonly state: ChartScale;
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
     protected doActivate(): void;
@@ -82,6 +86,7 @@ export declare class ScaleModel extends ViewportModel {
     zoomXToEnd(zoomIn: boolean, zoomSensitivity: number): void;
     haltAnimation(): void;
     private zoomXTo;
+    isMaxZoomXReached(zoomIn: boolean): boolean;
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * (you need to fire DRAW event after this)

package/dist/chart/model/scale.model.js

@@ -41,6 +41,7 @@ export class ScaleModel extends ViewportModel {
         this.history = [];
         this.zoomXYRatio = 0;
         this.xConstraints = [];
+        this.maxZoomReached = { zoomIn: false, zoomOut: false };
         this.scalePostProcessor = (initialState, state) => {
             // for now <s>reduceRight<s/> reduce bcs ChartModel#getZoomConstrait should be invoked first
             // if we will need more complex order handling -> add some managing
@@ -49,7 +50,11 @@ export class ScaleModel extends ViewportModel {
         this.state = cloneUnsafe(config.scale);
         this.autoScaleModel = new AutoScaleViewportSubModel(this);
         this.offsets = this.config.components.offsets;
-        this.addXConstraint((initialState, state) => zoomConstraint(initialState, state, this.config.components.chart, this.getBounds));
+        this.addXConstraint((initialState, state) => {
+            const { maxZoomReached, newState } = zoomConstraint(initialState, state, this.config.components.chart, this.getBounds);
+            this.maxZoomReached = maxZoomReached;
+            return newState;
+        });
     }
     doActivate() {
         super.doActivate();
@@ -141,6 +146,9 @@ export class ScaleModel extends ViewportModel {
             startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
         }
     }
+    isMaxZoomXReached(zoomIn) {
+        return (this.maxZoomReached.zoomIn && zoomIn) || (this.maxZoomReached.zoomOut && !zoomIn);
+    }
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * (you need to fire DRAW event after this)

package/dist/chart/model/scaling/constrait.functions.d.ts

@@ -33,11 +33,9 @@ export declare const candleEdgesConstrait: (state: ViewportModelState, visualCan
  * @doc-tags viewport,zoom,scaling
  */
 export declare const zoomConstraint: (_: ViewportModelState, state: ViewportModelState, chartConfig: ChartConfigComponentsChart, boundsProvider: BoundsProvider) => {
-    xStart: number;
-    xEnd: number;
-    yStart: number;
-    yEnd: number;
-    zoomX: number;
-    zoomY: number;
-    inverseY: boolean;
+    newState: ViewportModelState;
+    maxZoomReached: {
+        zoomIn: boolean;
+        zoomOut: boolean;
+    };
 };

package/dist/chart/model/scaling/constrait.functions.js

@@ -53,13 +53,13 @@ export const zoomConstraint = (_, state, chartConfig, boundsProvider) => {
         if (maxViewportReached) {
             newState.xStart = newState.xEnd - maxCandlesInViewport;
             newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
-            return newState;
+            return { newState, maxZoomReached: { zoomOut: true, zoomIn: false } };
         }
         if (minViewportReached) {
             newState.xStart = newState.xEnd - chartConfig.minCandles;
             newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
-            return newState;
+            return { newState, maxZoomReached: { zoomOut: false, zoomIn: true } };
         }
     }
-    return newState;
+    return { newState, maxZoomReached: { zoomOut: false, zoomIn: false } };
 };

package/dist/chart/model/time-zone.model.js

@@ -87,7 +87,9 @@ export class TimeZoneModel {
             // In JS Date object is created with local tz offset,
             // so we have to subtract localOffset from current time
             return time => {
-                return new Date(time + getTimezoneOffset(timezone, time) + new Date(time).getTimezoneOffset() * timeMultiplier);
+                return new Date(time +
+                    getTimezoneOffset(timezone, time) +
+                    new Date(time).getTimezoneOffset() * timeMultiplier);
             };
         }
     }

package/dist/chart/utils/timezone.utils.js

@@ -35,10 +35,10 @@ export function getDateTimeFormat(timeZone) {
 export const getTimezoneOffset = (timeZone, timestamp = Date.now()) => {
     const formatter = getDateTimeFormat(timeZone);
     const dateString = formatter.format(timestamp);
-    // exec() returns  [, fMonth, fDay, fYear, fHour, fMinute]
-    const tokens = /(\d+)\/(\d+)\/(\d+),? (\d+):(\d+)/.exec(dateString);
+    // exec() returns  [, fMonth, fDay, fYear, fHour, fMinute, fSeconds]
+    const tokens = /(\d+)\/(\d+)\/(\d+),? (\d+):(\d+):(\d+)/.exec(dateString);
     if (tokens) {
-        const asUTC = Date.UTC(+tokens[3], +tokens[1] - 1, +tokens[2], +tokens[4] % 24, +tokens[5], 0);
+        const asUTC = Date.UTC(+tokens[3], +tokens[1] - 1, +tokens[2], +tokens[4] % 24, +tokens[5], +tokens[6]);
         let asTimezone = timestamp;
         const over = asTimezone % 1000;
         asTimezone -= over >= 0 ? over : 1000 + over;