根据 vega lite 中的基准更改填充颜色

Change color of fill based off of datum in vega lite

我正在使用 ELK 来可视化使用 MTConnect 从我们的机器发出的日志。我有一个仪表板,我已将其设置为每六十秒更新一次,我希望每台机器都有一个正方形和一个名为“lastEvent”的字段。 “lastEvent”可以有六种状态:ACTIVE、READY、STOPPED、INTERRUPTED、PROGRAM_STOPPED 和 UNAVAILABLE。每个方块都已设置为通过 Elastic Search 仅处理其机器的日志。

我想要的是根据最近日志的“lastEvent”更改正方形的颜色,并在每次仪表板刷新时更新它。在下面的代码中,我希望收到 ACTIVE 时方块是蓝色的,但方块是粉红色的,这表明没有满足条件。

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
  "url": {
    "%context%": false,
    "%timefield%": "@timestamp",
    "index": "mtconnect*",
  },
},

"height": "container",
"width": "container",

"mark": "rect",
"encoding": {
  "color": {
    "condition": [
        {"test": "datum['lastEvent'] === 'ACTIVE'", "value": "green"},
        {"test": "datum['lastEvent'] === 'STOPPED'", "value": "red"},
        {"test": "datum['lastEvent'] === 'READY'", "value": "blue"},
        {"test": "datum['lastEvent'] === 'UNAVAILABLE'", "value": "black"},
        {"test": "datum['lastEvent'] === 'PROGRAM_STOPPED'", "value": "pink"},
        {"test": "datum['lastEvent'] === 'FEED_HOLD'", "value": "purple"},
        {"test": "datum['lastEvent'] === 'INTERRUPTED'", "value": "yellow"}
        ],
    "value": "Pink"
  }
}
}

方块显示正确,因此没有解析错误,并且每个日志都有各自机器的“lastEvent”字段。将条件减少到仅一项测试并不能解决问题。

编辑:条件正常。相反,问题在于从索引中获取数据并正确评估。

我发现了两个问题。第一个是传递的文件数量。目前每个文档都在评估中,我只想评估最新的文档。

第二个问题是当我通过文本标记发送值时,'lastEvent' 被评估为未定义。当我使用测试数据时,值显示正确,但当我尝试从索引中提取时,情况并非如此。由于某种原因,测试数据中的“ACTIVE”与索引中的“ACTIVE”不同。

当索引中的数据传递到 Vega 时,它会进入标记为“hits”的部分。命中的所有内容都显示在一长行中,因此可能是格式问题。

如果我没理解错的话,你是说所提供的条件不适用于你的 lastEvent 但我试过你的例子,条件似乎完全正常。下面是带有示例数据的配置,它为您的 lastEvent 显示了正确的颜色。如果我误解了您的要求,请告诉我。

参考以下代码或editor link:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"lastEvent": "STOPPED", "x": 10, "y": 20},
      {"lastEvent": "READY", "x": 30, "y": 30},
      {"lastEvent": "test", "x": 10, "y": 30}
    ]
  },
  "height": "container",
  "width": "container",
  "mark": "rect",
  "encoding": {
    "x": {"field": "x"},
    "y": {"field": "y"},
    "color": {
      "condition": [
        {"test": "datum['lastEvent'] === 'ACTIVE'", "value": "green"},
        {"test": "datum['lastEvent'] === 'STOPPED'", "value": "red"},
        {"test": "datum['lastEvent'] === 'READY'", "value": "blue"},
        {"test": "datum['lastEvent'] === 'UNAVAILABLE'", "value": "black"},
        {"test": "datum['lastEvent'] === 'PROGRAM_STOPPED'", "value": "pink"},
        {"test": "datum['lastEvent'] === 'FEED_HOLD'", "value": "purple"},
        {"test": "datum['lastEvent'] === 'INTERRUPTED'", "value": "yellow"}
      ],
      "value": "Pink"
    }
  }
}

我和一位同事找出了导致问题的原因。当过滤器的结果到达 Vega 时,它被格式化为标记为“hits”的一大行。我们在下面添加了一个格式部分,使命中成为 属性,并且它得到了正确的评估。

"data": {
  url": {
    "%context%": true,
    "%timefield%": "@timestamp",
    "index": "mtconnect*"
  }, 
  "format": {"property": "hits.hits"}
}

方块现在可以根据实际数据而不是测试数据来改变颜色。