オープンソースの社内WikiであるGROWIではプラグイン機能が用意されています。自社のデータを表示したり、表示をカスタマイズするのに利用できます。
今回は、GROWIの中でグラフを表示するプラグインを作成したので、その内容を解説します。
開発したプラグイン
開発したのは、コードタグに入力された内容をQuickChartで表示するGROWIプラグインです。GROWIの中でコードタグを使い、 quickchart を言語として指定するとグラフの表示に切り替わります。
たとえば以下は棒グラフを表示する例です。
```quickchart
{
type: 'bar',
data: {
labels: [2012, 2013, 2014, 2015, 2016],
datasets: [{
label: 'Users',
data: [120, 60, 50, 180, 120]
}]
}
}
```
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]}]}}
棒グラフの他、円グラフや折れ線グラフ、レーダーチャート、ファネルチャートなど一般的なグラフの表示に対応しているので、使い勝手は良さそうです。
特に嬉しいのは、QuickChartがオープンソース・ソフトウェアなことです。GROWIもオープンソース・ソフトウェアなので、社内で立てれば情報が外部に出ることなく利用できます。
自分で立てた場合にはエンドポイントURLが変わりますので、 url キーでURLを指定してください。また、 width と height で表示サイズを指定できます。
デフォルトは以下の通りです。
```quickchart
{
url: "https://quickchart.io/chart",
width: "100%",
height: "auto"
// 以下グラフの情報
}
```
プラグインの開発
プラグインの開発時には、先日紹介したテンプレートをベースにしています。
goofmint/growi-plugin-script-template: This is a template for creating a GROWI script plugin.
名前の変更
プラグインの名前を変更します。
{
"name": "growi-plugin-quickchart", // 変更
"version": "1.0.0",
"description": "GROWI plugin for generate chart/graph", // 変更
:
}
プラグインの開発に必要なライブラリをインストールします。
$ yarn
ファイル名の変更
src/Hello.tsx を src/QuickChart.tsx に変更します。 src/Hello.css は使いません。
src/QuickChart.tsxの編集
この中では、コードブロックで指定した言語名によって表示の処理分けをしています。 quickchart を指定すると、 language-quickchart というクラス名を取得できます。
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 に送られます。
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/ を指定してください。
まとめ
GROWIのプラグインは、表示内容をカスタマイズするのがとても簡単に実現できます。今回は code タグですが、他にも img タグや table タグなどもカスタマイズできます。
ぜひプラグインを開発して、GROWIをより便利にしましょう！