Pleasanterのダッシュボードにピボットテーブルを表示したい

前置き

タイトルのとおり、Pleasanterのダッシュボードにピボットテーブルを表示してみようと思います。といっても、ピボットテーブルを１から構築するのはさすがに無理なので、以下ライブラリを使用します。

こいつを使って、ダッシュボードのカスタムHTMLにピボットテーブルを表示してみます。

PivotTable.jsの使い方は公式ドキュメントを参照してください。当記事では特に触れません。

データの準備

ピボットテーブルに表示するデータを用意します。今回は、以下サイトからテストデータを生成しました。

ランダムに500件のテストデータを生成し、以下のようなテーブルにインポート。サイト名を「利用者」としています。

項目設定は以下のようになっています。

項目名	表示名
Title	氏名
ClassA	氏名（ひらがな）
NumA	年齢
DateA	生年月日
ClassC	性別
ClassB	血液型

ダッシュボード設定

次にピボットテーブルを描画するためのカスタムHTMLを用意します。

設定内容は以下のとおり。

divタグ内にピボットテーブルを書き出します。

あと、CSS”no-drag”については後述します。

スクリプト/スタイル

まず前提として

より、pivot.jsとpivot.cssを取得します。

以下より取得
https://github.com/nicolaskruchten/pivottable/tree/master/dist

取得したソースを、ダッシュボードパーツのスクリプトに設定します。

その上で、以下のスクリプトを組み込みます。

//ピボットテーブルに表示するデータを取得
const getRecords = async () => {
    let res = {};
    let records = []
    offset = 0;
    do {
        res = await apiGet(offset);
        let getRecords = res.Response.Data;
        records = [...records, ...getRecords];
        offset += res.Response.PageSize;
    }while (res.Response.TotalCount >= res.Response.PageSize + res.Response.Offset)
    return records;

} 

//apiでデータを取得
const apiGet = async (offset) => {
    let res;
    let siteId = await getSiteId();
    await $p.apiGet({
        id: siteId,
        data: {
            offset: offset,
            View: {
                ApiDataType: "KeyValues",
                GridColumns: ["Title", "ClassA", "NumA","DateA", "ClassC", "ClassB"]
            }
        },
        done: function (data) {
            console.log({'全件':data.Response.TotalCount, '一度に取得できる件数':data.Response.PageSize, '開始位置':data.Response.Offset})
            res = data;
        },
        fail: function (data) {
            //errMsg();
        }
    });
    return res;
}

//利用者テーブルのサイトIDを取得
const getSiteId = async() => {
  let siteId;
  await $p.apiGetClosestSiteId({
    id: $p.siteId(),
    data: {
        FindSiteNames:['利用者']
    },
    done: function (data) {
        console.log(data);
        siteId = data.Data[0].SiteId;
    }    
  });
  return siteId
}

//ピボットテーブル描画
$(async function(){
    const data = await getRecords()
    console.log(data)

    $("#output1").pivotUI(data,
        {
            rows: ["性別"],
            cols: ["血液型"],
            aggregatorName: 'Count',
            rendererName: 'table'
        },
        false
    );
});

処理は以下の流れで行っています。

1. Apiで利用者テーブルのデータを取得
2. ピボットテーブル描画

結果

こんな感じで出来ました。

項目をドラック&ドロップし集計要素を簡単に変更できます。

補足

このライブラリ、ドラッグ&ドロップで項目を設定できるのですが、何も設定しないと、ダッシュボードパーツのドラッグ&ドロップと合わせて移動してしまいます。

それを防ぐために、前述のCSSに「no-drag」を設定することで、ダッシュボードパーツがドラッグ&ドロップで移動できないように設定します。