使用 ClickHouse 和 Luzmo 构建面向用户的仪表盘

现代企业不再依靠直觉做出决策。在每个我们使用的软件或应用程序中，甚至包括像 FitBit、Strava 或银行应用程序这样的消费级应用程序，我们都期望某种仪表盘或图表来帮助我们指导日常决策。

然而，作为软件开发人员，构建这些面向用户的仪表盘可能是一个令人沮丧且耗时的过程。这主要是因为两个原因

1. 从头开始开发数据可视化和高级分析功能需要大量的時間、专业知识和开发资源。
2. 许多 SaaS 应用程序依赖于关系型数据库，而关系型数据库并非面向用户分析的最佳数据基础设施。因此，仪表盘加载速度非常慢，影响了用户体验。
3. 在本文中，您将了解如何克服这两个障碍，使用 ClickHouse 作为您的分析数据库，并使用 Luzmo 进行嵌入式数据可视化。在快速教程中，我们将向您展示如何在几分钟内构建以下 面向用户的仪表盘，您可以将其嵌入到自己的应用程序中！

大多数 SaaS 公司已经使用操作数据库来运行和存储其 SaaS 平台的事务。因此，很容易想到：“如果所有数据都存储在一个数据库中，为什么还需要另一个数据库？”

不幸的是，将关系模型用于分析很快就会出现问题。每个事务都存储在一行中，因此即使您只需要从一两列中获取一小部分信息，您的数据库也需要扫描整个行才能检索它。查询速度很慢，因为它们需要处理大量数据。除此之外，您还有可能给您的操作系统带来过大的负荷，导致整个平台出现停机。

ClickHouse 这样的列式数据库按列存储数据，这意味着它们只需要扫描正确的列来执行您的查询。这大幅减少了处理的数据量，从而使查询执行速度更快，报告和仪表盘的加载时间也更短。当您处理数百万个数据点时，用户通常会部署维数据建模方法来充分利用这些功能并处理复杂的报告请求。

在本教程中，我们将为一个物业管理应用程序构建一个面向客户的仪表盘，显示英国住宅的历史价格。房地产投资者和物业经理可以使用这些见解以低于市场价格的价格购买新房产，为可供出售的房产定价，并最大限度地提高收入。

为了创建一个用户友好且快速加载的仪表盘，该仪表盘可以无缝集成到您现有的 Web 应用程序中，我们将使用两种技术

• ClickHouse 是我们的分析数据库，用于存储和查询数据
• Luzmo 是我们的嵌入式分析平台，用于构建交互式可视化并将其直接嵌入到我们的 SaaS 应用程序中

作为我们的数据源，我们使用的是英国政府公开数据集，该数据集可通过ClickHouse Playground 获取，并且可以通过 这里 查询。

要开始构建面向用户的仪表盘，我们首先需要将数据从 ClickHouse 拉到 Luzmo。您可以通过简单地输入您的数据库凭据来 将任何 ClickHouse 数据库连接到 Luzmo。

在 Luzmo 中，转到“连接”，然后单击“+ 新连接”。从许多不同的数据库选项中选择 ClickHouse，然后添加您的主机（数据库名称）、密钥（用户名）和令牌（密码）。

现在您已经成功将 ClickHouse 数据库连接到 Luzmo，导航到“数据集”。当选择 ClickHouse 作为您的源时，您现在可以看到数据库中所有可用的数据集。批量选择要用于仪表盘的所有数据集以导入它们。

我们将从游乐场中选择英国政府数据集。

就是这样！有了我们的新数据集，我们现在可以创建我们的第一个仪表盘了。

虽然我们强烈建议您首先在 ClickHouse 中对数据进行建模，但 Luzmo 提供了一些数据编辑功能，以备不时之需。

在本例中，我们使用的是一个示例数据集，我们希望添加一些最终的润色，使我们的仪表盘完美无缺。

显示正确的货币

房价以数字形式导入，我们希望将其 更改为货币，以便我们的仪表盘自动以英镑显示所有价格。

使用公式操作数据

我们的一列数据表示房产是新建房产还是现有住宅建筑，以布尔值形式表示：0 或 1。为了确保我们可以将此列用作仪表盘中的过滤器，我们要将其更改为层次结构。

在 Luzmo 中，您可以通过创建这样的派生列轻松地操作它

然后我们可以将值 0 和 1 更改为更有意义的内容，例如“新”和“旧”。

现在，有趣的部分开始了：将我们的原始数据变成交互式且易于理解的数据可视化！

这一部分不需要任何编码，因此如果您愿意，您可以将其交给您的客户成功经理或支持代表，他们最了解客户的报告要求。

在 Luzmo 中单击“+ 新仪表盘”，您将进入他们的拖放仪表盘界面。如果您已经知道要可视化的指标，只需将任何图表拖放到仪表盘画布上，然后将要使用的数据列放到图表上即可。

如果您处理的是包含大量列的大型数据集，您可能首先需要更深入地探索一下您的数据集，以了解哪些指标最适合可视化。在“建议”部分，您将获得一些基于您的数据集的推荐图表供您选择。

我们对随时间推移的价格趋势感兴趣，所以让我们将它添加到我们的仪表盘中！

如果您的平台被数千名用户使用，每个人都会关注不同的数据点。为了确保他们能够在您的仪表盘中玩转数据并找到他们需要的信息，我们还要添加一些交互性。

过滤器是显而易见的选择。在我们的示例仪表盘中，我们添加了

• 一个滑块：用于筛选特定时期的房价
• 图表之间的交互性：例如，如果您想只显示独立住宅的价格数据，您可以过滤“独立住宅”上的圆环图，整个仪表盘将相应地显示数据

除了过滤之外，还有很多其他方式可以让你用户与你的数据互动。例如，在下方的图表中，你可以使用钻取功能来更详细地探索特定位置的价格。点击“伦敦市”，你就可以查看该区域内最昂贵的区域、城镇甚至街道。

如果你想提供大量信息，你可能会忍不住不断添加包含更多数据的图表。然而，一个包含 30 多个图表且需要无限滚动才能浏览完的仪表板会让你的用户感到不知所措。为了避免这种情况，在你的图表上使用“选择器”是一个好主意。

在下面的示例中，你可以轻松地在房产的平均价格、中位数价格或最高价格之间切换，而无需创建三个单独的图表。而且，得益于 ClickHouse 中优化的数据模型，这些信息可以被超快速地检索和计算出来！

你的 演示仪表板 现在可以嵌入。如果你正在使用你自己的数据集来学习本教程，那么你可以尽情探索！探索所有不同的可视化类型，或者让 AI 图表生成器 为你完成这些工作。

最后一步，也许是最重要的一步，是将仪表板嵌入你的用户期望看到的位置：直接嵌入到你的网页或 SaaS 应用中。为什么要将你的客户推送到一个单独的 BI 工具中，让他们远离你的应用，如果你可以通过添加有价值的见解来增加产品使用率呢？

在嵌入仪表板之前，你需要决定一些事情

• 位置：你想在应用的哪个位置显示你的仪表板？
• 访问控制：哪些客户被允许查看哪些数据？
• 自定义：你需要以不同的语言显示仪表板吗？在不同的设备上？以不同的品牌颜色？

一旦你对这些因素中的每一个做出了决定，实施起来就相当简单了。

对于我们的用例，我们将逐步介绍如何在你的网页应用的分析选项卡中嵌入仪表板，并为每个英国郡设置不同的访问权限。例如，伦敦的房产经理只能访问有关伦敦的数据，而不是曼彻斯特的数据。

为了定义对我们仪表板的访问权限，我们首先需要创建一个 Luzmo 集合，其中包含我们项目中使用到的所有仪表板和数据集。你可以在左侧导航栏的“我的集合”下添加一个新的集合，并将任何数据集和仪表板直接拖放到你的概览页面中。

我们将添加一个仪表板和一个数据集，但你可以添加任意数量的仪表板和数据集。现在我们已经定义了项目中将使用哪些仪表板和数据集，我们需要为所有将访问你应用中这些仪表板的人设置正确的访问权限。

在本例中，我们只使用一个数据集，但我们希望我们的用户只能访问特定数据集的子集。具体来说，所有与他们在英国的特定郡相关的数据。为此，我们需要先在我们的数据集中创建一个参数过滤器，以便我们在渲染仪表板时传递它。

从集合中选择你的数据集，然后点击“嵌入过滤器”。在过滤器中，选择“郡”，然后选择你想要包含数据的郡。创建一个名为“郡”的参数，以便你稍后在嵌入仪表板的代码中使用它。

p.s.：你不需要将所有数据都放在一个数据集中才能设置特定的访问权限。如果你对每个客户使用不同的数据集，或者使用多租户 API，以下是如何设置多租户，但请注意，过程略有不同。

嵌入令牌是将仪表板渲染到你的 SaaS 应用中的安全方式。它确保用户只能看到你想要他们看到的数据，正如我们在上一步中定义的那样。

要生成嵌入令牌，你需要创建一个 API 密钥和令牌，以便你的应用安全地访问 Luzmo。你可以在个人资料设置 > API 令牌中进行操作。复制你的 API 密钥和令牌并保存它，因为你以后将无法访问它们。出于安全原因，授权令牌始终是在服务器端生成的，因此请勿在客户端使用你的 API 密钥和令牌！

现在，你的服务器端代码可以发出 API 请求来检索授权令牌。在这里，你需要填写 API 密钥和令牌、用户的详细信息以及你想要授予该用户访问权限的资源。

const Luzmo = require('@luzmo/nodejs-sdk');
var client = new Luzmo({
    api_key: '< Your API key >',
    api_token: '< Your API token >'
  });

let promise = client.create('authorization', {
  type: 'embed',
  access: {
  collections: [
   {
   id: '<collection ID>',
   inheritRights: 'use'
            }
      ]
  },
  username: '< unique identifier for your user >',
  suborganization: '< company name >',
  name: '< user name >',
  email : '< user email >',
  parameter_overrides: {
    County: ['< counties visible to this user >']
  }
});

promise.then((result) => {
  // result.id contains the embed authorization key,
  // result.token contains the embed authorization token.
});

让我们看一下不同用户的情况。假设来自伦敦的房产经理 Irvine Seller 正在尝试访问仪表板。使用以下参数覆盖，他将只能访问有关伦敦的数据。

  username: 'irvineseller',
  suborganization: 'Big Ben Properties Co.',
  name: 'Irvine Seller',
  email : '[email protected]',
  parameter_overrides: {
    County: ['GREATER LONDON']
  }

对于曼彻斯特的购房者来说也是如此；授权令牌将限制他们对曼彻斯特房产的访问权限。

  username: 'davidbrickham',
  suborganization: 'Soccer Estates Co.',
  name: 'David Brickham',
  email : '[email protected]',
  parameter_overrides: {
    County: ['GREATER MANCHESTER']
  }

当你传递这个请求时，你将得到一个包含 ID 和令牌的 JSON 对象作为返回值。你需要在实际嵌入步骤中使用它。

{
  "type": "embed",
  "id": "<the embed authorization key>",
  "token": "<the embed authorization token>",
  "user_id": "<a uuid used on Luzmo's end to identify the embed user>"
  // ...
}

现在我们已经设置了一种安全地获取和显示你仪表板中数据的方式，我们可以继续将它们嵌入到我们的应用中。

一旦你知道了你想在应用中的哪个位置显示你的仪表板，你就可以像复制粘贴 5-10 行代码一样简单地完成它。

<luzmo-dashboard
  dashboardId="<ID of dashboard you want to embed>"
  authKey="<embed key (id property) returned by step 1>"
  authToken="<embed token (token property) returned by step 1>"
  appServer="https://app.luzmo.com/"
>
</luzmo-dashboard>

<script defer src="https://cdn.luzmo.com/js/luzmo-embed/5.1.5/luzmo-embed.min.js" charset="utf-8"></script>

要找到你的唯一代码片段，请转到要嵌入的仪表板，然后点击“嵌入”。现在选择你的应用使用的前端框架，并复制代码片段。仪表板 ID 已经填写好了，你只需要添加在上一步中生成的 authKey 和 authToken 即可。

就是这样！现在，你将在你的应用中添加一个交互式的用户界面仪表板，它只显示你的用户被允许查看的数据。

要查看它是什么样子，请尝试以下嵌入的仪表板，并在两个用户之间切换

• Irvine Seller，伦敦的房产经理
• David Brickham，曼彻斯特的房地产所有者

在本例中，我们保持了它的相对简单，但你可以添加更多属性来使你的仪表板体验更加个性化

• 显示仪表板的语言
• 用户的时区
• 仪表板应该加载的屏幕模式（桌面、移动、固定宽度）
• 仪表板加载程序的样式
• 根据用户或环境连接到不同的数据库

查看开发人员文档，了解你还可以自定义哪些内容！

如果你想开始将用户界面仪表板嵌入到自己的 SaaS 或网页应用中，这里有一些有用的资源。

工具

• 免费 Luzmo 试用版（10 天）
• 免费 ClickHouse 试用版（30 天）

文档

• 连接数据
  • ClickHouse Playground 文档
  • 将 ClickHouse 数据集连接到 Luzmo
• 创建仪表板
  • Luzmo 入门课程
  • 如何设置钻取功能
  • 更改图表上的度量和维度
• 嵌入仪表板
  • 仪表板嵌入指南
  • 如何处理多租户数据
  • 嵌入 API 组件