Как использовать FastCube .NET в SPA приложении Angular

19.04.2021

Одним из самых популярных фреймворков для создания одностраничных приложений является Angular. Он основан на шаблоне MVC, что упрощает разработку и тестирование такого приложения. Многим пользователям генератора отчетов FastReport необходимо отображать свои отчеты в веб-приложениях Angular и мы это уже рассмотрели в статье использование FR Core Web Report в Single Page Application Angular 7. Теперь появилась возможность отображать на веб-странице не только отчет, но и куб данных из FastCube .NET. Давайте рассмотрим как это сделать.

В самом начале у вас должны быть установлены: платформа Node.js и NET Core SDK 2.0, но лучше “посвежее”.

Вы можете создать приложение используя шаблон из sdk. Для этого в командной строке вводим команду:

dotnet new angular -o FCubeAngular

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

cd FCubeAngular

и устанавливаем javascript пакеты с помощью команды:

npm install

Перед началом работы с нашим веб-приложением, предварительно нужно подготовить Nuget пакеты с библиотеками FastCube. Откройте решение FastCube.Core.sln и выполните построение. В результате вы получите два пакета - FastCube.Web.2020.2.1.nupkg и FastCube.Core.2020.2.1.nupkg. Их нужно поместить в какую-либо локальную папку, которую будем использовать в дальнейшем в качестве локального источника пакетов Nuget.

Теперь можно запустить созданный нами ранее проект. И сразу же приступим к установке пакетов FastCube. Открываем менеджер пакетов Nuget. В правом верхнем углу окна вы увидите значок шестеренки - он открывает настройки источников пакетов. Нажимаем на него и добавляем новый источник пакетов - папку с нашими пакетами FastCube:

Настройка источников пакетов

Выбираем добавленный источник пакетов в выпадающем списке и устанавливаем пакеты:

Установка пакетов

Подключаем FastCube в файле Startup.cs в методе Configure() добавим код:

app.UseFastCube();

Наше приложение уже содержит контроллер WeatherForecastController. Давайте добавим в него свой веб-метод:

 [HttpGet("[action]")]
 public IActionResult ShowCube()
 {
 Cube cube = new Cube();
 Slice slice = new Slice()
 {
 Cube = cube
 };
 FilterManager filterManager = new FilterManager()
 {
 Cube = cube
 };
 WebGrid grid;
 grid = new WebSliceGrid()
 {
 Slice = slice
 };
 
 ViewBag.WebGrid = grid;
 
 cube.SourceType = SourceType.File;
 cube.Load(Path.Combine("C:\\Users\\FR\\Downloads\\fastcube-net-master\\Demos\\Data\\", "Cubes", "calculated_measures.mdc"));
 return View();
 }

Если у вас возникли проблемы с возвращаемым представлением, то обратите внимание на класс, от которого наследуется контроллер. Должен быть Controller, а не BaseController.

Теперь рассмотрим добавленный нами веб-метод. Объекты Cube и Slice связаны, так как, по сути, срез является частью куба. Для вывода интерактивной перекрестной таблицы используется объект WebGrid. Он может выводить, как срез WebCubeGrid, так и куб WebSliceGrid. Загружаем куб, который ранее создали в десктоп версии FastCube .NET.

Для его отображения нам потребуется представление. Это можно сделать с помощью правого клика по сигнатуре метода ShowCube. Представление будет содержать единственную строку кода:

 @await ViewBag.WebGrid.Render()

Перейдем к SPA приложению, которое размещается в папке ClientApp. Нам нужно добавить свой компонент в папку app. Он будет отображать iframe с представлением, которое мы создали выше. Добавляем в папку app подпапку cube. В нее добавим два файла cube.component.html и cube.component.ts. Первый - это отображение, второй - контроллер.

Файл cube.component.html:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
</head>
<body>
 <input type="button" (click)="Clicked()" value="Show Report" />
 <div *ngIf="show">
 <iframe id="report" height="1000" width="1000" [src]="url | safeUrl"></iframe>
 </div>
</body>
</html>

Обратите внимание на функцию safeUrl, которая преобразует url к безопасному виду. Мы добавим её чуть позже.

Кнопка активирует функцию Click, которая установит флаг show для отображения фрейма, а также задаст url к методу ShowCube в контроллере на бекенде.

Собственно вот и реализация функции Click в файле cube.component.ts:

import { Component } from '@angular/core';
 
@Component({
 selector: 'app-cube-component',
 templateUrl: './cube.component.html'
})
export class CubeComponent {
 public show: boolean = false;
 public url: string;
 
 Clicked() {
 this.show = true;
 this.url = "/WeatherForecast/ShowCube";
 }
}

А теперь добавим функцию преобразования ссылки к нормализованному виду - файл safeUrl.pipe.ts добавим в ту же папку:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
 
@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
 constructor(private sanitizer: DomSanitizer) { }
 transform(url) {
 return this.sanitizer.bypassSecurityTrustResourceUrl(url);
 }
}

Добавленный компонент и функцию нужно зарегистрировать в файле app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
 
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { CubeComponent } from './cube/cube.component';
import { SafeUrlPipe } from './cube/safeUrl.pipe';
 
@NgModule({
 declarations: [
 AppComponent,
 NavMenuComponent,
 HomeComponent,
 CounterComponent,
 FetchDataComponent,
 CubeComponent,
 SafeUrlPipe
 ],
 imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
 HttpClientModule,
 FormsModule,
 RouterModule.forRoot([
 { path: '', component: HomeComponent, pathMatch: 'full' },
 { path: 'counter', component: CounterComponent },
 { path: 'fetch-data', component: FetchDataComponent },
 { path: 'cube', component: CubeComponent }
 ])
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

А также добавим новый пункт в меню в файле nav-menu.component.html:

<header>
 <nav
 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
 >
 <div class="container">
 <a class="navbar-brand" [routerLink]="['/']">FRCoreAngular</a>
 <button
 class="navbar-toggler"
 type="button"
 data-toggle="collapse"
 data-target=".navbar-collapse"
 aria-label="Toggle navigation"
 [attr.aria-expanded]="isExpanded"
 (click)="toggle()"
 >
 <span class="navbar-toggler-icon"></span>
 </button>
 <div
 class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
 [ngClass]="{ show: isExpanded }"
 >
 <ul class="navbar-nav flex-grow">
 <li class="nav-item"
 [routerLinkActive]="['link-active']"
 [routerLinkActiveOptions]="{ exact: true }">
 <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
 </li>
 <li class="nav-item" [routerLinkActive]="['link-active']">
 <a class="nav-link text-dark" [routerLink]="['/counter']">Counter</a>
 </li>
 <li class="nav-item" [routerLinkActive]="['link-active']">
 <a class="nav-link text-dark" [routerLink]="['/fetch-data']">Fetch data</a>
 </li>
 <li class="nav-item" [routerLinkActive]="['link-active']">
 <a class="nav-link text-dark" [routerLink]="['/cube']">Cube</a>
 </li>
 </ul>
 </div>
 </div>
 </nav>
</header>

Приложение готово. Запустим его:

Запущенное приложение

В этом простом примере мы рассмотрели, как в одностраничном приложении Angular отобразить куб данных на основе библиотек FastCube. Теперь в веб-приложении вам доступен удобный инструмент для анализа данных. Вы можете добавлять и убирать измерения, факты, а также фильтровать свои данные.

.NET FastCube OLAP MVC WebReport Angular SPA .NET FastCube OLAP MVC WebReport Angular SPA
10 февраля 2025

Как попробовать FastReport .NET WEB перед покупкой

Протестировав WEB пак перед покупкой, вы сможете сделать осознанный выбор: подходит ли вам FastReport .NET для ваших задач.
14 марта 2023

Будущее генерации отчетов с помощью Blazor WebAssembly

Пошаговая инструкция по созданию демо приложения на .NET 6 и 7 прямо в браузере с помощью Blazor WebAssembly в FastReport .NET.
14 февраля 2023

Как настроить веб-сервер Apache2 для FastReport .NET

Запускаем веб-сервер Apache2 в операционной системе Linux для FastReport .NET и .NET 5 с помощью нескольких простых команд.