Как использовать инструмент создания отчетов JavaScript в веб-приложении GoLang

ActiveReportsJS — это полностью клиентский инструмент создания отчетов, не зависящий от сервера. Это означает, что вы можете использовать ActiveReportsJS и любой веб-сервер, включая приложение Golang. Эта статья содержит простое, но подробное руководство по интеграции ActiveReportsJS с приложением GoLang.

Предпосылки

Следующее содержимое предполагает, что на вашем компьютере установлен GoLang. Если у вас его нет, вы можете получить его на сайте GoLang. Было бы лучше, если бы на вашем компьютере также был установлен ActiveReportsJS. Если у вас его нет, вы можете получить его на веб-сайте ActiveReportsJS.

Создать приложение GoLang

Для этого урока мы будем использовать веб-фреймворк Echo Go.
Чтобы создать новое приложение GoLang, использующее веб-инфраструктуру Echo, выполните следующие команды из терминала или командной строки.

mkdir ReportingOnTheGo && cd ReportingOnTheGo
go mod init ReportingOnTheGo
go get github.com/labstack/echo/v4

Затем откройте только что созданный каталог ReportingOnTheGo в своем любимом редакторе кода, таком как Visual Studio Code, создайте новый файл с именем «server.go» и добавьте в начале следующий код:

package main
 
import (
    "log"
    "net/http"
    "encoding/csv"
    "strconv"
    "os"   
    "github.com/labstack/echo/v4"
)

Создайте модель данных для JSON API

Мы будем использовать набор данных о продажах, который вы можете скачать с веб-сайта E for Excel. Он предлагает наборы данных различных размеров, от 100 записей до 5 миллионов записей. Для простоты мы будем использовать первый набор данных, содержащий 100 записей.
В наборе данных много полей, но в этом руководстве мы будем использовать только некоторые из них. Вставьте следующий фрагмент кода в файл server.go:

type Sale struct {
    Region  string `json:"region"`
    ItemType string `json:"itemType"`
    UnitsSold int `json:"unitsSold"`
  }

Инициализировать данные из CSV-файла

Скачайте и разархивируйте данные из архива 100-Sales-Records.zip в каталог data приложения. Добавьте следующий код в файл server.go:

func ReadCsv(filename string) ([][]string, error) {
   f, err := os.Open(filename)
    if err != nil {
        return [][]string{}, err
    }
    defer f.Close()
    lines, err := csv.NewReader(f).ReadAll()
    if err != nil {
        return [][]string{}, err
    }
    return lines, nil
}
 
func main() {   
    lines, err := ReadCsv("data\\100 Sales Records.csv")
    if err != nil {
        log.Fatal(err)
    }
    var sales []Sale
    for _, line := range lines[1:] {
        unitsSold, err := strconv.Atoi(line[8])
        if err != nil {
            log.Fatal(err)
        }
        sale := Sale{
            Region: line[0],
            ItemType: line[2],
            UnitsSold: unitsSold,
        }
        sales = append(sales, sale)        
    }
}

Настройка конечных точек JSON API

В конце функции main() добавьте следующий код, который инициализирует веб-сервер, добавляет конечную точку JSON, возвращающую данные о продажах, и обслуживает статические файлы из assets папка:

e := echo.New()    
    e.Static("/", "assets")
    e.GET("api/sales", func(c echo.Context) error {
        return c.JSON(http.StatusOK, sales)
    }   )
    e.Logger.Fatal(e.Start(":3000"))

В командной строке или терминале запустите команду go run server.go из корневой папки приложения и откройте в браузере http://localhost:3000/api/sales, чтобы просмотреть данные, API JSON возвращается.

Создать отчет ActiveReportsJS

Давайте теперь создадим отчет, который визуализирует данные из JSON API.

В Автономном приложении дизайнера отчетов откройте меню Файл и выберите шаблон Непрерывный макет страницы для вновь созданного отчета.

Откройте Панель данных инспектора свойств и нажмите кнопку Добавить.

В диалоговом окне редактора источника данных введите http://localhost:3000/api/sales в поле ENDPOINT и нажмите кнопку Сохранить изменения.

Нажмите значок + рядом с DataSource на панели данных.

В диалоговом окне Редактор набора данных введите Продажи в поле ИМЯ и $.* в поле JSON Путь. .

Нажмите кнопку Проверить, убедитесь, что в разделе Поля базы данных отображается текст [3 элемента], и нажмите кнопку Сохранить изменения. > кнопка.

Разверните панель инструментов с помощью меню Hamburger, расположенного в левой части панели инструментов.

Перетащите элемент Диаграмма из панели инструментов в левый верхний угол области страницы отчета. Появится диалоговое окно Мастер диаграмм. Выберите тип панели и нажмите кнопку «Далее» на первом экране.

На втором экране диалогового окна настройте данные, как показано на следующем рисунке, и нажмите кнопку Далее.

На третьем экране нажмите кнопку Готово.

Измените размер элемента отчета диаграммы, чтобы заполнить всю ширину страницы отчета. Щелкните легенду диаграммы, чтобы загрузить ее свойства на панель свойств, и установите для свойства Ориентация значение Горизонтальное, а для свойства Положение значение Внизу.

Откройте меню Файл и сохраните только что созданный отчет в папке assets приложения под именем SalesReport.rdlx-json.

Создайте статическую HTML-страницу для отображения отчета

В папке с ресурсами приложения создайте файл index.html и замените его содержимое следующим кодом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sales Report</title>
    <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
    type="text/css"
  />
  <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
    type="text/css"
  />
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
  <style>
    #viewer-host {
      width: 100%;
      height: 100vh;
    }
  </style>      
</head>
  
<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new ActiveReports.Viewer("#viewer-host");
        viewer.open('SalesReport.rdlx-json');
      </script>  
</body>
</html>

Перезапустите приложение с помощью команды go run server.go и перейдите в браузере на http://localhost:3000/index.html, чтобы просмотреть отчет. Если вы правильно выполнили шаги, вы должны увидеть отчет, в котором отображаются данные из JSON API.

Первоначально опубликовано на https://www.grapecity.com 31 марта 2022 г.