GROWIでグラフ・チャートを表示するプラグインを作成しました

[オープンソースの社内WikiであるGROWI](https://growi.org/ja/)ではプラグイン機能が用意されています。自社のデータを表示したり、表示をカスタマイズするのに利用できます。

今回は、GROWIの中でグラフを表示するプラグインを作成したので、その内容を解説します。

## 開発したプラグイン

開発したのは、[コードタグに入力された内容をQuickChartで表示するGROWIプラグイン](https://github.com/goofmint/growi-plugin-quickchart)です。GROWIの中でコードタグを使い、 quickchart を言語として指定するとグラフの表示に切り替わります。

たとえば以下は棒グラフを表示する例です。

````markdown
```quickchart
{
  type: 'bar',
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],
    datasets: [{
      label: 'Users',
      data: [120, 60, 50, 180, 120]
    }]
  }
}
```
````

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/95826a0f-d117-d881-524e-0bab056daee4.png)


## QuickChartについて

QuickChartは、URLを使ってグラフを生成するサービス・オープンソース・ソフトウェアです。URLにパラメータを指定することで、グラフの種類やデータを指定できます。

たとえば先ほどの棒グラフは、以下のURLリクエストで作成されます。

```
https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015, 2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}
```

棒グラフの他、円グラフや折れ線グラフ、レーダーチャート、ファネルチャートなど一般的なグラフの表示に対応しているので、使い勝手は良さそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/28ee4e4d-5301-dd96-570d-91d703bda9d2.png)

[Chart Types | QuickChart](https://quickchart.io/documentation/chart-types/)

特に嬉しいのは、QuickChartがオープンソース・ソフトウェアなことです。GROWIもオープンソース・ソフトウェアなので、社内で立てれば情報が外部に出ることなく利用できます。

自分で立てた場合にはエンドポイントURLが変わりますので、 `url` キーでURLを指定してください。また、 `width` と `height` で表示サイズを指定できます。

デフォルトは以下の通りです。

````markdown
```quickchart
{
	url: "https://quickchart.io/chart",
	width: "100%",
	height: "auto"
	// 以下グラフの情報
}
```
````

## プラグインの開発

プラグインの開発時には、[先日紹介したテンプレート](https://qiita.com/goofmint/items/497ea7dd722528cfa0cb)をベースにしています。

[goofmint/growi-plugin-script-template: This is a template for creating a GROWI script plugin.](https://github.com/goofmint/growi-plugin-script-template)

### 名前の変更

プラグインの名前を変更します。

```json "package.json"
{
	"name": "growi-plugin-quickchart", // 変更
	"version": "1.0.0",
	"description": "GROWI plugin for generate chart/graph", // 変更
	:
}
```

プラグインの開発に必要なライブラリをインストールします。

```bash
$ yarn
```

### ファイル名の変更

`src/Hello.tsx` を `src/QuickChart.tsx` に変更します。 `src/Hello.css` は使いません。

### src/QuickChart.tsxの編集

この中では、コードブロックで指定した言語名によって表示の処理分けをしています。 `quickchart` を指定すると、 `language-quickchart` というクラス名を取得できます。

```tsx:src/QuickChart.tsx
const URL = 'https://quickchart.io/chart';
const WIDTH = '100%';
const HEIGHT = 'auto';

export const QuickChart = (Tag: React.FunctionComponent<any>): React.FunctionComponent<any> => {
  return ({ children, className, ...props }) => {
    if (className !== 'language-quickchart') {
      return (
        <Tag {...props}>{children}</Tag>
      );
    }
    const json = JSON.parse(children);
    const { url, width, height } = json;
    ['url', 'width', 'height'].forEach(key => delete json[key]);
    return (
      <img
        src={`${url || URL}?c=${JSON.stringify(json)}`}
        width={width || WIDTH}
        height={height || HEIGHT}
      />
    );
  };
};
```

### client-entry.tsxの編集

`client-entry.tsx` を編集して、 `code` タグの処理を上書きします。これですべての `code` タグに関する処理が `QuickChart` に送られます。

```tsx:client-entry.tsx
const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }

  const { optionsGenerators } = growiFacade.markdownRenderer;

  optionsGenerators.customGenerateViewOptions = (...args) => {
    const options = optionsGenerators.generateViewOptions(...args);
    const { code } = options.components;
    options.components.code = QuickChart(code);
    return options;
  };
};
```

## コードについて

今回のプラグインは以下にて公開しています。利用する際には、GROWIのプラグイン管理にて `https://github.com/goofmint/growi-plugin-quickchart/` を指定してください。

[goofmint/growi-plugin-quickchart: GROWI scirpt plugin to generate chart/graph by QuickChart. https://quickchart.io/](https://github.com/goofmint/growi-plugin-quickchart/)

## まとめ

GROWIのプラグインは、表示内容をカスタマイズするのがとても簡単に実現できます。今回は `code` タグですが、他にも `img` タグや `table` タグなどもカスタマイズできます。

ぜひプラグインを開発して、GROWIをより便利にしましょう！

[OSS開発wikiツールのGROWI | 快適な情報共有を、全ての人へ](https://growi.org/ja/)