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.
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.
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
Top comments (0)