Grafana，使用外部庫開發插件

Question

大家好。 我正在嘗試為 Grafana 開發一個簡單的插件。 我設法導入了外部庫，現在我對“使用它”感到震驚。

這就是我在 domap_ctrl.js 中導入插件的方式：

System.register(['app/plugins/sdk', 'lodash','./datamaps'], function (_export, _context) {
  var PanelCtrl, _, _createClass, panelDefaults, DoMapCtrl, Datamap;

然后我想觸發數據映射：

_createClass(DoMapCtrl, [
            {
              key: 'updateDoMap',
              value: function updateDoMap() {
                console.log("update: ",this.panel.foo);
                if(document.getElementById('container')){
                    new Datamap({
                      element: document.getElementById("basic")
                    });
                }
                this.nextTickPromise = this.$timeout(this.updateDoMap.bind(this), 1000);
              }
            },
            {
          key: 'onRender',
          value: function onRender() {
            console.log("onRender",)
          }
        }
        ]);

但是在將面板添加到儀表板時出現此錯誤：

TypeError: Datamap is not a constructor
    at DoMapCtrl.updateDoMap (domap_ctrl.js:92)
    at angular.js:20440
    at i (angular.js:6362)
    at angular.js:6642
(anonymous) @ angular.js:14700
(anonymous) @ angular.js:11142
(anonymous) @ angular.js:20443
i @ angular.js:6362
(anonymous) @ angular.js:6642
setTimeout (async)
c.defer @ angular.js:6640
o @ angular.js:20438
updateDoMap @ domap_ctrl.js:96
DoMapCtrl @ domap_ctrl.js:82
s @ angular.js:5040
d.instance @ angular.js:11000
f @ angular.js:9852
s @ angular.js:9174
(anonymous) @ angular.js:9039
v @ module.js:14
y @ module.js:38
(anonymous) @ module.js:44
Promise resolved (async)
link @ module.js:43
(anonymous) @ angular.js:1385
Ae @ angular.js:10545
f @ angular.js:9934
s @ angular.js:9174
f @ angular.js:9928
s @ angular.js:9174
(anonymous) @ angular.js:9039
(anonymous) @ angular.js:9430
r @ angular.js:9217
h @ angular.js:9984
(anonymous) @ angular.js:31499
r @ angular.js:18123
$digest @ angular.js:18261
$apply @ angular.js:18531
(anonymous) @ angular.js:27346
dispatch @ jquery.js:5206
g.handle @ jquery.js:5014
12:41:12.796 angular.js:14700 TypeError: Datamap is not a constructor
    at DoMapCtrl.updateDoMap (domap_ctrl.js:92)
    at angular.js:20440
    at i (angular.js:6362)
    at angular.js:6642 "Possibly unhandled rejection: {}"

我該如何解決？ 提前感謝您的幫助。

Answer 1

即使不建議直接在 dist 文件夾中編輯 Grafana 插件（或不從 Typescript 轉譯）......

要導入您的庫，您還需要修改提供依賴項注入的setters函數：

return {
    setters: [
    function (_lodash) {
        // example for Lodash library
        _ = _lodash.default;
    }, function (_moment) {
        // example for Moment.js library
        moment = _moment.default;
    }, function (datamap) {
        // your library
        Datamap = datamap;
    }],
    ...