Статьи

Учебник по угловой приборной панели с Cube.js

Практически на любом сайте есть встроенная аналитика. Вы можете найти графики использования для каждого общедоступного репозитория GitHub или любой социальной сети сегодня.  Cube.js  призван помочь разработчикам создавать такие аналитические приложения. Он решает множество различных проблем, которые необходимо решить каждому готовому к работе аналитическому приложению: создание аналитического SQL, кэширование результатов запросов и их оркестровка, предварительная агрегация данных, безопасность и API для извлечения результатов запросов.

Недавно мы рассказали о  том, как создать  аналитическую информационную панель с помощью Cube.js и React, но как насчет Angular? Начиная с версии 0.8.4, клиент Cube.js поставляется с модулем Angular для легкой интеграции. Сегодня я покажу вам, как создать аналитическую информационную панель с помощью  диаграмм AngularCube.js и  ng2 .

Вы можете найти  окончательную панель инструментов здесь  и CodeSandbox с исходным кодом ниже.

Настройка бэкэнда Cube.js

Мы рассмотрели эту тему в других руководствах, поэтому, если у вас уже настроен и запущен бэкэнд Cube.js, вы можете пропустить этот раздел.

Вы можете установить CLI Cube.js, который используется для различных рабочих процессов Cube.js, через NPM или Yarn.

npm install -g cubejs-cli

Давайте подготовим бэкэнд Cube.js для обслуживания данных для создаваемой нами панели. Cube.js поддерживает множество баз данных и опций развертывания. Вы можете узнать больше об этом  в документации . Для этого урока мы будем использовать базу данных Postgres и развернем Cube.js в Heroku. Давайте создадим новое приложение Cube.js, используя только что установленный CLI.

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

Следующим шагом является определение модели данных. В производственном приложении вы, скорее всего, будете иметь несколько файлов схемы, но для нашего демонстрационного приложения у нас будет только один куб. Если вы не знакомы со схемой данных Cube.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 в подключенной базе данных. Мы можем проверить это, отправив пример запроса в конечную точку REST API Cube.js.

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

Вы можете узнать больше о формате Cube.js Query  здесь .

Наконец, давайте развернем наш бэкэнд в Heroku:

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

Вы можете найти полное руководство по развертыванию в  документации .

Щиток приборов

Теперь, когда у нас запущен функциональный бэкэнд, мы можем перейти к следующей части — построению панели инструментов. Cube.js имеет угловую привязку, которая не предоставляет никакой визуализации, но предназначена для работы с любой библиотекой диаграмм. Таким образом, он обеспечивает большую гибкость для разработчиков для создания уникальных и пользовательских пользовательских интерфейсов

Сначала установите ng-cli, если у вас его еще нет:

npm install -g angular/cli

Давайте создадим новое приложение Angular, используя шаблоны SCSS:

ng new ng-demo-dashboard -s scss

Для рисования диаграмм мы будем использовать библиотеку ng2-charts, которая является оболочкой Angular для Chart.js. Cube.js Angular Client будет использоваться для загрузки данных из серверной части, и, наконец,  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.forRoot(cubejsOptions)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Теперь мы закончили с настройкой нашего приложения. Давайте создадим компонент диаграммы:

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-chart для настройки:

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

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

Чтобы собрать данные, мы добавим входные данные для запроса и используем API наблюдения Cube.js  Angular :

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);
}

Это позволит нам получать и отображать новые данные при каждом изменении запроса. Теперь давайте создадим простую панель мониторинга в нашем app.component:

<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  здесь .