Created a plugin to display graphs and charts in GROWI
Published: 2024-06-19 08:08:26

---
title: Created a plugin to display graphs and charts in GROWI
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-19 08:00 +0000
---

[GROWI](https://growi.org/ja/), an open source in-house wiki, provides a plug-in feature. You can use it to display your own data or customize the display.

In this article, we have developed a plug-in to display graphs in GROWI, and we will explain its contents.

## Plug-in developed

We developed [a GROWI plugin that displays what is entered in a code tag in QuickChart](https://github.com/goofmint/growi-plugin-quickchart), using code tags within GROWI, quickchart as the language, it switches to displaying a graph.

For example, the following is an example of displaying a bar chart.


    ` ` `quickchart
    {
      type: 'bar', data: {`data
      data: {
        labels: [2012, 2013, 2014, 2015, 2016], datasets: [{
        datasets: [{
          label: 'Users', data: { labels: [2012, 2013, 2014, 2015, 2016], datasets: [{ type: 'bar
          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)


## About QuickChart

QuickChart is a service and open source software that generates graphs using URLs; by specifying parameters in the URL, you can specify the type of graph and data.

For example, the bar chart shown earlier is created with the following URL request.

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

In addition to bar graphs, the system supports the display of pie charts, line charts, radar charts, funnel charts, and other common graphs, so it seems to be easy to use.

![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/)

What makes me especially happy is that QuickChart is open source software, and since GROWI is also open source software, if you set it up in-house, you can use it without information going out.

If you set it up yourself, the endpoint URL will change, so you will need to specify the URL with the `url` key. You can also specify the display size with the `width` and `height` keys.

The default is as follows.

    ` ``quickchart
    {
    	url: "https://quickchart.io/chart",
    	width: "100%", height: "auto", height: "auto
    	height: "auto"
    	// Graph information below.
    }
    ` ``

## Plugin Development

When developing a plugin, we use the [template introduced recently](https://qiita.com/goofmint/items/497ea7dd722528cfa0cb) as a base.

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

### Rename

Rename the plugin.

```json
{
	"name": "growi-plugin-quickchart", // change
	"version": "1.0.0", // change
	"description": "GROWI plugin for generate chart/graph", // Change
	:
}
```

Install the libraries needed for plugin development.

```bash
$ yarn
```

### Rename the file.

Rename `src/Hello.tsx` to `src/QuickChart.tsx`. Do not use `src/Hello.css` in this plugin.

### Edit `src/QuickChart.tsx`

In this file, the display process is divided according to the language name specified in the code block. If you specify `quickchart`, you will get the class name `language-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}
      />
    );
  };
};
```

### Editing client-entry.tsx

Edit `client-entry.tsx` to override the processing of `code` tags. This will send all `code` tag-related processing to `QuickChart`.

```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;
  };
};
```

## About the code

This plugin is available at When you use this plugin, please specify `https://github.com/goofmint/growi-plugin-quickchart/` in the GROWI plugin management.

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

## Summary

The GROWI plugin makes it very easy to achieve customization of the display content. This time it is the `code` tag, but you can also customize other tags such as the `img` tag and the `table` tag.

Please develop a plugin and make GROWI more useful!

[GROWI, an OSS development wiki tool | comfortable information sharing for all](https://growi.org/ja/)