xObserve

  1. 入门教程
  2. 用户行为统计

一般来说，首页仪表盘用于展示一些大盘数据，如果我们想要专项的展示，比如用户行为统计，就需要创建一个新的仪表盘。

创建仪表盘

  1. 点击左侧导航栏下半区域的 + 按钮
  2. 在新建仪表盘中，将标题设置为 User stats dashboard
  3. 点击 提交 按钮

完成后，页面将自动跳转到新创建的仪表盘，此时仪表盘是空的，我们需要添加一些图表。

新建 Graph 图表

点击仪表盘页面右上角的 + 图标， 你将看到一个名为 New panel 1 的图表被创建了，它看起来和首页的欢迎面板一模一样，只是没有了边框。

欢迎面板对用户统计来说不能说毫无用处，只能说 totally useless。现在来修改下：

  1. 点击图表标题区域，选择 编辑 打开编辑面板
  2. 将图表标题修改为 Request duration stats, 表明它是一个用户请求耗时统计
  3. 在 图表 标签中点击 图表类型 ， 选择 Graph 图表类型
select-visualization

此时一个好看的图表在右边出现：

request-duration-panel

图表中有三条曲线，分别代表来自 亚洲，欧洲 和 北美 的用户，他们的请求耗时随时间的变化。

TestData 数据源

你可能会好奇，这些数据是从哪里来的，我们并没有为图表设置数据源，它怎么就显示出来了呢？

事实上，xObserve 内置了一个名为 TestData 的数据源，一般来说，它用于测试目的。但对于新用户，它也非常有用：可以帮助我们快速熟悉 xObserve 的使用。

当你选择一个图表类型时，xObserve 会自动从 TestData 数据源中查询数据，这样你就可以立即看到图表的渲染效果。

在图表编辑面板的左下区域，可以看到数据源的相关设置。

为值添加单位

我们可以看到图表中的值都是一个个的数字，但是我们并不知道这些数字代表的是什么，比如 0.6 是什么意思？0.6 秒？0.6 分钟？还是 0.6 小时？

  1. 在 图表 标签中找到 Vlue 设置区
  2. 在 单位 下来列表中选择 Time
  3. 默认的基本单位为 ms, 但是我们的图表数据单位是second, 因此我们需要修改下基本单位：将基本单位设置为 s 。( x 1 或者 / 1 就是基本单位)
  4. 注意：由于我们既想要设置时间单位，又想要自定义，那么最好的方式就是先选择 Time 单位，然后再修改为 Custom
panel-units

总之，尝试将单位修改为如上图所示，然后点击 提交 按钮，你将看到图表的单位已经变成了 s。

在修改完图表后，别忘了保存仪表盘，你可以在图表编辑面板中按 Ctrl+S 快捷键保存。

添加阈值 threshold

现在，我们想要在图表中添加一个阈值，这样就可以很容易的发现用户是否在经历长时间的请求，这对他们的使用体验有很大的影响。

  1. 定位到 图表 标签中的 Threshold 设置区
  2. 点击 +添加 Threshold 按钮
  3. 依照下图设置
panel-threshold

点击 提交 按钮，你将看到图表中出现了一条红色的线，图表被分成了两部分，上部分为红色，表示耗时大于 1s 的请求，下部分为绿色，表示耗时小于 1s 的请求。

更多阈值的设置，请参考 Threshold

新建 Geomap 图表

老板一般想要知道用户的地理信息，因此我们需要添加一个 Geomap 图表来展示用户的地理位置和请求次数。

回到仪表盘页面，继续创建一个新的图表

  1. 打开图表编辑面板，选择 Geomap 图表类型
  2. 将图表标题设置为空，不然会有点丑 :(

此时，你应该看到如下的图表：

geomap-editor

如果你看不到任何地图，只能看到一堆绿色的点，请检查你的网络链接是否可用, 因为基础的地图层信息是从网络上加载的，而这些地图层之上的绿点才是在本地渲染

定位到某个国家

我们可以看到默认的世界地图太大了，让我们定位到一个国家，比如说你来自中国，那肯定想看中国的地图。

  1. 在地图上找到 China，可以通过鼠标的滚动来实现视图的放大和缩小
  2. 点击 wuhan 所在的绿点, 然后将地图放大/缩小到你喜欢的尺寸
  3. 在 图表 标签中找到 基本内容 设置，然后点击 Use current view 按钮

此时，你将看到地图已经定位到了 wuhan 所在的位置，而且地图的尺寸也和你刚才设置的一样。

Use current view 按钮的作用是将当前视图设置为地图的默认视图，这样每次打开仪表盘时，都会显示这个视图，如果你不想要这个效果，可以不用点击此按钮。

点击交互事件

如果你点击地图上的某个点，地图会自动缩放到该点，你可能以为这是地图自带的功能，但是并不是，这是我们自定义的点击交互事件。

在 xObserve 中，你可以为各种类型的图表添加各种各样的交互事件，比如点击、双击、鼠标移动等等，这些事件可以帮助你更好的实现可交互需求。

添加阈值 threshold

假设我们想要在地图上将请求次数大于 1000 的国家标记为黄色，大于 10000 的标记为红色，这样就可以很容易的发现哪些国家的用户使用 xObserve 最多。

该如何做呢？答案是使用 Threshold, 大家可以当作练习来完成，答案可以参考 这里。

新建 Table 图表

有时候，我们希望以表格的形式来展示数据，这样可以很容易的找出前 10 个用户，或者前 10 个国家等等。

在本节中，我们将创建一个简单的表格来展示请求耗时随时间的变化，是的，这和前面的 Graph 图表是一样的数据，只是以不同的形式展示。

  1. 新建一个图表，打开图表编辑面板，选择 Table 图表类型
  2. 和之前一样，将标题设置为空
  3. 隐藏表头： 禁用 表格设置 > 显示表头 选项
  4. 添加时间单位，类似之前的 Graph 图表，但是等等。。在哪里设置，就没有这个设置项！

是的，显然在 图表 标签下，你是找不到 单位 设置的，那么该如何设置呢？

其实 Table 的通用设置中没有单位的原因很简单：Table 的每一列都可以有不同的单位，比如第一列是 Time，第二列是 Value，它们显然不能有相同的单位，因此你不应该为它们设置一个通用的单位。

那么，我们该如何为 Value 列设置单位呢？在 xObserve 中，可以使用 Override 功能来实现。

覆盖 ( Override ) 列单位

在 xObserve 中，几乎所有的图表类型都提供了 Override 功能，它们用于覆盖图表的通用认设置，比如我们想要为某个图表曲线或者某一列设置单位，就可以使用 Override 功能。

  1. 选择 覆盖 子标签，紧挨在 样式 标签旁
  2. 点击 新建覆盖 按钮
  3. 由于我们想为 Value 列添加单位，因此在 目标名称 中选择 Value

此时，一个新的 Override 就创建好了，它的目标是 Table 中的 Value 列，接下来，我们需要为它添加规则。

  1. 点击 新建覆盖规则 按钮
  2. 选择 Column.unit 类型
  3. 设置单位，和之前的 Graph 一样

别忘了一点要点击 提交 按钮后，单位设置才能生效 ! !

units-override

颜色标记

在之前的内容中，我们已经知道如何使用 阈值 thresholds 来为 Graph 、Geomap 图表增加颜色标记，但是在 Table 中，有点不一样。

在 Table 中，阈值和单位一样，都需要使用 Override 来添加，但是，我们还有另外一种方式来实现相同的效果，稍后再讲。

使用 Override 来添加阈值

由于我们已经知道如何添加 Override，因此这里就不再赘述，只需要为 Value 列添加一个 Override，然后为它添加一个阈值规则即可。

threshold-override

值映射 Value mapping

如果你想要将大于 0.6 小于 1 的值都标记为某个颜色，该如何做呢？ 当然，设置阈值是可以实现的，但是更复杂的需求呢？例如： 将 cn 字符串值标记为 🇨🇳cn ？

此时阈值就不太好用了，因此，我们需要使用 Value mapping，它可以将一个值映射为另一个值，这对于 Table 图表来说非常有用。

接下来，我们来使用 Value mapping 将 [0.6, 1] 区间的值标记为红色, 你可以选择在通用设置中使用，也可以通过 覆盖 子标签来使用，这里我们选择前者。

想要了解更多关于 value mapping 的内容, 可以阅读 这篇文档.

现在，找到 图表 标签中的 Value mapping 设置区，点击 编辑值映射 按钮，然后设置如下：

tutorial-value-mapping

同样的规则，哪个设置生效?

有一个问题：假如我们在 图表 标签下的通用设置中设置了值映射，然后又在 覆盖 子标签下设置了值映射，那么哪个设置会生效呢？

答案是：小范围覆盖大范围，也就是说，覆盖 子标签下的设置会覆盖 图表 标签下的设置。

提升时间列可读性

在 Table 中，时间列的值是一个时间戳，比如 1692778335，这显然不是一个可读的时间，我们需要将它转换为人类可读的时间，比如 2023-08-21 12:00:00。

又到了使用 覆盖 Override 武器之时， 但是这次覆盖的目标不是 Value 列，而是 Time 列。

time-override

在 覆盖规则 中，我们使用了一个函数来实现时间转换，这个函数的名字叫 Column.textTransform，它的作用是将 Time 列的值传递给我们自定义的函数，然后将函数的返回值显示在 Time 列中。

一起来看看这个函数的定义，点击 编辑函数 按钮，你将看到如下代码：

function transform(text, lodash, moment)  {
    const t = moment(text * 1000).format("YY-MM-DD HH:mm::ss a")
    // if you want to use t, just modify the return statement below: change text -> t
    return text
}

可以看到，上面的代码已经实现了时间转换，但是它并没有生效，因为我们返回的是 text，而不是 t，因此我们需要修改下返回值。

function transform(text, lodash, moment)  {
    const t = moment(text * 1000).format("YY-MM-DD HH:mm::ss a")
    // if you want to use t, just modify the return statement below: change text -> t
    return t
}

将函数代码修改为如上，然后点击 提交 按钮，你将看到 Time 列的值已经变成了可读的时间。

更多关于转换函数的更多内容，请参考 数据转换

调整图表大小和位置

当前仪表盘中已经有了三个图表，但是它们都很小，特别是 Geomap 图表，让我们来调整下它们的大小和位置。

首先，你需要回到仪表盘视图（从图表编辑面板中）。

当你将鼠标悬停在 Graph 图表上时，你应该会看到一个 resize 图标，它位于图表右下角，类似的，当你将鼠标悬停在图表标题区域时，鼠标会变成 move 图标，前者用于调整图表大小，后者用于移动图表。

接下来的操作很简单：点击图标并拖动即可。 现在，调整图表的大小和位置，使其看起来像下图一样：

panels-after-resizing

还不错，对吗？下面，一起来使用真实的数据来替换掉 TestData 数据源。真实才是王道！