mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 17:08:34 +00:00
Merge branch 'develop' into merge-dev/main
This commit is contained in:
gsmithun4
commit
464cdaf29b
42 changed files with 1420 additions and 257 deletions
|
|
@ -3,7 +3,7 @@ id: gitsync
|
|||
title: GitSync
|
||||
---
|
||||
|
||||
GitSync feature allows users to synchronize the applications on their workspace with a git repository. GitSync feature simplifies the process of managing and version controlling your applications on ToolJet.
|
||||
The GitSync feature enables synchronization of workspace applications with a git repository, streamlining application management and version control on ToolJet.
|
||||
|
||||
## Overview
|
||||
|
||||
|
|
|
|||
|
|
@ -1,115 +1,64 @@
|
|||
---
|
||||
id: access-cellvalue-rowdata
|
||||
title: Change text color in columns of the table
|
||||
title: Dynamically change cell colors in table
|
||||
---
|
||||
|
||||
# Change text color in columns by accessing `cellValue` and `rowData` in the table
|
||||
# Dynamically Change Cell Colors In Table Component
|
||||
|
||||
In this how-to guide, we will build an app that will use a sample RestAPI to display the data in the table, and then we will change the text color of the columns according to the condition.
|
||||
This guide shows how to change the text color and background color of certain cells in a Table component based on specific conditions.
|
||||
|
||||
- Let's start by creating a new application and then adding a table widget into the canvas.
|
||||
## 1. Start by Creating a New Application and Setting up the Data Source
|
||||
- Create a new app and add a **[Table](/docs/widgets/table)** component to the canvas.
|
||||
- Open the Query Panel at the bottom and click on the `+ Add` button.
|
||||
- Select REST API as your data source - your query will be named as restapi1 by default.
|
||||
- Choose GET method and enter the below URL:
|
||||
```
|
||||
https://fakestoreapi.com/products
|
||||
```
|
||||
- To view the data that your query will return, click on the **Preview** button. Click on the **Run** button to execute the query and retrieve the data.
|
||||
|
||||
## 2. Display Data on the Table
|
||||
|
||||
- Hide the Query Panel and click on the Table component to open its configuration panel on the right.
|
||||
- Under Table Data, enter the below code:
|
||||
```
|
||||
{{queries.restapi1.data}}
|
||||
```
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
<img style={{ border:'0' }} className="screenshot-full" src="/img/how-to/change-text-color/table-with-data.png" alt="Table Component With Data" />
|
||||
</div>
|
||||
|
||||
- Now go to the **Query Panel** at the bottom of the app editor and click on the `+` button.
|
||||
- Choose **RestAPI** data source
|
||||
## 3. Change Text Color Based on Cell Value
|
||||
|
||||
- Select the Table component and go to Columns.
|
||||
- For the `category` column, paste the below code under Text Color to dynamically change the text color based on the value of the cell:
|
||||
|
||||
```
|
||||
{{cellValue == 'electronics' ? 'red' : 'green'}}
|
||||
```
|
||||
|
||||
Now, if the cell value is `electronics`, the text color will be red; otherwise, it will be green.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/change-text-color/conditional-text-color.png" alt="Conditional Text Color" />
|
||||
</div>
|
||||
|
||||
- Now we will use a sample RestAPI endpoint - I have used the API provided by **coinstats.app**, API-URL:
|
||||
https://api.coinstats.app/public/v1/coins?skip=0&limit=100¤cy=USD
|
||||
- Choose `GET` method, enter the request URL (API URL in previous step), name the query - I have named it `crypto`, and then **Create** the query
|
||||
<i>You can use also Hex color codes for more color options.</i>
|
||||
|
||||
## 4. Change Text Color Using Row Data
|
||||
|
||||
- Under Cell Background Color for the `symbol` column, paste the below code:
|
||||
|
||||
```
|
||||
{{rowData.price < 100? 'yellow': 'white'}}
|
||||
```
|
||||
|
||||
The rowData identifier can be utilized to reference values from any column within the Table component.
|
||||
|
||||
Now if the value in the price column is lesser than 100, the cell background color will be yellow or else it will be white.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/change-text-color/conditional-background-color.png" alt="Conditional Background Color" />
|
||||
</div>
|
||||
|
||||
- Now hit the **Run** button next to the query name to run the query.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Once you run the query, you can check the data returned by the query in the **Inspector** on the left sidebar.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Now that we have got the data, we will display it on the table. To do this, click on the widget handle of the table to open its properties in the right sidebar.
|
||||
- In the Table Data field, enter `{{queries.crypto.data.coins}}` - as you can see in the screenshot of the inspector the data is inside the `coins` array. You'll see the data in the Preview(green box) below the field.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Let's add the columns that we want to display on the table. Go to the **Columns** section, Add columns, set their Names, and set **key** for each column. I have added 5 columns: **Rank**, **Name**, **Symbol**, **Price**, and **Market Cap**.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Once you've added the columns, you'll get the table like this:
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
### Using cellValue to change column text color
|
||||
|
||||
Now that we have our data on the table, we will change the color of the text in the **Price** and **Market Cap** columns.
|
||||
|
||||
- Edit table properties, go to **Columns**, and click on the Price Column to open its properties.
|
||||
- For **Price** column, we want to change color of those cells who have value which is greater than 1000 to red else to green if it is less than 1000. So to do this, we will set a condition in **Text Color** property of this column: `{{cellValue >= 1000 ? 'red' : 'green'}}`
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Similarly, we will do for **Market Cap** column. We want to change the text color of those cells who have value which is greater than 60000000000 to red else to green if it is less than 60000000000. so the condition will be `{{cellValue >= 60000000000 ? 'red' : 'green'}}`
|
||||
- Now the text color of cells in the columns will be updated.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
:::info
|
||||
You can also use Hex Color Code instead of mentioning color in plane text.
|
||||
:::
|
||||
|
||||
### Using rowData to change column text color
|
||||
|
||||
- To change the color of the text using `rowData` variable it is required to mention the column name whose cell value we will be comparing in the condition. Let's take a look by changing the text color of **Symbol** column.
|
||||
- We will add a condition to look in the row data and if the row has column called `name` which has value `Solana` then it should change the color to red else the color should be green.
|
||||
- Edit the properties of the Symbol column, set the **Text Color** field value to `{{rowData.name === 'Solana' ? 'red' : 'green'}}`.
|
||||
- You'll see that in the Symbols column all the values has become green except the one that has Solana in Name column.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
You can use the above methods to change the text and background colors of a cell dynamically.
|
||||
|
|
@ -1,45 +1,113 @@
|
|||
---
|
||||
id: loading-image-pdf-from-db
|
||||
title: Loading image/PDF from base64 string
|
||||
title: Upload and view images and PDFs using base64 string
|
||||
---
|
||||
|
||||
In this how-to guide we will see how we can load an image or PDF file using the base64 string available on the database. In this how-to, we have used the postgres database which already has the base64 strings for the image or the PDF files available.
|
||||
This guide shows how to upload and view images and PDFs using the base64 string format.
|
||||
|
||||
- Let's drag a **filepicker** component onto the canvas, and pick one image and one pdf file
|
||||
<div style={{textAlign: 'center'}}>
|
||||
## 1. Start by Creating a New Table In ToolJet Database
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/filepicker.png" alt="Loading image from base64 string" width="700" />
|
||||
- Create a new table named *testDB*.
|
||||
- The `id` field will be present by default to create a unique identifier for each record in our database table.
|
||||
- Click on **Add more columns** button and add two more columns: `pdf` and `image`.
|
||||
- Select `varchar` as datatype for the pdf and image columns.
|
||||
|
||||
</div>
|
||||
<i>While we are using the ToolJet Database for this guide; feel free to use other databases while applying the same principles.</i>
|
||||
|
||||
- Now, create a query for inserting an image from the filepicker. As you can see in the screenshot below, we are using the **exposed variable** of the filepicker component to retrieve the **base64** data of the uploaded files.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/create-new-table.png" alt="New Table" />
|
||||
</div>
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/insert.png" alt="Loading image from base64 string" width="500"/>
|
||||
## 2. Upload Files To The Database
|
||||
|
||||
</div>
|
||||
- Create a new application and name it *Load PDF And Images Example*.
|
||||
- Drag and drop two **[Filepicker](/docs/widgets/file-picker)** components on the canvas from the components library on the right.
|
||||
- Rename the first Filepicker component to *imagePicker* and second Filepicker to *pdfPicker*.
|
||||
|
||||
- Create another query for returning the data from the database and we will use this base64 data returned in this query to display on the image and pdf components.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/filepickers-rename.png" alt="Rename Filepickers" />
|
||||
</div>
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/get.png" alt="Loading image from base64 string" width="500"/>
|
||||
- For *pdfPicker*, change the **Accept file types** property to `{{"pdf/*"}}` - this ensures that the Filepicker only accepts PDF files.
|
||||
|
||||
</div>
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf-accepted-file-type.png" alt="Accepted File Type Settings" />
|
||||
</div>
|
||||
|
||||
- Drag the image and a PDF component on the canvas. Edit the property of the PDF component and in the **file URL** enter:
|
||||
```js
|
||||
{{'data:image/png;base64,' + queries.get.data[7].pdf}}
|
||||
```
|
||||
Similarly for the image component:
|
||||
```js
|
||||
{{'data:image/jpeg;base64,' + queries.get.data[7].image}}
|
||||
```
|
||||
<div style={{textAlign: 'center'}}>
|
||||
- Retain the default `{{"image/*"}}` setting for the Accept file types property in the *imagePicker* component, as it's intended for image uploads.
|
||||
- Click on the *imagePicker* component and select an image to upload. Similarly, upload a PDF using the *pdfPicker* component.
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf.png" alt="Loading image from base64 string" />
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/filepickers-with-uploaded-files.png" alt="Uploaded Files" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
- After uploading, you will see the filenames displayed on their respective Filepicker components.
|
||||
- Click on the **+ Add** button in the query panel to create a new query, choose Tooljet Database as the data source, select `testDB` as Table name, and `Create Row` as Operations. Name this query *uploadFiles*.
|
||||
- Under the Columns section, add two columns - `pdf` and `image`.
|
||||
- Set the below value for the `pdf` column:
|
||||
```js
|
||||
{{components.pdfPicker.file[0].base64Data}}
|
||||
```
|
||||
- Similarly, for the `image` column:
|
||||
```js
|
||||
{{components.imagePicker.file[0].base64Data}}
|
||||
```
|
||||
|
||||
:::info
|
||||
<i>In the above query, we are using the <b>exposed variables</b> of both Filepicker components to get the base64 strings of the files we had uploaded earlier.</i>
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/add-files-query.png" alt="Add Files Query" />
|
||||
</div>
|
||||
|
||||
- Add a **[Button](/docs/widgets/button)** component below the Filepickers and rename it to *upload*.
|
||||
- Set the Button's text to *Upload* and create a **New event handler** with the following settings: Event - `On click`, Action - `Run Query` and Query - `uploadFiles`.
|
||||
- Click on the *upload* button to upload the files that we had selected in the Filepicker components earlier.
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/upload-button-properties.png" alt="Upload Button Properties" />
|
||||
</div>
|
||||
|
||||
The upload process is now complete. Whenever files are selected in the Filepicker components and the *upload* button is clicked, the base64 strings of these files will be automatically written to the database.
|
||||
|
||||
## 3. View Image and PDF Files
|
||||
|
||||
- Create a query named *getFiles* to retrieve base64 strings from testDB: Click on **+ Add** button in the query panel, select Tooljet as Database, `testDB` as Table name, and `List rows` as Operations.
|
||||
- Enable **Run this query on application load?** and click on the **Run** button to run the getFiles query.
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/fetch-files-query.png" alt="Fetch Files Query" />
|
||||
</div>
|
||||
|
||||
- Drag an **[Image](/docs/widgets/image)** and a **[PDF](/docs/widgets/pdf)** component on the canvas from the components library. Rename the **Image** component to *displayImage* and the **PDF** component to *displayPDF*.
|
||||
- In the **URL** property of the **displayImage** component, enter:
|
||||
```js
|
||||
{{'data:image;base64,' + queries.getFiles.data[0].image}}
|
||||
```
|
||||
|
||||
- Let's apply the same logic for the **displayPDF** component and enter the below value in the **File URL** property:
|
||||
|
||||
```js
|
||||
{{'data:pdf;base64,' + queries.getFiles.data[0].pdf}}
|
||||
```
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf-with-fileURL.png" alt="PDF Component With File URL" />
|
||||
</div>
|
||||
|
||||
<i>The provided code constructs a Data URL to display the base64-encoded data as an image or PDF.</i>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Here's what our final interface will look like:
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf-image-view.png" alt="Final Preview" />
|
||||
</div>
|
||||
|
||||
<i>
|
||||
You can also use transformations in the query response and concat `data:image/jpeg;base64,` to the base64 data.
|
||||
:::
|
||||
</i>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Using the above logic, you can upload and view files in ToolJet using the base64 data.
|
||||
277
docs/docs/how-to/use-events-on-chart.md
Normal file
277
docs/docs/how-to/use-events-on-chart.md
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
---
|
||||
id: use-events-on-chart
|
||||
title: 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.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img style={{ border:'0'}} className="screenshot-full" src="/img/how-to/events-chart/plotly-chart.png" alt="Plotly Chart" />
|
||||
</div>
|
||||
|
||||
## 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](/docs/widgets/custom-component/) doc.
|
||||
|
||||
## Step 2: Add the code to the Custom Component
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
const barOnClick = ({points}) => {
|
||||
alert('A bar is clicked')
|
||||
}
|
||||
```
|
||||
|
||||
Instead of displaying an alert message, you can use the `runQuery` function to run a query.
|
||||
|
||||
```js
|
||||
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](/docs/widgets/custom-component/).
|
||||
|
|
@ -120,6 +120,10 @@ You can refer to the [JSON Chart Schema](https://plotly.com/chart-studio-help/js
|
|||
|
||||
</div>
|
||||
|
||||
:::tip Using events on chart
|
||||
Currently, the chart component does not support events. However, you can use the Custom Component using Plotly and add events to it. Check out the [How to use events on chart](/docs/how-to/use-events-on-chart) to learn more.
|
||||
:::
|
||||
|
||||
### Bar Mode
|
||||
|
||||
The **Bar Mode** option allows you to customize the layout and display style specifically for bar charts. This option becomes available when the **Plotly JSON chart schema** toggle is enabled and a JSON schema specific to bar charts is provided. This option provide different modes for organizing and presenting bars within the chart.
|
||||
|
|
|
|||
|
|
@ -102,7 +102,8 @@ module.exports = {
|
|||
],
|
||||
},
|
||||
],
|
||||
copyright: `Copyright © ${new Date().getFullYear()} ToolJet Solutions, Inc.`,
|
||||
copyright: `Copyright © ${new Date().getFullYear()} ToolJet Solutions, Inc.
|
||||
<img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=4f00afac-ae1f-4cf6-8c53-8a2c7b3ca206" />`,
|
||||
},
|
||||
algolia: {
|
||||
appId: 'O8HQRLI0WA',
|
||||
|
|
|
|||
|
|
@ -385,6 +385,7 @@ const sidebars = {
|
|||
'how-to/upload-files-aws',
|
||||
'how-to/upload-files-gcs',
|
||||
'how-to/loading-image-pdf-from-db',
|
||||
'how-to/use-events-on-chart',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
BIN
docs/static/img/gitsync/connect.png
vendored
BIN
docs/static/img/gitsync/connect.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 366 KiB After Width: | Height: | Size: 363 KiB |
BIN
docs/static/img/gitsync/deleteconfig.png
vendored
BIN
docs/static/img/gitsync/deleteconfig.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 362 KiB |
BIN
docs/static/img/gitsync/git2.png
vendored
BIN
docs/static/img/gitsync/git2.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 373 KiB After Width: | Height: | Size: 361 KiB |
BIN
docs/static/img/gitsync/git5.png
vendored
BIN
docs/static/img/gitsync/git5.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 364 KiB After Width: | Height: | Size: 362 KiB |
BIN
docs/static/img/gitsync/gitsync.png
vendored
BIN
docs/static/img/gitsync/gitsync.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 269 KiB After Width: | Height: | Size: 268 KiB |
BIN
docs/static/img/gitsync/modalgit.png
vendored
BIN
docs/static/img/gitsync/modalgit.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 441 KiB After Width: | Height: | Size: 381 KiB |
BIN
docs/static/img/how-to/change-text-color/conditional-background-color.png
vendored
Normal file
BIN
docs/static/img/how-to/change-text-color/conditional-background-color.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 603 KiB |
BIN
docs/static/img/how-to/change-text-color/conditional-text-color.png
vendored
Normal file
BIN
docs/static/img/how-to/change-text-color/conditional-text-color.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
BIN
docs/static/img/how-to/change-text-color/table-with-data.png
vendored
Normal file
BIN
docs/static/img/how-to/change-text-color/table-with-data.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
BIN
docs/static/img/how-to/events-chart/plotly-chart.png
vendored
Normal file
BIN
docs/static/img/how-to/events-chart/plotly-chart.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
docs/static/img/how-to/load-base64/add-files-query.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/add-files-query.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
docs/static/img/how-to/load-base64/create-new-table.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/create-new-table.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
docs/static/img/how-to/load-base64/fetch-files-query.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/fetch-files-query.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
docs/static/img/how-to/load-base64/filepicker-with-button.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/filepicker-with-button.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
docs/static/img/how-to/load-base64/filepickers-rename.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/filepickers-rename.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
docs/static/img/how-to/load-base64/filepickers-with-uploaded-files.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/filepickers-with-uploaded-files.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
docs/static/img/how-to/load-base64/pdf-accepted-file-type.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/pdf-accepted-file-type.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
BIN
docs/static/img/how-to/load-base64/pdf-image-view.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/pdf-image-view.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
docs/static/img/how-to/load-base64/pdf-with-fileURL.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/pdf-with-fileURL.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
docs/static/img/how-to/load-base64/upload-button-properties.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/upload-button-properties.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
docs/static/img/how-to/load-base64/upload-button.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/upload-button.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
docs/static/img/how-to/load-base64/upload-pdf-image.png
vendored
Normal file
BIN
docs/static/img/how-to/load-base64/upload-pdf-image.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
277
docs/versioned_docs/version-2.23.0/how-to/use-events-on-chart.md
Normal file
277
docs/versioned_docs/version-2.23.0/how-to/use-events-on-chart.md
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
---
|
||||
id: use-events-on-chart
|
||||
title: 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.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img style={{ border:'0'}} className="screenshot-full" src="/img/how-to/events-chart/plotly-chart.png" alt="Plotly Chart" />
|
||||
</div>
|
||||
|
||||
## 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](/docs/widgets/custom-component/) doc.
|
||||
|
||||
## Step 2: Add the code to the Custom Component
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
const barOnClick = ({points}) => {
|
||||
alert('A bar is clicked')
|
||||
}
|
||||
```
|
||||
|
||||
Instead of displaying an alert message, you can use the `runQuery` function to run a query.
|
||||
|
||||
```js
|
||||
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](/docs/widgets/custom-component/).
|
||||
|
|
@ -120,6 +120,10 @@ You can refer to the [JSON Chart Schema](https://plotly.com/chart-studio-help/js
|
|||
|
||||
</div>
|
||||
|
||||
:::tip Using events on chart
|
||||
Currently, the chart component does not support events. However, you can use the Custom Component using Plotly and add events to it. Check out the [How to use events on chart](/docs/how-to/use-events-on-chart) to learn more.
|
||||
:::
|
||||
|
||||
### Bar Mode
|
||||
|
||||
The **Bar Mode** option allows you to customize the layout and display style specifically for bar charts. This option becomes available when the **Plotly JSON chart schema** toggle is enabled and a JSON schema specific to bar charts is provided. This option provide different modes for organizing and presenting bars within the chart.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ id: gitsync
|
|||
title: GitSync
|
||||
---
|
||||
|
||||
GitSync feature allows users to synchronize the applications on their workspace with a git repository. GitSync feature simplifies the process of managing and version controlling your applications on ToolJet.
|
||||
The GitSync feature enables synchronization of workspace applications with a git repository, streamlining application management and version control on ToolJet.
|
||||
|
||||
## Overview
|
||||
|
||||
|
|
|
|||
277
docs/versioned_docs/version-2.24.0/how-to/use-events-on-chart.md
Normal file
277
docs/versioned_docs/version-2.24.0/how-to/use-events-on-chart.md
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
---
|
||||
id: use-events-on-chart
|
||||
title: 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.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img style={{ border:'0'}} className="screenshot-full" src="/img/how-to/events-chart/plotly-chart.png" alt="Plotly Chart" />
|
||||
</div>
|
||||
|
||||
## 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](/docs/widgets/custom-component/) doc.
|
||||
|
||||
## Step 2: Add the code to the Custom Component
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
const barOnClick = ({points}) => {
|
||||
alert('A bar is clicked')
|
||||
}
|
||||
```
|
||||
|
||||
Instead of displaying an alert message, you can use the `runQuery` function to run a query.
|
||||
|
||||
```js
|
||||
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](/docs/widgets/custom-component/).
|
||||
|
|
@ -120,6 +120,10 @@ You can refer to the [JSON Chart Schema](https://plotly.com/chart-studio-help/js
|
|||
|
||||
</div>
|
||||
|
||||
:::tip Using events on chart
|
||||
Currently, the chart component does not support events. However, you can use the Custom Component using Plotly and add events to it. Check out the [How to use events on chart](/docs/how-to/use-events-on-chart) to learn more.
|
||||
:::
|
||||
|
||||
### Bar Mode
|
||||
|
||||
The **Bar Mode** option allows you to customize the layout and display style specifically for bar charts. This option becomes available when the **Plotly JSON chart schema** toggle is enabled and a JSON schema specific to bar charts is provided. This option provide different modes for organizing and presenting bars within the chart.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ id: gitsync
|
|||
title: GitSync
|
||||
---
|
||||
|
||||
GitSync feature allows users to synchronize the applications on their workspace with a git repository. GitSync feature simplifies the process of managing and version controlling your applications on ToolJet.
|
||||
The GitSync feature enables synchronization of workspace applications with a git repository, streamlining application management and version control on ToolJet.
|
||||
|
||||
## Overview
|
||||
|
||||
|
|
|
|||
|
|
@ -1,115 +1,64 @@
|
|||
---
|
||||
id: access-cellvalue-rowdata
|
||||
title: Change text color in columns of the table
|
||||
title: Dynamically change cell colors in table
|
||||
---
|
||||
|
||||
# Change text color in columns by accessing `cellValue` and `rowData` in the table
|
||||
# Dynamically Change Cell Colors In Table Component
|
||||
|
||||
In this how-to guide, we will build an app that will use a sample RestAPI to display the data in the table, and then we will change the text color of the columns according to the condition.
|
||||
This guide shows how to change the text color and background color of certain cells in a Table component based on specific conditions.
|
||||
|
||||
- Let's start by creating a new application and then adding a table widget into the canvas.
|
||||
## 1. Start by Creating a New Application and Setting up the Data Source
|
||||
- Create a new app and add a **[Table](/docs/widgets/table)** component to the canvas.
|
||||
- Open the Query Panel at the bottom and click on the `+ Add` button.
|
||||
- Select REST API as your data source - your query will be named as restapi1 by default.
|
||||
- Choose GET method and enter the below URL:
|
||||
```
|
||||
https://fakestoreapi.com/products
|
||||
```
|
||||
- To view the data that your query will return, click on the **Preview** button. Click on the **Run** button to execute the query and retrieve the data.
|
||||
|
||||
## 2. Display Data on the Table
|
||||
|
||||
- Hide the Query Panel and click on the Table component to open its configuration panel on the right.
|
||||
- Under Table Data, enter the below code:
|
||||
```
|
||||
{{queries.restapi1.data}}
|
||||
```
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
<img style={{ border:'0' }} className="screenshot-full" src="/img/how-to/change-text-color/table-with-data.png" alt="Table Component With Data" />
|
||||
</div>
|
||||
|
||||
- Now go to the **Query Panel** at the bottom of the app editor and click on the `+` button.
|
||||
- Choose **RestAPI** data source
|
||||
## 3. Change Text Color Based on Cell Value
|
||||
|
||||
- Select the Table component and go to Columns.
|
||||
- For the `category` column, paste the below code under Text Color to dynamically change the text color based on the value of the cell:
|
||||
|
||||
```
|
||||
{{cellValue == 'electronics' ? 'red' : 'green'}}
|
||||
```
|
||||
|
||||
Now, if the cell value is `electronics`, the text color will be red; otherwise, it will be green.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/change-text-color/conditional-text-color.png" alt="Conditional Text Color" />
|
||||
</div>
|
||||
|
||||
- Now we will use a sample RestAPI endpoint - I have used the API provided by **coinstats.app**, API-URL:
|
||||
https://api.coinstats.app/public/v1/coins?skip=0&limit=100¤cy=USD
|
||||
- Choose `GET` method, enter the request URL (API URL in previous step), name the query - I have named it `crypto`, and then **Create** the query
|
||||
<i>You can use also Hex color codes for more color options.</i>
|
||||
|
||||
## 4. Change Text Color Using Row Data
|
||||
|
||||
- Under Cell Background Color for the `symbol` column, paste the below code:
|
||||
|
||||
```
|
||||
{{rowData.price < 100? 'yellow': 'white'}}
|
||||
```
|
||||
|
||||
The rowData identifier can be utilized to reference values from any column within the Table component.
|
||||
|
||||
Now if the value in the price column is lesser than 100, the cell background color will be yellow or else it will be white.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/change-text-color/conditional-background-color.png" alt="Conditional Background Color" />
|
||||
</div>
|
||||
|
||||
- Now hit the **Run** button next to the query name to run the query.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Once you run the query, you can check the data returned by the query in the **Inspector** on the left sidebar.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Now that we have got the data, we will display it on the table. To do this, click on the widget handle of the table to open its properties in the right sidebar.
|
||||
- In the Table Data field, enter `{{queries.crypto.data.coins}}` - as you can see in the screenshot of the inspector the data is inside the `coins` array. You'll see the data in the Preview(green box) below the field.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Let's add the columns that we want to display on the table. Go to the **Columns** section, Add columns, set their Names, and set **key** for each column. I have added 5 columns: **Rank**, **Name**, **Symbol**, **Price**, and **Market Cap**.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Once you've added the columns, you'll get the table like this:
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
### Using cellValue to change column text color
|
||||
|
||||
Now that we have our data on the table, we will change the color of the text in the **Price** and **Market Cap** columns.
|
||||
|
||||
- Edit table properties, go to **Columns**, and click on the Price Column to open its properties.
|
||||
- For **Price** column, we want to change color of those cells who have value which is greater than 1000 to red else to green if it is less than 1000. So to do this, we will set a condition in **Text Color** property of this column: `{{cellValue >= 1000 ? 'red' : 'green'}}`
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
- Similarly, we will do for **Market Cap** column. We want to change the text color of those cells who have value which is greater than 60000000000 to red else to green if it is less than 60000000000. so the condition will be `{{cellValue >= 60000000000 ? 'red' : 'green'}}`
|
||||
- Now the text color of cells in the columns will be updated.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
:::info
|
||||
You can also use Hex Color Code instead of mentioning color in plane text.
|
||||
:::
|
||||
|
||||
### Using rowData to change column text color
|
||||
|
||||
- To change the color of the text using `rowData` variable it is required to mention the column name whose cell value we will be comparing in the condition. Let's take a look by changing the text color of **Symbol** column.
|
||||
- We will add a condition to look in the row data and if the row has column called `name` which has value `Solana` then it should change the color to red else the color should be green.
|
||||
- Edit the properties of the Symbol column, set the **Text Color** field value to `{{rowData.name === 'Solana' ? 'red' : 'green'}}`.
|
||||
- You'll see that in the Symbols column all the values has become green except the one that has Solana in Name column.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
You can use the above methods to change the text and background colors of a cell dynamically.
|
||||
|
|
@ -1,45 +1,113 @@
|
|||
---
|
||||
id: loading-image-pdf-from-db
|
||||
title: Loading image/PDF from base64 string
|
||||
title: Upload and view images and PDFs using base64 string
|
||||
---
|
||||
|
||||
In this how-to guide we will see how we can load an image or PDF file using the base64 string available on the database. In this how-to, we have used the postgres database which already has the base64 strings for the image or the PDF files available.
|
||||
This guide shows how to upload and view images and PDFs using the base64 string format.
|
||||
|
||||
- Let's drag a **filepicker** component onto the canvas, and pick one image and one pdf file
|
||||
<div style={{textAlign: 'center'}}>
|
||||
## 1. Start by Creating a New Table In ToolJet Database
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/filepicker.png" alt="Loading image from base64 string" width="700" />
|
||||
- Create a new table named *testDB*.
|
||||
- The `id` field will be present by default to create a unique identifier for each record in our database table.
|
||||
- Click on **Add more columns** button and add two more columns: `pdf` and `image`.
|
||||
- Select `varchar` as datatype for the pdf and image columns.
|
||||
|
||||
</div>
|
||||
<i>While we are using the ToolJet Database for this guide; feel free to use other databases while applying the same principles.</i>
|
||||
|
||||
- Now, create a query for inserting an image from the filepicker. As you can see in the screenshot below, we are using the **exposed variable** of the filepicker component to retrieve the **base64** data of the uploaded files.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/create-new-table.png" alt="New Table" />
|
||||
</div>
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/insert.png" alt="Loading image from base64 string" width="500"/>
|
||||
## 2. Upload Files To The Database
|
||||
|
||||
</div>
|
||||
- Create a new application and name it *Load PDF And Images Example*.
|
||||
- Drag and drop two **[Filepicker](/docs/widgets/file-picker)** components on the canvas from the components library on the right.
|
||||
- Rename the first Filepicker component to *imagePicker* and second Filepicker to *pdfPicker*.
|
||||
|
||||
- Create another query for returning the data from the database and we will use this base64 data returned in this query to display on the image and pdf components.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/filepickers-rename.png" alt="Rename Filepickers" />
|
||||
</div>
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/get.png" alt="Loading image from base64 string" width="500"/>
|
||||
- For *pdfPicker*, change the **Accept file types** property to `{{"pdf/*"}}` - this ensures that the Filepicker only accepts PDF files.
|
||||
|
||||
</div>
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf-accepted-file-type.png" alt="Accepted File Type Settings" />
|
||||
</div>
|
||||
|
||||
- Drag the image and a PDF component on the canvas. Edit the property of the PDF component and in the **file URL** enter:
|
||||
```js
|
||||
{{'data:image/png;base64,' + queries.get.data[7].pdf}}
|
||||
```
|
||||
Similarly for the image component:
|
||||
```js
|
||||
{{'data:image/jpeg;base64,' + queries.get.data[7].image}}
|
||||
```
|
||||
<div style={{textAlign: 'center'}}>
|
||||
- Retain the default `{{"image/*"}}` setting for the Accept file types property in the *imagePicker* component, as it's intended for image uploads.
|
||||
- Click on the *imagePicker* component and select an image to upload. Similarly, upload a PDF using the *pdfPicker* component.
|
||||
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf.png" alt="Loading image from base64 string" />
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/filepickers-with-uploaded-files.png" alt="Uploaded Files" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
- After uploading, you will see the filenames displayed on their respective Filepicker components.
|
||||
- Click on the **+ Add** button in the query panel to create a new query, choose Tooljet Database as the data source, select `testDB` as Table name, and `Create Row` as Operations. Name this query *uploadFiles*.
|
||||
- Under the Columns section, add two columns - `pdf` and `image`.
|
||||
- Set the below value for the `pdf` column:
|
||||
```js
|
||||
{{components.pdfPicker.file[0].base64Data}}
|
||||
```
|
||||
- Similarly, for the `image` column:
|
||||
```js
|
||||
{{components.imagePicker.file[0].base64Data}}
|
||||
```
|
||||
|
||||
:::info
|
||||
<i>In the above query, we are using the <b>exposed variables</b> of both Filepicker components to get the base64 strings of the files we had uploaded earlier.</i>
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/add-files-query.png" alt="Add Files Query" />
|
||||
</div>
|
||||
|
||||
- Add a **[Button](/docs/widgets/button)** component below the Filepickers and rename it to *upload*.
|
||||
- Set the Button's text to *Upload* and create a **New event handler** with the following settings: Event - `On click`, Action - `Run Query` and Query - `uploadFiles`.
|
||||
- Click on the *upload* button to upload the files that we had selected in the Filepicker components earlier.
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/upload-button-properties.png" alt="Upload Button Properties" />
|
||||
</div>
|
||||
|
||||
The upload process is now complete. Whenever files are selected in the Filepicker components and the *upload* button is clicked, the base64 strings of these files will be automatically written to the database.
|
||||
|
||||
## 3. View Image and PDF Files
|
||||
|
||||
- Create a query named *getFiles* to retrieve base64 strings from testDB: Click on **+ Add** button in the query panel, select Tooljet as Database, `testDB` as Table name, and `List rows` as Operations.
|
||||
- Enable **Run this query on application load?** and click on the **Run** button to run the getFiles query.
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/fetch-files-query.png" alt="Fetch Files Query" />
|
||||
</div>
|
||||
|
||||
- Drag an **[Image](/docs/widgets/image)** and a **[PDF](/docs/widgets/pdf)** component on the canvas from the components library. Rename the **Image** component to *displayImage* and the **PDF** component to *displayPDF*.
|
||||
- In the **URL** property of the **displayImage** component, enter:
|
||||
```js
|
||||
{{'data:image;base64,' + queries.getFiles.data[0].image}}
|
||||
```
|
||||
|
||||
- Let's apply the same logic for the **displayPDF** component and enter the below value in the **File URL** property:
|
||||
|
||||
```js
|
||||
{{'data:pdf;base64,' + queries.getFiles.data[0].pdf}}
|
||||
```
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf-with-fileURL.png" alt="PDF Component With File URL" />
|
||||
</div>
|
||||
|
||||
<i>The provided code constructs a Data URL to display the base64-encoded data as an image or PDF.</i>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Here's what our final interface will look like:
|
||||
|
||||
<div style={{ width: '100%', marginBottom:'15px', marginTop:'15px'}}>
|
||||
<img className="screenshot-full" src="/img/how-to/load-base64/pdf-image-view.png" alt="Final Preview" />
|
||||
</div>
|
||||
|
||||
<i>
|
||||
You can also use transformations in the query response and concat `data:image/jpeg;base64,` to the base64 data.
|
||||
:::
|
||||
</i>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Using the above logic, you can upload and view files in ToolJet using the base64 data.
|
||||
277
docs/versioned_docs/version-2.25.0/how-to/use-events-on-chart.md
Normal file
277
docs/versioned_docs/version-2.25.0/how-to/use-events-on-chart.md
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
---
|
||||
id: use-events-on-chart
|
||||
title: 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.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img style={{ border:'0'}} className="screenshot-full" src="/img/how-to/events-chart/plotly-chart.png" alt="Plotly Chart" />
|
||||
</div>
|
||||
|
||||
## 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](/docs/widgets/custom-component/) doc.
|
||||
|
||||
## Step 2: Add the code to the Custom Component
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
const barOnClick = ({points}) => {
|
||||
alert('A bar is clicked')
|
||||
}
|
||||
```
|
||||
|
||||
Instead of displaying an alert message, you can use the `runQuery` function to run a query.
|
||||
|
||||
```js
|
||||
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](/docs/widgets/custom-component/).
|
||||
|
|
@ -120,6 +120,10 @@ You can refer to the [JSON Chart Schema](https://plotly.com/chart-studio-help/js
|
|||
|
||||
</div>
|
||||
|
||||
:::tip Using events on chart
|
||||
Currently, the chart component does not support events. However, you can use the Custom Component using Plotly and add events to it. Check out the [How to use events on chart](/docs/how-to/use-events-on-chart) to learn more.
|
||||
:::
|
||||
|
||||
### Bar Mode
|
||||
|
||||
The **Bar Mode** option allows you to customize the layout and display style specifically for bar charts. This option becomes available when the **Plotly JSON chart schema** toggle is enabled and a JSON schema specific to bar charts is provided. This option provide different modes for organizing and presenting bars within the chart.
|
||||
|
|
|
|||
|
|
@ -351,7 +351,8 @@
|
|||
"how-to/s3-custom-endpoints",
|
||||
"how-to/upload-files-aws",
|
||||
"how-to/upload-files-gcs",
|
||||
"how-to/loading-image-pdf-from-db"
|
||||
"how-to/loading-image-pdf-from-db",
|
||||
"how-to/use-events-on-chart"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -422,4 +423,4 @@
|
|||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -353,7 +353,8 @@
|
|||
"how-to/s3-custom-endpoints",
|
||||
"how-to/upload-files-aws",
|
||||
"how-to/upload-files-gcs",
|
||||
"how-to/loading-image-pdf-from-db"
|
||||
"how-to/loading-image-pdf-from-db",
|
||||
"how-to/use-events-on-chart"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -425,4 +426,4 @@
|
|||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -372,7 +372,8 @@
|
|||
"how-to/s3-custom-endpoints",
|
||||
"how-to/upload-files-aws",
|
||||
"how-to/upload-files-gcs",
|
||||
"how-to/loading-image-pdf-from-db"
|
||||
"how-to/loading-image-pdf-from-db",
|
||||
"how-to/use-events-on-chart"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue