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

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

https://pivottable.js.org/examples/

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

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

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

https://testdata.userlocal.jp/

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/ba33f39e-0f52-2751-3391-55895c9deb48.png)

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

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

## ダッシュボード設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/1f45b301-ed2c-d0c7-268a-9af1cc1f0116.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/100cd4a2-eb10-ec3c-332c-0bafee746d8f.png)

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

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

## スクリプト/スタイル

まず前提として

https://pivottable.js.org/examples/

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/1ed1a602-869b-ca93-cbbd-2c180e580227.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/e7f03ad7-a55f-adbf-e4d5-758a9e36de02.png)

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

```javascript

//ピボットテーブルに表示するデータを取得
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で利用者テーブルのデータを取得
1. ピボットテーブル描画

## 結果

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/4ce10226-2701-9d7e-caf1-a5d0b9e6f1d3.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/161ad651-bb0b-52d1-ac69-bdf1dcda044e.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/8c61d4f7-f240-9878-fadb-04b1bf73f1bd.png)