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

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

Недавно мы рассказали о  том, как создать  аналитическую информационную панель с помощью Cube.js и React, но как насчет Angular? Начиная с версии 0.8.4, клиент Cube.js поставляется с модулем Angular для легкой интеграции. Сегодня я покажу вам, как создать аналитическую информационную панель с помощью  диаграмм Angular ,  Cube.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

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

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

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

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

npm install -g angular/cli

ng new ng-demo-dashboard -s scss

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

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

<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>

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

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

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>