[fix] fix custom precision bug

- fix custom precision bug (#128, #139) - change date library (moment -> dayjs) - update some packages - add dayjs library - remove moment library
NatelEnergy · May 19, 2022 · 9426750 · 9426750
1 parent 185e241
commit 9426750
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -22,13 +22,14 @@
     "url": "https://github.com/NatelEnergy/grafana-discrete-panel.git"
   },
   "devDependencies": {
-    "@types/grafana": "github:CorpGlory/types-grafana.git",
-    "@types/lodash": "latest",
-    "jquery": "^3.2.1",
-    "lodash": "^4.17.10",
-    "moment": "^2.22.1",
     "@grafana/data": "latest",
     "@grafana/toolkit": "latest",
-    "@grafana/ui": "latest"
-  }
+    "@grafana/ui": "latest",
+    "@types/grafana": "github:CorpGlory/types-grafana.git",
+    "@types/lodash": "^4.14.182",
+    "dayjs": "^1.11.2",
+    "jquery": "^3.2.1",
+    "lodash": "^4.17.10"
+  },
+  "dependencies": {}
 }
diff --git a/src/canvas-metric.ts b/src/canvas-metric.ts
@@ -1,7 +1,14 @@
 import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk';
 
 /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */
-import moment from 'moment';
+//import moment from 'moment';
+import dayjs, { extend } from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+extend(duration);
+extend(relativeTime);
+extend(utc);
 
 import $ from 'jquery';
 
@@ -72,7 +79,7 @@ export class CanvasPanelCtrl extends MetricsPanelCtrl {
 
     let time = '';
     if (this.mouse.position != null) {
-      time = this.dashboard.formatDate(moment(this.mouse.position.ts));
+      time = this.dashboard.formatDate(dayjs(this.mouse.position.ts));
     }
 
     ctx.fillStyle = '#999999';
@@ -237,7 +244,7 @@ export class CanvasPanelCtrl extends MetricsPanelCtrl {
           } else {
             const min = Math.min(this.mouse.down.ts, up.ts);
             const max = Math.max(this.mouse.down.ts, up.ts);
-            const range = { from: moment.utc(min), to: moment.utc(max) };
+            const range = { from: dayjs.utc(min), to: dayjs.utc(max) };
             this.mouse.position = up;
             this.onMouseSelectedRange(range, evt);
           }

diff --git a/src/module.ts b/src/module.ts
@@ -22,7 +22,14 @@ import kbn from 'grafana/app/core/utils/kbn';
 import appEvents from 'grafana/app/core/app_events';
 
 /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */
-import moment from 'moment';
+//import moment from 'moment';
+import dayjs, { extend } from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+extend(duration);
+extend(relativeTime);
+extend(utc);
 
 const grafanaColors = [
   '#7EB26D',
@@ -255,7 +262,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
       body += info.count + ' times<br/>for<br/>';
     }
 
-    body += this.formatDuration(moment.duration(info.ms));
+    body += this.formatDuration(dayjs.duration(info.ms));
 
     if (info.count > 1) {
       body += '<br/>total';
@@ -499,9 +506,39 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
     let limit = false;
 
     for (const o of this.panel.timeOptions) {
-      dir[o.value] = parseInt(duration.as(o.value), 10);
+      switch(o.value) {
+        case "years":
+          dir[o.value] = duration.years();
+          break;
+        case "months":
+          dir[o.value] = duration.months();
+          break;
+        case "weeks":
+          dir[o.value] = duration.weeks();
+          break;
+        case "days":
+          dir[o.value] = duration.days();
+          break;
+        case "hours":
+          dir[o.value] = duration.hours();
+          break;
+        case "minutes":
+          dir[o.value] = duration.minutes();
+          break;
+        case "seconds":
+          dir[o.value] = duration.seconds();
+          break;
+        case "milliseconds":
+          dir[o.value] = duration.milliseconds();
+          break;
+        default:
+          dir[o.value] = 0;
+          break;
+      }
+      //dir[o.value] = 0;
+      //dir[o.value] = parseInt(duration['$d'][o.value], 10);
       hasValue = dir[o.value] || hasValue;
-      duration.subtract(moment.duration(dir[o.value], o.value));
+      duration.subtract(dayjs.duration(dir[o.value], o.value));
       limit = this.panel.timePrecision.value === o.value || limit;
 
       // always show a value in case it is less than the configured
@@ -510,7 +547,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
         break;
       }
     }
-
+    
     const rs = Object.keys(dir).reduce((carry, key) => {
       const value = dir[key];
       if (!value) {
@@ -519,7 +556,6 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
       key = value < 2 ? key.replace(/s$/, '') : key;
       return `${carry} ${value} ${key},`;
     }, '');
-
     return rs.substr(0, rs.length - 1);
   }
 
@@ -529,7 +565,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
       disp += ' (';
       let hassomething = false;
       if (this.panel.showLegendTime) {
-        disp += this.formatDuration(moment.duration(info.ms));
+        disp += this.formatDuration(dayjs.duration(info.ms));
         hassomething = true;
       }
 
@@ -586,10 +622,10 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
     let body = '<div class="graph-tooltip-time">' + val + '</div>';
 
     body += '<center>';
-    body += this.dashboard.formatDate(moment(from), timeformat) + '<br/>';
+    body += this.dashboard.formatDate(dayjs(from), timeformat) + '<br/>';
     body += 'to<br/>';
-    body += this.dashboard.formatDate(moment(to), timeformat) + '<br/><br/>';
-    body += this.formatDuration(moment.duration(time)) + '<br/>';
+    body += this.dashboard.formatDate(dayjs(to), timeformat) + '<br/><br/>';
+    body += this.formatDuration(dayjs.duration(time)) + '<br/>';
     body += '</center>';
 
     let pageX = 0;
@@ -616,7 +652,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
   }
 
   getCorrectTime(ts: number) {
-    const from = moment(this.range.from).valueOf();
+    const from = dayjs(this.range.from).valueOf();
     return ts < from ? from : ts;
   }
 
@@ -704,7 +740,7 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
 
     const pt = this.hoverPoint;
     if (pt && pt.start) {
-      const range = { from: moment.utc(pt.start), to: moment.utc(pt.start + pt.ms) };
+      const range = { from: dayjs.utc(pt.start), to: dayjs.utc(pt.start + pt.ms) };
       this.timeSrv.setTime(range);
       this.clear();
     }

diff --git a/yarn.lock b/yarn.lock
@@ -1686,7 +1686,7 @@
 
 "@types/grafana@github:CorpGlory/types-grafana.git":
   version "4.6.3"
-  resolved "https://codeload.github.com/CorpGlory/types-grafana/tar.gz/c58c08dc33585cc234f4d69013616edc05760e21"
+  resolved "https://codeload.github.com/CorpGlory/types-grafana/tar.gz/4beede5fa0e5bdebdb23b09e4e1e214dcc4c267f"
 
 "@types/[email protected]":
   version "3.3.1"
@@ -1792,10 +1792,10 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
-"@types/lodash@latest":
-  version "4.14.165"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f"
-  integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg==
+"@types/lodash@^4.14.182":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
 
 "@types/mime@*":
   version "2.0.3"
@@ -4462,6 +4462,11 @@ date-fns@^1.23.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+dayjs@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
+  integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
+
 debug@=3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -7316,11 +7321,16 @@ jest@^25:
     import-local "^3.0.2"
     jest-cli "^25.5.4"
 
-[email protected], jquery@^3.2.1:
+[email protected]:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
   integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
 
+jquery@^3.2.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
 js-base64@^2.1.8:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
@@ -7709,11 +7719,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.10:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -8104,7 +8119,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 
-[email protected], moment@^2.22.1:
+[email protected]:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==