web: Sort data in simple measure graphs.

Makefile

@@ -1,5 +1,5 @@
 VERSION:=$(shell git describe --always)
-TARGET_ENV=dev
+TARGET_ENV?=dev
 
 build: dist/personal-measure-api.tar.gz dist/personal-measure-web.tar.gz
 

api/src/main/nim/personal_measure_apipkg/db_util.nim

@@ -1,11 +1,11 @@
 import json, macros, options, sequtils, strutils, times, timeutils, unicode,
   uuids
 
+import nre except toSeq
+
 const UNDERSCORE_RUNE = "_".toRunes[0]
 const PG_TIMESTAMP_FORMATS = [
   "yyyy-MM-dd HH:mm:sszz",
-  "yyyy-MM-dd HH:mm:ss'.'fzz",
-  "yyyy-MM-dd HH:mm:ss'.'ffzz",
   "yyyy-MM-dd HH:mm:ss'.'fffzz"
 ]
 
@@ -72,6 +72,19 @@ proc parsePGDatetime*(val: string): DateTime =
   for df in PG_TIMESTAMP_FORMATS:
     try: return val.parse(df)
     except: errStr &= "\n" & getCurrentExceptionMsg()
+
+  # PostgreSQL does not pad the millisecond value in a datetime out to three
+  # decimal points. If this is a value like `2019-09-29 12:00:00.5Z` We need to
+  # manually catch this and pad it out to something like
+  # `2019-09-29 12:00:00.500Z` so that we can parse it.
+  const millisTruncDatePattern = "(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2}\\.)(\\d{1,2})(.*)"
+  let match = val.match(re(millisTruncDatePattern))
+  if match.isSome:
+    let captures = match.get.captures
+    let reformatted = captures[0] & captures[1].alignLeft(3, '0') & captures[2]
+    try: return reformatted.parse(PG_TIMESTAMP_FORMATS[1])
+    except: errStr &= "\n" & getCurrentExceptionMsg()
+
   raise newException(ValueError, "Cannot parse PG date. Tried:" & errStr)
 
 proc parseDbArray*(val: string): seq[string] =

api/src/main/nim/personal_measure_apipkg/version.nim

@@ -1 +1 @@
-const PM_API_VERSION* = "0.5.0"
+const PM_API_VERSION* = "0.6.0"

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "personal-measure-web",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

web/src/components/measure-details/simple-details.ts

@@ -22,11 +22,13 @@ export class SimpleDetails extends Vue {
   };
 
   private get measurementChartData(): ApexAxisChartSeries {
-    const measurementData = this.measurements || [];
+    const measurementData = this.measurements.slice() || [];
 
     return [{
       name: this.measure.name,
-      data: measurementData.map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
+      data: measurementData
+        .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
+        .map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
     }];
   }
 

web/src/components/measure-summaries/simple-summary-graph.ts

@@ -16,11 +16,13 @@ export class SimpleSummaryGraph extends Vue {
   };
 
   private get measurementData(): ApexAxisChartSeries {
-    const measurementData = this.measurements || [];
+    let measurementData = this.measurements.slice() || [];
 
     return [{
       name: this.measure.name,
-      data: measurementData.map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
+      data: measurementData
+        .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
+        .map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
     }];
   }
 }