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

现代企业做决策已不再凭直觉。在我们使用的每一个软件或应用中——即使是像 FitBit、Strava 或银行应用这样的消费类应用——我们都期望有某种仪表盘或图表来帮助我们指导日常决策。

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

大多数 SaaS 公司已经在使用运营数据库来运行和存储平台的事务。因此，可能会有人想：“既然我们的所有数据都存储在一个数据库中，为什么还需要另一个数据库呢？”

然而，使用关系模型进行分析很快会遇到问题。每个事务都存储在单行中，即使您只需要从一两列中获取少量信息，数据库也需要扫描整行数据来检索。这使得查询速度非常慢，因为需要处理大量数据。此外，这还可能给运营系统带来过大的负载，导致整个平台的停机。

像 ClickHouse 这样的列式存储数据库按列存储数据，这意味着它们只需要扫描相关的列来执行查询。这大大减少了处理的数据量，从而提高了查询性能和报告及仪表盘的加载速度。当处理数百万个数据点时，用户通常会采用维度数据建模方法，以充分利用这些功能并处理复杂的报告请求。

在本教程中，我们将为物业管理应用构建一个面向客户的仪表盘，展示英国房屋的历史价格。房地产投资者和物业经理可以利用这些洞察，以低于市场价购买新物业，为现有物业定价，并最大化他们的收入。

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

作为数据源，我们使用了一个英国政府开放数据集，该数据集可以通过 ClickHouse Playground 获得并进行查询。

要开始构建用户界面的仪表盘，我们首先需要将数据从 ClickHouse 导入 Luzmo。只需输入数据库凭证，您就可以将任何 ClickHouse 数据库连接到 Luzmo。

在 Luzmo 中，进入“Connections”并点击“+ New Connection”。从众多数据库选项中选择 ClickHouse，并添加 Host（数据库名称）、Key（用户名）和 Token（密码）。

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

我们将从 playground 中选择英国政府数据集。

完成！使用新的数据集，我们现在可以创建第一个仪表盘了。

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

在我们的例子中，我们使用了一个示例数据集，并想添加一些润色，使我们的仪表盘更完美。

显示正确的货币

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

使用公式操作数据

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

在 Luzmo 中，您可以通过创建派生列轻松操作，如下所示：

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

现在，最有趣的部分开始了：将原始数据转换为交互式、易理解的数据可视化！

这一部分不需要任何编码，所以您可以交给客户成功经理或支持代表处理，他们最了解客户的报告需求。

在 Luzmo 中点击“+ New Dashboard”，进入拖放式仪表盘界面。如果您已经确定要可视化的指标，只需将图表拖到仪表盘画布上，并将要使用的数据列拖放到图表上。

如果您正在处理大型数据集，可以先更多地探索数据集，以了解哪些指标最有趣。在“建议”部分，您会根据数据集看到一些推荐的图表供选择。

我们对时间跨度内的价格趋势感兴趣，所以将其添加到仪表盘中！

如果您的平台有成千上万的用户，每个人寻找的数据点都不同。为了确保他们可以在仪表盘中操作数据并找到所需的见解，我们需要添加一些交互性。

过滤器是最直接的方法。在我们的示例仪表盘上，我们添加了：

除了过滤，还有许多其他方式可以让用户与数据互动。例如，在下图中，您可以使用下钻功能更详细地查看特定位置的价格。下钻到“伦敦市”，即可查看该区域内最昂贵的区、城镇或街道。

如果您想提供大量信息，可能会不断添加图表。然而，拥有 30 多个图表和无尽滚动的仪表盘会让用户不知所措。为了避免这种情况，可以在图表顶部使用“选择器”。

在下面的示例中，您可以轻松切换属性的平均价格、中位数价格或最高价格，而无需创建三个单独的图表。由于我们在 ClickHouse 中优化了数据模型，这些信息可以非常快速地检索和计算！

您的演示仪表盘现在已经准备好嵌入。如果您正在使用自己的数据集进行本教程，您可以尽情探索所有不同的可视化类型，或者让 AI 图表生成器为您完成工作。

最后一步，也是最重要的一步，就是将仪表盘嵌入到用户预期的位置：直接在您的 Web 或 SaaS 应用中。为什么要让客户转到单独的 BI 工具，从而远离您的应用呢？如果通过添加有价值的见解可以增加产品使用量，为什么不这样做呢？

在嵌入仪表盘之前，您需要决定几件事：

一旦决定了这些因素，实施就相对简单了。

在我们的用例中，我们将演示如何在 Web 应用的分析标签中嵌入仪表盘，并为每个英国郡设定不同的访问权限。例如，伦敦的物业经理只能访问伦敦的数据，不能访问曼彻斯特的数据。

要定义仪表盘的访问权限，首先需要创建一个 Luzmo 集合，包含项目中使用的所有仪表盘和数据集。您可以在左侧导航的“我的集合”下添加新集合，并将数据集和仪表盘拖到概览页面中。

我们将添加一个仪表盘和一个数据集，您也可以根据需要添加更多。现在，我们已经定义了项目中将使用的仪表盘和数据集，需要为访问这些仪表盘的用户设置正确的访问权限。

在我们的例子中，我们只使用了一个数据集，但我们希望用户只能访问与其所在英国郡相关的特定数据。为此，我们需要在数据集上创建一个参数过滤器，在渲染仪表盘时传递。

在集合中，选择您的数据集并点击“嵌入过滤器”。在过滤器下，选择“郡”，并选择要包含数据的郡。创建一个名为“郡”的参数，以便在代码中嵌入仪表盘时使用。

嵌入令牌是在您的 SaaS 应用中安全地渲染仪表盘的方法。它确保用户只能看到您希望他们看到的数据，如上一步所定义。

要生成嵌入令牌，您需要创建 API 密钥和令牌，以便应用程序能够安全地访问 Luzmo。可以通过“Profile Settings > API Tokens”完成此操作。复制并保存您的 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 : 'irvine.seller@bigbenproperties.com',
  parameter_overrides: {
    County: ['GREATER LONDON']
  }

同样，对于曼彻斯特的物业买家，授权令牌将限制他们只能访问曼彻斯特的数据：

  username: 'davidbrickham',
  suborganization: 'Soccer Estates Co.',
  name: 'David Brickham',
  email : 'david.brickham@soccerestates.com',
  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>

要找到您的专属代码片段，进入要嵌入的仪表盘并点击“Embed”。选择应用程序使用的前端框架，复制代码片段。仪表盘 ID 已填好；您只需添加在上一步生成的 authKey 和 authToken。

完成！现在，您的应用中已经添加了一个交互式的用户仪表盘，只显示用户被允许查看的数据。

要查看效果，请试用下方嵌入的仪表盘，并在两个用户之间切换：

在这个示例中，我们保持了相对简单，但您可以添加更多属性来定制仪表盘体验：

查看开发者文档了解更多自定义内容！

如果您想将用户仪表盘嵌入到自己的 SaaS 或 Web 应用中，以下资源将对您有所帮助。

工具：

文档：

提示：我们正在开通国内购买渠道，请大家积极填写认证考试意愿到场问卷，敬请期待

我们正为广州活动招募讲师，如果你有独特的技术见解、实践经验或 ClickHouse 使用故事，非常欢迎你加入我们，成为这次活动的讲师，与大家分享你的经验。