pdb-js/package-lock.json

@@ -18,8 +18,8 @@
         "@angular/platform-browser": "^16.2.7",
         "@angular/platform-browser-dynamic": "^16.2.7",
         "@angular/router": "^16.2.7",
+        "luxon": "^3.4.3",
         "marked": "^4.2.12",
-        "moment": "^2.29.1",
         "ngx-markdown": "^16.0.0",
         "rxjs": "~7.5.0",
         "rxjs-compat": "^6.6.7",
@@ -31,6 +31,7 @@
         "@angular/cli": "^16.2.4",
         "@angular/compiler-cli": "^16.2.7",
         "@types/jasmine": "~4.3.0",
+        "@types/luxon": "^3.3.2",
         "@types/marked": "^4.0.8",
         "@types/node": "^12.11.1",
         "jasmine-core": "~4.6.0",
@@ -4278,6 +4279,12 @@
       "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
       "dev": true
     },
+    "node_modules/@types/luxon": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.2.tgz",
+      "integrity": "sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ==",
+      "dev": true
+    },
     "node_modules/@types/marked": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
@@ -9551,6 +9558,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.3.tgz",
+      "integrity": "sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
@@ -10049,14 +10064,6 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/moment": {
-      "version": "2.29.4",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -16991,6 +16998,12 @@
       "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
       "dev": true
     },
+    "@types/luxon": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.2.tgz",
+      "integrity": "sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ==",
+      "dev": true
+    },
     "@types/marked": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
@@ -21027,6 +21040,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "luxon": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.3.tgz",
+      "integrity": "sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg=="
+    },
     "magic-string": {
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
@@ -21421,11 +21439,6 @@
         "minimist": "^1.2.6"
       }
     },
-    "moment": {
-      "version": "2.29.4",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
-    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",

pdb-js/package.json

@@ -23,8 +23,8 @@
     "@angular/platform-browser": "^16.2.7",
     "@angular/platform-browser-dynamic": "^16.2.7",
     "@angular/router": "^16.2.7",
+    "luxon": "^3.4.3",
     "marked": "^4.2.12",
-    "moment": "^2.29.1",
     "ngx-markdown": "^16.0.0",
     "rxjs": "~7.5.0",
     "rxjs-compat": "^6.6.7",
@@ -36,6 +36,7 @@
     "@angular/cli": "^16.2.4",
     "@angular/compiler-cli": "^16.2.7",
     "@types/jasmine": "~4.3.0",
+    "@types/luxon": "^3.3.2",
     "@types/marked": "^4.0.8",
     "@types/node": "^12.11.1",
     "jasmine-core": "~4.6.0",

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -1,10 +1,12 @@
 import { Component, Output, EventEmitter } from '@angular/core';
 import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions, DataSeriesStats, DashTypeAndColor  } from '../plot.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import * as moment from 'moment';
+//import * as moment from 'moment';
 import { WidgetDimensions } from '../dashboard.service';
 import { Overlay } from "@angular/cdk/overlay";
 
+import { DateTime, Duration } from "luxon";
+
 @Component({
   selector: 'pdb-plot-view',
   templateUrl: './plot-view.component.html',
@@ -12,7 +14,7 @@ import { Overlay } from "@angular/cdk/overlay";
 })
 export class PlotViewComponent {
 
-  readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
+  readonly DATE_PATTERN = "yyyy-MM-dd HH:mm:ss"; // for moment-JS
 
   readonly gnuplotLMargin = 110; // The left margin configured for gnuplot
   readonly gnuplotRMargin = 110; // The right margin configured for gnuplot
@@ -178,8 +180,8 @@ export class PlotViewComponent {
   }
 
   setDateRange(startDate: any, endDate: any) {
-    const formattedStartDate = startDate.format(this.DATE_PATTERN);
+    const formattedStartDate = startDate.toFormat(this.DATE_PATTERN);
-    const formattedEndDate = endDate.format(this.DATE_PATTERN);
+    const formattedEndDate = endDate.toFormat(this.DATE_PATTERN);
     
     const newDateRange = formattedStartDate+" - "+formattedEndDate;
     
@@ -295,13 +297,13 @@ export class PlotViewComponent {
  shiftDateByAnchor(dateRange:string, anchorInPercentOfDateRange:number, zoomFactor:number)
  {
      const dateRangeParsed = this.parseDateRange(dateRange);
-     const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
+     const dateRangeInSeconds = Math.floor(dateRangeParsed.duration.toMillis()/1000);
      
-     const anchorTimestampInSeconds = dateRangeParsed.startDate.clone().add(Math.floor(dateRangeInSeconds*anchorInPercentOfDateRange), "seconds");
+     const anchorTimestampInSeconds = dateRangeParsed.startDate.plus(Math.floor(dateRangeInSeconds*anchorInPercentOfDateRange)*1000);
      const newDateRangeInSeconds = dateRangeInSeconds * zoomFactor;
      
-     const newStartDate = anchorTimestampInSeconds.clone().subtract(newDateRangeInSeconds*anchorInPercentOfDateRange, "seconds");
+     const newStartDate = anchorTimestampInSeconds.minus(newDateRangeInSeconds*anchorInPercentOfDateRange*1000);
-     const newEndDate = newStartDate.clone().add({seconds: newDateRangeInSeconds});;
+     const newEndDate = newStartDate.plus({seconds: newDateRangeInSeconds});;
      
      this.setDateRange(newStartDate, newEndDate);
  }
@@ -318,22 +320,23 @@ export class PlotViewComponent {
  shiftDate(dateRange: string, factorStartDate: number, factorEndDate: number)
  {
      const dateRangeParsed = this.parseDateRange(dateRange);
-     const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
+     const dateRangeInSeconds = Math.floor(dateRangeParsed.duration.toMillis()/1000);
      
-     const newStartDate = dateRangeParsed.startDate.add({seconds: dateRangeInSeconds*factorStartDate});
+     const newStartDate = dateRangeParsed.startDate.plus({seconds: dateRangeInSeconds*factorStartDate});
-     const newEndDate = dateRangeParsed.endDate.add({seconds: dateRangeInSeconds*factorEndDate});
+     const newEndDate = dateRangeParsed.endDate.plus({seconds: dateRangeInSeconds*factorEndDate});
      
      this.setDateRange(newStartDate, newEndDate);
  }
  
   parseDateRange(dateRangeAsString : string) : DateRange {
-   const startDate = moment(dateRangeAsString.slice(0, 19));
+    const startDate = DateTime.fromFormat(dateRangeAsString.slice(0, 19), this.DATE_PATTERN );
-   const endDate = moment(dateRangeAsString.slice(22, 41));
+    const endDate = DateTime.fromFormat(dateRangeAsString.slice(22, 41), this.DATE_PATTERN );
+   
 
    return {
      startDate: startDate,
      endDate: endDate,
-     duration: moment.duration(endDate.diff(startDate))
+     duration: endDate.diff(startDate),
    };
   }
 
@@ -375,7 +378,8 @@ export class LoadingEvent {
 }
 
 export class DateRange {
-  startDate: any;
+  constructor(
-  endDate: any;
+    public startDate: DateTime,
-  duration: any;
+    public endDate: DateTime,
+    public duration: Duration){}
 }