Posted by on | Featured

几乎任何网站都有一些嵌入式分析。您可以找到当今每个公共 GitHub 存储库或任何社交网络的使用图表。Cube.js旨在帮助开发人员构建此类分析应用程序。它解决了每个生产就绪分析应用程序需要解决的大量不同问题：分析 SQL 生成、查询结果缓存和执行业务流程、数据预聚合、安全性和用于查询结果提取的 API。

我们最近介绍了如何使用Cube.js 和 React 构建分析仪表板，但角呢？从版本 0.8.4 开始，Cube.js 客户端附带一个角模块，便于集成。今天，我将向您展示如何使用Angular、Cube.js和 ng2 图表构建分析仪表板。

您可以在此处找到最终仪表板和包含源代码的代码。

设置多维数据集.js 后端

我们在其他教程中介绍了此主题，因此，如果您已经设置了 Cube.js 后端并运行，则可以跳过此部分。

您可以通过 NPM 或 Yarn 安装 Cube.js CLI，它用于各种 Cube.js 工作流。

npm install -g cubejs-cli

让我们准备一个 Cube.js 后端，以便为我们正在构建的仪表板提供数据。Cube.js 支持许多数据库和部署选项。你可以在文档中了解有关它的更多资料。在本教程中，我们将使用 Postgres 数据库并将 Cube.js 部署到 Heroku。让我们使用我们刚刚安装的 CLI 创建一个新的 Cube.js 应用程序。

cubejs new ng-demo -d postgres
cd ng-demo

如果您还没有仪表板的数据库，您可以下载我们的演示电子商务数据集的 Postgres。

curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
createdb ecom
psql --dbname ecom -f ecom-dump.sql

下一步是定义数据模型。在生产应用程序中，您很可能有多个架构文件，但对于我们的演示应用，我们将只有一个多维数据集js数据架构，这里有一个深入教程。

cube(`Users`, {
  sql: `SELECT * FROM users`,

  measures: {
    count: {
      sql: `id`,
      type: `count`
    }
  },

  dimensions: {
    city: {
      sql: `city`,
      type: `string`
    },

    signedUp: {
      sql: `created_at`,
      type: `time`
    },

    companyName: {
      sql: `company_name`,
      type: `string`
    }
  }
});

Cube.js 使用数据架构在连接的数据库中生成和执行 SQL。我们可以通过向 Cube.js REST API 终结点发送示例请求来测试它。

curl \
 -H "Authorization: EXAMPLE-API-TOKEN" \
 -G \
 --data-urlencode 'query={"measures":["Users.count"]}' \
 http://localhost:4000/cubejs-api/v1/load

您可以在此处了解有关 Cube.js 查询格式的更多信息。

最后，让我们将后端部署到 Heroku：

git init
git add -A
git commit -am "Initial commit"
heroku create cubejs-ngx-demo
git push heroku master

您可以在文档中找到完整的部署指南。

仪表 板

现在，当我们运行功能后端时，我们可以移动到下一部分 — 构建仪表板。Cube.js 具有 Angular 绑定，它不提供任何可视化本身，但旨在与任何图表库一起工作。这样，它为开发人员提供了极大的灵活性来构建独特的自定义用户体验。

首先，安装 ng-cli，如果您还没有它：

npm install -g angular/cli

让我们使用 SCSS 模板创建新的角应用：

ng new ng-demo-dashboard -s scss

我们将使用 ng2 图表库（Chart.js 的角包装器）来绘制图表。Cube.js Angular 客户端将用于从后端加载数据，最后Bootstrap将为我们提供一些不错的样式。让我们添加这些依赖项：

npm install -s ng2-charts @cubejs-client/core @cubejs-client/ngx moment
# or
yarn add ng2-charts @cubejs-client/core @cubejs-client/ngx moment

接下来，将所需的模块添加到 app.module.ts 文件中：

const cubejsOptions = {
  token:
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e30.K9PiJkjegbhnw4Ca5pPlkTmZihoOm42w8bja9Qs2qJg",
  options: {
    apiUrl: "https://react-query-builder.herokuapp.com/cubejs-api/v1"
  }
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ChartsModule,
    CubejsClientModule

让我们创建一个图表组件：

ng generate component chart

为 ng2 图表添加一些样式和元素：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">{{ title }}</h5>
    <div class="card-text">
      <div *ngIf="ready === false" class="d-flex justify-content-center text-dark">
        <div class="spinner-border" role="status">
      <span class="sr-only">Loading...</span>
    </div>
      </div>
      <canvas *ngIf="ready && showChart" baseChart height="300" [datasets]="chartData" [labels]="chartLabels" [options]="chartOptions"
             [colors]="chartColors" [chartType]="chartType"></canvas>
      <h1 *ngIf="ready && !showChart" height="300">{{ chartData }}</h1>
    </div>
  </div>
</div>

让我们获取图表的数据。我们需要定义输入，我们将将其传递给 ngx 图表组件以允许自定义：

@Input() chartType;
@Input() query;
@Input() title;

public chartData;
public chartLabels;
public chartOptions: any = {
  responsive: true
};
public chartColors;

为了收集数据，我们将为查询添加一个输入，并使用 Cube.js角监视 API：

constructor(private cubejs: CubejsClient) {}

ngOnInit() {
  this.querySubject = new Subject();
  this.resultChanged = this.resultChanged.bind(this);
  this.cubejs
    .watch(this.querySubject)
    .subscribe(this.resultChanged, err => console.log("HTTP Error", err));

  this.querySubject.next(this.query);
}

这将使我们能够在每次查询更改时获取和显示新数据。现在，让我们在我们的应用.组件中创建一个简单的仪表板：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <app-chart chartType="singleValue" [query]="usersQuery" title="Total Users"></app-chart>
    </div>
    <div class="col-sm-4">
      <app-chart chartType="singleValue" [query]="ordersQuery" title="Total Orders"></app-chart>
    </div>
    <div class="col-sm-4">
      <app-chart chartType="singleValue" [query]="shippedOrdersQuery" title="Shipped Orders"></app-chart>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <app-chart chartType="line" [query]="lineChartQuery" title="New Users Over Time"></app-chart>
    </div>
    <div class="col-sm-6">
      <app-chart chartType="stackedBar" [query]="stackedBarChartQuery" title="Orders by Status Over time"></app-chart>
    </div>
  </div>
</div>

完成了！你可以找到此处的CodeSandbox演示。

Tags: ,
Comments are closed.