Created a plugin to display graphs and charts in GROWI

GROWI, 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, 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]
    }]
  }
}
` ` `

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.

Chart Types | QuickChart

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 as a base.

goofmint/growi-plugin-script-template: this is a template for creating a GROWI script plugin.

Rename

Rename the plugin.

{
    "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.

$ 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.

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.

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/

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