diff --git a/pdb-js/package-lock.json b/pdb-js/package-lock.json index 26a15c2..e6c1e8e 100644 --- a/pdb-js/package-lock.json +++ b/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", diff --git a/pdb-js/package.json b/pdb-js/package.json index c4d24c0..cdd4958 100644 --- a/pdb-js/package.json +++ b/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", diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts index f2bf174..2029fe3 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.ts +++ b/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 formattedEndDate = endDate.format(this.DATE_PATTERN); + const formattedStartDate = startDate.toFormat(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 newEndDate = newStartDate.clone().add({seconds: newDateRangeInSeconds});; + const newStartDate = anchorTimestampInSeconds.minus(newDateRangeInSeconds*anchorInPercentOfDateRange*1000); + 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 newEndDate = dateRangeParsed.endDate.add({seconds: dateRangeInSeconds*factorEndDate}); + const newStartDate = dateRangeParsed.startDate.plus({seconds: dateRangeInSeconds*factorStartDate}); + const newEndDate = dateRangeParsed.endDate.plus({seconds: dateRangeInSeconds*factorEndDate}); this.setDateRange(newStartDate, newEndDate); } parseDateRange(dateRangeAsString : string) : DateRange { - const startDate = moment(dateRangeAsString.slice(0, 19)); - const endDate = moment(dateRangeAsString.slice(22, 41)); + const startDate = DateTime.fromFormat(dateRangeAsString.slice(0, 19), this.DATE_PATTERN ); + 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; - endDate: any; - duration: any; + constructor( + public startDate: DateTime, + public endDate: DateTime, + public duration: Duration){} } \ No newline at end of file