Reveal SDK(デスクトップ版)で表示するデータソースを設定！


# はじめに

## Revealとは
[Reveal  ダッシュボードをアプリケーションに組み込み](https://www.revealbi.io/jp)
> Reveal Embeddedは、アプリケーションに組み込み可能なデータ可視化SDKです。シンプルな価格体系、組み込みの容易さでアプリケーションの価値を最大限向上することができます。


## この記事は
[デスクトップアプリ(WPF)にRevealを組み込む! Getting Started!](https://qiita.com/furugen/items/6da124719595069cb643)の続きの記事となります。

Reveal で表示するデータソースを設定するためには、２つの手順を解説します。
① RevealView.DataSourcesRequested ... イベント処理、選択候補のデータソース一覧(ID)を設定
② RevealView.DataPrividor ... ①で設定したデータソースIDと紐づける実際のデータを設定

## RevealView.DataSourcesRequested の設定
まずは、DataSourcesRequested イベントにて、データソースの一覧を設定します。
下記のサンプルコードはでは、社員情報、製品情報の２つを選択候補にするよう設定しています。

```c#:MainWindow.xaml.cs
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ... 省略 ...

            // データ選択時のイベントを登録
            revealView.DataSourcesRequested += RevealView_DataSourcesRequested;

```


```c#:MainWindow.xaml.cs
        /// <summary>
        /// データソース選択時に動作するイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void RevealView_DataSourcesRequested(object sender, DataSourcesRequestedEventArgs e)
        {
            // データソースは複数設定することも可能です。
            // 下記は2つのデータソースを設定しています。

            // 社員情報
            var employeesDS = new RVInMemoryDataSourceItem("employees");
            employeesDS.Title = "社員情報";
            employeesDS.Description = "社員用データソース";

            // 製品情報
            var salesDS = new RVInMemoryDataSourceItem("products");
            salesDS.Title = "製品情報";
            salesDS.Description = "製品用データソース";

            e.Callback(new RevealDataSources(
                    null,
                    new List<object>() { employeesDS, salesDS },
                    false));
        }
```

## RevealView.DataPrividor の設定
次に、先ほど設定したデータソースIDと合致したデータソースを提供するような姿勢とっている。

```c#:MainWindow.xaml.cs
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ... 省略 ...

            // データプロバイダを設定
            revealView.DataProvider = new EmbedDataProvider();

```

```c#:EmbedDataProvider.cs
using DesktopDemo.Data;
using Infragistics.Sdk;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace DesktopDemo
{
    public class EmbedDataProvider : IRVDataProvider
    {
        public Task<IRVInMemoryData> GetData(RVInMemoryDataSourceItem dataSourceItem)
        {
            var datasetId = dataSourceItem.DatasetId;
            switch (datasetId)
            {
                case "employees":
                    var employees = new List<Employee>()
                    {
                        new Employee(){ EmployeeID = "1", Fullname="社員1", Wage = 80325.61 },
                        new Employee(){ EmployeeID = "2", Fullname="社員2", Wage = 10325.61 },
                    };
                    return Task.FromResult<IRVInMemoryData>(new RVInMemoryData<Employee>(employees));

                case "products":
                    var products = new List<Product>()
                    {
                        new Product(){ ProductID = "1", ProductName="製品A", Price = 980 },
                        new Product(){ ProductID = "2", ProductName="製品B", Price = 1050 },
                    };
                    return Task.FromResult<IRVInMemoryData>(new RVInMemoryData<Product>(products));
            }

            throw new Exception("Invalid data requested");
        }
    }
}

```

## サンプルソース全容

```c#:MainWindow.xaml.cs

   /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Reveal 初期設定用コード
            RevealSettings revealSettings = new RevealSettings(null);
            revealView.Settings = revealSettings;
            // データソースを設定
            revealView.DataSourcesRequested += RevealView_DataSourcesRequested;
            // データプロバイダを設定
            revealView.DataProvider = new EmbedDataProvider();

        }


        /// <summary>
        /// データソース選択時に動作するイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void RevealView_DataSourcesRequested(object sender, DataSourcesRequestedEventArgs e)
        {
            // データソースは複数設定することも可能です。
            // 下記は2つのデータソースを設定しています。

            // 社員情報
            var employeesDS = new RVInMemoryDataSourceItem("employees");
            employeesDS.Title = "社員情報";
            employeesDS.Description = "社員用データソース";

            // 製品情報
            var salesDS = new RVInMemoryDataSourceItem("products");
            salesDS.Title = "製品情報";
            salesDS.Description = "製品用データソース";

            e.Callback(new RevealDataSources(
                    null,
                    new List<object>() { employeesDS, salesDS },
                    false));
        }
    }
``` 



# 動作確認
それでは、実際に動かしてみましょう。

## "可視化"を選択し、新規のダッシュボードを作る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/93c3f2c3-24ca-e5e2-0702-daf8bc9d5582.png)


## データソースの選択 > データ項目 > 社員情報 を選択
先ほど設定したデータソースの一覧が表示されます。
DataSourcesRequested イベントが動作し、選択候補のデータソース一覧を表示しています。
※この時点では、あくまで選択候補の表示のみで、実データの取得は、データソース選択後に行われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/1ab4cdad-0690-b653-8815-36657517c875.png)

### ダッシュボード設定 
データソースを選択するとダッシュボード編集の画面が表示されます。

"フィールド" ... データソースの列が表示されます。社員情報は３つのプロパティを保持しているため、フィールドにも同様に3つの項目が表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/76576e5e-830d-b87d-8f36-b86d1f1cc70b.png)


### フィールドを行/値にドラッグします。
FullnameおよびおWageを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/43a3de97-ef8a-aca5-51bd-14d2fb64c22f.png)

### 可視化するチャートを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/58de1dcf-68b6-2342-8d53-ff969e38b162.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/b57c41d7-9093-d642-f834-bde4a974816b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/cb145fe4-c7b7-d92b-d39b-53a1e3b4c9ae.png)

### 保存
設定した内容を"保存"をクリックして編集内容保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/f38fc6b1-c2ea-9f7d-2d69-7d291fcd1fbf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/19a5a2ce-85f9-cbc4-8baf-edcb5e845dbc.png)

# まとめ
Revealのデータソースを設定する手順の紹介でした。
記事中はインメモリのデータ取得でしたが、Revealは他にも様々なデータソース(主要なデータベースやWebAPI)へのアクセスもサポートしています。

次回の記事では、ダッシュボードの外部ファイル保存と再読み込みの手順を紹介します！
本記事ではあくまでアプリケーション起動中のダッシュボードの取り扱いでしたが、次回の記事ではダッシュボードを外部ファイルとして保存し、読み込む手順を紹介します。