メインコンテンツまでスキップ

MySQL データ ソースの追加

重大な変更

現在、Reveal SDK は、Reveal SDK core パッケージからデータ ソースを分離する過程にあります。プロジェクトの継続的な機能を確保するために、プロジェクトに追加のパッケージをインストールすることが必要になる場合があります。詳細については、サポートされるデータ ソース トピックを参照してください。

クライアント側​

手順 1 - RevealView.onDataSourcesRequested イベントのイベント ハンドラーを追加します。

var revealView = new $.ig.RevealView("#revealView");
revealView.onDataSourcesRequested = (callback) => {
    //add code here
    callback(new $.ig.RevealDataSources([], [], false));
};

手順 2 - RevealView.onDataSourcesRequested イベント ハンドラーで、RVMySqlDataSource オブジェクトの新しいインスタンスを作成します。Host、Database、Port、および Title プロパティを、MySQL サーバーに対応する値に設定します。RVMySqlDataSource オブジェクトを作成したら、それをデータ ソース コレクションに追加します。

revealView.onDataSourcesRequested = (callback) => {
    var mySqlDataSource = new $.ig.RVMySqlDataSource();
    mySqlDataSource.host = "your-db-host";
    mySqlDataSource.database = "your-db-name";
    mySqlDataSource.port = 1234;
    mySqlDataSource.title = "My MySQL";

    callback(new $.ig.RevealDataSources([mySqlDataSource], [], false));
};

アプリケーションが実行されたら、新しい可視化を作成すると、新しく作成された MySQL データ ソースが [データ ソースの選択] ダイアログに表示されます。

手順 3 - RVMySqlDataSourceItem オブジェクトの新しいインスタンスを作成して、新しいデータ ソース項目を追加します。データベース テーブルに対応する Id、Title、および Table プロパティを設定します。RVMySqlDataSourceItem オブジェクトを作成したら、それをデータ ソース項目コレクションに追加します。

revealView.onDataSourcesRequested = (callback) => {
    var mySqlDataSource = new $.ig.RVMySqlDataSource();
    mySqlDataSource.host = "your-db-host";
    mySqlDataSource.database = "your-db-name";
    mySqlDataSource.port = 1234;
    mySqlDataSource.title = "My MySQL";

    var mySqlDsi = new $.ig.RVMySqlDataSourceItem(mySqlDataSource);
    mySqlDsi.id = "MyMySqlDataSourceItem";
    mySqlDsi.title = "My MySQL Item";
    mySqlDsi.table = "TableName";    

    callback(new $.ig.RevealDataSources([mySqlDataSource], [mySqlDsi], false));
};

アプリケーションが実行されたら、新しい可視化を作成すると、新しく作成された MySQL データ ソース項目が [データ ソースの選択] ダイアログに表示されます。

サーバー側​

手順 1 - クライアントでデータ ソースとデータ ソース項目を作成しますが、接続情報は指定しません。id、title、および/または subtitle のみを入力してください。

var revealView = new $.ig.RevealView("#revealView");
revealView.onDataSourcesRequested = (callback) => {

    var mySqlDataSource = new $.ig.RVMySqlDataSource();
    mySqlDataSource.id = "MyMySqlDataSource";
    mySqlDataSource.title = "My MySQL";

    var mySqlDataSourceItem = new $.ig.RVMySqlDataSourceItem(mySqlDataSource);
    mySqlDataSourceItem.id = "MyMySqlDataSourceItem";
    mySqlDataSourceItem.title = "My MySQL Item";

    callback(new $.ig.RevealDataSources([mySqlDataSource], [mySqlDataSourceItem], true));
};

手順 2 - データ ソース プロバイダーを作成します。この例では、クライアントで定義された MySQL データベースに接続するための接続情報を提供しています。これを実現するために、使用しているデータ ソース/項目のタイプを決定し、オブジェクトで使用可能なプロパティを設定します。

public class DataSourceProvider : IRVDataSourceProvider
{
    public Task<RVDataSourceItem> ChangeDataSourceItemAsync(IRVUserContext userContext, string dashboardId,
        RVDataSourceItem dataSourceItem)
    {
        if (dataSourceItem is RVMySqlDataSourceItem mySqlDataSourceItem)
        {
            //update underlying data source
            ChangeDataSourceAsync(userContext, mySqlDataSourceItem.DataSource);

            //only change the table if we have selected our custom data source item
            if (mySqlDataSourceItem.Id == "MyMySqlDataSourceItem")
            {
                mySqlDataSourceItem.Table = "orders";
            }
        }

        return Task.FromResult(dataSourceItem);
    }

    public Task<RVDashboardDataSource> ChangeDataSourceAsync(IRVUserContext userContext,
        RVDashboardDataSource dataSource)
    {
        if (dataSource is RVMySqlDataSource mySqlDataSource)
        {
            mySqlDataSource.Host = "localhost";
            mySqlDataSource.Database = "database";
        }

        return Task.FromResult(dataSource);
    }
}
コードの取得

このサンプルのソース コードは GitHub にあります。