AJ-Report オープンソースデータ視覚化エンジンの入力練習

バックグラウンド

データ視覚化エンジンは、データを視覚的なチャート、グラフ、ダッシュボードに変換するプロセスで使用されるソフトウェアツールまたはプラットフォームです。ユーザーがデータをより深く理解して分析し、意思決定と洞察をサポートするのに役立ちます。

データ視覚化エンジンの需要が高まっている理由は次のとおりです。

データの爆発的増加: デジタル時代の到来により、データ量は飛躍的に増加しています。データ視覚化エンジンは、大量のデータをより適切に処理して理解するのに役立ち、それによってデータに隠れたパターンや傾向を発見できます。
視覚的な洞察: 人間は、プレーンテキストデータを理解するよりも、グラフやチャートをはるかに理解します。データを視覚化することで、データ間の関係や傾向をより直観的に理解できるようになり、問題をより適切に発見して解決できるようになります。
瞬時の意思決定: 今日のペースの速いビジネス環境では、瞬時の意思決定がますます重要になっています。データ視覚化エンジンは、ユーザーが視覚的なレポートやダッシュボードを迅速に生成できるようにすることで、重要な情報を迅速に取得し、タイムリーな意思決定を行うことができるようにします。
ユーザーフレンドリーさ: データ視覚化エンジンは通常、ユーザーフレンドリーなインターフェイスと対話型機能を提供し、技術者以外の人でも独自の視覚化チャートとダッシュボードを簡単に作成およびカスタマイズできるようにします。これにより、データ視覚化エンジンはさまざまな業界や分野でますます広く使用されるようになりました。

この記事はAJ-Report、データの可視化を迅速に実現でき、導入・統合が容易な内部共有について少しまとめたもので、当時は以下の内容に沿って説明・デモが行われていました。

ダウンロード、ソースコード開始
データソース、データセット、大画面
大画面の視覚化

円グラフ: 静的データ
折れ線グラフ:SQL
ヒストグラム：HTTP
輸入

拡張データソース:ClickHouse

画像.png

選択分析

オープンソースデータ視覚化エンジン: DataEase、FlyFish、GoView、DataGear、Superset、Grafana…Metabase

アドバンテージ

AJ-Report は、Spring Boot+MyBatisPlus+Vue テクノロジースタックに基づいた完全にオープンソースの国内 BI プラットフォームで、フロントエンドとバックエンドが分離されており、導入と統合が簡単です。
マルチデータソースのサポート、組み込みの MySQL、ElasticSearch、Kudu ドライバー、データソースの動的拡張のサポート (OLTP: 国内データベース、OLAP: ClickHouse、データウェアハウス/データレイク: Hive)。
データインターフェイスの開発作業を節約するためにカスタムデータセット (データベースに直接接続) をサポートし、応答データのクリーニング、変換、プレビューなどの前処理操作をサポートします。
HTTP インターフェイスの形式での既存のインターフェイスの呼び出しをサポートし、応答データのクリーニング、変換、プレビュー、前処理をサポートします。
現時点で30種類以上の大画面コンポーネント/図に対応しており、どうやって開発すればよいか分からないが、デザイン案通りに大画面を作ることもできるし、付属のテンプレートを利用してインポートして開発することもできる。
大画面の設計とリリースを簡単に完了するための 5 つのステップ: データソースの構成 ----> SQL 構成データセットの作成 ----> ドラッグアンドドロップで大画面を構成 ----> 保存してリリース - ---> ワンクリックで共有/エクスポート。

不利益

提供されるモジュールコンポーネントは必ずしも実際のニーズを満たしているわけではありませんが、二次開発によって実現することができます。
大画面チャートはドリルダウンには対応していませんが、複数のコンポーネントを簡単に連携させることができます。
データ変換が選択されている場合、構文JavaScriptはサポートされません。ES6

ダウンロード開始

https://gitee.com/anji-plus/report

基本的な環境

Node.js
JDK
メイビン
MySQL

開発ツール

アイディア
VSコード

作業手順

大画面の設計とリリースを簡単に完了するための 5 つのステップ:
データソースの構成 ----> SQL 構成データセットの作成 ----> ドラッグアンドドロップで大画面を構成 ----> 保存してリリース - ---> ワンクリックで共有/エクスポート。
データソース、データセット、大画面

大画面の視覚化

画像.png

円グラフ (静的データセット)

画像.png

折れ線グラフ (SQL データセット)

画像.png

情報元

jdbc:mysql://127.0.0.1:3306/zaservice?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8

フレーズをチェックする

SELECT create_time, value FROM sensor_water WHERE CODE = "00035100003003" ORDER BY create_time LIMIT 30;

変換スクリプト

function dataTransform(data) {
    
    
    //自定义脚本内容
    for (var i = 0; i < data.length; i++) {
    
    
        data[i].create_time = new Date(data[i].create_time).toLocaleTimeString()
    }
    return data;
    // return data.map(x => new Date(x.create_time).toLocaleTimeString());
}

ヒストグラム (HTTP データセット)

画像.png

APIインターフェース

http://localhost:8000/api/dashboard/getAssetsLiabilitiesRatio

function dataTransform(data) {
    
    
    //自定义脚本内容
    var d = JSON.parse(data[0]).data;
    var result = [];
    for (var i = 0; i < d.companies.length; i++) {
    
    
        result.push({
    
    
            axis: d.companies[i],
            data: d.assetsLiabilitiesRatio[i]
        });
    }
    return result;
}

大画面をインポートする

AJReportいくつかの大画面用テンプレートが提供されており、ダウンロードしてインポートして直接使用または変更できます。

画像.png

拡張データソース: ClickHouse

画像.png

次の図はDataEaseでサポートされているデータソースを示しています。このように表示されると非常に強力に感じられます。実際、AJReportデータソースの拡張もサポートしています。ClickHouseこの分析データベースを例として、次のJDBC形式でデータソースを拡張してみましょうの。

画像.png

ミリ秒単位で数十億行のクエリを実行

ClickHouse は、リアルタイムアプリと分析用の最速かつ最もリソース効率の高いオープンソースデータベースです。

Web インタラクティブクエリページ: http://192.168.44.148:8123/play

画像.png

show databases;
select count(*) from poetry.poetry_mergetree;

SELECT author, count(*) AS count FROM poetry.poetry_mergetree GROUP BY author HAVING count >=1000 ORDER BY count DESC;
SELECT dynasty, count(*) AS count FROM poetry.poetry_mergetree GROUP BY dynasty;

依存関係を導入する

        <!--ClickHouse 依赖-->
        <dependency>
            <groupId>ru.yandex.clickhouse</groupId>
            <artifactId>clickhouse-jdbc</artifactId>
            <version>0.3.2</version>
        </dependency>

構成情報

ru.yandex.clickhouse.ClickHouseDriver
jdbc:clickhouse://your-ip:8123/poetry

手

画像.png

ローカル開発環境を構築します。
フロントエンド: ソースコードを変更してチャートコンポーネントタイプを拡張します。
バックエンド: ソースコードを変更してデータソースタイプを拡張します。
フルスタック: 高速開発フレームワーク (ruoyi、jeecgboot) モノマーおよびマイクロサービスアーキテクチャに統合されています。
ビッグデータ/データマイニング: SQL を使用してオープンデータセットの多次元統計を取得します。
ビジネス: ツールを使用して大画面の設計と開発を完了します。

参照

ご質問やバグが見つかった場合は、お気軽にご連絡ください。
ご意見やご提案は大歓迎です。