Justin Slabbert

Developer gelstudios.co.uk
๐Ÿงช

Charts and Graphs in Draftbit

๐Ÿงช
Hi all,

I have seen a few posts about how to integrate charts and graphs in Draftbit and so I thought I could give a quick walkthrough of how to do it.

An awesome library that I use is called 'react-native-svg-charts'. However, you can use whichever charting library you want by just adapting this approach.

To integrate, I included the package under Custom Code - Packages.
๏ปฟ
๏ปฟOnly the last package is relevant for this snippet.

After the package has been added, the next step is to declare the component by selecting Components in the same screen.๏ปฟ
๏ปฟ
I called my component BarChartComponent but you can call this whatever you would like. Add the new component function like so:
export function BarChartComponent() {
return (
        <View style={{ height: 200, padding: 20 }}>
        </View>
    );
}
Essentially, the above gives you an empty view that is 200 high but is blank. It is just a building block for now while we integrate into the UI.

On the front end in the UI, you can then add a custom code component from the insert component tool box:
๏ปฟ
๏ปฟ
Then in the Custom JSX input that appears when you add this component, you can add in the name of our custom component with CustomCode as the root object like so:
<CustomCode.BarChartComponent />
That is all from the UI side and now we can go back to the custom code we were busy with earlier.

It is time to include the package that we first added. Open Custom Code and select Components again. Then at the top of script, add the following:
import { BarChart, Grid, XAxis } from 'react-native-svg-charts';
This allows us to call bar charts, grid and X Axis components from this package.

Once added, scroll down to the component code that has our view placeholder in add the following before the return:
const fill = 'rgb(120, 50, 120)';
const data = [5, 3, 4, 4, 4, 2, 1];
The fill variable is a nice purple color that will be what we use to fill in our bars. You can adjust as you see fit.

The data variable is just some static data that will populate our graph with bars.

Then, under the return, let's change the view to include a bar chart with a grid inside by adding the following child to the <View>.
            <BarChart 
                style={{ height: 200 }} 
                data={data} 
                svg={{ fill }} 
                contentInset={{ top: 30, bottom: 30 }}
                >
                <Grid />
            </BarChart>
To add labels on to the X Axis, you can then add an X Axis component into the <View> like so:
<XAxis
    style={{ marginHorizontal: -10 }}
    data={data}
    formatLabel={(value, index) => index+1}
    contentInset={{ left: 10, right: 10 }}
    svg={{ fontSize: 14, fill: 'black' }}
/>
Here we populate the data with our data variable from earlier. Since this was only a simple array, I chose to use the array key as the label I also like to start my index label from 1 instead of 0 and so I just add on 1 for kicks. This is handled in the formatLabel function. I also set the font to 14pt and black.

Your component should now look like this:
export function BarChartComponent() {

    const fill = 'rgb(120, 50, 120)';
    const data = [5, 3, 4, 4, 4, 2, 1];

    return (
        <View style={{ height: 200, padding: 20 }}>
            <BarChart 
                style={{ height: 200 }} 
                data={data} 
                svg={{ fill }} 
                contentInset={{ top: 30, bottom: 30 }}
                >
                <Grid />
            </BarChart>
            <XAxis
                style={{ marginHorizontal: -10 }}
                data={data}
                formatLabel={(value, index) => index+1}
                contentInset={{ left: 10, right: 10 }}
                svg={{ fontSize: 14, fill: 'black' }}
            />
        </View>
    );
}
What we have done here is to specifically add in the BarChart to our view, then add a grid to this chart and followed up with an X axis label of the index of our data array.

If all is configured correctly. You should be able to go preview your new bar chart!

It should like like this:๏ปฟ
๏ปฟ
You could integrate almost any type of chart this way. I have tried Pie Charts and Line graphs as well.ย 

If you want to pull in your own data and not have it static, then just add it as a prop into the component and set your data accordingly.
Like Comment

How to convert Date from Firebase Into Draftbit Readable

๐Ÿงช
Hi guys,

I thought I would post this as a how to for people in case they get stuck.

๏ปฟ Nick Selman ๏ปฟ gave a really great tutorial on how to transform data, however, for Firebase, you sometimes would need to convert dates to readable format as it stores in Epoch format. To do this with Draftbit, I found that you need to transform the data but not worry about the firebase functions that exist and rather use pure existing javascript functionality.
๏ปฟ
๏ปฟHere is the code. It can be simplified but I wanted to give a full breakdown.
originalDate = userDate;
dateConverted = userDate * 1000;
convertedDate = new Date(parseInt(dateConverted)).toLocaleDateString("en-US");
return convertedDate;
I found that no matter if you choose toSeconds or toMiliseconds in Draftbit for the variable, it still uses miliseconds in the custom code. Make sure to multiply by 1000.

Remember to set your transform with to your new function wherever you are using it.

This returns the date into mm/dd/yy format. You can change your locale string to whatever you would like.

Hope this helps someone else.
Like Comment

Firebase variables in other view components

๐Ÿงช
Hi there,

Has anyone tried using firebase variables in other components? For instance, I have a videoUrl field in my document and I want to pass that on to a Video view component. Or a linkUrl in my document that I could pass onto a webview component. My current idea to solve would be Custom Code but it would be cool to be able to just use {{videoUrl}} or {{linkUrl}} in the component url input.