72fa067550
* Updated the formatting of how to docs for the next and current versions * Used the title cases in the heading * Updated the formatting of how to docs for the next and current versions * Used the title cases in the heading * updated the formatting of inspector, form, cell colors * resolved conflicts * Updated the formatting of bulk update multiple rows, conditionaly format table, delete multiple rows, serverside pagination * Updated access user groups, import external lib in js and python, use axios * fix: border colour, blur * Revert changes to versions.json * Changed the formatting of how to docs * add changes from docs/next to v2.34.0 * update: how to docs * fix: image name create-new-query * fix: image name import-successful.png * fix: image name flatten-js * fix: image name math-js-v2 * update: shorten page titles --------- Co-authored-by: Asjad Ahmed Khan <iitasjad2001@gmail.com> Co-authored-by: Karan Rathod <karan.altcampus@gmail.com>
8.5 KiB
| id | title |
|---|---|
| use-events-on-chart | Use Events on Chart |
Currently, the chart component does not support events. However, you can use the Custom Component to create a chart using a third-party library that supports events. Plotly is one of the libraries that supports events. In this tutorial, we will build a chart using Plotly and add events to it.
Step 1: Add a Custom Component
Open the App Builder and add a Custom Component to the page. Then, click on the Custom Component to open the Properties panel.
Note: If you are not familiar with the Custom Component, please read the Custom Component doc.
Step 2: Add the Code to the Custom Component
import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
import Plotly from 'https://cdn.skypack.dev/plotly.js-basic-dist-min';
import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/factory';
const MyCustomComponent = ({data, updateData, runQuery}) => {
const Plot = createPlotlyComponent(Plotly);
const barOnClick = ({points}) => {
alert('A bar is clicked')
}
return (
<Container>
<Plot data={[
{
"name": "Inbound",
"type": "bar",
"x": [
20,
14,
23,
22,
30,
12,
15,
26,
31,
16,
18,
29
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(55, 128, 191, 1.0)",
"width": 1
},
"color": "rgba(55, 128, 191, 0.6)"
},
"orientation": "h"
},
{
"name": "Outbound",
"type": "bar",
"x": [
12,
18,
29,
22,
14,
23,
15,
23,
26,
13,
27,
12
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(255, 153, 51, 1.0)",
"width": 1
},
"color": "rgba(255, 153, 51, 0.6)"
},
"orientation": "h"
}
]}
layout={{
width: 840,
height: 800,
title: "Tickets Resolved: Inbound & Outbound",
showlegend: false,
}}
onClick={barOnClick}
/>
</Container>
)}
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);
Let's understand the code above in detail. First, we imported the required libraries.
import React from 'https://cdn.skypack.dev/react'; // React library
import ReactDOM from 'https://cdn.skypack.dev/react-dom'; // React DOM library
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core'; // Material UI library
import Plotly from 'https://cdn.skypack.dev/plotly.js-basic-dist-min'; // Plotly library
import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/factory'; // Plotly React library
Then, we created a function component called MyCustomComponent. This component will render the chart. We use the createPlotlyComponent function to create a Plotly component. Then, we create a function called barOnClick that will be called when the user clicks on the bar. This function will display an alert message.
const MyCustomComponent = ({data, updateData, runQuery}) => { // function component
const Plot = createPlotlyComponent(Plotly); // create a Plotly component
const barOnClick = ({points}) => { // function that will be called when the user clicks on the bar
alert('A bar is clicked') // display an alert message
}
Next, we render the chart using the Plot component. We pass the data and layout to the Plot component. We also pass the barOnClick function to the onClick prop of the Plot component.
return ( // return the Plot component
<Container> // Material UI Container component
<Plot data={[ // Plot component
{ // data for the first bar
"name": "Inbound",
"type": "bar",
"x": [
20,
14,
23,
22,
30,
12,
15,
26,
31,
16,
18,
29
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(55, 128, 191, 1.0)",
"width": 1
},
"color": "rgba(55, 128, 191, 0.6)"
},
"orientation": "h"
},
{ // data for the second bar
"name": "Outbound",
"type": "bar",
"x": [
12,
18,
29,
22,
14,
23,
15,
23,
26,
13,
27,
12
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(255, 153, 51, 1.0)",
"width": 1
},
"color": "rgba(255, 153, 51, 0.6)"
},
"orientation": "h"
}
]}
layout={{ // layout for the chart
width: 840,
height: 800,
title: "Tickets Resolved: Inbound & Outbound",
showlegend: false,
}}
onClick={barOnClick} // pass the barOnClick function to the onClick prop
/>
</Container>
)}
Finally, we render the MyCustomComponent component using the ReactDOM.render function.
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent); // connect the component to the Tooljet store
ReactDOM.render(<ConnectedComponent />, document.body); // render the component
Step 3: Using Events from the Custom Component
In the code above, we created a function called barOnClick that will be called when the user clicks on the bar. This function holds the code that will be executed when the user clicks on the bar.
const barOnClick = ({points}) => {
alert('A bar is clicked')
}
Instead of displaying an alert message, you can use the runQuery function to run a query.
const barOnClick = ({points}) => {
runQuery('queryName')
}
runQuery is a function which accepts a query name as a string used to run the query from the custom component. Learn more about the custom component here.