Documentation
ドキュメントの検索
karat

+

K

APIリファレンス ↗
ユースケース開発Workshop可視化ウィジェットピボットテーブル

注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

ピボットテーブル

ピボットテーブルウィジェットでは、オブジェクトデータを動的にグループ化および集計し、集計したデータをテーブル形式で表示できます。ピボットテーブルウィジェットを設定するモジュール作成者は、次の機能を使用できます。

  • 1個以上のプロパティタイプによる、行レベルでのデータのグループ化。
  • 最大1個のプロパティタイプによる、列レベルでのデータのグループ化。
  • 日付およびタイムスタンプのプロパティタイプを、日付、週、月、年で動的にグループ化。
  • 行レベルおよび列レベルのグルーピングによる並べ替え。
  • 件数、カーディナリティ、平均、最大値、最小値、合計による集計。
  • セル、行、列レベルの選択による、選択したグループ化バケットに基づく下流の絞り込み。

次の例は、Flight Alerts データを表示し、下流のオブジェクトリストウィジェットを絞り込むように設定されたピボットテーブルウィジェットを示しています。

pivot_table_example.png

設定オプション

ピボットテーブルを設定する際、作成者はオブジェクトまたは関数の出力からデータを取得できます。

オブジェクトベースのピボットテーブル

次の例は、設定前のオブジェクトベースのピボットテーブルの初期状態を示しています。ウィジェットの設定パネルでは、初期入力のベースオブジェクトセットが Flight Alert: All に設定されています。

設定前のピボットテーブルの初期状態。

ピボットテーブルウィジェットには、次の主要な設定オプションがあります。

  • ベースオブジェクトセット： このパラメーターは、ピボットテーブルに渡されるオブジェクトデータを決定し、入力としてオブジェクトセット変数を受け入れます。ピボットテーブルは、単一のオブジェクトタイプのオブジェクトセット変数のみをサポートします。
  • 行グルーピング： 次のオプションで、1個以上の行レベルのグルーピングを追加できます。
    • 行グルーピングを追加： 選択したプロパティタイプによる行グルーピングを追加します。
    • 列の幅： 各行グルーピングで、グループ化に使用するプロパティタイプのデフォルトの列幅を調整します。ダッシュボードの閲覧者は、実行時に列の境界をドラッグして、行グルーピングの列幅を変更することもできます。
    • 時間間隔： 日付またはタイムスタンプのプロパティタイプの各行グルーピングで、バケット化する時間間隔（正確な日付/時刻、週、月など）を設定します。
    • 合計を表示しますか？： テーブルの下部に合計の行グルーピングを追加します。列の値を計算するために複数の集計を使用する場合、合計の値は、プロパティの元の値の合計に同じ集計を適用した結果になります。
      • 免責事項： 合計行に表示される値は、各集計の前のオブジェクトのすべての生の値に対して、多段階の集計を実行した結果になります。
    • 行をソート： 設定済みの行グルーピングのプロパティを1個以上使用した並べ替えを有効にします。

ピボットテーブルウィジェットは、最大7個の行グルーピングをサポートします。それより多くのグルーピングを使用する必要がある場合は、テーブルの設定に非表示のグルーピングを追加することを検討してください。この方法では、ユーザーが UI で非表示のグルーピングを切り替えられるため、パフォーマンスを維持しながら、上限を超えるグルーピングを効果的に管理できます。

  • 列グルーピング： 次のオプションで、最大1個の列レベルのグルーピングを追加できます。
    • プロパティを選択： 選択したプロパティタイプによる列グルーピングを追加します。
    • 時間間隔： 日付またはタイムスタンプのプロパティタイプの各列グルーピングで、バケット化する時間間隔（正確な日付/時刻、週、月など）を設定します。
    • 合計を表示しますか？： テーブルの右側に合計の列グルーピングを追加します。
    • 値の並べ替え： 列グルーピングの値の並べ替えを昇順または降順に切り替えます。
  • 集計： 次のオプションは、テーブルのセルに表示される集計を制御します。
    • 集計を追加： プロパティタイプまたはオブジェクトの総件数に対する新しい集計を追加できます。
    • 集計の配置： 集計を列または行のどちらに配置するかを切り替えます。デフォルトでは、集計は列に配置されます。
    • 集計のタイトル： 集計のタイトルをクリックすると、そのタイトルを編集できます。各メトリクスに選択したタイトルは、テーブルの列ヘッダーとして表示されます。
    • 集計メトリクス： 集計の計算方法を制御します。選択肢には、平均、最大値、最小値、合計、件数、カーディナリティがあります。
    • 列の幅： 集計の列幅を調整します。
  • 選択されたフィルター： この出力オブジェクトセットフィルター変数は、ユーザーが選択したセルのグループ化条件を保持し、下流のウィジェットおよびオブジェクトセット変数の絞り込みに使用できます。ユーザーは、個々のセル、セルのグループ、または行や列全体を選択できます。
  • 選択時： ユーザーがテーブル内で何かを選択したときに、Workshop イベント（現在のモジュール内でドロワーを開くなど）をトリガーできます。詳細については、Workshop イベントのドキュメントを参照してください。

キーボードショートカット

ピボットテーブルウィジェットは、選択したセルを操作するための次のキーボードショートカットをサポートします。

  • クリップボードにコピー：Cmd+C（macOS）または Ctrl+C（Windows）を使用して、選択したセルをタブ区切りの値としてコピーします。出力には、選択に応じて、行グルーピング、集計値、またはその両方が含まれます。
  • 選択範囲の調整：Shift+Left および Shift+Right を使用して、選択範囲を行全体、行グルーピングのみ、集計値のみの間で調整します。

関数ベースのピボットテーブル

関数ベースのピボットテーブルは、関数の出力からデータを取得します。

この方法は、次のユースケースで役立ちます。

  • 表示前にデータを変換したり、カスタム集計を適用したりする。
  • 複数のソースからのデータを組み合わせる。
  • データに複雑なビジネスロジックを適用する。

前提条件

  • 関数は構造体の配列を出力する必要があります。
  • 各構造体には、ピボットテーブルの値を保持する values という名前のフィールドが必要です。

基本構造

以下は、関数ベースのピボットテーブルに使用できる構造体定義と関数宣言の例です。

この構造体定義では、次のようになっています。

  • region、productType、productName、year は、グループ化に使用するフィールドです。
  • totalSales と estimatedSales は、ピボットテーブルのセルに表示される値です。

どちらのバージョンも、interface キーワードを使用して構造体をカスタム型として宣言します。TypeScript v1 では、クラスメソッドの @Function() デコレーターで関数を登録し、@foundry/functions-api から Integer をインポートします。TypeScript v2 では、ファイルのデフォルトエクスポートとして関数を登録し、@osdk/functions から Integer をインポートします。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Function, Integer } from "@foundry/functions-api";

interface SalesData {
    region?: string;
    year?: string;
    productType?: string;
    productName?: string;

    // メトリクスを含む values オブジェクト
    values: {
        totalSales: Integer;
        estimatedSales: Integer;
    }
};

export class MyFunctions {
    @Function()
    public salesFunctionBackedPivotTable(): SalesData[] {
        // ここに実装を記述します
        return [];
    }
}
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Integer } from "@osdk/functions";

interface SalesData {
    region?: string;
    year?: string;
    productType?: string;
    productName?: string;

    // メトリクスを含む values オブジェクト
    values: {
        totalSales: Integer;
        estimatedSales: Integer;
    }
};

export default function salesFunctionBackedPivotTable(): SalesData[] {
    // ここに実装を記述します
    return [];
}

設定

ドロップダウンで関数を選択した後、ビルダーは次の項目を選択できます。

  1. グループ化フィールド： データを行と列にどのように整理するかを決定します。
  2. 値フィールド： セルに表示するメトリクスを決定します。
  3. 展開可能な行： 展開してより詳細なデータを表示できるフィールドです。
関数ベースのグルーピングの設定オプション。

設定すると、関数から返されたデータがピボットテーブルに表示されます。

関数ベースのピボットテーブルのデータ。

合計

関数ベースのピボットテーブルは、合計の表示をサポートしています。合計を表示するには、以下のガイドラインに従った構造体をリストに含めて返します。以下の例では、region と productType が行グルーピングのフィールド、year が列グルーピングのフィールドであるとします。

行合計： すべての行の合計（行合計）を表すには、データポイントから行グルーピングのフィールドを省略します。

例： 2021年の合計を表すデータポイント。

Copied!
1
2
3
4
5
6
7
{
    year: "2021";
    values: {
        totalSales: 622000;
        estimatedSales: 57000;
    }
};

列合計： すべての列の合計（列合計）を表すには、データポイントから列グルーピングのフィールドを省略します。

例： EU と Clothing の合計を表すデータポイント。

Copied!
1
2
3
4
5
6
7
8
{
    region: "EU";
    productType: "Clothing";
    values: {
        totalSales: 57000;
        estimatedSales: 57000;
    }
}

総計： 総計を表すには、グループ化フィールドをすべて省略します。

Copied!
1
2
3
4
5
6
{
    values: {
        totalSales: 3147000;
        estimatedSales: 3160000;
    }
}

null バケット

null バケットは、欠損データや未定義のデータを表す際に役立ちます。

null バケットを作成するには、次の手順を実行します。

  1. バケットの値として undefined を返します。
  2. インターフェースが未定義のフィールドをサポートしていることを確認してください。

グループ化フィールドの null 値や欠損値には、空の文字列（''）を使用しないでください。Workshop は空の文字列をフィールドが省略されたものとして解釈するため、空の文字列を含むレコードは個別のグルーピング行として表示されず、小計行にまとめられます。実際の null バケットには、常に undefined を使用してください。

以下に例を示します。

Copied!
1
2
3
4
5
6
7
interface SiteData {
    site?: string;
    part?: string | undefined;  // undefined データ型が明示されていることに注目してください
    values: {
        quantity: Double;
    }
}
Copied!
1
2
3
4
5
6
7
{
    "part": undefined,
    "source": "SourceA",
    "values": {
        "quantity": 100
    }
}
null バケットの例。

フィールドを省略することと、undefined を渡すことは異なります。フィールドを省略すると合計が作成され、undefined を渡すと null バケットが作成されます。

展開可能な行

展開可能な行を使用すると、ユーザーはより詳細なデータにドリルダウンできます。

展開可能な行を実装するには、次の手順を実行します。

  1. 設定オプションの展開可能な行セクションに行フィールドを追加します。
  2. 異なる展開レベルをサポートするようにデータを構造化します。

次のインターフェースの場合、設定オプションで productName と productType を展開可能な行として選択します。

Copied!
1
2
3
4
5
6
7
8
9
10
interface SalesData {
    region: string;
    year: string;
    productType?: string;
    productName?: string;
    values: {
        totalSales: Integer;
        estimatedSales: Integer;
    }
};

以下に、3段階の展開レベルの例を示します。

  1. 展開なし： region レベルのみ。
Copied!
1
2
3
4
5
6
7
8
9
[
    {
        "region": "NA",
        "year": "2021",
        "values": {
            "totalSales": 30000
        }
    }
]
  1. 第1レベルの展開： region と productType。
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[
    {
        "region": "NA",
        "year": "2021",
        "productType": "Clothing",
        "values": {
            "totalSales": 90000
        }
    },
    {
        "region": "NA",
        "year": "2021",
        "productType": "Electronics",
        "values": {
            "totalSales": 150000
        }
    },
    {
        "region": "NA",
        "year": "2021",
        "productType": "Furniture",
        "values": {
            "totalSales": 60000
        }
    }
]
region と productType の展開。
  1. 第2レベルの展開： region、productType、productName。
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
[
    {
        "region": "NA",
        "year": "2021",
        "productType": "Electronics",
        "productName": "ProductA",
        "values": {
            "totalSales": 5000
        }
    },
    {
        "region": "NA",
        "year": "2021",
        "productType": "Electronics",
        "productName": "ProductB",
        "values": {
            "totalSales": 5000
        }
    },
    {
        "region": "NA",
        "year": "2021",
        "productType": "Electronics",
        "productName": "ProductC",
        "values": {
            "totalSales": 5000
        }
    }
]
region、productType、productName の展開

選択

関数ベースのピボットテーブルで選択された内容は、出力として構造体変数に書き込めます。構造体のフィールドは、関数の出力から取得されます。

関数ベースのピボットテーブルの選択。

表示とスタイル

ピボットテーブルウィジェットの表示とスタイルの設定のスクリーンショット。

ピボットテーブルウィジェットには、次の表示とスタイルのオプションがあります。

  • レイアウト： ユーザーの好みに基づいてピボットテーブルの表示を設定します。
    • 表形式： デフォルトのピボットテーブルの表示です。
    • 積み上げ： すべての行グルーピングを1列にまとめることで、よりコンパクトに表示します。行グルーピングを2個以上設定すると、最上位の行グルーピングの各値は、各行の横に繰り返し表示されるのではなく、専用の行に1回だけ表示され、その下にネストされたグルーピングがインデントされて表示されます。
      • 積み上げレイアウトのグループ化ラベルをカスタマイズする： 有効にすると、グループ化列の名前を変更できます。
  • 幅に合わせる： 有効にすると、ピボットテーブルが親コンテナ内の利用可能なスペースいっぱいに広がり、コンテナのサイズが変わると自動的に調整されます。
  • テーブルのスタイル： ピボットテーブルのセルと罫線のスタイルに3つの選択肢があります。
    • ベーシック： デフォルトのピボットテーブルのスタイルです。
    • アウトライン： 最上位の各行グルーピングの上下に、より濃いアウトラインを追加します。
    • 縞模様の行： 最上位の各行グルーピングの上下に、より濃いアウトラインを追加し、さらにテーブルの1行おきに薄い灰色の背景を追加します。
  • 色： ピボットテーブルのヘッダーの色をカスタマイズします。テーブルのスタイルにベーシックを選択した場合、行グルーピング列の背景に、選択した色よりも薄い色が適用されます。
    • 控えめ： ピボットテーブルのヘッダーに、選択した色よりも薄い色を表示します。
    • 強調： ピボットテーブルのヘッダーに、選択した色をそのまま表示します。