How to build a functional component tailored to your needs.
In-depth components step-by-step
After reading this article you’ll know:
- How to build a pie chart component
- How to use external dependencies
- How to add different fields to the prefab
Pre-requisites
To create and update your content you need to understand the syntax and logic of the following coding languages and libraries:
- Javascript (ES6)
- React
- You have read our ‘Creating a custom component’ article
We recommend using Visual Studio Code as your code editor to create custom components and steps as this is what we use in our guides.
We will use the following code as our starting point to make a pie chart. If you haven’t done it already, check out the tutorial on how to make this basic component. This will also show how to set up a new component here.
To make a pie chart, we are going to use “Dependencies.” Dependencies are custom packages we can put into our code. These are new tags you can add to the JSX section to show new elements normal HTML doesn’t support.
Adding dependenciesTo load in a pie chart we are going to use Recharts. Recharts offers a list of different types of charts we can use by simply adding it to our component javascript file:
dependencies: [
{
label: 'Recharts',
package: 'npm:recharts@2.15.0',
imports: [
'PieChart',
'Pie',
'Cell',
'ResponsiveContainer'
],
},
],
Here we are importing the Recharts package and all of the elements we want to use later on which are listed inside the “imports” array.
For a full list of imports visit the Recharts site.
Now we have imported the needed elements, we want to add them to our JSX.
We will remove the current JSX and replace it with:
jsx: (
<div className={classes.root}>
{(() => {
const { Recharts:
{
PieChart,
Pie,
Cell,
ResponsiveContainer
}
} = dependencies;
})()}
</div>
),
We took the imported elements and put them into a constant, which allows us to use them as HTML tags. But before we do that, we need to insert values into our chart, and the way to do that is inside the prefab.
Updating prefab
At the moment, our prefab consists of a text field, but our chart needs numbers. To change our text input to a number input simply change the type: “TEXT” to type: “VALUE” and change our value to 1. After changing our label and key to something more suitable the prefab should look something like this:
If you save the changes using the terminal (npm run dev) and check our prefab you’ll see that we have changed our input field to numbers.
Our component isn't showing anything yet, to open it, access the component tree and double-click the component.
We can go back to the component and add the input field data to a new constant.
const data01 = [
{
"name": "Group A",
"value": options.amount
}
];
Creating the pie chart
With the prefab ready we can now add the pie chart, using the code available at recharts.org, we can enter the following in our jsx:
return (
<ResponsiveContainer width="100%" height={300}>
<PieChart width={730} height={250}>
<Pie data={data01} dataKey="value"
cx="50%"
cy="50%"
outerRadius={80}
fill="#82ca9d"
label />
</PieChart>
</ResponsiveContainer>
);
You might have noticed that these are all tags we have imported in the first step.
First, we define a responsive container, then the pie chart itself with the given size. Inside is a <Pie>, this is where we can add our data, we can copy this to add more slices but more on that later.
If we go back to our website and add our component to the page we’ll see our pie chart, and if we change the value in our previously created input field it will also change the value showing in the chart.
Note: Every time you change your code, your page needs to be refreshed and a new component needs to be added to the canvas to show changes.
But this chart isn’t showing much so we want to add another value.
Simply copy and paste the previous prefab to make another input field and change the key.
structure: [
{
name: "text",
options: [
{
label: "Amount",
key: "amount",
value: 1,
type: "NUMBER"
},
{
type: 'COLOR',
label: 'Color',
key: 'color',
value: 'Primary'
},
],
descendants: []
}
]
And in our jsx, we can easily add it to our “data01” constant.
const data01 = [
{
"value": options.amount
},
{
"value": options.amount1
}
];
If we test the component again we’ll see two values instead of one, and if we change one of the values the chart will change with it.
There is still one element we haven’t used yet: <Cell>.
With <Cell> we can change the color of the chart, if we take our <Pie> and put <Cell> inside of it twice, we can give two colors to the chart, one for every slice.
return (
<ResponsiveContainer width="100%" height={300}>
<PieChart width={730} height={250}>
<Pie data={data01} dataKey="value"
cx="50%"
cy="50%"
outerRadius={80}
label>
<Cell fill={fillColor} />
<Cell fill={fillColor1} />
</Pie>
</PieChart>
</ResponsiveContainer>
);
Result:
To make it more customizable, we are going to add a color selector, back in the prefab we will add two elements with the type ‘COLOR’ and give them a unique key.
Now our options array looks like this:
{
label: "Amount",
key: "amount",
value: 1,
type: "NUMBER"
},
{
type: 'COLOR',
label: 'Color',
key: 'color',
value: 'Primary'
},
{
label: "Amount",
key: "amount1",
value: 1,
type: "NUMBER"
},
{
type: 'COLOR',
label: 'Color',
key: 'color1',
value: 'Primary'
},
Back in our component, we are going to give every color its color code by making a new constant inside of the JSX:
const styleColorMap = {
White: '#FFFFFF',
Light: '#F8F9FA',
Medium: '#B0B0B0',
Dark: '#343A40',
Black: '#000000',
Primary: '#007BFF',
Secondary: '#6C757D',
Success: '#28A745',
Info: '#17A2B8',
Warning: '#FFC107',
Danger: '#DC3545',
Accent1: '#FFD700',
Accent2: '#FF69B4',
Accent3: '#FF4500',
};
After that to select the right color, we are going to call this constant inside of another constant, and filter it using our selector:
const fillColor = styleColorMap[options.color] || '#000000';
const fillColor1 = styleColorMap[options.color1] || '#000000';
The two || are there to prevent any errors if the given color cannot be found. Options.color consists of one of the words inside of the styleColorMap, this is how the corresponding color code is filtered.
To finish things off, simply change the value inside <Cell> to our two new constants “fillColor”:
<Cell fill={fillColor} />
<Cell fill={fillColor1} />
Full final code:
Component:
(() => ({
name: 'text',
type: 'BODY_COMPONENT',
allowedTypes: [],
orientation: 'HORIZONTAL',
dependencies: [
{
label: 'Recharts',
package: 'npm:recharts@2.15.0',
imports: [
'PieChart',
'Pie',
'Cell',
'ResponsiveContainer'
],
},
],
jsx: (
<div className={classes.root}>
{(() => {
const { Recharts: {
PieChart,
Pie,
Cell,
ResponsiveContainer
} } = dependencies;
const styleColorMap = {
White: '#FFFFFF',
Light: '#F8F9FA',
Medium: '#B0B0B0',
Dark: '#343A40',
Black: '#000000',
Primary: '#007BFF',
Secondary: '#6C757D',
Success: '#28A745',
Info: '#17A2B8',
Warning: '#FFC107',
Danger: '#DC3545',
Accent1: '#FFD700',
Accent2: '#FF69B4',
Accent3: '#FF4500',
};
const fillColor = styleColorMap[options.color] || '#000000';
const fillColor1 = styleColorMap[options.color1] || '#000000';
const data01 = [
{ "value": options.amount },
{ "value": options.amount1 }
];
return (
<ResponsiveContainer width="100%" height={300}>
<PieChart width={730} height={250}>
<Pie data={data01} dataKey="value"
cx="50%"
cy="50%"
outerRadius={80}
label>
<Cell fill={fillColor} />
<Cell fill={fillColor1} />
</Pie>
</PieChart>
</ResponsiveContainer>
);
})()}
</div>
),
styles: B => theme => {
const style = new B.Styling(theme);
return {
root: {
}
};
},
}))();
Prefab:
(() => ({
name: "Hello World",
icon: "TitleIcon",
category: "CONTENT",
structure: [
{
name: "text",
options: [
{
label: "Amount",
key: "amount",
value: 1,
type: "NUMBER"
},
{
type: 'COLOR',
label: 'Color',
key: 'color',
value: 'Primary'
},
{
label: "Amount",
key: "amount1",
value: 1,
type: "NUMBER"
},
{
type: 'COLOR',
label: 'Color',
key: 'color1',
value: 'Primary'
},
],
descendants: []
}
]
}))();
It’s time to test the chart, if you’ve done everything right, you should be able to select the color inside of the prefab and change the looks of the pie chart.
The final result is a pie chart of which you can choose the values and colors. With this you now have more insight in creating custom components, the next step is to create your own custom components!