有人有如何使用 Grafana 的 ae3e Plotly 面板插件的“点击脚本”输入的示例吗？

Question

我正在使用 Grafana v10.0.0 和 ae3e Plotly 插件 v0.5.0。

根据我通过使用它所能确定的，插件的点击脚本输入区域本质上是一种提供代码的方法，人们可以将代码放入绘图中的“点击”事件的“脚本”属性中如果使用 Plotly 而不使用 Grafana 时的布局。输入区域提供了一个名为“data”的对象，其中包含有关单击、x 和 y 坐标等的信息，因此看来其目的是根据用户单击绘图的位置执行操作。但对于我的一生，我无法弄清楚如何从这个点击脚本中以任何方式影响绘图区域。单击脚本输入区域无法访问绘图数据、布局或配置定义，因此我不知道如何更改其中任何一个。安装插件时初始化的单行示例单击脚本尝试使用

window.updateVariables({query:{'var-project':'test'}, partial: true})

来做一些不清楚的事情，但插件只是向控制台抛出一个错误，指出

window.updateVariables

不是函数。我真是不知所措了。有人知道这是如何工作的，并且可以给我一个使用这个插件的点击脚本功能做一些有用的事情的例子吗？

Answer 1

TLDR： 找到了解决方法...使用单击的数据更新 window.location.search 中 url 的“搜索”组件。

我无法让 window.updatevariables 函数像您提到的默认值一样工作。但是，我确实通过检查浏览器控制台中的窗口对象找到了解决方法。单击的信息来自 data 对象。然后你想操作 window.location.search 来获得你想要的 Grafana 响应。

缺点是点击后整个页面都会刷新，因此这不是最好的用户体验，但它确实提供了我认为您正在寻找的回调功能。

这是我使用图表绘制的代码片段。

console.log(data);
// window.updateVariables({query:{'var-project':'test'}, partial: true})

clickedNode = data.points[0].label
entryNode = data.points[0].entry
console.log(clickedNode)
console.log(entryNode)

newTarget = 'var-project=' + clickedNode
console.log("newTarget: " + newTarget)

console.log(window.location)
console.log(window.location.origin)
console.log(window.location.pathname)
console.log(window.location.search)
search=window.location.search
searchTerms=search.split('&')
console.log(searchTerms)
//check if the variable query param is already in the search url
target=-1
for (i in searchTerms) {
  console.log(i)
  console.log(searchTerms[i]);
  if (searchTerms[i].includes('project')){
    target=i;
  }
}
//replace or add variable param to the search url
if (target==-1) {
  console.log("appending search term")
  window.location.search+='&'+newTarget
}
else {
  console.log("replacing search term")
  console.log(searchTerms[target])
  oldTarget=searchTerms[target]
  console.log(window.location.search.replace(oldTarget,newTarget))
  window.location.search=window.location.search.replace(oldTarget,newTarget)
}